update

0c6aa854 · Santhanavanich · 34ffd05d · 0c6aa854 · 0c6aa854
Commit 0c6aa854 authored 7 months ago by Santhanavanich
Expand all Show whitespace changes
Inline Side-by-side

Showing

with 77 additions and 16 deletions
+77 -16
--- a/public/munakata/ds-chart.html
+++ b/public/munakata/ds-chart.html
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,21 +11,70 @@
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
-        body { font-family: 'Montserrat', sans-serif; margin: 20px; }
-        #chart { width: 100%; height: 600px; }
-        .error { color: red; }
-        .btn-group { margin-bottom: 20px; }
-        .card-title { font-size: 1rem; font-weight: normal; }
-        .card-text { font-size: 2rem; font-weight: bold; }
-        .timestamp { font-size: 0.75rem; font-weight: normal; }
-        .card { margin: 15px 0; border: none; }
-        .card-container { margin-top: 20px; }
-        .card-average { background-color: #f0f9ff; color: #007bff; }
-        .card-max { background-color: #fff5f5; color: #dc3545; }
-        .card-min { background-color: #f9f8ff; color: #6f42c1; }
-        .card-count { background-color: #f5fff7; color: #28a745; }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 20px;
+        }
+
+        #chart {
+            width: 100%;
+            height: 600px;
+        }
+
+        .error {
+            color: red;
+        }
+
+        .btn-group {
+            margin-bottom: 20px;
+        }
+
+        .card-title {
+            font-size: 1rem;
+            font-weight: normal;
+        }
+
+        .card-text {
+            font-size: 2rem;
+            font-weight: bold;
+        }
+
+        .timestamp {
+            font-size: 0.75rem;
+            font-weight: normal;
+        }
+
+        .card {
+            margin: 15px 0;
+            border: none;
+        }
+
+        .card-container {
+            margin-top: 20px;
+        }
+
+        .card-average {
+            background-color: #f0f9ff;
+            color: #007bff;
+        }
+
+        .card-max {
+            background-color: #fff5f5;
+            color: #dc3545;
+        }
+
+        .card-min {
+            background-color: #f9f8ff;
+            color: #6f42c1;
+        }
+
+        .card-count {
+            background-color: #f5fff7;
+            color: #28a745;
+        }
    </style>
 </head>
+
 <body>
    <div class="container-fluid">
        <h2 class="text-center" id="chart-title" style="display: none;">Sensor Data Visualization</h2>
@@ -132,6 +182,7 @@
        }

        function renderChart(data) {
+            const oneDayPoints = 288;
            const option = {
                grid: {
                    bottom: 175 // Add more space at the bottom to accommodate the labels
@@ -163,7 +214,16 @@
                        const value = params[0].data;
                        return `${date}<br/>Value: ${value} ${chartUnit}`;
                    }
+                },
+                dataZoom: [{
+                    type: 'slider', // Add a slider data zoom
+                    startValue: 0, // Start at the beginning of the dataset
+                    endValue: oneDayPoints, // Set the default zoom to display one day (288 points for a 5-min interval)
+                    xAxisIndex: 0, // Apply the zoom to the xAxis
+                    labelFormatter: function (value) { // Optional: Customize the label display
+                        return new Date(data[value].resultTime).toLocaleDateString();
                    }
+                }]
            };

            myChart.setOption(option);
@@ -234,4 +294,5 @@
        });
    </script>
 </body>
+
 </html>
\ No newline at end of file
--- a/public/munakata/pack-min.js
+++ b/public/munakata/pack-min.js