@acorex/charts 21.0.2-next.32 → 21.0.2-next.34

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

@@ -49,7 +49,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
     // Chart container reference
     chartContainer = viewChild.required('chartContainer');
     // Custom node template provided by the user
-    customNodeTemplate = contentChild('nodeTemplate', ...(ngDevMode ? [{ debugName: "customNodeTemplate" }] : []));
+    customNodeTemplate = contentChild('nodeTemplate', ...(ngDevMode ? [{ debugName: "customNodeTemplate" }] : /* istanbul ignore next */ []));
     // Services
     ngZone = inject(NgZone);
     viewContainerRef = inject(ViewContainerRef);
@@ -57,16 +57,17 @@ class AXHierarchyChartComponent extends AXChartComponent {
     // D3 instance
     d3;
     // Internal state signals
-    _expandedNodes = signal(new Map(), ...(ngDevMode ? [{ debugName: "_expandedNodes" }] : []));
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
-    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
-    _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
+    _expandedNodes = signal(new Map(), ...(ngDevMode ? [{ debugName: "_expandedNodes" }] : /* istanbul ignore next */ []));
+    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
+    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
+    _dimensions = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "_dimensions" }] : /* istanbul ignore next */ []));
+    _nodeElements = signal(new Map(), ...(ngDevMode ? [{ debugName: "_nodeElements" }] : /* istanbul ignore next */ [])); // Store references to node elements
+    _chartData = signal(null, ...(ngDevMode ? [{ debugName: "_chartData" }] : /* istanbul ignore next */ [])); // Store the current chart data and layout
+    embeddedViews = [];
     // Inputs
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
-    nodeTemplate = input(null, ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    nodeTemplate = input(null, ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
     // Outputs
     itemClick = output();
     nodeToggle = output();
@@ -75,17 +76,17 @@ class AXHierarchyChartComponent extends AXChartComponent {
         const data = this.data();
         // Handle both single node and array formats
         return Array.isArray(data) ? { id: 'root', children: data } : data;
-    }, ...(ngDevMode ? [{ debugName: "processedData" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "processedData" }] : /* istanbul ignore next */ []));
     // Check if custom template is available
     hasCustomTemplate = computed(() => {
         return Boolean(this.customNodeTemplate() || this.nodeTemplate());
-    }, ...(ngDevMode ? [{ debugName: "hasCustomTemplate" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "hasCustomTemplate" }] : /* istanbul ignore next */ []));
     effectiveOptions = computed(() => {
         return {
             ...this.configToken,
             ...this.options(),
         };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
     // Messages with defaults
     effectiveMessages = computed(() => {
         const defaultMessages = {
@@ -97,7 +98,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
             ...defaultMessages,
             ...this.effectiveOptions().messages,
         };
-    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -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')
@@ -710,13 +716,13 @@ class AXHierarchyChartComponent extends AXChartComponent {
             .style('opacity', '0.6')
             .text(this.effectiveMessages().noDataHelp);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXHierarchyChartComponent, isStandalone: true, selector: "ax-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", nodeToggle: "nodeToggle" }, queries: [{ propertyName: "customNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXHierarchyChartComponent, isStandalone: true, selector: "ax-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", nodeToggle: "nodeToggle" }, queries: [{ propertyName: "customNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-hierarchy-chart', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: ["ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:300px;--ax-comp-hierarchy-chart-node-color: var(--ax-sys-color-primary-500);--ax-comp-hierarchy-chart-node-stroke-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-link-color: var(--ax-sys-color-primary-400);--ax-comp-hierarchy-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-hierarchy-chart-bg-color: 0, 0, 0, 0;color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgba(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:hidden}ax-hierarchy-chart .ax-hierarchy-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-hierarchy-chart .ax-hierarchy-chart svg g:has(text){font-family:inherit}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-hierarchy-chart .ax-hierarchy-chart-no-data-message .ax-hierarchy-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { chartContainer: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }], customNodeTemplate: [{ type: i0.ContentChild, args: ['nodeTemplate', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }] } });
 
 /**
  * Generated bundle index. Do not edit.