@internetstiftelsen/charts 0.13.3 → 0.14.0

package/README.md

@@ -10,8 +10,9 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Combined Chart Layouts** - `ChartGroup` composes existing charts into shared dashboards with one coordinated legend
 - **Divergent Bar Support** - Bar charts automatically render from zero and diverge around `0` for mixed positive/negative values
 - **Mirrored Bar Sides** - Horizontal bars can mirror a series to the left for population-pyramid style charts without changing source data
-- **Custom Value Labels** - XY, pie, and donut charts support optional on-chart labels with custom formatters
+- **Custom Value Labels** - XY, pie, donut, and gauge charts support configurable labels with formatters, max-width overflow behavior, and forced rendering when labels would otherwise be hidden
 - **Optional XY Animation** - Animate XY series on first render and `chart.update(...)` with `animate`
+- **Optional Radial Animation** - Animate pie and donut segments on first render and `chart.update(...)` with `animate`
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
 - **Stacking Control** - Bar and area stacking modes with optional reversed visual series order
 - **Configurable Tooltips** - Shared or split tooltips with connectors, transitions, and default max-width wrapping
@@ -139,6 +140,8 @@ await chart.whenReady();
 
 Animation is off by default, applies to XY series marks only, and visual
 exports always render the final static state.
+Preset easing values include `linear`, `ease-in`, `ease-out`, `ease-in-out`,
+`bounce-out`, `elastic-out`, and `spring-out`.
 
 ## Lifecycle Events
 

package/dist/area.js

@@ -388,6 +388,7 @@ export class Area {
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
         const padding = config.padding ?? theme.valueLabel.padding;
+        const forceVisible = config.forceVisible === true;
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `area-value-labels-${sanitizeForCSS(this.dataKey)}`);
@@ -422,7 +423,7 @@ export class Area {
             if (labelY - boxHeight / 2 < plotTop + 4) {
                 labelY = yPos + boxHeight / 2 + theme.line.point.size + 4;
                 if (labelY + boxHeight / 2 > plotBottom - 4) {
-                    shouldRender = false;
+                    shouldRender = forceVisible;
                 }
             }
             tempText.remove();

package/dist/bar.js

@@ -369,6 +369,7 @@ export class Bar {
             ...this.resolveValueLabelStyle(config, theme),
             formatter: config.formatter,
             autoContrastInside: config.color === undefined,
+            forceVisible: config.forceVisible ?? false,
         };
     }
     resolveValueLabelPlacement(config) {
@@ -461,7 +462,8 @@ export class Bar {
         return {
             x: input.x,
             y,
-            shouldRender: input.labelBox.height + minPadding <= input.barHeight,
+            shouldRender: input.forceVisible ||
+                input.labelBox.height + minPadding <= input.barHeight,
         };
     }
     getVerticalOutsideLabelPlacement(input) {
@@ -474,7 +476,7 @@ export class Bar {
         return {
             x: input.x,
             y,
-            shouldRender,
+            shouldRender: input.forceVisible || shouldRender,
         };
     }
     getVerticalInsideLabelY(barTop, barBottom, labelHeight, insidePosition, inset) {
@@ -506,7 +508,7 @@ export class Bar {
         return {
             x,
             y: input.y,
-            shouldRender: fitsBar && withinBounds,
+            shouldRender: input.forceVisible || (fitsBar && withinBounds),
         };
     }
     getHorizontalOutsideLabelPlacement(input) {
@@ -519,7 +521,7 @@ export class Bar {
         return {
             x,
             y: input.y,
-            shouldRender,
+            shouldRender: input.forceVisible || shouldRender,
         };
     }
     getHorizontalInsideLabelX(barLeft, barRight, labelWidth, isNegative, insidePosition, inset) {
@@ -567,6 +569,7 @@ export class Bar {
             mode,
             position: config.position,
             insidePosition: config.insidePosition,
+            forceVisible: config.forceVisible,
             plotTop,
             plotBottom,
         });
@@ -601,6 +604,7 @@ export class Bar {
             mode,
             position: config.position,
             insidePosition: config.insidePosition,
+            forceVisible: config.forceVisible,
             plotLeft,
             plotRight,
         });

package/dist/base-chart.d.ts

@@ -199,6 +199,7 @@ export declare abstract class BaseChart {
     protected filterVisibleItems<T>(items: T[], getDataKey: (item: T) => string): T[];
     protected validateSourceData(_data: ChartData): void;
     protected syncDerivedState(_previousData?: DataItem[]): void;
+    protected prepareForLegendChange(): void;
     protected initializeDataState(): void;
     protected prepareLayout(context: BaseLayoutContext): void;
     /**

package/dist/base-chart.js

@@ -268,6 +268,7 @@ export class BaseChart {
         this.responsiveConfig = config.responsive;
         this.legendState = new LegendStateController();
         this.legendState.subscribe(() => {
+            this.prepareForLegendChange();
             this.notifyLegendChanged();
             this.rerender('legend');
         });
@@ -844,6 +845,7 @@ export class BaseChart {
     }
     validateSourceData(_data) { }
     syncDerivedState(_previousData) { }
+    prepareForLegendChange() { }
     initializeDataState() {
         this.validateSourceData(this.sourceData);
         this.syncDerivedState();

package/dist/donut-chart.d.ts

@@ -1,23 +1,34 @@
-import type { DataItem, LegendSeries } from './types.js';
+import type { DataItem, LabelOversizedBehavior, LegendSeries } from './types.js';
 import { type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
 import { RadialChartBase } from './radial-chart-base.js';
+import { type RadialAnimationConfig, type RadialAnimationEasingPreset } from './radial-animation.js';
+export type DonutAnimationConfig = RadialAnimationConfig;
+export type DonutAnimationEasingPreset = RadialAnimationEasingPreset;
 export type DonutConfig = {
     innerRadius?: number;
     padAngle?: number;
     cornerRadius?: number;
 };
 export type DonutValueLabelPosition = 'outside' | 'auto';
+export type DonutValueLabelFormatter = (label: string, value: number, data: DataItem, percentage: number) => string;
 export type DonutValueLabelConfig = {
     show?: boolean;
     position?: DonutValueLabelPosition;
     outsideOffset?: number;
     minVerticalSpacing?: number;
-    formatter?: (label: string, value: number, data: DataItem, percentage: number) => string;
+    maxLabelWidth?: number;
+    oversizedBehavior?: LabelOversizedBehavior;
+    forceVisible?: boolean;
+    labelFormatter?: DonutValueLabelFormatter;
+    valueFormatter?: DonutValueLabelFormatter;
+    separator?: string;
+    formatter?: DonutValueLabelFormatter;
 };
 export type DonutChartConfig = BaseChartConfig & {
     donut?: DonutConfig;
     valueLabel?: DonutValueLabelConfig;
+    animate?: boolean | DonutAnimationConfig;
     valueKey?: string;
     labelKey?: string;
 };
@@ -28,6 +39,7 @@ export declare class DonutChart extends RadialChartBase {
     private readonly valueKey;
     private readonly labelKey;
     private readonly valueLabel;
+    private readonly motionController;
     private segments;
     private centerContent;
     constructor(config: DonutChartConfig);
@@ -36,16 +48,20 @@ export declare class DonutChart extends RadialChartBase {
     addChild(component: ChartComponentBase): this;
     protected getExportComponents(): ChartComponentBase[];
     update(data: DataItem[]): void;
+    protected prepareForLegendChange(): void;
     protected createExportChart(): RadialChartBase;
     protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected syncDerivedState(): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     protected getLegendSeries(): LegendSeries[];
     private buildTooltipContent;
-    private formatValueLabelText;
+    private resolveValueLabelText;
+    private getValueLabelPercentage;
     private renderSegments;
     private renderLabels;
     private getArcPoint;
     private resolveOutsideLabel;
+    private measureValueLabelDimensions;
     private adjustOutsideLabelPositions;
+    private getOutsideLabelSpacing;
 }

package/dist/donut-chart.js

@@ -2,8 +2,9 @@ import { arc, pie, select } from 'd3';
 import { sanitizeForCSS } from './utils.js';
 import { ChartValidator } from './validation.js';
 import { RadialChartBase } from './radial-chart-base.js';
+import { buildRadialAnimatedArcData, buildRadialExitTargetPieData, createTransitionCompletionPromise, interpolateRadialArcDatum, interpolateRadialArcShape, normalizeRadialAnimationConfig, renderRadialArcDatum, RadialMotionController, } from './radial-animation.js';
 const HOVER_EXPAND_PX = 8;
-const ANIMATION_DURATION_MS = 150;
+const HOVER_ANIMATION_DURATION_MS = 150;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
 const DEFAULT_DONUT_VALUE_LABEL = {
@@ -11,9 +12,9 @@ const DEFAULT_DONUT_VALUE_LABEL = {
     position: 'auto',
     outsideOffset: 16,
     minVerticalSpacing: 14,
-    formatter: (label, value, _data, _percentage) => {
-        return `${label}: ${value}`;
-    },
+    oversizedBehavior: 'truncate',
+    forceVisible: false,
+    separator: ': ',
 };
 export class DonutChart extends RadialChartBase {
     constructor(config) {
@@ -54,6 +55,12 @@ export class DonutChart extends RadialChartBase {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "motionController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "segments", {
             enumerable: true,
             configurable: true,
@@ -87,6 +94,7 @@ export class DonutChart extends RadialChartBase {
         this.valueKey = resolvedConfig.valueKey;
         this.labelKey = resolvedConfig.labelKey;
         this.valueLabel = valueLabel;
+        this.motionController = new RadialMotionController(normalizeRadialAnimationConfig(config.animate, 'DonutChart'));
         this.initializeDataState();
     }
     validateDonutData() {
@@ -142,8 +150,12 @@ export class DonutChart extends RadialChartBase {
         ];
     }
     update(data) {
+        this.motionController.prepareForUpdate();
         super.update(data);
     }
+    prepareForLegendChange() {
+        this.motionController.prepareForUpdate();
+    }
     createExportChart() {
         return new DonutChart({
             data: this.data,
@@ -157,6 +169,7 @@ export class DonutChart extends RadialChartBase {
                 cornerRadius: this.cornerRadius,
             },
             valueLabel: this.valueLabel,
+            animate: false,
             valueKey: this.valueKey,
             labelKey: this.labelKey,
         });
@@ -184,9 +197,10 @@ export class DonutChart extends RadialChartBase {
     renderChart({ svg, plotGroup, plotArea, }) {
         this.renderTitle(svg);
         const visibleSegments = this.getVisibleRadialItems(this.segments);
+        const animationContext = this.motionController.getAnimationContext();
         const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
         this.initializeTooltip();
-        const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
+        const { segmentGroup, pieData, transitions } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius, animationContext, this.segments);
         if (this.valueLabel.show && visibleSegments.length > 0) {
             this.renderLabels(segmentGroup, pieData, outerRadius, visibleSegments.reduce((sum, segment) => {
                 return sum + segment.value;
@@ -195,6 +209,7 @@ export class DonutChart extends RadialChartBase {
         if (this.centerContent) {
             this.centerContent.render(svg, cx, cy, this.renderTheme, fontScale);
         }
+        this.setReadyPromise(this.motionController.completeRender(pieData, transitions));
         this.renderInlineLegend(svg);
     }
     getLegendSeries() {
@@ -214,10 +229,32 @@ export class DonutChart extends RadialChartBase {
         }
         return `<strong>${d.data.label}</strong><br/>${d.data.value} (${percentage}%)`;
     }
-    formatValueLabelText(segment, total) {
-        return this.valueLabel.formatter(segment.label, segment.value, segment.source, total > 0 ? (segment.value / total) * 100 : 0);
+    resolveValueLabelText(segment, total) {
+        const percentage = this.getValueLabelPercentage(segment, total);
+        if (this.valueLabel.formatter) {
+            const fullText = this.valueLabel.formatter(segment.label, segment.value, segment.source, percentage);
+            return {
+                label: fullText,
+                value: '',
+                separator: '',
+                fullText,
+                isCustom: true,
+            };
+        }
+        const label = this.valueLabel.labelFormatter?.(segment.label, segment.value, segment.source, percentage) ?? segment.label;
+        const value = this.valueLabel.valueFormatter?.(segment.label, segment.value, segment.source, percentage) ?? String(segment.value);
+        return {
+            label,
+            value,
+            separator: this.valueLabel.separator,
+            fullText: `${label}${this.valueLabel.separator}${value}`,
+            isCustom: false,
+        };
     }
-    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
+    getValueLabelPercentage(segment, total) {
+        return total > 0 ? (segment.value / total) * 100 : 0;
+    }
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius, animationContext, allSegments) {
         const pieGenerator = pie()
             .value((d) => d.value)
             .padAngle(this.padAngle)
@@ -231,26 +268,64 @@ export class DonutChart extends RadialChartBase {
             .outerRadius(outerRadius + HOVER_EXPAND_PX)
             .cornerRadius(this.cornerRadius);
         const pieData = pieGenerator(segments);
+        const exitTargetPieData = buildRadialExitTargetPieData(pieGenerator, segments, allSegments, animationContext, pieData);
+        const arcShape = {
+            innerRadius,
+            outerRadius,
+            cornerRadius: this.cornerRadius,
+        };
         const segmentGroup = plotGroup
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
-        segmentGroup
+        const animatedArcData = buildRadialAnimatedArcData(pieData, allSegments, animationContext, arcShape, exitTargetPieData);
+        const animationByDatum = new Map(animatedArcData.map((entry) => [entry.datum, entry]));
+        const getAnimation = (datum) => {
+            return animationByDatum.get(datum);
+        };
+        const renderedArcData = animatedArcData.map((entry) => entry.datum);
+        const transitions = [];
+        const segmentSelection = segmentGroup
             .selectAll('.donut-segment')
-            .data(pieData)
+            .data(renderedArcData, (d) => getAnimation(d).key)
             .join('path')
             .attr('class', (d) => `donut-segment segment-${sanitizeForCSS(d.data.label)}`)
-            .attr('d', arcGenerator)
+            .attr('d', (d) => {
+            const animation = getAnimation(d);
+            return renderRadialArcDatum(animation.startDatum, animation.startShape);
+        })
             .attr('fill', (d) => d.data.color)
-            .style('cursor', 'pointer')
-            .style('transition', 'opacity 0.15s ease')
+            .attr('opacity', (d) => getAnimation(d).initialOpacity)
+            .attr('aria-hidden', (d) => getAnimation(d).interactive ? null : 'true')
+            .style('cursor', (d) => getAnimation(d).interactive ? 'pointer' : 'default')
+            .style('pointer-events', (d) => getAnimation(d).interactive ? 'all' : 'none')
+            .style('transition', 'opacity 0.15s ease');
+        if (animationContext) {
+            const transition = segmentSelection
+                .transition()
+                .duration(animationContext.duration)
+                .ease(animationContext.easing)
+                .attrTween('d', (d) => {
+                const animation = getAnimation(d);
+                const datumInterpolator = interpolateRadialArcDatum(animation.startDatum, animation.endDatum);
+                const shapeInterpolator = interpolateRadialArcShape(animation.startShape, animation.endShape);
+                return (progress) => {
+                    return renderRadialArcDatum(datumInterpolator(progress), shapeInterpolator(progress));
+                };
+            })
+                .attr('opacity', (d) => getAnimation(d).finalOpacity);
+            transitions.push(createTransitionCompletionPromise(transition));
+        }
+        const interactiveSegmentSelection = segmentSelection.filter((d) => {
+            return getAnimation(d).interactive;
+        });
+        interactiveSegmentSelection
             .on('mouseenter', (event, d) => {
             select(event.currentTarget)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', hoverArcGenerator(d));
-            segmentGroup
-                .selectAll('.donut-segment')
+            interactiveSegmentSelection
                 .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
                 .style('opacity', 0.5);
             this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
@@ -261,14 +336,15 @@ export class DonutChart extends RadialChartBase {
             .on('mouseleave', (event, d) => {
             select(event.currentTarget)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
-            segmentGroup.selectAll('.donut-segment').style('opacity', 1);
+            interactiveSegmentSelection.style('opacity', 1);
             this.hideTooltip();
         });
         return {
             segmentGroup,
             pieData,
+            transitions,
         };
     }
     renderLabels(segmentGroup, pieData, outerRadius, total, fontScale) {
@@ -281,7 +357,19 @@ export class DonutChart extends RadialChartBase {
         const fontSize = this.renderTheme.valueLabel.fontSize * fontScale;
         const fontFamily = this.renderTheme.valueLabel.fontFamily;
         const fontWeight = this.renderTheme.valueLabel.fontWeight;
-        const outsideLabels = pieData.map((datum) => this.resolveOutsideLabel(datum, outerRadius));
+        const labelOverflowOptions = {
+            maxLabelWidth: this.valueLabel.maxLabelWidth,
+            oversizedBehavior: this.valueLabel.oversizedBehavior,
+            forceVisible: this.valueLabel.forceVisible,
+            fontSize,
+            fontFamily,
+            fontWeight,
+        };
+        const outsideLabels = pieData.map((datum) => {
+            const valueLabel = this.resolveValueLabelText(datum.data, total);
+            const dimensions = this.measureValueLabelDimensions(valueLabel, labelOverflowOptions);
+            return this.resolveOutsideLabel(datum, outerRadius, valueLabel, dimensions.height);
+        });
         const adjustedOutsideLabels = this.adjustOutsideLabelPositions(outsideLabels, outerRadius);
         const linesGroup = labelGroup
             .append('g')
@@ -306,7 +394,7 @@ export class DonutChart extends RadialChartBase {
                 .attr('fill', 'none')
                 .attr('stroke', this.renderTheme.valueLabel.border)
                 .attr('stroke-width', 1);
-            labelGroup
+            const textElement = labelGroup
                 .append('text')
                 .attr('class', `donut-label donut-label--outside donut-label-${sanitizeForCSS(outsideLabel.datum.data.label)}`)
                 .attr('x', textX)
@@ -316,8 +404,12 @@ export class DonutChart extends RadialChartBase {
                 .attr('font-family', fontFamily)
                 .attr('font-size', `${fontSize}px`)
                 .attr('font-weight', fontWeight)
-                .attr('fill', this.renderTheme.valueLabel.color)
-                .text(this.formatValueLabelText(outsideLabel.datum.data, total));
+                .attr('fill', this.renderTheme.valueLabel.color);
+            if (outsideLabel.valueLabel.isCustom) {
+                this.renderRadialLabelText(textElement, outsideLabel.valueLabel.fullText, labelOverflowOptions);
+                return;
+            }
+            this.renderRadialStructuredLabelText(textElement, outsideLabel.valueLabel.label, outsideLabel.valueLabel.value, outsideLabel.valueLabel.separator, labelOverflowOptions);
         });
     }
     getArcPoint(angle, radius) {
@@ -326,7 +418,7 @@ export class DonutChart extends RadialChartBase {
             y: -Math.cos(angle) * radius,
         };
     }
-    resolveOutsideLabel(datum, outerRadius) {
+    resolveOutsideLabel(datum, outerRadius, valueLabel, height) {
         const midAngle = (datum.startAngle + datum.endAngle) / 2;
         const point = this.getArcPoint(midAngle, outerRadius + this.valueLabel.outsideOffset);
         const side = point.x >= 0 ? 'right' : 'left';
@@ -335,8 +427,16 @@ export class DonutChart extends RadialChartBase {
             y: point.y,
             side,
             textAnchor: side === 'right' ? 'start' : 'end',
+            valueLabel,
+            height,
         };
     }
+    measureValueLabelDimensions(valueLabel, labelOverflowOptions) {
+        if (valueLabel.isCustom) {
+            return this.measureRadialLabelDimensions(valueLabel.fullText, labelOverflowOptions);
+        }
+        return this.measureRadialStructuredLabelDimensions(valueLabel.label, valueLabel.value, valueLabel.separator, labelOverflowOptions);
+    }
     adjustOutsideLabelPositions(labels, outerRadius) {
         const adjustForSide = (side) => {
             const sideLabels = labels
@@ -349,7 +449,8 @@ export class DonutChart extends RadialChartBase {
             const bottomLimit = outerRadius;
             sideLabels[0].y = Math.max(topLimit, sideLabels[0].y);
             for (let i = 1; i < sideLabels.length; i++) {
-                const minY = sideLabels[i - 1].y + this.valueLabel.minVerticalSpacing;
+                const minY = sideLabels[i - 1].y +
+                    this.getOutsideLabelSpacing(sideLabels[i - 1], sideLabels[i]);
                 sideLabels[i].y = Math.max(sideLabels[i].y, minY);
             }
             const overflow = sideLabels[sideLabels.length - 1].y - bottomLimit;
@@ -357,7 +458,7 @@ export class DonutChart extends RadialChartBase {
                 sideLabels[sideLabels.length - 1].y -= overflow;
                 for (let i = sideLabels.length - 2; i >= 0; i--) {
                     const maxY = sideLabels[i + 1].y -
-                        this.valueLabel.minVerticalSpacing;
+                        this.getOutsideLabelSpacing(sideLabels[i], sideLabels[i + 1]);
                     sideLabels[i].y = Math.min(sideLabels[i].y, maxY);
                 }
                 const underflow = topLimit - sideLabels[0].y;
@@ -371,4 +472,7 @@ export class DonutChart extends RadialChartBase {
         };
         return [...adjustForSide('left'), ...adjustForSide('right')];
     }
+    getOutsideLabelSpacing(previousLabel, currentLabel) {
+        return Math.max(this.valueLabel.minVerticalSpacing, (previousLabel.height + currentLabel.height) / 2);
+    }
 }

package/dist/easing.d.ts

@@ -0,0 +1 @@
+export declare function createCubicBezierEasing(x1: number, y1: number, x2: number, y2: number): (progress: number) => number;

package/dist/easing.js

@@ -0,0 +1,30 @@
+const CUBIC_BEZIER_SAMPLE_STEPS = 24;
+export function createCubicBezierEasing(x1, y1, x2, y2) {
+    return (progress) => {
+        if (progress <= 0) {
+            return 0;
+        }
+        if (progress >= 1) {
+            return 1;
+        }
+        let lower = 0;
+        let upper = 1;
+        let parameter = progress;
+        for (let step = 0; step < CUBIC_BEZIER_SAMPLE_STEPS; step += 1) {
+            parameter = (lower + upper) / 2;
+            if (sampleCubicBezier(parameter, x1, x2) < progress) {
+                lower = parameter;
+            }
+            else {
+                upper = parameter;
+            }
+        }
+        return sampleCubicBezier(parameter, y1, y2);
+    };
+}
+function sampleCubicBezier(parameter, controlPoint1, controlPoint2) {
+    const inverseParameter = 1 - parameter;
+    return (3 * inverseParameter * inverseParameter * parameter * controlPoint1 +
+        3 * inverseParameter * parameter * parameter * controlPoint2 +
+        parameter * parameter * parameter);
+}

package/dist/gauge-chart.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem, LegendSeries } from './types.js';
+import type { DataItem, LabelOversizedBehavior, LegendSeries } from './types.js';
 import type { BaseChart, BaseChartConfig, BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
 import { RadialChartBase } from './radial-chart-base.js';
@@ -35,8 +35,11 @@ export type GaugeLabelStyle = {
     fontFamily?: string;
     fontWeight?: number | string;
     color?: string;
+    maxLabelWidth?: number;
+    oversizedBehavior?: LabelOversizedBehavior;
+    forceVisible?: boolean;
 };
-export type GaugeAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out';
+export type GaugeAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out' | 'spring-out';
 export type GaugeAnimationConfig = {
     show?: boolean;
     duration?: number;
@@ -116,6 +119,7 @@ export declare class GaugeChart extends RadialChartBase {
     private interpolateLinearEasing;
     private normalizeTickLabelStyle;
     private normalizeValueLabelStyle;
+    private normalizeGaugeLabelStyle;
     private validateGaugeConfig;
     private validateGaugeRange;
     private validateGaugeGeometry;
@@ -164,6 +168,7 @@ export declare class GaugeChart extends RadialChartBase {
     private renderNeedle;
     private renderCurrentValueMarker;
     private renderValueText;
+    private renderGaugeLabelText;
     private attachTooltipLayer;
     private buildTooltipContent;
     protected getLegendSeries(): LegendSeries[];