@acorex/charts 20.9.2 → 20.9.4

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

@@ -10,6 +10,7 @@ const AXGaugeChartDefaultConfig = {
     cornerRadius: 5,
     showValue: true,
     showTooltip: true,
+    showDataLabels: true,
     animationDuration: 750,
     animationEasing: 'cubic-out',
     messages: {
@@ -83,6 +84,10 @@ class AXGaugeChartComponent extends AXChartComponent {
     TICK_LABEL_CHAR_WIDTH_RATIO = 0.62;
     TICK_LABEL_SIDE_PADDING = 6;
     LABEL_TICK_CLEARANCE = 4;
+    MIN_SEGMENT_CHORD_FOR_LABEL = 28;
+    MIN_SEGMENT_RING_FOR_LABEL = 14;
+    MIN_SEGMENT_LABEL_FONT = 10;
+    MAX_SEGMENT_LABEL_FONT = 16;
     instanceId = createChartInstanceId('ax-gauge');
     get bgGradientId() {
         return `${this.instanceId}-bg-gradient`;
@@ -324,23 +329,28 @@ class AXGaugeChartComponent extends AXChartComponent {
         const angles = sortedThresholds.map((t) => this.scaleValueToColorAngle(t.value, minValue, maxValue));
         // Start from the minimum value angle
         let previousEndAngle = this.scaleValueToColorAngle(minValue, minValue, maxValue);
+        const labeledSegments = [];
         sortedThresholds.forEach((threshold, i) => {
             const endAngle = angles[i];
             // Skip if end angle is not greater than start angle
             if (endAngle <= previousEndAngle)
                 return;
+            const startAngle = previousEndAngle;
             const arcPath = chartGroup
                 .append('path')
                 .attr('d', arc({
                 innerRadius,
                 outerRadius,
-                startAngle: previousEndAngle,
+                startAngle,
                 endAngle,
             }))
                 .attr('fill', threshold.color || `url(#${this.thresholdGradientId(i)})`)
                 .attr('class', 'gauge-arc threshold-arc')
                 .attr('data-value', threshold.value)
                 .style('cursor', 'pointer');
+            if (threshold.label) {
+                labeledSegments.push({ startAngle, endAngle, label: threshold.label });
+            }
             // Add tooltip interaction
             if (this.effectiveOptions().showTooltip) {
                 // Convert angles back to values for tooltip
@@ -394,6 +404,88 @@ class AXGaugeChartComponent extends AXChartComponent {
                 });
             }
         }
+        if (this.effectiveOptions().showDataLabels !== false && labeledSegments.length > 0) {
+            this.drawSegmentLabels(chartGroup, labeledSegments, innerRadius, outerRadius);
+        }
+    }
+    /**
+     * Draws threshold labels centered on each segment arc when space allows.
+     */
+    drawSegmentLabels(chartGroup, segments, innerRadius, outerRadius) {
+        const labelArc = this.d3
+            .arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius * 0.98);
+        const labelGroup = chartGroup.append('g').attr('class', 'gauge-segment-labels');
+        const ringWidth = outerRadius - innerRadius;
+        const labelRadius = innerRadius + ringWidth / 2;
+        const animationDuration = this.effectiveOptions().animationDuration ?? 750;
+        segments.forEach((segment) => {
+            const angle = segment.endAngle - segment.startAngle;
+            const chordLength = 2 * labelRadius * Math.sin(angle / 2);
+            const fontSize = this.calculateSegmentLabelFontSize(angle, ringWidth, chordLength);
+            if (fontSize <= 0)
+                return;
+            const availableWidth = chordLength * 0.8;
+            const text = this.getFittedSegmentLabel(segment.label, fontSize, availableWidth);
+            if (!text)
+                return;
+            const centroid = labelArc.centroid({
+                innerRadius,
+                outerRadius: outerRadius * 0.98,
+                startAngle: segment.startAngle,
+                endAngle: segment.endAngle,
+            });
+            labelGroup
+                .append('text')
+                .attr('class', 'gauge-segment-label')
+                .attr('transform', `translate(${centroid[0]}, ${centroid[1]})`)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .style('pointer-events', 'none')
+                .style('font-size', `${fontSize}px`)
+                .style('font-weight', '600')
+                .style('fill', 'rgb(var(--ax-comp-gauge-chart-data-labels-color))')
+                .style('opacity', 0)
+                .text(text)
+                .transition()
+                .duration(animationDuration)
+                .style('opacity', 1);
+        });
+    }
+    calculateSegmentLabelFontSize(angle, ringWidth, chordLength) {
+        if (chordLength < this.MIN_SEGMENT_CHORD_FOR_LABEL || ringWidth < this.MIN_SEGMENT_RING_FOR_LABEL) {
+            return 0;
+        }
+        const ringBasedSize = ringWidth * 0.45;
+        const angleScale = Math.min(1, 0.7 + 0.3 * (angle / (this.HALF_CIRCLE_RADIANS / 3)));
+        const maxByChord = chordLength / (2 * 0.65);
+        const fontSize = Math.min(ringBasedSize * angleScale, maxByChord);
+        if (fontSize < this.MIN_SEGMENT_LABEL_FONT)
+            return 0;
+        return Math.round(Math.max(this.MIN_SEGMENT_LABEL_FONT, Math.min(fontSize, this.MAX_SEGMENT_LABEL_FONT)) * 2) / 2;
+    }
+    getFittedSegmentLabel(label, fontSize, availableWidth) {
+        if (!label)
+            return '';
+        if (this.doesSegmentLabelFit(label, fontSize, availableWidth))
+            return label;
+        return this.truncateSegmentLabel(label, fontSize, availableWidth);
+    }
+    doesSegmentLabelFit(text, fontSize, availableWidth) {
+        return text.length * fontSize * 0.65 <= availableWidth;
+    }
+    truncateSegmentLabel(text, fontSize, availableWidth) {
+        const charWidth = fontSize * (fontSize <= 10 ? 0.7 : 0.65);
+        const availableForText = availableWidth - fontSize * 0.7;
+        if (availableForText <= 0)
+            return '';
+        const maxChars = Math.floor(availableForText / charWidth);
+        if (maxChars <= 0)
+            return '';
+        if (text.length <= maxChars)
+            return text;
+        return `${text.substring(0, Math.max(1, maxChars))}…`;
     }
     /**
      * Shows tooltip for a threshold arc
@@ -416,28 +508,39 @@ class AXGaugeChartComponent extends AXChartComponent {
         const options = this.effectiveOptions();
         if (!options.showTooltip)
             return;
-        this.updateTooltipPosition(event);
         this._tooltipData.set({
             title: options.label || 'Range',
             value: `${options.minValue.toLocaleString()} - ${options.maxValue.toLocaleString()}`,
             color: 'rgb(var(--ax-comp-gauge-chart-track-color))',
         });
         this._tooltipVisible.set(true);
+        this.updateTooltipPosition(event);
     }
     updateTooltipPosition(event) {
         this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
         if (this._tooltipRafId != null)
             return;
+        this.scheduleTooltipPosition(0);
+    }
+    scheduleTooltipPosition(attempt) {
         this._tooltipRafId = requestAnimationFrame(() => {
-            this._tooltipRafId = null;
             const coords = this._pendingTooltipCoords;
-            if (!coords)
+            if (!coords) {
+                this._tooltipRafId = null;
                 return;
+            }
             const containerEl = this.chartContainerEl()?.nativeElement;
-            if (!containerEl)
+            if (!containerEl) {
+                this._tooltipRafId = null;
                 return;
-            const rect = containerEl.getBoundingClientRect();
+            }
             const tooltipEl = containerEl.querySelector('.chart-tooltip');
+            if (!tooltipEl && this._tooltipVisible() && attempt < 3) {
+                this.scheduleTooltipPosition(attempt + 1);
+                return;
+            }
+            this._tooltipRafId = null;
+            const rect = containerEl.getBoundingClientRect();
             const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;
             const pos = computeTooltipPosition(rect, tooltipRect, coords.x + 10, coords.y - 10, this.TOOLTIP_GAP);
             this._tooltipPosition.set(pos);
@@ -753,11 +856,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-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 });
+    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-data-labels-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-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"] }]
+            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-data-labels-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: () => [] });
 
 /**