From 24cf838eaedc5476ce204ef69aaaeb872570b9b4 Mon Sep 17 00:00:00 2001
From: Al Azhar <alazhar@indomaret.co.id>
Date: Wed, 29 Apr 2026 14:11:31 +0700
Subject: [PATCH] fix time in chart

---
 index.html | 60 +++++++++++++++++++++---------------------------------
 1 file changed, 23 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index 2fcf426..9673003 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,8 @@
   <script src="js/chart.umd.min.js"></script>
   <script src="js/chartjs-plugin-zoom.min.js"></script>
   <script src="js/hammer.min.js"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
   <style>
     *,
     *::before,
@@ -1061,8 +1063,11 @@
               bodyFont: { family: 'JetBrains Mono', size: 11 },
               callbacks: {
                 title: items => {
-                  const d = new Date(items[0].label);
-                  return d.toLocaleString();
+                  const timestamp = items[0].parsed.x;
+                  const d = new Date(timestamp);
+
+                  // Returns local date and time string
+                  return d.toLocaleString(); 
                 }
               }
             },
@@ -1072,50 +1077,31 @@
                 mode: 'x',
                 onZoomComplete({ chart }) {
                   const { min, max } = chart.scales.x;
-                  const minT = chart.data.labels[Math.round(min)]?.getTime();
-                  const maxT = chart.data.labels[Math.min(Math.round(max), chart.data.labels.length - 1)]?.getTime();
-                  if (minT && maxT) applyTimeFilter(minT, maxT);
+                  if (minT && maxT) applyTimeFilter(Math.floor(min), Math.floor(max));
                 }
               }
             }
           },
           scales: {
             x: {
-              type: 'category',
+              type: 'time', // CRITICAL: Change from 'category' to 'time'
+              offset: true, // This adds space at the start/end and helps bar sizing
               stacked: true,
-              ticks: {
-                // Grouping: Limit the number of labels shown to prevent overlapping
-                maxTicksLimit: 8,
-                // Formatting
-                // callback: function (val, index) {
-                //   // Assuming your data labels are Date objects or Date strings
-                //   const date = new Date(this.getLabelForValue(val));
-
-                //   // Returns "HH:mm:ss" in local time
-                //   return date.toLocaleTimeString('sv-SE');
-                // }
-                callback: function (val, index) {
-                  const labels = this.chart.data.labels;
-                  const date = new Date(labels[index]);
-
-                  // Check if the first and last labels are on the same day
-                  const firstDate = new Date(labels[0]).toDateString();
-                  const lastDate = new Date(labels[labels.length - 1]).toDateString();
-                  const isSameDay = firstDate === lastDate;
-
-                  // Format based on the result
-                  if (isSameDay) {
-                    // Returns: HH:mm:ss
-                    return date.toLocaleTimeString('sv-SE');
-                  } else {
-                    // Returns: DD/MM HH:mm:ss
-                    const day = String(date.getDate()).padStart(2, '0');
-                    const month = String(date.getMonth() + 1).padStart(2, '0');
-                    const time = date.toLocaleTimeString('sv-SE');
-                    return `${day}/${month} ${time}`;
-                  }
+              time: {
+                // Force a unit if your data is consistent (e.g., every minute)
+                // unit: 'minute', 
+                displayFormats: {
+                  second: 'HH:mm:ss',
+                  minute: 'HH:mm',
+                  hour: 'HH:mm',
+                  day: 'dd/MM HH:mm'
                 }
               },
+              ticks: {
+                maxTicksLimit: 8,
+                color: '#555966',
+                font: { family: 'JetBrains Mono', size: 10 }
+              },
               grid: { color: '#ffffff08', drawBorder: false },
               border: { color: '#ffffff10' }
             },