axidio-styleguide-library1-v2 0.1.74 → 0.1.75

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -7176,21 +7176,57 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
     }
     isZoomOutSelected(isZoomOut) {
         this.isZoomedOut = isZoomOut;
-        this.ngOnChanges();
+        this.clearChart();
+        setTimeout(() => {
+            this.initializeStackedChart();
+        }, 10);
     }
-    ngOnChanges() {
-        let self = this;
-        d3.select('#' + self.uniqueId).remove();
-        this.initializeStackedChart();
+    ngOnChanges(changes) {
+        // Only reinitialize if chartData actually changed and it's not the first change
+        if (changes.chartData && !changes.chartData.firstChange) {
+            this.clearChart();
+            // Small timeout to ensure DOM cleanup is complete
+            setTimeout(() => {
+                this.initializeStackedChart();
+            }, 10);
+        }
+        // Handle configuration changes
+        if (changes.customChartConfiguration && !changes.customChartConfiguration.firstChange) {
+            this.clearChart();
+            setTimeout(() => {
+                this.initializeStackedChart();
+            }, 10);
+        }
+    }
+    clearChart() {
+        try {
+            // Remove all content from container
+            const container = d3.select(this.containerElt.nativeElement);
+            container.selectAll('*').remove();
+            // Remove by unique ID as backup
+            d3.select('#' + this.uniqueId).remove();
+            // Clear any event listeners
+            container.on('click', null);
+            container.on('mouseenter', null);
+            container.on('mouseout', null);
+        }
+        catch (error) {
+            console.warn('Error clearing chart:', error);
+        }
     }
     onResized(event) {
         let self = this;
-        setTimeout(function () {
-            d3.select('#' + self.uniqueId).remove();
+        this.clearChart();
+        setTimeout(() => {
             self.initializeStackedChart();
-        }.bind(self), 10);
+        }, 20); // Slightly longer timeout for resize events
+    }
+    ngOnInit() {
+        // Initialize chart on component init
+        if (this.chartData && this.chartData.data) {
+            this.initializeStackedChart();
+        }
     }
-    ngOnInit() { }
     initializeStackedChart() {
         var self = this;
         let data = [];