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,12 +57,7 @@ export default function BarChart({
   };
 
   const createChart = () => {
-    chart.current = new ChartJS(canvas.current, {
+    const options = {
-      type: 'bar',
-      data: {
-        datasets,
-      },
-      options: {
       animation: {
         duration: animationDuration,
       },
@@ -103,7 +99,16 @@ export default function BarChart({
           },
         ],
       },
+    };
+
+    onCreate(options);
+
+    chart.current = new ChartJS(canvas.current, {
+      type: 'bar',
+      data: {
+        datasets,
       },
+      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 {
+    chart.data.datasets = datasets;
-      data: { datasets },
-      options,
-    } = chart;
-
-    datasets[0].data = data.uniques;
-    datasets[1].data = data.pageviews;
 
     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) => ({
+        datasets={datasets}
-          label: key,
-          data: data[key],
-          lineTension: 0,
-          backgroundColor: COLORS[index],
-          borderColor: COLORS[index],
-          borderWidth: 1,
-        }))}
         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;
+}