@acorex/charts 21.0.3-next.26 → 21.0.3-next.29

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

@@ -1,4 +1,4 @@
-import { AXChartComponent } from '@acorex/charts';
+import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, mergeChartOptions, mergeChartMessages, renderChartEmptyMessage } from '@acorex/charts';
 import * as i0 from '@angular/core';
 import { InjectionToken, viewChild, contentChild, inject, NgZone, ViewContainerRef, signal, input, output, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 
@@ -19,8 +19,7 @@ const AXHierarchyChartDefaultConfig = {
     animationDuration: 100,
     animationEasing: 'cubic-out',
     messages: {
-        noData: 'No data available',
-        noDataHelp: 'Please provide hierarchy data to display the chart',
+        ...AX_CHART_DEFAULT_MESSAGES,
         noDataIcon: 'fa-light fa-sitemap',
     },
 };
@@ -29,11 +28,18 @@ const AX_HIERARCHY_CHART_CONFIG = new InjectionToken('AX_HIERARCHY_CHART_CONFIG'
     factory: () => AXHierarchyChartDefaultConfig,
 });
 function hierarchyChartConfig(config = {}) {
-    const result = {
+    return {
         ...AXHierarchyChartDefaultConfig,
         ...config,
+        margin: {
+            ...AXHierarchyChartDefaultConfig.margin,
+            ...config.margin,
+        },
+        messages: {
+            ...AXHierarchyChartDefaultConfig.messages,
+            ...config.messages,
+        },
     };
-    return result;
 }
 
 /**
@@ -81,24 +87,9 @@ class AXHierarchyChartComponent extends AXChartComponent {
     hasCustomTemplate = computed(() => {
         return Boolean(this.customNodeTemplate() || this.nodeTemplate());
     }, ...(ngDevMode ? [{ debugName: "hasCustomTemplate" }] : []));
-    effectiveOptions = computed(() => {
-        return {
-            ...this.configToken,
-            ...this.options(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
     // Messages with defaults
-    effectiveMessages = computed(() => {
-        const defaultMessages = {
-            noData: 'No data available',
-            noDataHelp: 'Please provide hierarchy data to display the chart',
-            noDataIcon: 'fa-light fa-sitemap',
-        };
-        return {
-            ...defaultMessages,
-            ...this.effectiveOptions().messages,
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
+    effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -168,8 +159,8 @@ class AXHierarchyChartComponent extends AXChartComponent {
         const container = this.chartContainer().nativeElement;
         const options = this.effectiveOptions();
         const containerRect = container.getBoundingClientRect();
-        const width = options.width || Math.max(containerRect.width, 300);
-        const height = options.height || Math.max(containerRect.height, 400);
+        const width = options.width || Math.max(containerRect.width || 0, 1);
+        const height = options.height || Math.max(containerRect.height || 0, 1);
         this._dimensions.set({ width, height });
     }
     /**
@@ -630,7 +621,7 @@ class AXHierarchyChartComponent extends AXChartComponent {
         const container = this.chartContainer()?.nativeElement;
         if (!container)
             return;
-        container.querySelectorAll('svg, .ax-hierarchy-chart-no-data-message').forEach((el) => el.remove());
+        container.querySelectorAll('svg, .ax-chart-empty, .ax-hierarchy-chart-no-data-message').forEach((el) => el.remove());
     }
     ngOnDestroy() {
         this.cleanupChart();
@@ -677,51 +668,19 @@ class AXHierarchyChartComponent extends AXChartComponent {
      * Shows a message when no data is available
      */
     showNoDataMessage(containerElement) {
-        this.cleanupChart();
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            .attr('class', 'ax-hierarchy-chart-no-data-message')
-            .style('position', 'absolute')
-            .style('left', '50%')
-            .style('top', '50%')
-            .style('transform', 'translate(-50%, -50%)')
-            .style('text-align', 'center')
-            .style('background-color', 'rgb(var(--ax-comp-hierarchy-chart-bg-color))')
-            .style('padding', '1.5rem')
-            .style('border-radius', '0.5rem')
-            .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
-            .style('width', '80%')
-            .style('max-width', '300px');
-        // Add an icon
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-hierarchy-chart-no-data-icon')
-            .style('opacity', '0.6')
-            .style('margin-bottom', '0.75rem')
-            .html(`<i class="${this.effectiveMessages().noDataIcon} fa-2x"></i>`);
-        // Add text message
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-hierarchy-chart-no-data-text')
-            .style('font-size', '1rem')
-            .style('font-weight', '600')
-            .style('margin-bottom', '0.5rem')
-            .text(this.effectiveMessages().noData);
-        // Add help text
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-hierarchy-chart-no-data-help')
-            .style('font-size', '0.8rem')
-            .style('opacity', '0.6')
-            .text(this.effectiveMessages().noDataHelp);
+        const messages = this.effectiveMessages();
+        renderChartEmptyMessage(this.d3, containerElement, {
+            icon: messages.noDataIcon,
+            title: messages.noData,
+            help: messages.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 ɵ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-chart-empty{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1rem;pointer-events:none}.ax-chart-empty__card{text-align:center;padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px;box-sizing:border-box}.ax-chart-empty__icon{opacity:.6;margin-bottom:.75rem}.ax-chart-empty__title{font-size:1rem;font-weight:600;margin-bottom:.5rem}.ax-chart-empty__help{font-size:.8rem;opacity:.6}ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--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:0;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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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"] }]
+            args: [{ selector: 'ax-hierarchy-chart', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-hierarchy-chart\" role=\"img\" #chartContainer></div>\n", styles: [".ax-chart-empty{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1rem;pointer-events:none}.ax-chart-empty__card{text-align:center;padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px;box-sizing:border-box}.ax-chart-empty__icon{opacity:.6;margin-bottom:.75rem}.ax-chart-empty__title{font-size:1rem;font-weight:600;margin-bottom:.5rem}.ax-chart-empty__help{font-size:.8rem;opacity:.6}ax-hierarchy-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--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:0;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}\n"] }]
         }], ctorParameters: () => [] });
 
 /**