From e75593443a9a3bcd982de9c153776b515ccc7efa Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 21 Aug 2020 13:43:42 -0700
Subject: [PATCH] Toggle formatting on click. Renamed charts folder to metrics.

---
 components/WebsiteDetails.js                  |  6 +--
 components/WebsiteList.js                     |  4 +-
 components/{charts => metrics}/ActiveUsers.js |  0
 .../ActiveUsers.module.css                    |  0
 components/{charts => metrics}/MetricCard.js  |  0
 .../{charts => metrics}/MetricCard.module.css |  0
 components/{charts => metrics}/MetricsBar.js  |  0
 .../{charts => metrics}/MetricsBar.module.css |  0
 .../{charts => metrics}/PageviewsChart.js     |  0
 .../PageviewsChart.module.css                 |  0
 .../{charts => metrics}/QuickButtons.js       |  0
 .../QuickButtons.module.css                   |  0
 .../{charts => metrics}/RankingsChart.js      | 42 ++++++++++---------
 .../RankingsChart.module.css                  |  3 +-
 .../{charts => metrics}/WebsiteChart.js       |  0
 .../WebsiteChart.module.css                   |  0
 .../{charts => metrics}/WebsiteHeader.js      |  4 +-
 .../WebsiteHeader.module.css                  |  0
 package.json                                  |  2 +-
 19 files changed, 33 insertions(+), 28 deletions(-)
 rename components/{charts => metrics}/ActiveUsers.js (100%)
 rename components/{charts => metrics}/ActiveUsers.module.css (100%)
 rename components/{charts => metrics}/MetricCard.js (100%)
 rename components/{charts => metrics}/MetricCard.module.css (100%)
 rename components/{charts => metrics}/MetricsBar.js (100%)
 rename components/{charts => metrics}/MetricsBar.module.css (100%)
 rename components/{charts => metrics}/PageviewsChart.js (100%)
 rename components/{charts => metrics}/PageviewsChart.module.css (100%)
 rename components/{charts => metrics}/QuickButtons.js (100%)
 rename components/{charts => metrics}/QuickButtons.module.css (100%)
 rename components/{charts => metrics}/RankingsChart.js (83%)
 rename components/{charts => metrics}/RankingsChart.module.css (98%)
 rename components/{charts => metrics}/WebsiteChart.js (100%)
 rename components/{charts => metrics}/WebsiteChart.module.css (100%)
 rename components/{charts => metrics}/WebsiteHeader.js (94%)
 rename components/{charts => metrics}/WebsiteHeader.module.css (100%)

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 7d6de00e..a3c41880 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import WebsiteChart from 'components/charts/WebsiteChart';
-import RankingsChart from 'components/charts/RankingsChart';
+import WebsiteChart from 'components/metrics/WebsiteChart';
+import RankingsChart from 'components/metrics/RankingsChart';
 import WorldMap from 'components/common/WorldMap';
 import Page from 'components/layout/Page';
-import WebsiteHeader from 'components/charts/WebsiteHeader';
+import WebsiteHeader from 'components/metrics/WebsiteHeader';
 import MenuLayout from 'components/layout/MenuLayout';
 import Button from 'components/common/Button';
 import { getDateRange } from 'lib/date';
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 218ac14d..3b0b7879 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import WebsiteHeader from 'components/charts/WebsiteHeader';
-import WebsiteChart from 'components/charts/WebsiteChart';
+import WebsiteHeader from 'components/metrics/WebsiteHeader';
+import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
 import Button from 'components/common/Button';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
diff --git a/components/charts/ActiveUsers.js b/components/metrics/ActiveUsers.js
similarity index 100%
rename from components/charts/ActiveUsers.js
rename to components/metrics/ActiveUsers.js
diff --git a/components/charts/ActiveUsers.module.css b/components/metrics/ActiveUsers.module.css
similarity index 100%
rename from components/charts/ActiveUsers.module.css
rename to components/metrics/ActiveUsers.module.css
diff --git a/components/charts/MetricCard.js b/components/metrics/MetricCard.js
similarity index 100%
rename from components/charts/MetricCard.js
rename to components/metrics/MetricCard.js
diff --git a/components/charts/MetricCard.module.css b/components/metrics/MetricCard.module.css
similarity index 100%
rename from components/charts/MetricCard.module.css
rename to components/metrics/MetricCard.module.css
diff --git a/components/charts/MetricsBar.js b/components/metrics/MetricsBar.js
similarity index 100%
rename from components/charts/MetricsBar.js
rename to components/metrics/MetricsBar.js
diff --git a/components/charts/MetricsBar.module.css b/components/metrics/MetricsBar.module.css
similarity index 100%
rename from components/charts/MetricsBar.module.css
rename to components/metrics/MetricsBar.module.css
diff --git a/components/charts/PageviewsChart.js b/components/metrics/PageviewsChart.js
similarity index 100%
rename from components/charts/PageviewsChart.js
rename to components/metrics/PageviewsChart.js
diff --git a/components/charts/PageviewsChart.module.css b/components/metrics/PageviewsChart.module.css
similarity index 100%
rename from components/charts/PageviewsChart.module.css
rename to components/metrics/PageviewsChart.module.css
diff --git a/components/charts/QuickButtons.js b/components/metrics/QuickButtons.js
similarity index 100%
rename from components/charts/QuickButtons.js
rename to components/metrics/QuickButtons.js
diff --git a/components/charts/QuickButtons.module.css b/components/metrics/QuickButtons.module.css
similarity index 100%
rename from components/charts/QuickButtons.module.css
rename to components/metrics/QuickButtons.module.css
diff --git a/components/charts/RankingsChart.js b/components/metrics/RankingsChart.js
similarity index 83%
rename from components/charts/RankingsChart.js
rename to components/metrics/RankingsChart.js
index be73be97..d113bed0 100644
--- a/components/charts/RankingsChart.js
+++ b/components/metrics/RankingsChart.js
@@ -25,6 +25,7 @@ export default function RankingsChart({
   const [data, setData] = useState();
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
+  const shouldAnimate = limit > 0;
 
   const rankings = useMemo(() => {
     if (data) {
@@ -54,13 +55,23 @@ export default function RankingsChart({
     setFormat(state => !state);
   }
 
+  function getRow(x, y, z) {
+    return (
+      <AnimatedRow
+        key={x}
+        label={x}
+        value={y}
+        percent={z}
+        animate={shouldAnimate}
+        format={formatFunc}
+        onClick={handleSetFormat}
+      />
+    );
+  }
+
   const Row = ({ index, style }) => {
     const { x, y, z } = rankings[index];
-    return (
-      <div style={style}>
-        <AnimatedRow key={x} label={x} value={y} percent={z} animate={limit} format={formatFunc} />
-      </div>
-    );
+    return <div style={style}>{getRow(x, y, z)}</div>;
   };
 
   useEffect(() => {
@@ -75,22 +86,15 @@ export default function RankingsChart({
 
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.header} onClick={handleSetFormat}>
+      <div className={styles.header}>
         <div className={styles.title}>{title}</div>
-        <div className={styles.heading}>{heading}</div>
+        <div className={styles.heading} onClick={handleSetFormat}>
+          {heading}
+        </div>
       </div>
       <div className={styles.body}>
         {limit ? (
-          rankings.map(({ x, y, z }) => (
-            <AnimatedRow
-              key={x}
-              label={x}
-              value={y}
-              percent={z}
-              animate={limit}
-              format={formatFunc}
-            />
-          ))
+          rankings.map(({ x, y, z }) => getRow(x, y, z))
         ) : (
           <FixedSizeList height={600} itemCount={rankings.length} itemSize={30}>
             {Row}
@@ -108,7 +112,7 @@ export default function RankingsChart({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, animate, format }) => {
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -117,7 +121,7 @@ const AnimatedRow = ({ label, value = 0, percent, animate, format }) => {
   });
 
   return (
-    <div className={styles.row}>
+    <div className={styles.row} onClick={onClick}>
       <div className={styles.label}>{label}</div>
       <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
       <div className={styles.percent}>
diff --git a/components/charts/RankingsChart.module.css b/components/metrics/RankingsChart.module.css
similarity index 98%
rename from components/charts/RankingsChart.module.css
rename to components/metrics/RankingsChart.module.css
index c72a1d4e..a5982254 100644
--- a/components/charts/RankingsChart.module.css
+++ b/components/metrics/RankingsChart.module.css
@@ -10,7 +10,6 @@
 .header {
   display: flex;
   line-height: 40px;
-  cursor: pointer;
 }
 
 .title {
@@ -23,6 +22,7 @@
   font-size: var(--font-size-small);
   text-align: center;
   width: 100px;
+  cursor: pointer;
 }
 
 .row {
@@ -56,6 +56,7 @@
   text-align: right;
   margin-right: 10px;
   font-weight: 600;
+  cursor: pointer;
 }
 
 .percent {
diff --git a/components/charts/WebsiteChart.js b/components/metrics/WebsiteChart.js
similarity index 100%
rename from components/charts/WebsiteChart.js
rename to components/metrics/WebsiteChart.js
diff --git a/components/charts/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css
similarity index 100%
rename from components/charts/WebsiteChart.module.css
rename to components/metrics/WebsiteChart.module.css
diff --git a/components/charts/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
similarity index 94%
rename from components/charts/WebsiteHeader.js
rename to components/metrics/WebsiteHeader.js
index 47166228..459fd69f 100644
--- a/components/charts/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -13,8 +13,8 @@ export default function WebsiteHeader({ websiteId, name, showLink = false }) {
   return (
     <PageHeader>
       {showLink ? (
-        <Link href="/website/[...id]" as={`/website/${websiteId}/${name}`}>
-          <a className={styles.title}>{name}</a>
+        <Link href="/website/[...id]" as={`/website/${websiteId}/${name}`} className={styles.title}>
+          {name}
         </Link>
       ) : (
         <div className={styles.title}>{name}</div>
diff --git a/components/charts/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
similarity index 100%
rename from components/charts/WebsiteHeader.module.css
rename to components/metrics/WebsiteHeader.module.css
diff --git a/package.json b/package.json
index d2dc3ed4..df9e7c7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",