Commit 059e913e authored by tom's avatar tom

GasUsedToTargetRatio props rewrite

parent ad71c2b3
import { Stat, StatArrow, Text, chakra } from '@chakra-ui/react'; import { Stat, StatArrow, Text, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
interface Props { type Props = ({
used?: number; value: number;
target?: number; } | {
value?: number; used: number;
target: number;
}) & {
className?: string; className?: string;
} }
const GasUsedToTargetRatio = ({ used, target, value, className }: Props) => { const GasUsedToTargetRatio = (props: Props) => {
const percentage = value || ((used || 0) / (target || 0) - 1) * 100; const percentage = (() => {
if ('value' in props) {
return props.value;
}
return (props.used / props.target - 1) * 100;
})();
return ( return (
<Stat className={ className }> <Stat className={ props.className }>
<StatArrow type={ percentage >= 0 ? 'increase' : 'decrease' }/> <StatArrow type={ percentage >= 0 ? 'increase' : 'decrease' }/>
<Text as="span" color={ percentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }> <Text as="span" color={ percentage >= 0 ? 'green.500' : 'red.500' } fontWeight={ 600 }>
{ Math.abs(percentage).toLocaleString('en', { maximumFractionDigits: 2 }) } % { Math.abs(percentage).toLocaleString('en', { maximumFractionDigits: 2 }) } %
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment