Moved render functions into lib/charts.

components/common/WorldMap.js

@@ -86,7 +86,7 @@ export function WorldMap({ data, className }) {
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      {tooltip && <HoverTooltip tooltip={tooltip} />}
+      {tooltip && <HoverTooltip>{tooltip}</HoverTooltip>}
     </div>
   );
 }

components/metrics/BarChart.js

@@ -4,16 +4,12 @@ import classNames from 'classnames';
 import Chart from 'chart.js/auto';
 import HoverTooltip from 'components/common/HoverTooltip';
 import Legend from 'components/metrics/Legend';
-import { formatLongNumber } from 'lib/format';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import { renderNumberLabels } from 'lib/charts';
 import styles from './BarChart.module.css';
 
-function defaultRenderYLabel(label) {
-  return +label > 1000 ? formatLongNumber(label) : label;
-}
-
 export function BarChart({
   datasets,
   unit,
@@ -90,7 +86,7 @@ export function BarChart({
           },
           ticks: {
             color: colors.text,
-            callback: renderYLabel || defaultRenderYLabel,
+            callback: renderYLabel || renderNumberLabels,
           },
         },
       },

components/metrics/EventsChart.js

@@ -2,16 +2,15 @@ import { useMemo } from 'react';
 import { Loading } from 'react-basics';
 import { colord } from 'colord';
 import BarChart from './BarChart';
-import { getDateArray, getDateLength } from 'lib/date';
+import { getDateArray } from 'lib/date';
-import useApi from 'hooks/useApi';
+import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'hooks';
-import useDateRange from 'hooks/useDateRange';
-import useTimezone from 'hooks/useTimezone';
-import usePageQuery from 'hooks/usePageQuery';
 import { EVENT_COLORS } from 'lib/constants';
+import { renderDateLabels, renderStatusTooltip } from 'lib/charts';
 
 export function EventsChart({ websiteId, className, token }) {
   const { get, useQuery } = useApi();
   const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
+  const { locale } = useLocale();
   const [timezone] = useTimezone();
   const {
     query: { url, eventName },
@@ -70,9 +69,10 @@ export function EventsChart({ websiteId, className, token }) {
       datasets={datasets}
       unit={unit}
       height={300}
-      records={getDateLength(startDate, endDate, unit)}
       loading={isLoading}
       stacked
+      renderXLabel={renderDateLabels(unit, locale)}
+      renderTooltip={renderStatusTooltip(unit, locale)}
     />
   );
 }

components/metrics/PageviewsChart.js

@@ -1,74 +1,13 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
-import { StatusLight } from 'react-basics';
 import BarChart from './BarChart';
-import useTheme from 'hooks/useTheme';
+import { useLocale, useTheme, useMessages } from 'hooks';
-import useMessages from 'hooks/useMessages';
+import { renderDateLabels, renderStatusTooltip } from 'lib/charts';
-import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
-import { formatLongNumber } from 'lib/format';
 
 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}
+      renderXLabel={renderDateLabels(unit, locale)}
-      renderTooltip={renderTooltip}
+      renderTooltip={renderStatusTooltip(unit, locale)}
     />
   );
 }

components/pages/reports/funnel/FunnelParameters.js

@@ -11,6 +11,7 @@ import {
   SubmitButton,
   Text,
   TextField,
+  Tooltip,
 } from 'react-basics';
 import Icons from 'components/icons';
 import { updateReport } from 'store/reports';
@@ -91,28 +92,30 @@ function AddURLButton({ onAdd }) {
   };
 
   return (
-    <ModalTrigger>
+    <Tooltip label={formatMessage(labels.addUrl)}>
-      <Icon>
+      <ModalTrigger>
-        <Icons.Plus />
+        <Icon>
-      </Icon>
+          <Icons.Plus />
-      <Modal>
+        </Icon>
-        {close => {
+        <Modal>
-          return (
+          {close => {
-            <Form>
+            return (
-              <FormRow label={formatMessage(labels.url)}>
+              <Form>
-                <TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
+                <FormRow label={formatMessage(labels.url)}>
-              </FormRow>
+                  <TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
-              <FormButtons align="center" flex>
+                </FormRow>
-                <Button variant="primary" onClick={() => handleAdd(close)}>
+                <FormButtons align="center" flex>
-                  {formatMessage(labels.add)}
+                  <Button variant="primary" onClick={() => handleAdd(close)}>
-                </Button>
+                    {formatMessage(labels.add)}
-                <Button onClick={() => handleClose(close)}>{formatMessage(labels.cancel)}</Button>
+                  </Button>
-              </FormButtons>
+                  <Button onClick={() => handleClose(close)}>{formatMessage(labels.cancel)}</Button>
-            </Form>
+                </FormButtons>
-          );
+              </Form>
-        }}
+            );
-      </Modal>
+          }}
-    </ModalTrigger>
+        </Modal>
+      </ModalTrigger>
+    </Tooltip>
   );
 }
 

lib/charts.js

@@ -0,0 +1,62 @@
+import { StatusLight } from 'react-basics';
+import { dateFormat } from 'lib/date';
+import { formatLongNumber } from 'lib/format';
+
+export function renderNumberLabels(label) {
+  return +label > 1000 ? formatLongNumber(label) : label;
+}
+
+export function renderDateLabels(unit, locale) {
+  return (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;
+    }
+  };
+}
+
+export function renderStatusTooltip(unit, locale) {
+  return (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>
+      </>,
+    );
+  };
+}