From f66c9784319c8aca8a808ffbf48e3ab8211bb12d Mon Sep 17 00:00:00 2001
From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:28:07 +0100
Subject: [PATCH 1/2] refactor: cusomisable chart tooltips

---
 resources/assets/js/chart.js    | 47 ++++++++++++++++++++++-----------
 resources/views/chart.blade.php |  6 ++++-
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/chart.js b/resources/assets/js/chart.js
index 5895883a..5ea8c44e 100644
--- a/resources/assets/js/chart.js
+++ b/resources/assets/js/chart.js
@@ -22,6 +22,8 @@ Chart.register(...registerables);
  * @param {Number} yPadding
  * @param {Number} xPadding
  * @param {Boolean} showCrosshair
+ * @param {CallableFunction} tooltipHandler
+ * @param {CallableFunction} xTicksCallback
  * @return {Object}
  */
 const CustomChart = (
@@ -35,7 +37,9 @@ const CustomChart = (
     currency,
     yPadding = 15,
     xPadding = 10,
-    showCrosshair = false
+    showCrosshair = false,
+    tooltipHandler = null,
+    xTicksCallback = null,
 ) => {
     const themeMode = () => {
         if (theme.mode === "auto") {
@@ -246,7 +250,29 @@ const CustomChart = (
                 datasets: this.loadData(),
             };
 
+            let tooltipOptions = {
+                enabled: tooltips,
+                external: this.tooltip,
+                displayColors: false,
+                callbacks: {
+                    title: (items) => {},
+                    label: (context) =>
+                        this.getCurrencyValue(context.raw),
+                    labelTextColor: (context) =>
+                        getFontConfig("tooltip", themeMode()).fontColor,
+                },
+                backgroundColor: getFontConfig("tooltip", themeMode())
+                    .backgroundColor,
+            };
+            if (tooltipHandler) {
+                tooltipOptions = {
+                    enabled: false,
+                    external: tooltipHandler,
+                };
+            }
+
             const options = {
+                currency,
                 spanGaps: true,
                 normalized: true,
                 responsive: true,
@@ -259,20 +285,7 @@ const CustomChart = (
                 },
                 plugins: {
                     legend: { display: false },
-                    tooltip: {
-                        enabled: tooltips,
-                        external: this.tooltip,
-                        displayColors: false,
-                        callbacks: {
-                            title: (items) => {},
-                            label: (context) =>
-                                this.getCurrencyValue(context.raw),
-                            labelTextColor: (context) =>
-                                getFontConfig("tooltip", themeMode()).fontColor,
-                        },
-                        backgroundColor: getFontConfig("tooltip", themeMode())
-                            .backgroundColor,
-                    },
+                    tooltip: tooltipOptions,
                 },
                 hover: {
                     mode: "nearest",
@@ -303,6 +316,10 @@ const CustomChart = (
                 },
             };
 
+            if (xTicksCallback) {
+                options.scales.xAxes.ticks.callback = xTicksCallback;
+            }
+
             this.chart = new Chart(this.getCanvasContext(), { data, options });
         },
     };
diff --git a/resources/views/chart.blade.php b/resources/views/chart.blade.php
index 66f03b09..dd76027d 100644
--- a/resources/views/chart.blade.php
+++ b/resources/views/chart.blade.php
@@ -12,6 +12,8 @@
     'yPadding' => 15,
     'xPadding' => 10,
     'showCrosshair' => false,
+    'tooltipHandler' => null,
+    'ticksCallback' => null,
 ])
 
 <div
@@ -26,7 +28,9 @@
         '{{ $currency }}',
         {{ $yPadding }},
         {{ $xPadding }},
-        {{ $showCrosshair ? 'true' : 'false' }}
+        {{ $showCrosshair ? 'true' : 'false' }},
+        {{ $tooltipHandler ? $tooltipHandler : 'null' }},
+        {{ $ticksCallback ? $ticksCallback : 'null' }}
     )"
     wire:key="{{ $id.time() }}"
     {{ $attributes->only('class') }}

From 2d1e876bb07569b3ae8cb7126e688c30ffc9d008 Mon Sep 17 00:00:00 2001
From: alexbarnsley <alexbarnsley@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:31:46 +0000
Subject: [PATCH 2/2] style: resolve style guide violations

---
 resources/assets/js/chart.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/chart.js b/resources/assets/js/chart.js
index 5ea8c44e..c7a326bd 100644
--- a/resources/assets/js/chart.js
+++ b/resources/assets/js/chart.js
@@ -39,7 +39,7 @@ const CustomChart = (
     xPadding = 10,
     showCrosshair = false,
     tooltipHandler = null,
-    xTicksCallback = null,
+    xTicksCallback = null
 ) => {
     const themeMode = () => {
         if (theme.mode === "auto") {
@@ -256,8 +256,7 @@ const CustomChart = (
                 displayColors: false,
                 callbacks: {
                     title: (items) => {},
-                    label: (context) =>
-                        this.getCurrencyValue(context.raw),
+                    label: (context) => this.getCurrencyValue(context.raw),
                     labelTextColor: (context) =>
                         getFontConfig("tooltip", themeMode()).fontColor,
                 },