Add 1 files

index.html

@@ -122,7 +122,7 @@
                 <!-- Chart -->
                 <div class="bg-white rounded-xl shadow-md p-6">
                     <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-lg font-semibold text-gray-800">Monthly Consumption</h2>
+                        <h2 class="text-lg font-semibold text-gray-800">Monthly Consumption Trend</h2>
                         <div class="flex space-x-2">
                             <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-lg">Monthly</button>
                             <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-lg">Yearly</button>
@@ -322,15 +322,20 @@
         function initChart() {
             const ctx = document.getElementById('consumptionChart').getContext('2d');
             consumptionChart = new Chart(ctx, {
-                type: 'bar',
+                type: 'line',
                 data: {
                     labels: [],
                     datasets: [{
                         label: 'Monthly Usage (kWh)',
                         data: [],
-                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
+                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                         borderColor: 'rgba(54, 162, 235, 1)',
-                        borderWidth: 1
+                        borderWidth: 2,
+                        tension: 0.4,
+                        fill: true,
+                        pointBackgroundColor: 'rgba(54, 162, 235, 1)',
+                        pointRadius: 4,
+                        pointHoverRadius: 6
                     }]
                 },
                 options: {
@@ -414,8 +419,16 @@
                     const avgMonthlyUsage = totalUsage / monthlyUsage.length;
                     document.getElementById('avgMonthlyUsage').textContent = `${avgMonthlyUsage.toFixed(2)} kWh`;
                     
-                    // Calculate projected yearly usage
-                    const projectedYearUsage = avgMonthlyUsage * 12;
+                    // Calculate projected yearly usage (using last 3 months if available)
+                    let projectedYearUsage;
+                    if (monthlyUsage.length >= 3) {
+                        const recentMonths = monthlyUsage.slice(-3);
+                        const recentAvg = recentMonths.reduce((sum, month) => sum + month.usage, 0) / 3;
+                        projectedYearUsage = recentAvg * 12;
+                    } else {
+                        projectedYearUsage = avgMonthlyUsage * 12;
+                    }
+                    
                     document.getElementById('projectedYearUsage').textContent = `${projectedYearUsage.toFixed(2)} kWh`;
                 }
             }
@@ -562,60 +575,5 @@
                     // Update UI
                     renderReadingsTable();
                     updateDashboard();
-                    updateChart();
-                    
-                    // Hide loading overlay
-                    loadingOverlay.classList.add('hidden');
-                }, 1000);
-            });
-            
-            // Form submission for editing reading
-            editForm.addEventListener('submit', function(e) {
-                e.preventDefault();
-                
-                const id = document.getElementById('editId').value;
-                const date = document.getElementById('editDate').value;
-                const value = parseFloat(document.getElementById('editReading').value);
-                const type = document.getElementById('editType').value;
-                const notes = document.getElementById('editNotes').value;
-                
-                if (!date || isNaN(value)) {
-                    alert('Please enter a valid date and reading value');
-                    return;
-                }
-                
-                db.updateReading(id, {
-                    date,
-                    value,
-                    type,
-                    notes
-                });
-                
-                closeEditModal();
-                renderReadingsTable();
-                updateDashboard();
-                updateChart();
-            });
-            
-            // Delete reading button
-            deleteReadingBtn.addEventListener('click', function() {
-                const id = document.getElementById('editId').value;
-                
-                if (confirm('Are you sure you want to delete this reading?')) {
-                    db.deleteReading(id);
-                    closeEditModal();
-                    renderReadingsTable();
-                    updateDashboard();
-                    updateChart();
-                }
-            });
-            
-            // Close modal button
-            closeModal.addEventListener('click', closeEditModal);
-        }
-
-        // Start the app when DOM is loaded
-        document.addEventListener('DOMContentLoaded', initApp);
-    </script>
-<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=aaronxavier/energytracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+                    update
 </html>