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