From 67495fa3022572808a0abcc0dcd52d42751cd930 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 15 Sep 2020 22:22:56 +0200
Subject: [PATCH] Added number formatting to charts

---
 src/visits/helpers/DefaultChart.tsx  | 31 +++++++++++++++++++++++++---
 src/visits/helpers/LineChartCard.tsx |  2 +-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/visits/helpers/DefaultChart.tsx b/src/visits/helpers/DefaultChart.tsx
index 2d8f1094..48a33f78 100644
--- a/src/visits/helpers/DefaultChart.tsx
+++ b/src/visits/helpers/DefaultChart.tsx
@@ -2,10 +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 } from 'chart.js';
+import Chart, { ChartData, ChartDataSets, ChartOptions, ChartTooltipItem } from 'chart.js';
 import { fillTheGaps } from '../../utils/helpers/visits';
 import { Stats } from '../types';
 import './DefaultChart.scss';
+import { prettify } from '../../utils/helpers/numbers';
 
 export interface DefaultChartProps {
   title: Function | string;
@@ -124,7 +125,13 @@ const DefaultChart = (
     scales: !isBarChart ? undefined : {
       xAxes: [
         {
-          ticks: { beginAtZero: true, precision: 0, max } as any,
+          ticks: {
+            beginAtZero: true,
+            // @ts-expect-error
+            precision: 0,
+            callback: prettify,
+            max,
+          },
           stacked: true,
         },
       ],
@@ -132,9 +139,27 @@ const DefaultChart = (
     },
     tooltips: {
       intersect: !isBarChart,
-
       // 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))}`;
+          },
+        },
+      },
     },
     onHover: !isBarChart ? undefined : ((e: ChangeEvent<HTMLElement>, chartElement: HorizontalBar[] | Doughnut[]) => {
       const { target } = e;
diff --git a/src/visits/helpers/LineChartCard.tsx b/src/visits/helpers/LineChartCard.tsx
index 42713bdf..bdbcaec8 100644
--- a/src/visits/helpers/LineChartCard.tsx
+++ b/src/visits/helpers/LineChartCard.tsx
@@ -17,8 +17,8 @@ import { fillTheGaps } from '../../utils/helpers/visits';
 import { useToggle } from '../../utils/helpers/hooks';
 import { rangeOf } from '../../utils/utils';
 import ToggleSwitch from '../../utils/ToggleSwitch';
-import './LineChartCard.scss';
 import { prettify } from '../../utils/helpers/numbers';
+import './LineChartCard.scss';
 
 interface LineChartCardProps {
   title: string;