Update tooltip date formats.

components/metrics/BarChart.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { StatusLight } from 'react-basics';
 import classNames from 'classnames';
 import Chart from 'chart.js/auto';
@@ -15,14 +15,14 @@ export default function BarChart({
   datasets,
   unit,
   animationDuration = DEFAULT_ANIMATION_DURATION,
-  className,
   stacked = false,
   loading = false,
   onCreate = () => {},
   onUpdate = () => {},
+  className,
 }) {
   const canvas = useRef();
-  const chart = useRef();
+  const chart = useRef(null);
   const [tooltip, setTooltip] = useState(null);
   const { locale } = useLocale();
   const [theme] = useTheme();
@@ -39,34 +39,45 @@ export default function BarChart({
     return +label > 1000 ? formatLongNumber(label) : label;
   };
 
-  const renderTooltip = model => {
-    const { opacity, labelColors, dataPoints } = model.tooltip;
+  const renderTooltip = useCallback(
+    model => {
+      const { opacity, labelColors, dataPoints } = model.tooltip;
 
-    if (!dataPoints?.length || !opacity) {
-      setTooltip(null);
-      return;
-    }
+      if (!dataPoints?.length || !opacity) {
+        setTooltip(null);
+        return;
+      }
 
-    const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
+      const formats = {
+        millisecond: 'T',
+        second: 'pp',
+        minute: 'p',
+        hour: 'h aaa',
+        day: 'PPPP',
+        week: 'PPPP',
+        month: 'LLLL yyyy',
+        quarter: 'qqq',
+        year: 'yyyy',
+      };
 
-    setTooltip(
-      <>
-        <div>{dateFormat(new Date(dataPoints[0].raw.x), format, locale)}</div>
-        <div>
-          <StatusLight color={labelColors?.[0]?.backgroundColor}>
-            <b>
-              {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
-            </b>
-          </StatusLight>
-        </div>
-      </>,
-    );
-  };
+      setTooltip(
+        <div className={styles.tooltip}>
+          <div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
+          <div>
+            <StatusLight color={labelColors?.[0]?.backgroundColor}>
+              <div className={styles.value}>
+                {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
+              </div>
+            </StatusLight>
+          </div>
+        </div>,
+      );
+    },
+    [unit],
+  );
 
-  const createChart = () => {
-    Chart.defaults.font.family = 'Inter';
-
-    const options = {
+  const getOptions = useCallback(() => {
+    return {
       responsive: true,
       maintainAspectRatio: false,
       animation: {
@@ -124,6 +135,12 @@ export default function BarChart({
         },
       },
     };
+  }, [animationDuration, renderTooltip, stacked, colors]);
+
+  const createChart = () => {
+    Chart.defaults.font.family = 'Inter';
+
+    const options = getOptions();
 
     onCreate(options);
 
@@ -137,15 +154,9 @@ export default function BarChart({
   };
 
   const updateChart = () => {
-    const { animation, scales } = chart.current.options;
+    setTooltip(null);
 
-    animation.duration = animationDuration;
-    scales.x.ticks.color = colors.text;
-    scales.x.time.unit = unit;
-    scales.x.border.color = colors.line;
-    scales.y.ticks.color = colors.text;
-    scales.y.grid.color = colors.line;
-    scales.y.border.color = colors.line;
+    chart.current.options = getOptions();
 
     onUpdate(chart.current);
 
@@ -157,7 +168,6 @@ export default function BarChart({
       if (!chart.current) {
         createChart();
       } else {
-        setTooltip(null);
         updateChart();
       }
     }

components/metrics/BarChart.module.css

@@ -4,6 +4,16 @@
   overflow: hidden;
 }
 
+.tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tooltip .value {
+  text-transform: lowercase;
+}
+
 @media only screen and (max-width: 992px) {
   .chart {
     /*height: 200px;*/

components/metrics/EventsChart.js

@@ -33,12 +33,12 @@ export default function EventsChart({ websiteId, className, token }) {
     if (!data) return [];
     if (isLoading) return data;
 
-    const map = data.reduce((obj, { x, t, y }) => {
+    const map = data.reduce((obj, { x, y }) => {
       if (!obj[x]) {
         obj[x] = [];
       }
 
-      obj[x].push({ t, y });
+      obj[x].push({ x, y });
 
       return obj;
     }, {});

components/metrics/PageviewsChart.js

@@ -58,14 +58,12 @@ export default function PageviewsChart({
     {
       label: formatMessage(labels.uniqueVisitors),
       data: data.sessions,
-      lineTension: 0,
       borderWidth: 1,
       ...colors.visitors,
     },
     {
       label: formatMessage(labels.pageViews),
       data: data.pageviews,
-      lineTension: 0,
       borderWidth: 1,
       ...colors.views,
     },

components/pages/realtime/RealtimeLog.js

@@ -5,7 +5,7 @@ import { FixedSizeList } from 'react-window';
 import firstBy from 'thenby';
 import FilterButtons from 'components/common/FilterButtons';
 import NoData from 'components/common/NoData';
-import { getDeviceMessage, labels, messages } from 'components/messages';
+import { labels, messages } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -102,7 +102,7 @@ export default function RealtimeLog({ data, websiteDomain }) {
             country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
             browser: <b>{BROWSERS[browser]}</b>,
             os: <b>{os}</b>,
-            device: <b>{formatMessage(getDeviceMessage(device))}</b>,
+            device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
           }}
         />
       );