Refactor BarChart component.

components/metrics/BarChart.js

@@ -13,6 +13,7 @@ export default function BarChart({
   animationDuration = 300,
   className,
   stacked = false,
+  onCreate = () => {},
   onUpdate = () => {},
 }) {
   const canvas = useRef();
@@ -56,54 +57,58 @@ export default function BarChart({
   };
 
   const createChart = () => {
+    const options = {
+      animation: {
+        duration: animationDuration,
+      },
+      tooltips: {
+        enabled: false,
+        custom: renderTooltip,
+      },
+      hover: {
+        animationDuration: 0,
+      },
+      responsiveAnimationDuration: 0,
+      scales: {
+        xAxes: [
+          {
+            type: 'time',
+            distribution: 'series',
+            time: {
+              unit,
+              tooltipFormat: 'ddd MMMM DD YYYY',
+            },
+            ticks: {
+              callback: renderLabel,
+              minRotation: 0,
+              maxRotation: 0,
+            },
+            gridLines: {
+              display: false,
+            },
+            offset: true,
+            stacked: true,
+          },
+        ],
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: true,
+            },
+            stacked,
+          },
+        ],
+      },
+    };
+
+    onCreate(options);
+
     chart.current = new ChartJS(canvas.current, {
       type: 'bar',
       data: {
         datasets,
       },
-      options: {
-        animation: {
-          duration: animationDuration,
-        },
-        tooltips: {
-          enabled: false,
-          custom: renderTooltip,
-        },
-        hover: {
-          animationDuration: 0,
-        },
-        responsiveAnimationDuration: 0,
-        scales: {
-          xAxes: [
-            {
-              type: 'time',
-              distribution: 'series',
-              time: {
-                unit,
-                tooltipFormat: 'ddd MMMM DD YYYY',
-              },
-              ticks: {
-                callback: renderLabel,
-                minRotation: 0,
-                maxRotation: 0,
-              },
-              gridLines: {
-                display: false,
-              },
-              offset: true,
-              stacked: true,
-            },
-          ],
-          yAxes: [
-            {
-              ticks: {
-                beginAtZero: true,
-              },
-              stacked,
-            },
-          ],
-        },
-      },
+      options,
     });
   };
 

components/metrics/EventsChart.js

@@ -1,21 +1,34 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import BarChart from './BarChart';
 import { get } from 'lib/web';
-import { getTimezone, getDateArray } from 'lib/date';
+import { getTimezone, getDateArray, getDateLength } from 'lib/date';
 import styles from './PageviewsChart.module.css';
 
 const COLORS = [
   'rgba(38, 128, 235, 0.5)',
-  'rgba(227, 72, 80, 0.5)',
+  'rgba(146, 86, 217, 0.5)',
   'rgba(45, 157, 120, 0.5)',
+  'rgba(216, 55, 144, 0.5)',
+  'rgba(227, 72, 80, 0.5)',
   'rgba(103, 103, 236, 0.5)',
   'rgba(68, 181, 86, 0.5)',
-  'rgba(146, 86, 217, 0.5)',
 ];
 
 export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
   const [data, setData] = useState();
+  const datasets = useMemo(() => {
+    if (!data) return [];
+
+    return Object.keys(data).map((key, index) => ({
+      label: key,
+      data: data[key],
+      lineTension: 0,
+      backgroundColor: COLORS[index],
+      borderColor: COLORS[index],
+      borderWidth: 1,
+    }));
+  }, [data]);
 
   async function loadData() {
     const data = await get(`/api/website/${websiteId}/events`, {
@@ -43,13 +56,7 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
   }
 
   function handleUpdate(chart) {
-    const {
-      data: { datasets },
-      options,
-    } = chart;
-
-    datasets[0].data = data.uniques;
-    datasets[1].data = data.pageviews;
+    chart.data.datasets = datasets;
 
     chart.update();
   }
@@ -66,16 +73,9 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
     <div className={classNames(styles.chart, className)}>
       <BarChart
         chartId={websiteId}
-        datasets={Object.keys(data).map((key, index) => ({
-          label: key,
-          data: data[key],
-          lineTension: 0,
-          backgroundColor: COLORS[index],
-          borderColor: COLORS[index],
-          borderWidth: 1,
-        }))}
+        datasets={datasets}
         unit={unit}
-        records={7}
+        records={getDateLength(startDate, endDate, unit)}
         onUpdate={handleUpdate}
         stacked
       />

lib/date.js

@@ -113,3 +113,8 @@ export function getDateArray(data, startDate, endDate, unit) {
 
   return arr;
 }
+
+export function getDateLength(startDate, endDate, unit) {
+  const [diff] = dateFuncs[unit];
+  return diff(endDate, startDate) + 1;
+}