Animated metric card.

components/Layout.js

@@ -10,7 +10,7 @@ export default function Layout({ title, children }) {
         <title>umami{title && ` - ${title}`}</title>
         <link rel="icon" href="/favicon.ico" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
           rel="stylesheet"
         />
       </Head>

components/MetricCard.js

@@ -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;

components/MetricCard.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 50px;
+  width: 140px;
 }
 
 .value {

components/PageviewsChart.js

@@ -26,7 +26,6 @@ export default function PageviewsChart({ data, unit }) {
 
   const renderTooltip = model => {
     const { caretX, caretY, opacity, title, body, labelColors } = model;
-    console.log(model);
 
     if (!opacity) {
       setTooltip({ opacity });

components/WebsiteSummary.js

@@ -24,7 +24,11 @@ export default function WebsiteSummary({ websiteId, startDate, endDate }) {
     <div className={styles.container}>
       <MetricCard label="Views" value={pageviews} />
       <MetricCard label="Visitors" value={uniques} />
-      <MetricCard label="Bounce rate" value={`${~~((bounces / uniques) * 100)}%`} />
+      <MetricCard
+        label="Bounce rate"
+        value={uniques ? (bounces / uniques) * 100 : 0}
+        format={n => Number(n).toFixed(0) + '%'}
+      />
     </div>
   );
 }