1
0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-24 18:26:20 +01:00
umami/components/metrics/MetricCard.js

18 lines
556 B
JavaScript
Raw Normal View History

2020-07-30 10:08:21 +02:00
import React from 'react';
2020-07-30 05:09:41 +02:00
import { useSpring, animated } from 'react-spring';
2020-08-19 23:35:38 +02:00
import { formatNumber } from '../../lib/format';
import styles from './MetricCard.module.css';
2020-08-19 23:35:38 +02:00
const MetricCard = ({ value = 0, label, format = formatNumber }) => {
2020-09-01 06:11:53 +02:00
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
2020-07-30 05:09:41 +02:00
return (
<div className={styles.card}>
<animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
<div className={styles.label}>{label}</div>
</div>
);
};
export default MetricCard;