watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 07:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Animated metric card.

Browse source
This commit is contained in:
Mike Cao 2020-07-29 20:09:41 -07:00
parent f9a6f5f637
commit da2d383b71
8 changed files with 41 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/MetricCard.js
View file

@ -1,11 +1,20 @@
import React from 'react';
import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';
import styles from './MetricCard.module.css';
const MetricCard = ({ value, label }) => (
<div className={styles.card}>
<div className={styles.value}>{value}</div>
<div className={styles.label}>{label}</div>
</div>
);
function defaultFormat(n) {
return Number(n).toFixed(0);
}
const MetricCard = ({ value = 0, label, format = defaultFormat }) => {
const props = useSpring({ x: value, from: { x: 0 } });
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;