create a separate line chart and that chart changes livetime - Follow Up Deployment

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ThermoScan AI | Industrial Temperature Monitoring</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         tailwind.config = {
@@ -313,6 +314,16 @@
             </div>
         </div>
         
+        <!-- Real-time Chart -->
+        <div class="industrial-card mb-8">
+            <div class="p-4 border-b border-industrial-700">
+                <h2 class="text-xl font-bold text-white">Temperature Trend</h2>
+            </div>
+            <div class="p-4">
+                <canvas id="liveChart" height="300"></canvas>
+            </div>
+        </div>
+
         <!-- System Status -->
         <div class="dashboard-grid mb-8">
             <div class="industrial-card">
@@ -705,8 +716,9 @@
                 minTempEl.textContent = `${minTemp}°C`;
             }
             
-            // Update history table
+            // Update history table and chart
             updateHistoryTable();
+            updateLiveChart(temp, new Date().toLocaleTimeString());
         }
         
         // Update gauge display
@@ -802,7 +814,7 @@
                             <span class="${statusClass} font-medium">${statusText}</span>
                         </td>
                         <td class="px-4 py-3 whitespace-nowrap text-sm">
-                            <button class="text-industrial-400 hover:text-industrial-300 mr-2">
+                            <button class="text-industrial-400 hover:text-industrial-300 mr-2" onclick="showTemperatureChart()">
                                 <i class="fas fa-chart-line"></i>
                             </button>
                             <button class="text-industrial-400 hover:text-industrial-300">
@@ -840,8 +852,184 @@
             logDebug("Data exported as CSV");
         }
 
+        // Chart functions
+        let temperatureChart = null;
+
+        function showTemperatureChart() {
+            const modal = document.getElementById('chartModal');
+            modal.classList.remove('hidden');
+            
+            const ctx = document.getElementById('temperatureChart').getContext('2d');
+            
+            // Destroy previous chart if exists
+            if (temperatureChart) {
+                temperatureChart.destroy();
+            }
+            
+            // Prepare chart data
+            const labels = temperatureHistory.map(reading => reading.timestamp);
+            const data = temperatureHistory.map(reading => reading.temp);
+            const statusColors = temperatureHistory.map(reading => {
+                switch(reading.status) {
+                    case 'critical': return '#ef4444';
+                    case 'warning': return '#f59e0b';
+                    default: return '#10b981';
+                }
+            });
+            
+            temperatureChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Temperature (°C)',
+                        data: data,
+                        borderColor: '#38bdf8',
+                        backgroundColor: 'rgba(56, 189, 248, 0.1)',
+                        borderWidth: 2,
+                        pointBackgroundColor: statusColors,
+                        pointRadius: 5,
+                        pointHoverRadius: 7,
+                        tension: 0.1,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: {
+                                color: 'rgba(30, 41, 59, 0.5)'
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                color: 'rgba(30, 41, 59, 0.5)'
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: '#1e293b',
+                            titleColor: '#e2e8f0',
+                            bodyColor: '#e2e8f0',
+                            borderColor: '#334155',
+                            borderWidth: 1
+                        }
+                    }
+                }
+            });
+        }
+
+        function exportChartAsImage() {
+            if (!temperatureChart) return;
+            
+            const link = document.createElement('a');
+            link.download = `temperature_chart_${new Date().toISOString().slice(0,10)}.png`;
+            link.href = temperatureChart.toBase64Image();
+            link.click();
+        }
+
+        // Chart variables
+        let liveChart = null;
+        let chartData = {
+            labels: [],
+            datasets: [{
+                label: 'Temperature (°C)',
+                data: [],
+                borderColor: '#38bdf8',
+                backgroundColor: 'rgba(56, 189, 248, 0.1)',
+                borderWidth: 2,
+                pointRadius: 3,
+                tension: 0.1,
+                fill: true
+            }]
+        };
+
+        // Initialize live chart
+        function initLiveChart() {
+            const ctx = document.getElementById('liveChart').getContext('2d');
+            liveChart = new Chart(ctx, {
+                type: 'line',
+                data: chartData,
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    animation: {
+                        duration: 1000,
+                        easing: 'linear'
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            grid: {
+                                color: 'rgba(30, 41, 59, 0.5)'
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                color: 'rgba(30, 41, 59, 0.5)'
+                            },
+                            ticks: {
+                                color: '#94a3b8',
+                                maxRotation: 45,
+                                minRotation: 45
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: '#e2e8f0'
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: '#1e293b',
+                            titleColor: '#e2e8f0',
+                            bodyColor: '#e2e8f0',
+                            borderColor: '#334155',
+                            borderWidth: 1
+                        }
+                    }
+                }
+            });
+        }
+
+        // Update live chart with new data
+        function updateLiveChart(temp, timestamp) {
+            // Add new data point
+            chartData.labels.push(timestamp);
+            chartData.datasets[0].data.push(temp);
+            
+            // Keep only last 20 points
+            if (chartData.labels.length > 20) {
+                chartData.labels.shift();
+                chartData.datasets[0].data.shift();
+            }
+            
+            // Update chart
+            liveChart.update();
+        }
+
         // Initialize the app when DOM is loaded
         document.addEventListener('DOMContentLoaded', () => {
+            initLiveChart();
             init();
             
             // Start/stop periodic capture
@@ -874,7 +1062,34 @@
 
             // Export data button
             document.getElementById('exportDataBtn').addEventListener('click', exportData);
+            
+            // Chart modal events
+            document.getElementById('closeChartModal').addEventListener('click', () => {
+                document.getElementById('chartModal').classList.add('hidden');
+            });
+            
+            document.getElementById('exportChartBtn').addEventListener('click', exportChartAsImage);
         });
     </script>
+
+    <!-- Chart Modal -->
+    <div id="chartModal" class="modal-overlay hidden">
+        <div class="modal-content">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold">Temperature History Chart</h3>
+                <button id="closeChartModal" class="text-industrial-400 hover:text-industrial-300">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="bg-industrial-800 p-4 rounded-lg">
+                <canvas id="temperatureChart" height="300"></canvas>
+            </div>
+            <div class="modal-actions">
+                <button id="exportChartBtn" class="bg-industrial-600 hover:bg-industrial-500 text-white px-4 py-2 rounded-lg">
+                    <i class="fas fa-download mr-2"></i> Export as Image
+                </button>
+            </div>
+        </div>
+    </div>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pksaheb/temperature-monitoring" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>