Moved render functions into lib/charts.

components/metrics/PageviewsChart.js

@@ -1,74 +1,13 @@
-import { useCallback, useMemo } from 'react';
-import { StatusLight } from 'react-basics';
+import { useMemo } from 'react';
 import BarChart from './BarChart';
-import useTheme from 'hooks/useTheme';
-import useMessages from 'hooks/useMessages';
-import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
-import { formatLongNumber } from 'lib/format';
+import { useLocale, useTheme, useMessages } from 'hooks';
+import { renderDateLabels, renderStatusTooltip } from 'lib/charts';
 
 export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { colors } = useTheme();
   const { locale } = useLocale();
 
-  const renderXLabel = useCallback(
-    (label, index, values) => {
-      const d = new Date(values[index].value);
-
-      switch (unit) {
-        case 'minute':
-          return dateFormat(d, 'h:mm', locale);
-        case 'hour':
-          return dateFormat(d, 'p', locale);
-        case 'day':
-          return dateFormat(d, 'MMM d', locale);
-        case 'month':
-          return dateFormat(d, 'MMM', locale);
-        case 'year':
-          return dateFormat(d, 'YYY', locale);
-        default:
-          return label;
-      }
-    },
-    [locale, unit],
-  );
-
-  const renderTooltip = useCallback(
-    (setTooltip, model) => {
-      const { opacity, labelColors, dataPoints } = model.tooltip;
-
-      if (!dataPoints?.length || !opacity) {
-        setTooltip(null);
-        return;
-      }
-
-      const formats = {
-        millisecond: 'T',
-        second: 'pp',
-        minute: 'p',
-        hour: 'h:mm aaa - PP',
-        day: 'PPPP',
-        week: 'PPPP',
-        month: 'LLLL yyyy',
-        quarter: 'qqq',
-        year: 'yyyy',
-      };
-
-      setTooltip(
-        <>
-          <div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
-          <div>
-            <StatusLight color={labelColors?.[0]?.backgroundColor}>
-              {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
-            </StatusLight>
-          </div>
-        </>,
-      );
-    },
-    [unit],
-  );
-
   const datasets = useMemo(() => {
     if (!data) return [];
 
@@ -96,8 +35,8 @@ export function PageviewsChart({ websiteId, data, unit, className, loading, ...p
       datasets={datasets}
       unit={unit}
       loading={loading}
-      renderXLabel={renderXLabel}
-      renderTooltip={renderTooltip}
+      renderXLabel={renderDateLabels(unit, locale)}
+      renderTooltip={renderStatusTooltip(unit, locale)}
     />
   );
 }