Refactor chart components.

components/common/Dot.js

@@ -4,12 +4,14 @@ import styles from './Dot.module.css';
 
 export default function Dot({ color, size, className }) {
   return (
-    <div
-      style={{ background: color }}
-      className={classNames(styles.dot, className, {
-        [styles.small]: size === 'small',
-        [styles.large]: size === 'large',
-      })}
-    />
+    <div className={styles.wrapper}>
+      <div
+        style={{ background: color }}
+        className={classNames(styles.dot, className, {
+          [styles.small]: size === 'small',
+          [styles.large]: size === 'large',
+        })}
+      />
+    </div>
   );
 }

components/common/Dot.module.css

@@ -1,9 +1,14 @@
+.wrapper {
+  background: var(--gray50);
+  margin-right: 10px;
+  border-radius: 100%;
+}
+
 .dot {
   background: var(--green400);
   width: 10px;
   height: 10px;
   border-radius: 100%;
-  margin-right: 10px;
 }
 
 .dot.small {

components/metrics/BarChart.js

@@ -1,14 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
-import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
-import Dot from 'components/common/Dot';
+import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
+import ChartTooltip from './ChartTooltip';
 
 export default function BarChart({
   chartId,
@@ -25,7 +25,6 @@ export default function BarChart({
 }) {
   const canvas = useRef();
   const chart = useRef();
-  const [legend, setLegend] = useState();
   const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
   const [theme] = useTheme();
@@ -143,7 +142,6 @@ export default function BarChart({
               callback: renderYLabel,
               beginAtZero: true,
               fontColor: colors.text,
-              precision: 0,
             },
             gridLines: {
               color: colors.line,
@@ -164,8 +162,6 @@ export default function BarChart({
       },
       options,
     });
-
-    chart.current.generateLegend();
   }
 
   function updateChart() {
@@ -184,8 +180,6 @@ export default function BarChart({
     onUpdate(chart.current);
 
     chart.current.update();
-
-    chart.current.generateLegend();
   }
 
   useEffect(() => {
@@ -196,7 +190,6 @@ export default function BarChart({
         setTooltip(null);
         updateChart();
       }
-      setLegend({ ...chart.current.legend });
     }
   }, [datasets, unit, animationDuration, locale, theme]);
 
@@ -210,35 +203,8 @@ export default function BarChart({
       >
         <canvas ref={canvas} />
       </div>
-      <Legend items={legend?.legendItems} locale={locale} />
-      <ReactTooltip id={`${chartId}-tooltip`}>
-        {tooltip ? <Tooltip {...tooltip} /> : null}
-      </ReactTooltip>
+      <Legend chart={chart.current} />
+      <ChartTooltip chartId={chartId} tooltip={tooltip} />
     </>
   );
 }
-
-const Legend = ({ items = [], locale }) => (
-  <div className={styles.legend}>
-    {items.map(({ text, fillStyle }) => (
-      <div key={text} className={styles.label}>
-        <Dot color={fillStyle} />
-        <span className={locale}>{text}</span>
-      </div>
-    ))}
-  </div>
-);
-
-const Tooltip = ({ title, value, label, labelColor }) => (
-  <div className={styles.tooltip}>
-    <div className={styles.content}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.metric}>
-        <div className={styles.dot}>
-          <div className={styles.color} style={{ backgroundColor: labelColor }} />
-        </div>
-        {value} {label}
-      </div>
-    </div>
-  </div>
-);

components/metrics/BarChart.module.css

@@ -1,60 +1,3 @@
 .chart {
   position: relative;
 }
-
-.tooltip {
-  color: var(--msgColor);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-size: var(--font-size-xsmall);
-  font-weight: 600;
-}
-
-.metric {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-small);
-  font-weight: 600;
-}
-
-.dot {
-  position: relative;
-  overflow: hidden;
-  border-radius: 100%;
-  margin-right: 8px;
-  background: var(--gray50);
-}
-
-.color {
-  width: 10px;
-  height: 10px;
-}
-
-.legend {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 10px;
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-size-xsmall);
-}
-
-.label + .label {
-  margin-left: 20px;
-}

components/metrics/ChartTooltip.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Dot from 'components/common/Dot';
+import styles from './ChartTooltip.module.css';
+import ReactTooltip from 'react-tooltip';
+
+export default function ChartTooltip({ chartId, tooltip }) {
+  if (!tooltip) {
+    return null;
+  }
+
+  const { title, value, label, labelColor } = tooltip;
+
+  return (
+    <ReactTooltip id={`${chartId}-tooltip`}>
+      <div className={styles.tooltip}>
+        <div className={styles.content}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.metric}>
+            <Dot color={labelColor} />
+            {value} {label}
+          </div>
+        </div>
+      </div>
+    </ReactTooltip>
+  );
+}

components/metrics/ChartTooltip.module.css

@@ -0,0 +1,43 @@
+.chart {
+  position: relative;
+}
+
+.tooltip {
+  color: var(--msgColor);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--font-size-xsmall);
+  font-weight: 600;
+}
+
+.metric {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.dot {
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-right: 8px;
+  background: var(--gray50);
+}
+
+.color {
+  width: 10px;
+  height: 10px;
+}

components/metrics/EventsChart.js

@@ -16,7 +16,7 @@ export default function EventsChart({ websiteId, className, token }) {
   const { query } = usePageQuery();
   const shareToken = useShareToken();
 
-  const { data } = useFetch(
+  const { data, loading } = useFetch(
     `/api/website/${websiteId}/events`,
     {
       params: {
@@ -31,8 +31,10 @@ export default function EventsChart({ websiteId, className, token }) {
     },
     [modified],
   );
+
   const datasets = useMemo(() => {
     if (!data) return [];
+    if (loading) return data;
 
     const map = data.reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
@@ -59,7 +61,7 @@ export default function EventsChart({ websiteId, className, token }) {
         borderWidth: 1,
       };
     });
-  }, [data]);
+  }, [data, loading]);
 
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
@@ -79,6 +81,7 @@ export default function EventsChart({ websiteId, className, token }) {
       unit={unit}
       records={getDateLength(startDate, endDate, unit)}
       onUpdate={handleUpdate}
+      loading={loading}
       stacked
     />
   );

components/metrics/Legend.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import Dot from 'components/common/Dot';
+import useLocale from 'hooks/useLocale';
+import styles from './Legend.module.css';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function Legend({ chart }) {
+  const [locale] = useLocale();
+  const forceUpdate = useForceUpdate();
+
+  function handleClick(index) {
+    const meta = chart.getDatasetMeta(index);
+
+    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+
+    chart.update();
+
+    forceUpdate();
+  }
+
+  if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.legend}>
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => (
+        <div
+          key={text}
+          className={classNames(styles.label, { [styles.hidden]: hidden })}
+          onClick={() => handleClick(datasetIndex)}
+        >
+          <Dot color={fillStyle} />
+          <span className={locale}>{text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

components/metrics/Legend.module.css

@@ -0,0 +1,21 @@
+.legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xsmall);
+  cursor: pointer;
+}
+
+.label + .label {
+  margin-left: 20px;
+}
+
+.hidden {
+  color: var(--gray400);
+}

components/metrics/MetricsBar.js

@@ -31,7 +31,7 @@ export default function MetricsBar({ websiteId, className }) {
       },
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [url, modified],
   );
 
   const formatFunc = format ? formatLongNumber : formatNumber;

components/metrics/WebsiteChart.js

@@ -47,7 +47,7 @@ export default function WebsiteChart({
       onDataLoad,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [url, modified],
   );
 
   const chartData = useMemo(() => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.96.0",
+  "version": "1.0.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",