@acorex/charts 20.7.31 → 20.7.32

package/fesm2022/acorex-charts-hierarchy-chart.mjs

@@ -63,6 +63,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
     _dimensions = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "_dimensions" }] : []));
     _nodeElements = signal(new Map(), ...(ngDevMode ? [{ debugName: "_nodeElements" }] : [])); // Store references to node elements
     _chartData = signal(null, ...(ngDevMode ? [{ debugName: "_chartData" }] : [])); // Store the current chart data and layout
+    embeddedViews = [];
     // Inputs
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -259,14 +260,14 @@ class AXHierarchyChartComponent extends AXChartComponent {
                 maxY = Math.max(maxY, y);
             });
             // Calculate the center of the tree
-            const centerX = (minX + maxX) / 2;
-            const centerY = (minY + maxY) / 2;
+            const centerX = Number.isFinite(minX) && Number.isFinite(maxX) ? (minX + maxX) / 2 : 0;
+            const centerY = Number.isFinite(minY) && Number.isFinite(maxY) ? (minY + maxY) / 2 : 0;
             // Create a group for the chart content with proper centering
             const g = svg
                 .append('g')
                 .attr('transform', isHorizontal
                 ? `translate(${margin.left}, ${height / 2 - centerX})`
-                : `translate(${width / 2}, ${margin.top})`);
+                : `translate(${width / 2 - centerX}, ${margin.top})`);
             // Add zoom and pan behavior (replaces AXPanViewDirective)
             const zoom = this.d3
                 .zoom()
@@ -277,8 +278,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
             // Apply zoom behavior to SVG
             svg.call(zoom);
             // Set initial transform to match the centering
-            const initialTransform = this.d3.zoomIdentity
-                .translate(isHorizontal ? margin.left : width / 2, isHorizontal ? height / 2 - centerX : margin.top);
+            const initialTransform = this.d3.zoomIdentity.translate(isHorizontal ? margin.left : width / 2 - centerX, isHorizontal ? height / 2 - centerX : margin.top);
             svg.call(zoom.transform, initialTransform);
             // Draw links between nodes
             const links = g
@@ -427,6 +427,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
                             $implicit: node,
                         };
                         const viewRef = this.viewContainerRef.createEmbeddedView(templateToUse, context);
+                        this.embeddedViews.push(viewRef);
                         viewRef.detectChanges();
                         // Append template contents to the div
                         const nodes = viewRef.rootNodes;
@@ -625,14 +626,20 @@ class AXHierarchyChartComponent extends AXChartComponent {
      * Clear existing chart
      */
     cleanupChart() {
+        this.destroyEmbeddedViews();
         const container = this.chartContainer()?.nativeElement;
         if (!container)
             return;
-        // Remove existing SVG
-        const svg = container.querySelector('svg');
-        if (svg) {
-            svg.remove();
+        container.querySelectorAll('svg, .ax-hierarchy-chart-no-data-message').forEach((el) => el.remove());
+    }
+    ngOnDestroy() {
+        this.cleanupChart();
+    }
+    destroyEmbeddedViews() {
+        for (const view of this.embeddedViews) {
+            view.destroy();
         }
+        this.embeddedViews = [];
     }
     updateChart() {
         this.createChart();
@@ -670,8 +677,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
      * Shows a message when no data is available
      */
     showNoDataMessage(containerElement) {
-        // Clear existing contents first
-        this.d3.select(containerElement).selectAll('*').remove();
+        this.cleanupChart();
         const messageContainer = this.d3
             .select(containerElement)
             .append('div')