feat: Introduce a React-based frontend dashboard with Webpack and Babel for improved UI and development.

public/dashboard.js

@@ -11,6 +11,9 @@ let chartInstances = {};
 async function init() {
     setupControls();
     await loadDevices();
+
+    // Auto-refresh data every 60 seconds
+    setInterval(loadData, 60000);
 }
 
 function setupControls() {
@@ -58,8 +61,6 @@ async function loadDevices() {
             let portsHtml = '';
             ports.forEach(port => {
                 const safePortId = `${controllerName}_${port.port}`.replace(/\s+/g, '_');
-                const isLight = port.port_name && port.port_name.toLowerCase().includes('light');
-                const levelTitle = isLight ? 'Brightness' : 'Fan Speed';
 
                 portsHtml += `
                     <div class="port-card">
@@ -135,8 +136,18 @@ async function loadData() {
     }
 }
 
+function formatDateLabel(timestamp) {
+    const date = new Date(timestamp);
+    if (currentRange === 'day') {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else {
+        return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' }) + ' ' +
+            date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+}
+
 function renderEnvChart(safeName, data) {
-    const labels = data.map(d => new Date(d.timestamp).toLocaleString());
+    const labels = data.map(d => formatDateLabel(d.timestamp));
     const ctx = document.getElementById(`env_${safeName}`).getContext('2d');
 
     updateChart(`env_${safeName}`, ctx, labels, [
@@ -175,7 +186,7 @@ function renderEnvChart(safeName, data) {
 }
 
 function renderLevelChart(safeId, data, isLight) {
-    const labels = data.map(d => new Date(d.timestamp).toLocaleString());
+    const labels = data.map(d => formatDateLabel(d.timestamp));
     const ctx = document.getElementById(`level_${safeId}`).getContext('2d');
     const levelLabel = isLight ? 'Brightness' : 'Fan Speed';
     const levelColor = isLight ? '#ffcd56' : '#9966ff';
@@ -202,24 +213,44 @@ function updateChart(id, ctx, labels, datasets, extraOptions = {}) {
         chartInstances[id].destroy();
     }
 
+    const defaultOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: {
+            mode: 'index',
+            intersect: false,
+        },
+        plugins: {
+            legend: { position: 'top' }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    maxRotation: 0,
+                    autoSkip: true,
+                    maxTicksLimit: 12
+                }
+            }
+        }
+    };
+
+    // Merge scales specifically
+    const mergedScales = { ...defaultOptions.scales, ...(extraOptions.scales || {}) };
+
+    // Merge options
+    const options = {
+        ...defaultOptions,
+        ...extraOptions,
+        scales: mergedScales
+    };
+
     chartInstances[id] = new Chart(ctx, {
         type: 'line',
         data: {
             labels: labels,
             datasets: datasets.map(ds => ({ ...ds, borderWidth: 2, tension: 0.3, pointRadius: 1 }))
         },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            interaction: {
-                mode: 'index',
-                intersect: false,
-            },
-            plugins: {
-                legend: { position: 'top' }
-            },
-            ...extraOptions
-        }
+        options: options
     });
 }