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

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

@@ -1,4 +1,4 @@
-import { AXChartComponent, AX_CHART_COLOR_PALETTE, formatLargeNumber, getChartColor, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
+import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, mergeChartMessages, formatLargeNumber, getChartColor, getEasingFunction, computeTooltipPosition, renderChartEmptyMessage } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, viewChild, signal, inject, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -27,12 +27,8 @@ const AXLineChartDefaultConfig = {
     animationDuration: 1000,
     animationEasing: 'cubic-out',
     messages: {
-        noData: 'No data available',
-        noDataHelp: 'Please provide data to display the chart',
-        allHidden: 'All series are hidden',
-        allHiddenHelp: 'Click legend items to show series in the chart',
+        ...AX_CHART_DEFAULT_MESSAGES,
         noDataIcon: 'fa-light fa-chart-line',
-        allHiddenIcon: 'fa-light fa-eye-slash',
     },
 };
 const AX_LINE_CHART_CONFIG = new InjectionToken('AX_LINE_CHART_CONFIG', {
@@ -40,11 +36,18 @@ const AX_LINE_CHART_CONFIG = new InjectionToken('AX_LINE_CHART_CONFIG', {
     factory: () => AXLineChartDefaultConfig,
 });
 function lineChartConfig(config = {}) {
-    const result = {
+    return {
         ...AXLineChartDefaultConfig,
         ...config,
+        margins: {
+            ...AXLineChartDefaultConfig.margins,
+            ...config.margins,
+        },
+        messages: {
+            ...AXLineChartDefaultConfig.messages,
+            ...config.messages,
+        },
     };
-    return result;
 }
 
 /**
@@ -87,29 +90,11 @@ class AXLineChartComponent extends AXChartComponent {
     configToken = inject(AX_LINE_CHART_CONFIG);
     // Inject the chart colors
     chartColors = inject(AX_CHART_COLOR_PALETTE);
-    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 data to display the chart',
-            allHidden: 'All series are hidden',
-            allHiddenHelp: 'Click legend items to show series in the chart',
-            noDataIcon: 'fa-light fa-chart-line',
-            allHiddenIcon: 'fa-light fa-eye-slash',
-        };
-        return {
-            ...defaultMessages,
-            ...this.effectiveOptions().messages,
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
+    effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     // Layout & Dimensions
-    MIN_DIMENSION = 100;
+    MIN_DIMENSION = 1;
     DEFAULT_MARGIN_TOP = 12;
     DEFAULT_MARGIN_RIGHT = 12;
     DEFAULT_MARGIN_BOTTOM = 8;
@@ -488,7 +473,7 @@ class AXLineChartComponent extends AXChartComponent {
         targetPointsGroup
             .selectAll('circle.ax-line-chart-point')
             .attr('r', (this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS) * this.POINT_HIGHLIGHT_MULTIPLIER)
-            .classed('ax-chart-highlighted-path', true);
+            .classed('ax-chart-highlighted-point', true);
     }
     toggleSegment(id) {
         if (this.hiddenSeries.has(id)) {
@@ -520,7 +505,7 @@ class AXLineChartComponent extends AXChartComponent {
         // Clear previous SVG and any empty-state messages (preserve tooltip component)
         this.d3
             .select(containerElement)
-            .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
+            .selectAll('svg, .ax-chart-empty, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
             .remove();
         if (allSeriesData.length === 0 || allSeriesData.every((series) => !series.data || series.data.length === 0)) {
             this.showNoDataMessage(containerElement);
@@ -558,7 +543,7 @@ class AXLineChartComponent extends AXChartComponent {
         if (this.svg) {
             this.d3
                 ?.select(this.chartContainerEl()?.nativeElement)
-                .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
+                .selectAll('svg, .ax-chart-empty, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
                 .remove();
             this.svg = null;
             this.chart = null;
@@ -1233,72 +1218,20 @@ class AXLineChartComponent extends AXChartComponent {
         });
     }
     showNoDataMessage(containerElement) {
-        // Remove only chart SVG and previous empty-state messages to avoid removing tooltip
-        this.d3
-            .select(containerElement)
-            .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
-            .remove();
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            .attr('class', 'ax-line-chart-no-data-message')
-            .style('position', 'absolute')
-            .style('left', '50%')
-            .style('top', '50%')
-            .style('transform', 'translate(-50%, -50%)');
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-line-chart-no-data-icon')
-            .style('opacity', '0.6')
-            .style('margin-bottom', '0.75rem')
-            .html(`<i class="${this.effectiveMessages().noDataIcon} fa-2x"></i>`);
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-line-chart-no-data-text')
-            .style('font-size', '1rem')
-            .style('font-weight', '600')
-            .style('margin-bottom', '0.5rem')
-            .text(this.effectiveMessages().noData);
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-line-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,
+        });
     }
     showAllSeriesHiddenMessage(containerElement) {
-        // Remove only chart SVG and previous empty-state messages to avoid removing tooltip
-        this.d3
-            .select(containerElement)
-            .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
-            .remove();
-        const messageContainer = this.d3
-            .select(containerElement)
-            .append('div')
-            .attr('class', 'ax-line-chart-all-hidden-message') // Different class
-            .style('position', 'absolute')
-            .style('left', '50%')
-            .style('top', '50%')
-            .style('transform', 'translate(-50%, -50%)');
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-line-chart-all-hidden-icon')
-            .style('opacity', '0.6')
-            .style('margin-bottom', '0.75rem')
-            .html(`<i class="${this.effectiveMessages().allHiddenIcon} fa-2x"></i>`); // Different icon
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-line-chart-all-hidden-text')
-            .style('font-size', '1rem')
-            .style('font-weight', '600')
-            .style('margin-bottom', '0.5rem')
-            .text(this.effectiveMessages().allHidden);
-        messageContainer
-            .append('div')
-            .attr('class', 'ax-line-chart-all-hidden-help')
-            .style('font-size', '0.8rem')
-            .style('opacity', '0.6')
-            .text(this.effectiveMessages().allHiddenHelp);
+        const messages = this.effectiveMessages();
+        renderChartEmptyMessage(this.d3, containerElement, {
+            icon: messages.allHiddenIcon,
+            title: messages.allHidden,
+            help: messages.allHiddenHelp,
+        });
     }
     handleOverlappingPointsHover(event, overlappingPoints) {
         if (this.effectiveOptions().showTooltip === false)
@@ -1316,11 +1249,11 @@ class AXLineChartComponent extends AXChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.25rem,.6vw,.5rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</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-line-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;min-height:0;box-sizing:border-box;padding:clamp(.25rem,.6vw,.5rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLineChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;box-sizing:border-box;padding:clamp(.25rem,.6vw,.5rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
+            args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</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-line-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: 0, 0, 0, 0;--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;min-height:0;box-sizing:border-box;padding:clamp(.25rem,.6vw,.5rem);border-radius:.5rem;overflow:hidden;contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}\n"] }]
         }] });
 
 /**