refactor: allow chart labels as datetime objects (#599)

ArkEcosystem · Oct 6, 2023 · 99cfdec · 99cfdec
1 parent 42c88b5
commit 99cfdec
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/resources/assets/js/chart.js b/resources/assets/js/chart.js
@@ -22,8 +22,8 @@ Chart.register(...registerables);
  * @param {Number} yPadding
  * @param {Number} xPadding
  * @param {Boolean} showCrosshair
- * @param {CallableFunction} tooltipHandler
- * @param {CallableFunction} xTicksCallback
+ * @param {CallableFunction|null} tooltipHandler
+ * @param {Boolean} hasDateTimeLabels
  * @return {Object}
  */
 const CustomChart = (
@@ -39,7 +39,7 @@ const CustomChart = (
     xPadding = 10,
     showCrosshair = false,
     tooltipHandler = null,
-    xTicksCallback = null
+    hasDateTimeLabels = false
 ) => {
     const themeMode = () => {
         if (theme.mode === "auto") {
@@ -315,8 +315,18 @@ const CustomChart = (
                 },
             };
 
-            if (xTicksCallback) {
-                options.scales.xAxes.ticks.callback = xTicksCallback;
+            if (hasDateTimeLabels) {
+                options.scales.xAxes.type = "time";
+                options.scales.xAxes.ticks.maxRotation = 0;
+                options.scales.xAxes.ticks.autoSkipPadding = 10;
+                options.scales.xAxes.time = {
+                    displayFormats: {
+                        hour: "HH:00",
+                        day: "dd.MM",
+                        month: "MMM yyyy",
+                        year: "yyyy",
+                    },
+                };
             }
 
             this.chart = new Chart(this.getCanvasContext(), { data, options });

diff --git a/resources/views/chart.blade.php b/resources/views/chart.blade.php
@@ -13,7 +13,7 @@
     'xPadding' => 10,
     'showCrosshair' => false,
     'tooltipHandler' => null,
-    'ticksCallback' => null,
+    'hasDateTimeLabels' => null,
 ])
 
 <div
@@ -30,7 +30,7 @@
         {{ $xPadding }},
         {{ $showCrosshair ? 'true' : 'false' }},
         {{ $tooltipHandler ? $tooltipHandler : 'null' }},
-        {{ $ticksCallback ? $ticksCallback : 'null' }}
+        {{ $hasDateTimeLabels ? 'true' : 'false' }},
     )"
     wire:key="{{ $id.time() }}"
     {{ $attributes->only('class') }}