blob: d15bcf1351af65e4b6e6a87280aa3d1b5d422872 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import { useSpring } from '@react-spring/web';
import { Column, Text } from '@umami/react-zen';
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { formatNumber } from '@/lib/format';
export interface MetricCardProps {
value: number;
previousValue?: number;
change?: number;
label?: string;
reverseColors?: boolean;
formatValue?: (n: any) => string;
showLabel?: boolean;
showChange?: boolean;
}
export const MetricCard = ({
value = 0,
change = 0,
label,
reverseColors = false,
formatValue = formatNumber,
showLabel = true,
showChange = false,
}: MetricCardProps) => {
const diff = value - change;
const pct = ((value - diff) / diff) * 100;
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
return (
<Column
justifyContent="center"
paddingX="6"
paddingY="4"
borderRadius="3"
backgroundColor
border
>
{showLabel && (
<Text weight="bold" wrap="nowrap">
{label}
</Text>
)}
<Text size="8" weight="bold" wrap="nowrap">
<AnimatedDiv title={value?.toString()}>{props?.x?.to(x => formatValue(x))}</AnimatedDiv>
</Text>
{showChange && (
<ChangeLabel value={change} title={formatValue(change)} reverseColors={reverseColors}>
<AnimatedDiv>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</AnimatedDiv>
</ChangeLabel>
)}
</Column>
);
};
|