diff --git a/src/baby_monitor/static/diapers.html b/src/baby_monitor/static/diapers.html
index b02239c..7183d92 100644
--- a/src/baby_monitor/static/diapers.html
+++ b/src/baby_monitor/static/diapers.html
@@ -281,6 +281,9 @@
let currentDaysRange =
parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
let selectedChildId = null; // null means show first/only child
+ let barChartInstance = null; // Track chart instance for proper cleanup
+ let poopPieChartInstance = null;
+ let peePieChartInstance = null;
// Restore last selected child from localStorage
const lastChildId = localStorage.getItem("lastDiaperChildFilter");
@@ -782,7 +785,12 @@
function renderBarChart(chartData) {
const ctx = document.getElementById("diaperChart").getContext("2d");
- new Chart(ctx, {
+ // Destroy existing chart instance if it exists
+ if (barChartInstance) {
+ barChartInstance.destroy();
+ }
+
+ barChartInstance = new Chart(ctx, {
type: "bar",
data: {
labels: chartData.labels,
@@ -875,6 +883,11 @@
function renderPoopPieChart(chartData) {
const ctx = document.getElementById("poopPieChart").getContext("2d");
+ // Destroy existing chart instance if it exists
+ if (poopPieChartInstance) {
+ poopPieChartInstance.destroy();
+ }
+
const colors = {
Light: {
bg: "rgba(139, 69, 19, 0.5)",
@@ -901,7 +914,7 @@
(label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
);
- new Chart(ctx, {
+ poopPieChartInstance = new Chart(ctx, {
type: "pie",
data: {
labels: chartData.labels,
@@ -957,6 +970,11 @@
function renderPeePieChart(chartData) {
const ctx = document.getElementById("peePieChart").getContext("2d");
+ // Destroy existing chart instance if it exists
+ if (peePieChartInstance) {
+ peePieChartInstance.destroy();
+ }
+
const colors = {
Light: {
bg: "rgba(255, 215, 0, 0.5)",
@@ -983,7 +1001,7 @@
(label) => colors[label]?.border || "rgba(200, 200, 200, 1)",
);
- new Chart(ctx, {
+ peePieChartInstance = new Chart(ctx, {
type: "pie",
data: {
labels: chartData.labels,
diff --git a/src/baby_monitor/static/feedings.html b/src/baby_monitor/static/feedings.html
index 3336189..241b33a 100644
--- a/src/baby_monitor/static/feedings.html
+++ b/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,