fix: adjust graph x-axis range based on selected time period

- Pass range parameter to SensorChart hook via data-range attribute
- Calculate x-axis min/max dynamically based on selected range (1h, 6h, 12h, 24h, 7d, 30d)
- Show date + time on x-axis labels for ranges > 24 hours
- Show time only for ranges <= 24 hours
- Fixes issue where 7d and 30d graphs showed incorrect time range

assets/js/app.ts

@@ -32,6 +32,19 @@ import "./passkey_login"
 import "./passkey_discoverable"
 import type { SensorChartHook } from "./types/liveview"
 
+// Helper function to convert range string to milliseconds
+function getTimeRangeMs(range: string): number {
+  switch (range) {
+    case '1h': return 1 * 60 * 60 * 1000
+    case '6h': return 6 * 60 * 60 * 1000
+    case '12h': return 12 * 60 * 60 * 1000
+    case '24h': return 24 * 60 * 60 * 1000
+    case '7d': return 7 * 24 * 60 * 60 * 1000
+    case '30d': return 30 * 24 * 60 * 60 * 1000
+    default: return 24 * 60 * 60 * 1000  // Default to 24 hours
+  }
+}
+
 // Generic Sensor Chart Hook (for CPU, Memory, Storage, etc.)
 const SensorChart: SensorChartHook = {
   mounted() {
@@ -68,6 +81,7 @@ const SensorChart: SensorChartHook = {
     const unit = this.el.dataset.unit || '%'
     const autoScale = this.el.dataset.autoScale === 'true' || this.el.dataset.autoScale === 'true'
     const showZeroLine = this.el.dataset.showZeroLine === 'true' || this.el.dataset.showZeroLine === 'true'
+    const range = this.el.dataset.range || '24h'
     const isTrafficChart = unit === 'bps'
 
     // Generate colors for each dataset
@@ -209,9 +223,10 @@ const SensorChart: SensorChartHook = {
       }
     }
 
-    // Calculate 24-hour time range for consistent x-axis
+    // Calculate time range based on selected range
     const now = Date.now()
-    const twentyFourHoursAgo = now - (24 * 60 * 60 * 1000)
+    const timeRangeMs = getTimeRangeMs(range)
+    const rangeStart = now - timeRangeMs
 
     this.chart = new Chart(ctx, {
       type: 'line',
@@ -256,12 +271,23 @@ const SensorChart: SensorChartHook = {
         scales: {
           x: {
             type: 'linear',
-            min: twentyFourHoursAgo,
+            min: rangeStart,
             max: now,
             ticks: {
               callback: function(value: number) {
                 const date = new Date(value)
-                return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
+                // For ranges > 24h, show date + time; otherwise just time
+                if (timeRangeMs > 24 * 60 * 60 * 1000) {
+                  return date.toLocaleString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    hour12: false
+                  })
+                } else {
+                  return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })
+                }
               },
               maxTicksLimit: 12
             },

lib/towerops_web/live/graph_live/show.html.heex

@@ -54,6 +54,7 @@
             data-unit={@unit}
             data-auto-scale={to_string(@auto_scale)}
             data-show-zero-line={to_string(@show_zero_line)}
+            data-range={@range}
             style="height: 600px;"
           >
             <canvas></canvas>