fix: fix chart recreation (#257)

## Summary

Fix charts recreation.

The charts were not being destroyed when the component was unmounted,
causing an error in the chart recreation process.

web/src/routes/backOffice/dashboard/partials/ContainersAdded.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from "svelte";
 	import { Chart } from "chart.js";
 	import Card from "../../components/Card.svelte";
 	import type { Container } from "../../../../domain/container";
@@ -21,7 +22,12 @@
 	/**
 	 * The canvas element where the chart is rendered.
 	 */
-	let canvas: HTMLCanvasElement;
+	let canvas: HTMLCanvasElement | undefined;
+
+	/**
+	 * The chart being rendered.
+	 */
+	let chart: Chart<"line"> | undefined;
 
 	/**
 	 * Retrieves a map with the month index and the corresponding names.
@@ -45,6 +51,11 @@
 	 * @param containers Containers.
 	 */
 	function buildChart(containers: Container[]) {
+		// Exit if canvas is not bound to DOM element.
+		if (!canvas) {
+			return;
+		}
+
 		// Build a map with the amount of containers added per month.
 		const containersPerMonth = new Map<number, number>();
 		const monthNames = getMonths();
@@ -79,7 +90,7 @@
 			return acc;
 		}, data);
 
-		new Chart(canvas, {
+		chart = new Chart(canvas, {
 			type: "line",
 			data: {
 				labels,
@@ -113,6 +124,11 @@
 		loading = false;
 	}
 
+	onDestroy(() => {
+		// Destroy chart before the component destruction.
+		chart?.destroy();
+	});
+
 	containersPromise.then(containers => buildChart(containers));
 </script>
 

web/src/routes/backOffice/dashboard/partials/ContainersByCategory.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from "svelte";
 	import { Chart } from "chart.js";
 	import Card from "../../components/Card.svelte";
 	import type {
@@ -22,7 +23,12 @@
 	/**
 	 * The canvas element where the chart is rendered.
 	 */
-	let canvas: HTMLCanvasElement;
+	let canvas: HTMLCanvasElement | undefined;
+
+	/**
+	 * The chart being rendered.
+	 */
+	let chart: Chart<"doughnut"> | undefined;
 
 	/**
 	 * The color for each respective container category.
@@ -42,6 +48,11 @@
 	 * @param containers Containers.
 	 */
 	function buildChart(containers: Container[]) {
+		// Exit if canvas is not bound to DOM element.
+		if (!canvas) {
+			return;
+		}
+
 		// Build a map with the amount of containers per container category.
 		const containerAmountPerCategory = new Map<ContainerCategory, number>();
 		for (const container of containers) {
@@ -65,7 +76,7 @@
 			category => categoryColors[category],
 		);
 
-		new Chart(canvas, {
+		chart = new Chart(canvas, {
 			type: "doughnut",
 			data: {
 				labels,
@@ -88,6 +99,11 @@
 		loading = false;
 	}
 
+	onDestroy(() => {
+		// Destroy chart before the component destruction.
+		chart?.destroy();
+	});
+
 	containersPromise.then(containers => buildChart(containers));
 </script>
 

web/src/routes/backOffice/dashboard/partials/ContainersByMunicipality.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from "svelte";
 	import { Chart } from "chart.js";
 	import Card from "../../components/Card.svelte";
 	import type { Container } from "../../../../domain/container";
@@ -19,13 +20,23 @@
 	/**
 	 * The canvas element where the chart is rendered.
 	 */
-	let canvas: HTMLCanvasElement;
+	let canvas: HTMLCanvasElement | undefined;
+
+	/**
+	 * The chart being rendered.
+	 */
+	let chart: Chart<"bar"> | undefined;
 
 	/**
 	 * Builds a chart with the containers.
 	 * @param containers Containers.
 	 */
 	function buildChart(containers: Container[]) {
+		// Exit if canvas is not bound to DOM element.
+		if (!canvas) {
+			return;
+		}
+
 		// Build a map with the amount of containers per municipality.
 		const containersPerMunicipality = new Map<string, number>();
 		for (const container of containers) {
@@ -44,7 +55,7 @@
 		// Get chart data.
 		const data = Array.from(containersPerMunicipality.values());
 
-		new Chart(canvas, {
+		chart = new Chart(canvas, {
 			type: "bar",
 			data: {
 				labels,
@@ -72,6 +83,11 @@
 		loading = false;
 	}
 
+	onDestroy(() => {
+		// Destroy chart before the component destruction.
+		chart?.destroy();
+	});
+
 	containersPromise.then(containers => buildChart(containers));
 </script>