From 871868f0a49f4e59b2be89e3af0c90631672825d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 15 Sep 2020 22:27:01 +0200
Subject: [PATCH] Moved common rendering chart labels code to external module
 for reuse

---
 src/utils/helpers/visits.ts          | 25 +++++++++++++++++++++++++
 src/visits/helpers/DefaultChart.tsx  | 24 ++++--------------------
 src/visits/helpers/LineChartCard.tsx | 10 +++-------
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/utils/helpers/visits.ts b/src/utils/helpers/visits.ts
index ea45421a..7a2bd7e2 100644
--- a/src/utils/helpers/visits.ts
+++ b/src/utils/helpers/visits.ts
@@ -1,7 +1,9 @@
 import bowser from 'bowser';
 import { zipObj } from 'ramda';
+import { ChartData, ChartTooltipItem } from 'chart.js';
 import { Empty, hasValue } from '../utils';
 import { Stats, UserAgent } from '../../visits/types';
+import { prettify } from './numbers';
 
 const DEFAULT = 'Others';
 const BROWSERS_WHITELIST = [
@@ -40,3 +42,26 @@ export const extractDomain = (url: string | Empty): string => {
 
 export const fillTheGaps = (stats: Stats, labels: string[]): number[] =>
   Object.values({ ...zipObj(labels, labels.map(() => 0)), ...stats });
+
+export const renderDoughnutChartLabel = (
+  { datasetIndex, index }: ChartTooltipItem,
+  { labels, datasets }: ChartData,
+) => {
+  const datasetLabel = index !== undefined && labels?.[index] || '';
+  const value = datasetIndex !== undefined && index !== undefined
+    && datasets?.[datasetIndex]?.data?.[index]
+    || '';
+
+  return `${datasetLabel}: ${prettify(Number(value))}`;
+};
+
+export const renderNonDoughnutChartLabel = (labelToPick: 'yLabel' | 'xLabel') => (
+  item: ChartTooltipItem,
+  { datasets }: ChartData,
+) => {
+  const { datasetIndex } = item;
+  const value = item[labelToPick];
+  const datasetLabel = datasetIndex !== undefined && datasets?.[datasetIndex]?.label || '';
+
+  return `${datasetLabel}: ${prettify(Number(value))}`;
+};
diff --git a/src/visits/helpers/DefaultChart.tsx b/src/visits/helpers/DefaultChart.tsx
index 48a33f78..01a38fb2 100644
--- a/src/visits/helpers/DefaultChart.tsx
+++ b/src/visits/helpers/DefaultChart.tsx
@@ -2,11 +2,11 @@ import React, { ChangeEvent, useRef } from 'react';
 import { Doughnut, HorizontalBar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
 import classNames from 'classnames';
-import Chart, { ChartData, ChartDataSets, ChartOptions, ChartTooltipItem } from 'chart.js';
-import { fillTheGaps } from '../../utils/helpers/visits';
+import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
+import { fillTheGaps, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/visits';
 import { Stats } from '../types';
-import './DefaultChart.scss';
 import { prettify } from '../../utils/helpers/numbers';
+import './DefaultChart.scss';
 
 export interface DefaultChartProps {
   title: Function | string;
@@ -142,23 +142,7 @@ const DefaultChart = (
       // Do not show tooltip on items with empty label when in a bar chart
       filter: ({ yLabel }) => !isBarChart || yLabel !== '',
       callbacks: {
-        ...isBarChart ? {} : {
-          label({ datasetIndex, index }: ChartTooltipItem, { labels, datasets }: ChartData) {
-            const datasetLabel = index !== undefined && labels?.[index] || '';
-            const value = datasetIndex !== undefined && index !== undefined
-              && datasets?.[datasetIndex]?.data?.[index]
-              || '';
-
-            return `${datasetLabel}: ${prettify(Number(value))}`;
-          },
-        },
-        ...!isBarChart ? {} : {
-          label({ datasetIndex, xLabel }: ChartTooltipItem, { datasets }: ChartData) {
-            const datasetLabel = datasetIndex !== undefined && datasets?.[datasetIndex]?.label || '';
-
-            return `${datasetLabel}: ${prettify(Number(xLabel))}`;
-          },
-        },
+        label: isBarChart ? renderNonDoughnutChartLabel('xLabel') : renderDoughnutChartLabel,
       },
     },
     onHover: !isBarChart ? undefined : ((e: ChangeEvent<HTMLElement>, chartElement: HorizontalBar[] | Doughnut[]) => {
diff --git a/src/visits/helpers/LineChartCard.tsx b/src/visits/helpers/LineChartCard.tsx
index bdbcaec8..bcac1b41 100644
--- a/src/visits/helpers/LineChartCard.tsx
+++ b/src/visits/helpers/LineChartCard.tsx
@@ -11,9 +11,9 @@ import {
 import { Line } from 'react-chartjs-2';
 import { always, cond, reverse } from 'ramda';
 import moment from 'moment';
-import { ChartData, ChartDataSets, ChartTooltipItem, ChartOptions } from 'chart.js';
+import { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
 import { NormalizedVisit, Stats } from '../types';
-import { fillTheGaps } from '../../utils/helpers/visits';
+import { fillTheGaps, renderNonDoughnutChartLabel } from '../../utils/helpers/visits';
 import { useToggle } from '../../utils/helpers/hooks';
 import { rangeOf } from '../../utils/utils';
 import ToggleSwitch from '../../utils/ToggleSwitch';
@@ -163,11 +163,7 @@ const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'S
       // @ts-expect-error
       axis: 'x',
       callbacks: {
-        label({ datasetIndex, yLabel }: ChartTooltipItem, data: ChartData) {
-          const datasetLabel = datasetIndex !== undefined && data.datasets?.[datasetIndex]?.label || '';
-
-          return `${datasetLabel}: ${prettify(Number(yLabel))}`;
-        },
+        label: renderNonDoughnutChartLabel('yLabel'),
       },
     },
   };