umami/components/metrics/MetricCard.js

39 lines
1.1 KiB
JavaScript
Raw Normal View History

2023-03-10 05:42:55 +01:00
import classNames from 'classnames';
2020-07-30 05:09:41 +02:00
import { useSpring, animated } from 'react-spring';
import { formatNumber } from 'lib/format';
import styles from './MetricCard.module.css';
const MetricCard = ({
value = 0,
change = 0,
label,
reverseColors = false,
format = formatNumber,
hideComparison = false,
}) => {
2020-09-01 06:11:53 +02:00
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
2020-07-30 05:09:41 +02:00
return (
<div className={styles.card}>
2023-03-10 00:18:54 +01:00
<animated.div className={styles.value}>{props.x.to(x => format(x))}</animated.div>
<div className={styles.label}>
{label}
{~~change !== 0 && !hideComparison && (
<animated.span
2023-03-10 05:42:55 +01:00
className={classNames(styles.change, {
[styles.positive]: change * (reverseColors ? -1 : 1) >= 0,
[styles.negative]: change * (reverseColors ? -1 : 1) < 0,
[styles.plusSign]: change > 0,
})}
>
2023-03-10 00:18:54 +01:00
{changeProps.x.to(x => format(x))}
</animated.span>
)}
</div>
2020-07-30 05:09:41 +02:00
</div>
);
};
export default MetricCard;