status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve code and fix Gauge Colorize in bad utilization

This commit is contained in:
Hristo Nedelkov 2023-09-27 22:55:28 +03:00
parent 53eb095d40
commit 946ffd5e9e
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Charts/DeviceStorageHealth.tsx
View File

@ -3,14 +3,19 @@ import { Separator, XStack, YStack } from 'tamagui'
import StandardGauge from './StandardGauge' import StandardGauge from './StandardGauge'
import { Shadow, Text } from '@status-im/components' import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
interface DeviceStorageHealthProps { interface DeviceStorageHealthProps {
storage: number storage: number
maxStorage: number maxStorage: number
} }
const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxStorage }) => { const GOOD_COLOR = '#8DC6BC';
const message = storage < maxStorage ? 'Good' : 'Poor' const POOR_COLOR = '#E95460';
const free = maxStorage - storage
const utilization = (storage / (maxStorage || 1)) * 100 const DeviceStorageHealth = ({ storage, maxStorage }: DeviceStorageHealthProps) => {
const message = storage < maxStorage ? 'Good' : 'Poor';
const free = maxStorage - storage;
const utilization = (storage / (maxStorage || 1)) * 100;
const data = (free: number) => { const data = (free: number) => {
return [ return [
@ -18,7 +23,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
id: 'storage', id: 'storage',
label: 'Used', label: 'Used',
value: storage, value: storage,
color: '#E95460', color: message === 'Good' ? GOOD_COLOR : POOR_COLOR,
}, },
{ {
id: 'storage', id: 'storage',
@ -26,9 +31,8 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
value: free, value: free,
color: '#E7EAEE', color: '#E7EAEE',
}, },
] ];
} }
return ( return (
<Shadow <Shadow
variant="$2" variant="$2"