Updated tracker and collect.

components/metrics/BarChart.js

@@ -52,7 +52,7 @@ export default function BarChart({
         millisecond: 'T',
         second: 'pp',
         minute: 'p',
-        hour: 'h aaa',
+        hour: 'h:mm aaa - PP',
         day: 'PPPP',
         week: 'PPPP',
         month: 'LLLL yyyy',
@@ -135,15 +135,13 @@ export default function BarChart({
         },
       },
     };
-  }, [animationDuration, renderTooltip, stacked, colors]);
+  }, [animationDuration, renderTooltip, stacked, colors, unit]);
 
   const createChart = () => {
     Chart.defaults.font.family = 'Inter';
 
     const options = getOptions();
 
-    onCreate(options);
-
     chart.current = new Chart(canvas.current, {
       type: 'bar',
       data: {
@@ -151,6 +149,8 @@ export default function BarChart({
       },
       options,
     });
+
+    onCreate(chart.current);
   };
 
   const updateChart = () => {
@@ -158,9 +158,11 @@ export default function BarChart({
 
     chart.current.options = getOptions();
 
-    onUpdate(chart.current);
+    chart.current.data.datasets = datasets;
 
     chart.current.update();
+
+    onUpdate(chart.current);
   };
 
   useEffect(() => {

components/metrics/EventsChart.js

@@ -17,7 +17,7 @@ export default function EventsChart({ websiteId, className, token }) {
     query: { url, eventName },
   } = usePageQuery();
 
-  const { data, isLoading } = useQuery(['events', { websiteId, modified, eventName }], () =>
+  const { data, isLoading } = useQuery(['events', websiteId, modified, eventName], () =>
     get(`/websites/${websiteId}/events`, {
       startAt: +startDate,
       endAt: +endDate,
@@ -33,12 +33,12 @@ export default function EventsChart({ websiteId, className, token }) {
     if (!data) return [];
     if (isLoading) return data;
 
-    const map = data.reduce((obj, { x, y }) => {
+    const map = data.reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
         obj[x] = [];
       }
 
-      obj[x].push({ x, y });
+      obj[x].push({ x: t, y });
 
       return obj;
     }, {});
@@ -58,22 +58,12 @@ export default function EventsChart({ websiteId, className, token }) {
         borderWidth: 1,
       };
     });
-  }, [data, isLoading]);
-
-  function handleUpdate(chart) {
-    chart.data.datasets = datasets;
-
-    chart.update();
-  }
+  }, [data, isLoading, startDate, endDate, unit]);
 
   if (isLoading) {
     return <Loading icon="dots" />;
   }
 
-  if (!data) {
-    return null;
-  }
-
   return (
     <BarChart
       className={className}
@@ -81,7 +71,6 @@ export default function EventsChart({ websiteId, className, token }) {
       unit={unit}
       height={300}
       records={getDateLength(startDate, endDate, unit)}
-      onUpdate={handleUpdate}
       loading={isLoading}
       stacked
     />

components/metrics/PageviewsChart.js

@@ -38,35 +38,24 @@ export default function PageviewsChart({
     };
   }, [theme]);
 
-  const handleUpdate = chart => {
-    const {
-      data: { datasets },
-    } = chart;
+  const datasets = useMemo(() => {
+    if (!data) return [];
 
-    datasets[0].data = data.sessions;
-    datasets[0].label = formatMessage(labels.uniqueVisitors);
-    datasets[1].data = data.pageviews;
-    datasets[1].label = formatMessage(labels.pageViews);
-  };
-
-  if (!data) {
-    return null;
-  }
-
-  const datasets = [
-    {
-      label: formatMessage(labels.uniqueVisitors),
-      data: data.sessions,
-      borderWidth: 1,
-      ...colors.visitors,
-    },
-    {
-      label: formatMessage(labels.pageViews),
-      data: data.pageviews,
-      borderWidth: 1,
-      ...colors.views,
-    },
-  ];
+    return [
+      {
+        label: formatMessage(labels.uniqueVisitors),
+        data: data.sessions,
+        borderWidth: 1,
+        ...colors.visitors,
+      },
+      {
+        label: formatMessage(labels.pageViews),
+        data: data.pageviews,
+        borderWidth: 1,
+        ...colors.views,
+      },
+    ];
+  }, [data]);
 
   return (
     <div ref={ref}>
@@ -78,7 +67,6 @@ export default function PageviewsChart({
         unit={unit}
         records={records}
         animationDuration={visible ? animationDuration : 0}
-        onUpdate={handleUpdate}
         loading={loading}
       />
     </div>