62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import classNames from 'classnames';
|
|
import { useSpring } from '@react-spring/web';
|
|
import { formatNumber } from '@/lib/format';
|
|
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
|
|
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
|
|
import styles from './MetricCard.module.css';
|
|
|
|
export interface MetricCardProps {
|
|
value: number;
|
|
previousValue?: number;
|
|
change?: number;
|
|
label?: string;
|
|
reverseColors?: boolean;
|
|
formatValue?: (n: any) => string;
|
|
showLabel?: boolean;
|
|
showChange?: boolean;
|
|
showPrevious?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const MetricCard = ({
|
|
value = 0,
|
|
change = 0,
|
|
label,
|
|
reverseColors = false,
|
|
formatValue = formatNumber,
|
|
showLabel = true,
|
|
showChange = false,
|
|
showPrevious = false,
|
|
className,
|
|
}: 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 } });
|
|
const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
|
|
|
|
return (
|
|
<div className={classNames(styles.card, className, showPrevious && styles.compare)}>
|
|
{showLabel && <div className={styles.label}>{label}</div>}
|
|
<AnimatedDiv className={styles.value} title={value?.toString()}>
|
|
{props?.x?.to(x => formatValue(x))}
|
|
</AnimatedDiv>
|
|
{showChange && (
|
|
<ChangeLabel
|
|
className={styles.change}
|
|
value={change}
|
|
title={formatValue(change)}
|
|
reverseColors={reverseColors}
|
|
>
|
|
<AnimatedDiv>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</AnimatedDiv>
|
|
</ChangeLabel>
|
|
)}
|
|
{showPrevious && (
|
|
<AnimatedDiv className={classNames(styles.value, styles.prev)} title={diff.toString()}>
|
|
{prevProps?.x?.to(x => formatValue(x))}
|
|
</AnimatedDiv>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|