@forgeroute/ui 0.3.3 → 0.3.4

package/fesm2022/forgeroute-ui.mjs

@@ -10560,7 +10560,12 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
+let registered = false;
+function registerChartParts() {
+	if (registered) return;
+	Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
+	registered = true;
+}
 const VALUE_LABELS = {
 	id: "uiBarChartValueLabels",
 	afterDatasetsDraw(chart) {
@@ -10606,53 +10611,56 @@ var BarChartComponent = class BarChartComponent {
 		effect(() => {
 			const s = this.series();
 			const canvas = this.canvas().nativeElement;
-			if (!this.chart) this.zone.runOutsideAngular(() => {
-				this.chart = new Chart(canvas, {
-					type: "bar",
-					data: {
-						labels: s.labels,
-						datasets: [{
-							data: s.data,
-							backgroundColor: s.color,
-							hoverBackgroundColor: s.hoverColor,
-							borderRadius: 3,
-							borderSkipped: false
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						animation: false,
-						layout: { padding: { top: 20 } },
-						plugins: {
-							legend: { display: false },
-							tooltip: { callbacks: { label: (item) => this.tooltipText(Number(item.raw)) } }
+			if (!this.chart) {
+				registerChartParts();
+				this.zone.runOutsideAngular(() => {
+					this.chart = new Chart(canvas, {
+						type: "bar",
+						data: {
+							labels: s.labels,
+							datasets: [{
+								data: s.data,
+								backgroundColor: s.color,
+								hoverBackgroundColor: s.hoverColor,
+								borderRadius: 3,
+								borderSkipped: false
+							}]
 						},
-						scales: {
-							y: {
-								beginAtZero: true,
-								ticks: {
-									precision: 0,
-									color: "#94a3b8",
-									font: { size: 11 }
-								},
-								grid: { color: "#e2e8f0" },
-								border: { display: false }
+						options: {
+							responsive: true,
+							maintainAspectRatio: false,
+							animation: false,
+							layout: { padding: { top: 20 } },
+							plugins: {
+								legend: { display: false },
+								tooltip: { callbacks: { label: (item) => this.tooltipText(Number(item.raw)) } }
 							},
-							x: {
-								grid: { display: false },
-								ticks: {
-									maxRotation: 0,
-									color: "#94a3b8",
-									font: { size: 10 }
+							scales: {
+								y: {
+									beginAtZero: true,
+									ticks: {
+										precision: 0,
+										color: "#94a3b8",
+										font: { size: 11 }
+									},
+									grid: { color: "#e2e8f0" },
+									border: { display: false }
 								},
-								border: { display: false }
+								x: {
+									grid: { display: false },
+									ticks: {
+										maxRotation: 0,
+										color: "#94a3b8",
+										font: { size: 10 }
+									},
+									border: { display: false }
+								}
 							}
-						}
-					},
-					plugins: [VALUE_LABELS]
+						},
+						plugins: [VALUE_LABELS]
+					});
 				});
-			});
+			}
 			const chart = this.chart;
 			chart.data.labels = s.labels;
 			const ds = chart.data.datasets[0];