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

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

@@ -1,4 +1,4 @@
-import { AXChartComponent, getEasingFunction, computeTooltipPosition, formatLargeNumber } from '@acorex/charts';
+import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, mergeChartOptions, mergeChartMessages, createChartInstanceId, renderChartEmptyMessage, getEasingFunction, computeTooltipPosition, formatLargeNumber } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -13,8 +13,7 @@ const AXGaugeChartDefaultConfig = {
     animationDuration: 750,
     animationEasing: 'cubic-out',
     messages: {
-        noData: 'No data available',
-        noDataHelp: 'Please provide a value to display the gauge',
+        ...AX_CHART_DEFAULT_MESSAGES,
         noDataIcon: 'fa-light fa-gauge',
     },
 };
@@ -23,11 +22,14 @@ const AX_GAUGE_CHART_CONFIG = new InjectionToken('AX_GAUGE_CHART_CONFIG', {
     factory: () => AXGaugeChartDefaultConfig,
 });
 function gaugeChartConfig(config = {}) {
-    const result = {
+    return {
         ...AXGaugeChartDefaultConfig,
         ...config,
+        messages: {
+            ...AXGaugeChartDefaultConfig.messages,
+            ...config.messages,
+        },
     };
-    return result;
 }
 
 /**
@@ -70,12 +72,8 @@ class AXGaugeChartComponent extends AXChartComponent {
     // Inject configuration
     configToken = inject(AX_GAUGE_CHART_CONFIG);
     // Computed configuration options
-    effectiveOptions = computed(() => {
-        return {
-            ...this.configToken,
-            ...this.options(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     // Constants
     TOOLTIP_GAP = 10;
     HALF_CIRCLE_RADIANS = Math.PI;
@@ -85,6 +83,13 @@ class AXGaugeChartComponent extends AXChartComponent {
     TICK_LABEL_CHAR_WIDTH_RATIO = 0.62;
     TICK_LABEL_SIDE_PADDING = 6;
     LABEL_TICK_CLEARANCE = 4;
+    instanceId = createChartInstanceId('ax-gauge');
+    get bgGradientId() {
+        return `${this.instanceId}-bg-gradient`;
+    }
+    thresholdGradientId(index) {
+        return `${this.instanceId}-threshold-gradient-${index}`;
+    }
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -94,20 +99,19 @@ class AXGaugeChartComponent extends AXChartComponent {
         });
         // Watch for changes to redraw the chart
         effect(() => {
-            // Access inputs to track them
             const currentValue = this.value();
             const options = this.effectiveOptions();
-            // Update previous value
             this._prevValue.set(currentValue);
-            // Only update if already rendered
             if (this._rendered()) {
-                // If only the value changed, just update the value display and dial
                 const optionsString = JSON.stringify(options);
-                if (this._prevOptionsString === optionsString) {
+                if (currentValue == null || !this.svgElement) {
+                    this._prevOptionsString = optionsString;
+                    this.updateChart();
+                }
+                else if (this._prevOptionsString === optionsString) {
                     this.updateValueAndDial(currentValue);
                 }
                 else {
-                    // If options changed, recreate the whole chart
                     this._prevOptionsString = optionsString;
                     this.updateChart();
                 }
@@ -139,13 +143,28 @@ class AXGaugeChartComponent extends AXChartComponent {
      * Creates the gauge chart with all elements
      */
     createChart() {
-        // Clear container and create SVG
+        const containerElement = this.chartContainerEl().nativeElement;
         if (this.svgElement) {
             this.svgElement.remove();
+            this.svgElement = null;
+        }
+        containerElement.querySelectorAll('.ax-chart-empty').forEach((el) => el.remove());
+        if (this.value() == null) {
+            if (this.d3) {
+                const messages = this.effectiveMessages();
+                renderChartEmptyMessage(this.d3, containerElement, {
+                    icon: messages.noDataIcon,
+                    title: messages.noData,
+                    help: messages.noDataHelp,
+                });
+            }
+            this._rendered.set(true);
+            return;
         }
+        const currentValue = this.value();
         // Create SVG element
         this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        this.chartContainerEl().nativeElement.appendChild(this.svgElement);
+        containerElement.appendChild(this.svgElement);
         // Get current options
         const options = this.effectiveOptions();
         // Store options string for comparison
@@ -153,7 +172,6 @@ class AXGaugeChartComponent extends AXChartComponent {
         const { minValue, maxValue, showValue, label = '', gaugeWidth, cornerRadius, animationDuration } = options;
         const thresholds = options.thresholds ?? [];
         // Calculate responsive dimensions
-        const containerElement = this.chartContainerEl().nativeElement;
         const containerWidth = containerElement.clientWidth;
         const containerHeight = containerElement.clientHeight;
         // Cache container dimensions
@@ -162,8 +180,8 @@ class AXGaugeChartComponent extends AXChartComponent {
         const width = options.width ?? containerWidth;
         const height = options.height ?? containerHeight;
         // Ensure minimum dimensions
-        const effectiveWidth = Math.max(width, 100);
-        const effectiveHeight = Math.max(height, 50);
+        const effectiveWidth = Math.max(width || 1, 1);
+        const effectiveHeight = Math.max(height || 1, 1);
         // For a semi-circular gauge, width should be approximately twice the height
         const size = Math.min(effectiveWidth, effectiveHeight * 2);
         // Calculate margin as percentage of size (5-8% with reasonable bounds)
@@ -212,10 +230,10 @@ class AXGaugeChartComponent extends AXChartComponent {
         // Draw tick marks
         this.drawTicks(chartGroup, outerRadius, minValue, maxValue, size, tickCount, tickFontPx);
         // Draw the dial/needle with animation
-        this.drawDial(chartGroup, radius, this.value(), minValue, maxValue, animationDuration);
+        this.drawDial(chartGroup, radius, currentValue, minValue, maxValue, animationDuration);
         // Draw the value display (after the dial so it's on top)
         if (showValue) {
-            this.drawValueDisplay(chartGroup, this.value(), label, radius, size);
+            this.drawValueDisplay(chartGroup, currentValue, label, radius, size);
         }
         // Hide tooltip initially
         this._tooltipVisible.set(false);
@@ -269,7 +287,7 @@ class AXGaugeChartComponent extends AXChartComponent {
             .append('path')
             .attr('d', backgroundArc)
             .attr('class', 'gauge-arc gauge-base')
-            .attr('fill', 'url(#gauge-bg-gradient)')
+            .attr('fill', `url(#${this.bgGradientId})`)
             .attr('filter', 'drop-shadow(0px 2px 3px rgba(0,0,0,0.1))');
         // Add tooltip for single arc if no thresholds
         if (!this.effectiveOptions().thresholds || this.effectiveOptions().thresholds.length === 0) {
@@ -319,7 +337,7 @@ class AXGaugeChartComponent extends AXChartComponent {
                 startAngle: previousEndAngle,
                 endAngle,
             }))
-                .attr('fill', threshold.color || `url(#threshold-gradient-${i})`)
+                .attr('fill', threshold.color || `url(#${this.thresholdGradientId(i)})`)
                 .attr('class', 'gauge-arc threshold-arc')
                 .attr('data-value', threshold.value)
                 .style('cursor', 'pointer');
@@ -354,7 +372,7 @@ class AXGaugeChartComponent extends AXChartComponent {
                 startAngle: previousEndAngle,
                 endAngle: this.QUARTER_CIRCLE_RADIANS,
             }))
-                .attr('fill', 'url(#gauge-bg-gradient)')
+                .attr('fill', `url(#${this.bgGradientId})`)
                 .attr('class', 'gauge-arc threshold-arc')
                 .style('cursor', 'pointer');
             // Add tooltip for the last segment
@@ -444,6 +462,7 @@ class AXGaugeChartComponent extends AXChartComponent {
             this.svgElement.remove();
             this.svgElement = null;
         }
+        this.chartContainerEl()?.nativeElement.querySelectorAll('.ax-chart-empty').forEach((el) => el.remove());
         this._tooltipVisible.set(false);
         this._lastContainerRect = null;
     }
@@ -455,7 +474,7 @@ class AXGaugeChartComponent extends AXChartComponent {
         // Create a radial gradient for the background
         const bgGradient = defs
             .append('radialGradient')
-            .attr('id', 'gauge-bg-gradient')
+            .attr('id', this.bgGradientId)
             .attr('cx', '50%')
             .attr('cy', '50%')
             .attr('r', '50%')
@@ -479,7 +498,7 @@ class AXGaugeChartComponent extends AXChartComponent {
             thresholds.forEach((threshold, i) => {
                 const gradient = defs
                     .append('linearGradient')
-                    .attr('id', `threshold-gradient-${i}`)
+                    .attr('id', this.thresholdGradientId(i))
                     .attr('gradientUnits', 'userSpaceOnUse')
                     .attr('x1', '-1')
                     .attr('y1', '0')
@@ -710,21 +729,21 @@ class AXGaugeChartComponent extends AXChartComponent {
      * Scales a value to an angle (in radians)
      */
     scaleValueToAngle(value, min, max) {
-        const valueRange = max - min;
+        const valueRange = max - min || 1;
         return ((value - min) / valueRange) * this.HALF_CIRCLE_RADIANS - this.QUARTER_CIRCLE_RADIANS;
     }
     /**
      * Scales a value to an angle for color arcs (in radians)
      */
     scaleValueToColorAngle(value, min, max) {
-        const valueRange = max - min;
+        const valueRange = max - min || 1;
         return ((value - min) / valueRange) * this.HALF_CIRCLE_RADIANS - this.QUARTER_CIRCLE_RADIANS;
     }
     /**
      * Converts an angle back to a value
      */
     angleToValue(angle, min, max) {
-        const valueRange = max - min;
+        const valueRange = max - min || 1;
         return min + ((angle + this.QUARTER_CIRCLE_RADIANS) / this.HALF_CIRCLE_RADIANS) * valueRange;
     }
     /**
@@ -734,11 +753,11 @@ class AXGaugeChartComponent extends AXChartComponent {
         return radians * this.DEGREES_PER_RADIAN;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer>\n  <ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n</div>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-gauge-chart .ax-gauge-chart svg g:has(text){font-family:inherit}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\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: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer>\n  <ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></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-gauge-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-gauge-chart .ax-gauge-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: AXGaugeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer>\n  <ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n</div>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-gauge-chart .ax-gauge-chart svg g:has(text){font-family:inherit}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"] }]
+            args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer>\n  <ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></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-gauge-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}ax-gauge-chart .ax-gauge-chart svg g:has(text){font-family:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
 /**