fixed chart destruction and recreation

src/baby_monitor/static/feedings.html

@@ -319,6 +319,8 @@
         parseInt(localStorage.getItem("lastFeedingTimeRange")) || 7;
       let selectedChildId = null; // null means show first/only child
       let barChartInstance = null;
+      let pieChartInstance = null;
+      let durationChartInstance = null;
 
       // Restore last selected child from localStorage
       const lastChildId = localStorage.getItem("lastFeedingChildFilter");
@@ -979,6 +981,11 @@
       function renderPieChart(chartData) {
         const ctx = document.getElementById("pieChart").getContext("2d");
 
+        // Destroy existing chart instance if it exists
+        if (pieChartInstance) {
+          pieChartInstance.destroy();
+        }
+
         // Color mapping for each type
         const colorMap = {
           "Left Breast": {
@@ -1003,7 +1010,7 @@
           (label) => colorMap[label]?.border || "rgba(200, 200, 200, 1)",
         );
 
-        new Chart(ctx, {
+        pieChartInstance = new Chart(ctx, {
           type: "pie",
           data: {
             labels: chartData.labels,
@@ -1059,7 +1066,12 @@
       function renderDurationChart(chartData) {
         const ctx = document.getElementById("durationChart").getContext("2d");
 
-        new Chart(ctx, {
+        // Destroy existing chart instance if it exists
+        if (durationChartInstance) {
+          durationChartInstance.destroy();
+        }
+
+        durationChartInstance = new Chart(ctx, {
           type: "bar",
           data: {
             labels: chartData.labels,