cats-charts 0.0.83 → 0.0.85

package/fesm2022/cats-charts.mjs

@@ -1594,8 +1594,10 @@ class LinesChart {
                     show: this.config?.showXAxisLabel ?? true,
                     color: '#434A51',
                     fontSize: 12,
-                    alignMinLabel: 'left',
-                    alignMaxLabel: 'right',
+                    ...(!this.config?.xAxis?.axisLabel?.rotate && {
+                        alignMinLabel: 'left',
+                        alignMaxLabel: 'right',
+                    }),
                     ...(this.config?.xAxis?.axisLabel || {}),
                 },
                 nameTextStyle: {
@@ -5073,6 +5075,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 echarts.use([GaugeChart$1, GraphicComponent, TooltipComponent, TitleComponent, CanvasRenderer]);
+const DEFAULT_GAUGE_CENTER = ['50%', '84%'];
+const DEFAULT_GAUGE_RADIUS = '140%';
 class GaugeChart {
     config = {};
     theme;
@@ -5080,6 +5084,7 @@ class GaugeChart {
     chartEvent = new EventEmitter();
     chartOption = {};
     chartInstance;
+    chartResizeObserver;
     previousReactiveSignature = '';
     ngOnChanges(changes) {
         if (changes['theme'] && this.chartInstance) {
@@ -5099,7 +5104,7 @@ class GaugeChart {
     }
     buildOption() {
         if (this.config.option) {
-            this.chartOption = this.config.option;
+            this.chartOption = this.applyTargetPointerSizing(this.config.option);
             if (this.chartInstance) {
                 this.chartInstance.setOption(this.chartOption, true);
             }
@@ -5146,8 +5151,8 @@ class GaugeChart {
             max: displayMax,
             startAngle: 180,
             endAngle: 0,
-            center: ['50%', '68%'],
-            radius: '90%',
+            center: [...DEFAULT_GAUGE_CENTER],
+            radius: DEFAULT_GAUGE_RADIUS,
             splitNumber,
             progress: {
                 show: progressShow,
@@ -5170,6 +5175,9 @@ class GaugeChart {
             pointer: {
                 show: false,
             },
+            title: {
+                show: false,
+            },
             anchor: {
                 show: false,
             },
@@ -5196,7 +5204,18 @@ class GaugeChart {
                 distance: this.config.midValuePosition === 'inside' ? -36 : 10,
                 color: '#111827',
                 fontSize: 10,
+                align: 'center',
+                verticalAlign: 'middle',
                 formatter: (value) => this.axisLabelFormatter(value, displayMin, displayMax, showMidValue),
+                rich: {
+                    gaugeLabel: {
+                        padding: showMidValue ? [0, 0, 0, 0] : [16, 0, 0, 0],
+                        color: '#434a51',
+                        fontWeight: 600,
+                        align: 'center',
+                        verticalAlign: 'middle',
+                    },
+                },
             },
             detail: {
                 offsetCenter: [0, '-10%'],
@@ -5227,6 +5246,7 @@ class GaugeChart {
         gaugeSeries['min'] = displayMin;
         gaugeSeries['max'] = displayMax;
         gaugeSeries['data'] = [{ value: displayValue, name: this.config.name ?? 'Value' }];
+        const targetPointer = this.calculateTargetPointerGeometry(gaugeSeries);
         const generatedChartOption = {
             backgroundColor: this.config.backgroundColor ?? 'transparent',
             title: {
@@ -5251,8 +5271,8 @@ class GaugeChart {
                             max: displayMax,
                             startAngle: 180,
                             endAngle: 0,
-                            center: ['50%', '68%'],
-                            radius: '90%',
+                            center: gaugeSeries['center'] ?? [...DEFAULT_GAUGE_CENTER],
+                            radius: gaugeSeries['radius'] ?? DEFAULT_GAUGE_RADIUS,
                             axisLine: {
                                 lineStyle: {
                                     width: 0,
@@ -5262,9 +5282,7 @@ class GaugeChart {
                             pointer: {
                                 show: true,
                                 icon: 'rect',
-                                width: 6,
-                                length: '18%',
-                                offsetCenter: [0, '-91%'],
+                                ...targetPointer,
                                 itemStyle: {
                                     color: '#374151',
                                 },
@@ -5273,6 +5291,7 @@ class GaugeChart {
                             axisTick: { show: false },
                             splitLine: { show: false },
                             axisLabel: { show: false },
+                            title: { show: false },
                             detail: { show: false },
                             data: [{ value: displayTarget, name: 'Target' }],
                         },
@@ -5289,6 +5308,57 @@ class GaugeChart {
         this.chartInstance = ec;
         this.buildOption();
         this.bindEvents();
+        this.observeChartResize();
+    }
+    /**
+     * Calculates all target-marker geometry in one place. A gauge pointer icon
+     * is drawn from `offsetCenter - length` through `offsetCenter`, so the
+     * offset must account for the inner edge while length covers the band and
+     * both edge overflows. Use the widest band because progress and axisLine
+     * may be configured independently.
+     */
+    calculateTargetPointerGeometry(bandSeries) {
+        const barWidth = this.resolveGaugeWidth(bandSeries, 38, true);
+        const edgeOverflow = Math.max(6, Math.round(barWidth * 0.25));
+        const pointerLength = barWidth + edgeOverflow * 2;
+        const radius = this.resolveGaugeRadius(bandSeries['radius']);
+        if (radius === undefined) {
+            return {
+                width: 10,
+                length: pointerLength,
+                offsetCenter: [0, '-91%'],
+            };
+        }
+        return {
+            width: 10,
+            length: pointerLength,
+            offsetCenter: [0, -(radius - barWidth - edgeOverflow)],
+        };
+    }
+    resolveGaugeRadius(radiusOption) {
+        if (!this.chartInstance)
+            return undefined;
+        const radius = this.toFiniteNumber(radiusOption);
+        if (radius !== undefined)
+            return radius;
+        if (typeof radiusOption !== 'string' || !radiusOption.endsWith('%'))
+            return undefined;
+        const percentage = this.toFiniteNumber(radiusOption.slice(0, -1));
+        if (percentage === undefined)
+            return undefined;
+        return (Math.min(this.chartInstance.getWidth(), this.chartInstance.getHeight()) / 2) * (percentage / 100);
+    }
+    observeChartResize() {
+        if (typeof ResizeObserver === 'undefined' || !this.chartInstance)
+            return;
+        this.chartResizeObserver?.disconnect();
+        this.chartResizeObserver = new ResizeObserver(() => {
+            if (this.chartInstance.isDisposed())
+                return;
+            this.chartInstance.resize();
+            this.buildOption();
+        });
+        this.chartResizeObserver.observe(this.chartInstance.getDom());
     }
     bindEvents() {
         if (!this.chartInstance)
@@ -5312,6 +5382,42 @@ class GaugeChart {
             return undefined;
         return series.find((seriesOption) => seriesOption?.type === 'gauge') ?? series[0];
     }
+    /**
+     * Custom ECharts options can provide a second, transparent gauge series for
+     * the target marker. Apply the same automatic marker sizing used by the
+     * generated option without changing any of the caller's other settings.
+     */
+    applyTargetPointerSizing(option) {
+        if (!Array.isArray(option['series']))
+            return option;
+        const bandSeries = option['series'].find((seriesOption) => seriesOption?.['type'] === 'gauge' && !this.isTargetPointerSeries(seriesOption));
+        if (!bandSeries)
+            return option;
+        const targetPointer = this.calculateTargetPointerGeometry(bandSeries);
+        let changed = false;
+        const series = option['series'].map((seriesOption) => {
+            if (!this.isTargetPointerSeries(seriesOption))
+                return seriesOption;
+            changed = true;
+            return {
+                ...seriesOption,
+                center: bandSeries['center'] ?? seriesOption['center'] ?? [...DEFAULT_GAUGE_CENTER],
+                radius: bandSeries['radius'] ?? seriesOption['radius'] ?? DEFAULT_GAUGE_RADIUS,
+                pointer: {
+                    ...seriesOption['pointer'],
+                    ...targetPointer,
+                },
+            };
+        });
+        return changed ? { ...option, series } : option;
+    }
+    isTargetPointerSeries(seriesOption) {
+        const axisLineWidth = this.toFiniteNumber(seriesOption?.['axisLine']?.['lineStyle']?.['width']);
+        return (seriesOption?.['type'] === 'gauge' &&
+            seriesOption?.['pointer']?.['show'] === true &&
+            seriesOption?.['progress']?.['show'] !== true &&
+            (seriesOption?.['axisLine']?.['show'] === false || axisLineWidth === 0));
+    }
     resolveStyleSeriesOption(style) {
         if (!style)
             return {};
@@ -5326,10 +5432,16 @@ class GaugeChart {
             ...(style.anchor ? { anchor: style.anchor } : {}),
         };
     }
-    resolveGaugeWidth(seriesOption, fallback) {
+    resolveGaugeWidth(seriesOption, fallback, visibleOnly = false) {
         const axisLineWidth = this.toFiniteNumber(seriesOption?.['axisLine']?.['lineStyle']?.['width']);
         const progressWidth = this.toFiniteNumber(seriesOption?.['progress']?.['width']);
-        return this.clamp(axisLineWidth ?? progressWidth ?? fallback, 1, 80);
+        const configuredWidths = [
+            ...(!visibleOnly || seriesOption?.['axisLine']?.['show'] !== false ? [axisLineWidth] : []),
+            ...(!visibleOnly || seriesOption?.['progress']?.['show'] === true ? [progressWidth] : []),
+        ].filter((width) => width !== undefined);
+        // Cover whichever configured band is thicker. Fall back only when neither
+        // width is supplied, so a deliberately thin gauge is not enlarged.
+        return this.clamp(configuredWidths.length ? Math.max(...configuredWidths) : fallback, 1, 80);
     }
     resolveProgressVisibility(seriesOption, conditionalEnabled) {
         const configuredProgressShow = seriesOption?.['progress']?.['show'];
@@ -5380,9 +5492,11 @@ class GaugeChart {
         const rounded = this.config.midValueType === 'percentage' ? Math.round(value) : this.niceNumber(value);
         if (!showMidValue && value !== min && value !== max)
             return '';
-        return this.config.midValueType === 'percentage'
+        const label = this.config.midValueType === 'percentage'
             ? `${rounded}%`
             : this.formatNumber(rounded, this.config.style?.compactNumber !== false, 0);
+        const endpointOffset = showMidValue ? '' : '\n';
+        return `{gaugeLabel|${endpointOffset}${label}}`;
     }
     resolveMetricValue() {
         const configured = this.toFiniteNumber(this.config.value);
@@ -5408,7 +5522,7 @@ class GaugeChart {
         const conditional = this.config.style?.conditionalFormatting;
         if (conditional?.enabled) {
             return conditional.type === 'gradient'
-                ? this.resolveGradientStops()
+                ? this.resolveGradientStops(min, max)
                 : this.resolveRuleStops(min, max, conditional.rules ?? []);
         }
         const barColor = this.config.style?.barColor;
@@ -5446,7 +5560,7 @@ class GaugeChart {
                 return this.withOpacity(matchedRule.color, matchedRule.opacity ?? 100);
         }
         if (conditional?.enabled && conditional.type === 'gradient') {
-            const stops = this.resolveGradientStops();
+            const stops = this.resolveGradientStops(min, max);
             const ratio = this.clamp((value - min) / (max - min || 1), 0, 1);
             const stop = stops.find(([position]) => ratio <= position) ?? stops[stops.length - 1];
             if (stop)
@@ -5502,7 +5616,17 @@ class GaugeChart {
         const secondValue = this.ruleValueToNumber(rule.valueTo, rule.unit, min, max);
         if (firstValue === undefined)
             return false;
-        switch (rule.operator) {
+        const firstMatches = this.matchesRuleCondition(value, firstValue, rule.operator, secondValue);
+        if (!firstMatches)
+            return false;
+        if (rule.secondCondition) {
+            const second = this.ruleValueToNumber(rule.secondCondition.value, rule.secondCondition.unit, min, max);
+            return second !== undefined && this.matchesRuleCondition(value, second, rule.secondCondition.operator);
+        }
+        return true;
+    }
+    matchesRuleCondition(value, firstValue, operator, secondValue) {
+        switch (operator) {
             case '>=':
                 return value >= firstValue;
             case '>':
@@ -5519,7 +5643,7 @@ class GaugeChart {
                 return false;
         }
     }
-    resolveGradientStops() {
+    resolveGradientStops(min, max) {
         const points = [...(this.config.style?.conditionalFormatting?.gradientPoints ?? [])]
             .sort((a, b) => a.position - b.position);
         const normalized = points.length
@@ -5532,10 +5656,27 @@ class GaugeChart {
         const stylePoints = this.config.style?.conditionalFormatting?.reverseGradient
             ? [...normalized].reverse()
             : normalized;
-        return normalized.map((point, index) => [
-            this.clamp(point.position / 100, 0, 1),
-            this.withOpacity(stylePoints[index]?.color ?? this.config.colors?.[index] ?? '#4378ea', stylePoints[index]?.opacity ?? 100),
-        ]);
+        const stops = normalized.map((point, index) => {
+            const from = this.gradientValueToRatio(point.valueFrom, point.unit, min ?? 0, max ?? 1);
+            const position = from ?? this.clamp(point.position / 100, 0, 1);
+            return [
+                position,
+                this.withOpacity(stylePoints[index]?.color ?? this.config.colors?.[index] ?? '#4378ea', stylePoints[index]?.opacity ?? 100),
+            ];
+        });
+        normalized.forEach((point, index) => {
+            const to = this.gradientValueToRatio(point.valueTo, point.unit, min ?? 0, max ?? 1);
+            if (to !== undefined && stops[index])
+                stops[index][0] = Math.max(stops[index][0], to);
+        });
+        return stops.sort((a, b) => a[0] - b[0]);
+    }
+    gradientValueToRatio(value, unit, min, max) {
+        const numeric = this.toFiniteNumber(value);
+        if (numeric === undefined)
+            return undefined;
+        const actual = unit === 'percentage' ? min + (this.clamp(numeric, 0, 100) / 100) * (max - min) : numeric;
+        return this.clamp((actual - min) / ((max - min) || 1), 0, 1);
     }
     ruleValueToNumber(value, unit, min, max) {
         const numericValue = this.toFiniteNumber(value);
@@ -5649,6 +5790,7 @@ class GaugeChart {
         return Math.min(Math.max(value, min), max);
     }
     ngOnDestroy() {
+        this.chartResizeObserver?.disconnect();
         if (this.chartInstance) {
             this.chartInstance.off();
             this.chartInstance.dispose();