Add dashboard previous-period comparison metrics

components/metrics/MetricCard.js

@@ -3,13 +3,38 @@ import { useSpring, animated } from 'react-spring';
 import { formatNumber } from '../../lib/format';
 import styles from './MetricCard.module.css';
 
-const MetricCard = ({ value = 0, label, format = formatNumber }) => {
+const MetricCard = ({
+  value = 0,
+  change = 0,
+  label,
+  reverseColors = false,
+  format = formatNumber,
+}) => {
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
+  const changeProps = useSpring({ x: Number(change) || 0, 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 className={styles.label}>
+        {label}
+        {~~change === 0 && <span className={styles.change}>{format(0)}</span>}
+        {~~change !== 0 && (
+          <animated.span
+            className={`${styles.change} ${
+              change >= 0
+                ? !reverseColors
+                  ? styles.positive
+                  : styles.negative
+                : !reverseColors
+                ? styles.negative
+                : styles.positive
+            }`}
+          >
+            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+          </animated.span>
+        )}
+      </div>
     </div>
   );
 };