@acorex/charts 20.1.25 → 20.1.26

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

@@ -21,6 +21,11 @@ const AXHierarchyChartDefaultConfig = {
     expandAll: false,
     animationDuration: 100,
     animationEasing: 'cubic-out',
+    messages: {
+        noData: 'No data available',
+        noDataHelp: 'Please provide hierarchy data to display the chart',
+        noDataIcon: 'fa-light fa-sitemap',
+    },
 };
 const AX_HIERARCHY_CHART_CONFIG = new InjectionToken('AX_HIERARCHY_CHART_CONFIG', {
     providedIn: 'root',
@@ -88,6 +93,18 @@ class AXHierarchyChartComponent extends NXComponent {
             ...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" }] : []));
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -667,7 +684,7 @@ class AXHierarchyChartComponent extends NXComponent {
             .attr('class', 'ax-hierarchy-chart-no-data-icon')
             .style('opacity', '0.6')
             .style('margin-bottom', '0.75rem')
-            .html('<i class="fa-light fa-sitemap fa-2x"></i>');
+            .html(`<i class="${this.effectiveMessages().noDataIcon} fa-2x"></i>`);
         // Add text message
         messageContainer
             .append('div')
@@ -675,21 +692,21 @@ class AXHierarchyChartComponent extends NXComponent {
             .style('font-size', '1rem')
             .style('font-weight', '600')
             .style('margin-bottom', '0.5rem')
-            .text('No data available');
+            .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('Please provide data to display the chart');
+            .text(this.effectiveMessages().noDataHelp);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", 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 axPanView class=\"ax-hierarchy-chart\" #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: var(--ax-sys-color-lightest-surface);color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:visible}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-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;box-shadow:0 2px 12px #00000014;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"], dependencies: [{ kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "freeMode", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", 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 axPanView class=\"ax-hierarchy-chart\" #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: var(--ax-sys-color-lightest-surface);color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:visible}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;box-shadow:0 2px 12px #00000014;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"], dependencies: [{ kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "freeMode", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHierarchyChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-hierarchy-chart', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPanViewDirective], template: "<div axPanView class=\"ax-hierarchy-chart\" #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: var(--ax-sys-color-lightest-surface);color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:visible}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-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;box-shadow:0 2px 12px #00000014;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', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPanViewDirective], template: "<div axPanView class=\"ax-hierarchy-chart\" #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: var(--ax-sys-color-lightest-surface);color:rgb(var(--ax-comp-hierarchy-chart-text-color));background-color:rgb(var(--ax-comp-hierarchy-chart-bg-color))}ax-hierarchy-chart .ax-hierarchy-chart{width:100%;height:100%;min-height:300px;position:relative;overflow:visible}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;box-shadow:0 2px 12px #00000014;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: () => [] });
 
 /**