Refactored funnel report. Made BarChart more generic.

components/metrics/PageviewsChart.js

@@ -1,33 +1,73 @@
-import { useMemo } from 'react';
-import { colord } from 'colord';
+import { useCallback, useMemo } from 'react';
+import { StatusLight } from 'react-basics';
 import BarChart from './BarChart';
-import { THEME_COLORS } from 'lib/constants';
 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';
 
-export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
+export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
   const { formatMessage, labels } = useMessages();
-  const [theme] = useTheme();
+  const { colors } = useTheme();
   const { locale } = useLocale();
 
-  const colors = useMemo(() => {
-    const primaryColor = colord(THEME_COLORS[theme].primary);
-    return {
-      views: {
-        hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
-        backgroundColor: primaryColor.alpha(0.4).toRgbString(),
-        borderColor: primaryColor.alpha(0.7).toRgbString(),
-        hoverBorderColor: primaryColor.toRgbString(),
-      },
-      visitors: {
-        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
-        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
-        borderColor: primaryColor.alpha(0.9).toRgbString(),
-        hoverBorderColor: primaryColor.toRgbString(),
-      },
-    };
-  }, [theme]);
+  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 [];
@@ -37,13 +77,13 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
         label: formatMessage(labels.uniqueVisitors),
         data: data.sessions,
         borderWidth: 1,
-        ...colors.visitors,
+        ...colors.chart.visitors,
       },
       {
         label: formatMessage(labels.pageViews),
         data: data.pageviews,
         borderWidth: 1,
-        ...colors.views,
+        ...colors.chart.views,
       },
     ];
   }, [data, locale, colors]);
@@ -55,8 +95,9 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
       className={className}
       datasets={datasets}
       unit={unit}
-      records={records}
       loading={loading}
+      renderXLabel={renderXLabel}
+      renderTooltip={renderTooltip}
     />
   );
 }