@internetstiftelsen/charts 0.8.0 → 0.9.1

package/{gauge-chart.js → dist/gauge-chart.js}

@@ -1,5 +1,5 @@
-import { arc, select } from 'd3';
-import { BaseChart } from './base-chart.js';
+import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, select, } from 'd3';
+import { BaseChart, } from './base-chart.js';
 import { DEFAULT_COLOR_PALETTE } from './theme.js';
 import { ChartValidator } from './validation.js';
 const DEFAULT_START_ANGLE = -Math.PI * 0.75;
@@ -10,6 +10,9 @@ const DEFAULT_VALUE_KEY = 'value';
 const DEFAULT_HALF_CIRCLE = false;
 const DEFAULT_MIN_VALUE = 0;
 const DEFAULT_MAX_VALUE = 100;
+const DEFAULT_ANIMATE = false;
+const DEFAULT_ANIMATION_DURATION_MS = 700;
+const DEFAULT_ANIMATION_EASING_PRESET = 'ease-in-out';
 const DEFAULT_INNER_RADIUS_RATIO = 0.68;
 const DEFAULT_CORNER_RADIUS = 4;
 const DEFAULT_TRACK_COLOR = '#e5e7eb';
@@ -45,6 +48,14 @@ const DEFAULT_HALF_CIRCLE_VALUE_TEXT_Y = 32;
 const DEFAULT_FULL_CIRCLE_VALUE_TEXT_MIN_Y = 22;
 const TOOLTIP_OFFSET_PX = 12;
 const EDGE_MARGIN_PX = 10;
+const GAUGE_ANIMATION_EASING_PRESETS = {
+    linear: easeLinear,
+    'ease-in': easeCubicIn,
+    'ease-out': easeCubicOut,
+    'ease-in-out': easeCubicInOut,
+    'bounce-out': easeBounceOut,
+    'elastic-out': easeElasticOut,
+};
 const DUMMY_ARC_DATUM = {
     innerRadius: 0,
     outerRadius: 0,
@@ -96,6 +107,12 @@ export class GaugeChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "animation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "halfCircle", {
             enumerable: true,
             configurable: true,
@@ -216,6 +233,12 @@ export class GaugeChart extends BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "lastRenderedValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "defaultFormat", {
             enumerable: true,
             configurable: true,
@@ -235,6 +258,7 @@ export class GaugeChart extends BaseChart {
         this.targetValueKey = config.targetValueKey;
         this.minValue = gauge.min ?? DEFAULT_MIN_VALUE;
         this.maxValue = gauge.max ?? DEFAULT_MAX_VALUE;
+        this.animation = this.normalizeAnimationConfig(gauge.animate);
         this.halfCircle = gauge.halfCircle ?? DEFAULT_HALF_CIRCLE;
         this.startAngle =
             gauge.startAngle ??
@@ -260,7 +284,7 @@ export class GaugeChart extends BaseChart {
         this.valueLabelStyle = this.normalizeValueLabelStyle(gauge.valueLabelStyle);
         this.validateGaugeConfig();
         this.segments = this.prepareSegments();
-        this.refreshResolvedValues();
+        this.initializeDataState();
     }
     normalizeNeedleConfig(config) {
         if (config === false) {
@@ -328,6 +352,147 @@ export class GaugeChart extends BaseChart {
             formatter: config?.formatter ?? this.defaultFormat,
         };
     }
+    normalizeAnimationConfig(config) {
+        if (config === undefined) {
+            return {
+                show: DEFAULT_ANIMATE,
+                duration: DEFAULT_ANIMATION_DURATION_MS,
+                easing: GAUGE_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET],
+            };
+        }
+        if (typeof config === 'boolean') {
+            return {
+                show: config,
+                duration: DEFAULT_ANIMATION_DURATION_MS,
+                easing: GAUGE_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET],
+            };
+        }
+        return {
+            show: config.show ?? true,
+            duration: config.duration ?? DEFAULT_ANIMATION_DURATION_MS,
+            easing: this.resolveAnimationEasing(config.easing),
+        };
+    }
+    resolveAnimationEasing(easing) {
+        if (!easing) {
+            return GAUGE_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET];
+        }
+        if (typeof easing === 'function') {
+            return easing;
+        }
+        if (easing in GAUGE_ANIMATION_EASING_PRESETS) {
+            return GAUGE_ANIMATION_EASING_PRESETS[easing];
+        }
+        if (easing.startsWith('linear(')) {
+            const parsedCssLinear = this.parseCssLinearEasing(easing);
+            if (parsedCssLinear) {
+                return parsedCssLinear;
+            }
+        }
+        ChartValidator.warn(`GaugeChart: unsupported gauge.animate.easing '${easing}', falling back to '${DEFAULT_ANIMATION_EASING_PRESET}'`);
+        return GAUGE_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET];
+    }
+    parseCssLinearEasing(cssLinearEasing) {
+        const normalized = cssLinearEasing.trim();
+        if (!normalized.startsWith('linear(') || !normalized.endsWith(')')) {
+            return null;
+        }
+        const body = normalized.slice('linear('.length, -1);
+        const tokens = body
+            .split(',')
+            .map((token) => token.trim())
+            .filter((token) => token.length > 0);
+        if (tokens.length < 2) {
+            return null;
+        }
+        const rawStops = tokens.map((token) => {
+            const parts = token.split(/\s+/).filter(Boolean);
+            if (parts.length === 0 || parts.length > 2) {
+                return null;
+            }
+            const value = Number(parts[0]);
+            if (!Number.isFinite(value)) {
+                return null;
+            }
+            if (parts.length === 1) {
+                return { value, position: undefined };
+            }
+            const percentageToken = parts[1];
+            if (!percentageToken.endsWith('%')) {
+                return null;
+            }
+            const percentageValue = Number(percentageToken.slice(0, -1));
+            if (!Number.isFinite(percentageValue)) {
+                return null;
+            }
+            return {
+                value,
+                position: percentageValue / 100,
+            };
+        });
+        if (rawStops.some((stop) => stop === null)) {
+            return null;
+        }
+        const stops = rawStops;
+        const positions = stops.map((stop) => stop.position);
+        if (positions[0] === undefined) {
+            positions[0] = 0;
+        }
+        if (positions[positions.length - 1] === undefined) {
+            positions[positions.length - 1] = 1;
+        }
+        let previousDefinedIndex = 0;
+        for (let currentIndex = 1; currentIndex < positions.length; currentIndex += 1) {
+            const currentPosition = positions[currentIndex];
+            if (currentPosition === undefined) {
+                continue;
+            }
+            const previousPosition = positions[previousDefinedIndex];
+            if (currentPosition < previousPosition) {
+                return null;
+            }
+            const missingCount = currentIndex - previousDefinedIndex - 1;
+            if (missingCount > 0) {
+                for (let missingIndex = 1; missingIndex <= missingCount; missingIndex += 1) {
+                    const ratio = missingIndex / (missingCount + 1);
+                    positions[previousDefinedIndex + missingIndex] =
+                        previousPosition +
+                            (currentPosition - previousPosition) * ratio;
+                }
+            }
+            previousDefinedIndex = currentIndex;
+        }
+        const easingPoints = stops.map((stop, index) => {
+            return {
+                value: stop.value,
+                position: positions[index],
+            };
+        });
+        return (progress) => {
+            const clamped = Math.max(0, Math.min(1, progress));
+            if (clamped <= easingPoints[0].position) {
+                return easingPoints[0].value;
+            }
+            const lastPoint = easingPoints[easingPoints.length - 1];
+            if (clamped >= lastPoint.position) {
+                return lastPoint.value;
+            }
+            for (let index = 0; index < easingPoints.length - 1; index += 1) {
+                const left = easingPoints[index];
+                const right = easingPoints[index + 1];
+                if (clamped > right.position) {
+                    continue;
+                }
+                const span = right.position - left.position;
+                if (span <= 0) {
+                    return right.value;
+                }
+                const localProgress = (clamped - left.position) / span;
+                return left.value + (right.value - left.value) * localProgress;
+            }
+            return lastPoint.value;
+        };
+    }
     normalizeTickLabelStyle(config) {
         return {
             fontSize: config?.fontSize ?? DEFAULT_TICK_LABEL_FONT_SIZE,
@@ -392,6 +557,10 @@ export class GaugeChart extends BaseChart {
         if (this.marker.width <= 0) {
             throw new Error(`GaugeChart: gauge.marker.width must be > 0, received '${this.marker.width}'`);
         }
+        if (!Number.isFinite(this.animation.duration) ||
+            this.animation.duration < 0) {
+            throw new Error(`GaugeChart: gauge.animate.duration must be >= 0, received '${this.animation.duration}'`);
+        }
         this.validateSegments(this.configuredSegments);
     }
     validateSegments(segments) {
@@ -502,62 +671,22 @@ export class GaugeChart extends BaseChart {
             };
         });
     }
-    addChild(component) {
-        const type = component.type;
-        if (type === 'tooltip') {
-            this.tooltip = component;
-        }
-        else if (type === 'legend') {
-            this.legend = component;
-            this.legend.setToggleCallback(() => {
-                if (!this.container) {
-                    return;
-                }
-                this.update(this.data);
-            });
-        }
-        else if (type === 'title') {
-            this.title = component;
-        }
-        return this;
-    }
     getExportComponents() {
-        const components = [];
-        if (this.title) {
-            components.push(this.title);
-        }
-        if (this.tooltip) {
-            components.push(this.tooltip);
-        }
-        if (this.legend?.isInlineMode()) {
-            components.push(this.legend);
-        }
-        return components;
+        return this.getBaseExportComponents({
+            title: true,
+            tooltip: true,
+            legend: this.legend?.isInlineMode(),
+        });
     }
     update(data) {
-        this.data = data;
-        this.refreshResolvedValues();
+        this.lastRenderedValue = this.value;
         super.update(data);
     }
-    getLayoutComponents() {
-        const components = [];
-        if (this.title) {
-            components.push(this.title);
-        }
-        if (this.legend) {
-            components.push(this.legend);
-        }
-        return components;
-    }
-    prepareLayout() {
-        const svgNode = this.svg?.node();
-        if (svgNode && this.legend?.isInlineMode()) {
-            this.legend.estimateLayoutSpace(this.getLegendSeries(), this.theme, this.width, svgNode);
-        }
-    }
     createExportChart() {
         return new GaugeChart({
             data: this.data,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
             theme: this.theme,
             responsive: this.responsiveConfig,
             valueKey: this.valueKey,
@@ -567,6 +696,7 @@ export class GaugeChart extends BaseChart {
                 targetValue: this.configuredTargetValue,
                 min: this.minValue,
                 max: this.maxValue,
+                animate: false,
                 halfCircle: this.halfCircle,
                 startAngle: this.startAngle,
                 endAngle: this.endAngle,
@@ -590,17 +720,14 @@ export class GaugeChart extends BaseChart {
             },
         });
     }
-    renderChart() {
-        if (!this.plotArea || !this.svg || !this.plotGroup) {
-            throw new Error('Plot area not calculated');
-        }
-        this.svg.attr('role', 'img').attr('aria-label', this.buildAriaLabel());
-        if (this.title) {
-            const titlePosition = this.layoutManager.getComponentPosition(this.title);
-            this.title.render(this.svg, this.theme, this.width, titlePosition.x, titlePosition.y);
-        }
+    syncDerivedState() {
+        this.refreshResolvedValues();
+    }
+    renderChart({ svg, plotGroup, plotArea, }) {
+        svg.attr('role', 'img').attr('aria-label', this.buildAriaLabel());
+        this.renderTitle(svg);
         if (this.tooltip) {
-            this.tooltip.initialize(this.theme);
+            this.tooltip.initialize(this.renderTheme);
         }
         const labelAllowance = this.ticks.show && this.ticks.showLabels
             ? this.ticks.size + this.ticks.labelOffset + 14
@@ -608,29 +735,30 @@ export class GaugeChart extends BaseChart {
                 ? this.ticks.size + 10
                 : 8;
         let outerRadius;
-        const centerX = this.plotArea.left + this.plotArea.width / 2;
+        const centerX = plotArea.left + plotArea.width / 2;
         let centerY;
         if (this.halfCircle) {
             const valueSpace = this.showValue
                 ? DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITH_LABEL
                 : DEFAULT_HALF_CIRCLE_VALUE_SPACE_WITHOUT_LABEL;
-            const maxHorizontalRadius = this.plotArea.width / 2 - labelAllowance - 8;
-            const maxVerticalRadius = this.plotArea.height - valueSpace - labelAllowance - 8;
+            const maxHorizontalRadius = plotArea.width / 2 - labelAllowance - 8;
+            const maxVerticalRadius = plotArea.height - valueSpace - labelAllowance - 8;
             outerRadius = Math.max(24, Math.min(maxHorizontalRadius, maxVerticalRadius));
-            centerY = this.plotArea.top + labelAllowance + outerRadius + 4;
+            centerY = plotArea.top + labelAllowance + outerRadius + 4;
         }
         else {
-            const maxRadius = Math.min(this.plotArea.width, this.plotArea.height) / 2;
+            const maxRadius = Math.min(plotArea.width, plotArea.height) / 2;
             outerRadius = Math.max(24, maxRadius - labelAllowance);
-            centerY = this.plotArea.top + this.plotArea.height / 2;
+            centerY = plotArea.top + plotArea.height / 2;
         }
         const innerRadius = this.thickness !== null
             ? Math.max(0, outerRadius - Math.min(this.thickness, outerRadius - 1))
             : Math.max(8, Math.min(outerRadius - 4, outerRadius * this.innerRadiusRatio));
-        const gaugeGroup = this.plotGroup
+        const gaugeGroup = plotGroup
             .append('g')
             .attr('class', 'gauge')
             .attr('transform', `translate(${centerX}, ${centerY})`);
+        const animationStartValue = this.resolveAnimationStartValue();
         this.renderTrack(gaugeGroup, innerRadius, outerRadius);
         const visibleSegments = this.getVisibleSegments();
         if (visibleSegments.length > 0) {
@@ -645,7 +773,7 @@ export class GaugeChart extends BaseChart {
         const shouldRenderProgress = visibleSegments.length === 0;
         if (shouldRenderProgress) {
             const progressRadii = this.getProgressRadii(innerRadius, outerRadius);
-            this.renderProgress(gaugeGroup, progressColor, progressRadii.inner, progressRadii.outer);
+            this.renderProgress(gaugeGroup, progressColor, progressRadii.inner, progressRadii.outer, animationStartValue);
         }
         if (this.ticks.show &&
             this.ticks.count > 0 &&
@@ -653,21 +781,30 @@ export class GaugeChart extends BaseChart {
             this.renderTicks(gaugeGroup, outerRadius);
         }
         if (this.showValue) {
-            this.renderValueText(gaugeGroup, outerRadius);
+            this.renderValueText(gaugeGroup, outerRadius, animationStartValue);
         }
         if (this.targetValue !== null) {
             this.renderTargetMarker(gaugeGroup, innerRadius, outerRadius);
         }
         if (this.needle.show) {
-            this.renderNeedle(gaugeGroup, innerRadius, outerRadius);
+            this.renderNeedle(gaugeGroup, innerRadius, outerRadius, animationStartValue);
         }
         else if (this.marker.show) {
-            this.renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius);
+            this.renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius, animationStartValue);
         }
         if (this.tooltip) {
             this.attachTooltipLayer(gaugeGroup, innerRadius, outerRadius, progressColor);
         }
-        this.renderLegend();
+        this.renderInlineLegend(svg);
+    }
+    resolveAnimationStartValue() {
+        if (this.lastRenderedValue === null) {
+            return this.minValue;
+        }
+        return Math.min(this.maxValue, Math.max(this.minValue, this.lastRenderedValue));
+    }
+    shouldAnimateTransition(startValue) {
+        return this.animation.show && startValue !== this.value;
     }
     buildAriaLabel() {
         const statusLabel = this.findSegmentStatusLabel();
@@ -689,11 +826,8 @@ export class GaugeChart extends BaseChart {
         return null;
     }
     getVisibleSegments() {
-        if (!this.legend) {
-            return this.segments;
-        }
-        return this.segments.filter((segment) => {
-            return this.legend.isSeriesVisible(segment.legendLabel);
+        return this.filterVisibleItems(this.segments, (segment) => {
+            return segment.legendLabel;
         });
     }
     resolveProgressColor(segments) {
@@ -811,18 +945,44 @@ export class GaugeChart extends BaseChart {
             .attr('stroke-opacity', 0.95)
             .style('pointer-events', 'none');
     }
-    renderProgress(gaugeGroup, progressColor, innerRadius, outerRadius) {
+    renderProgress(gaugeGroup, progressColor, innerRadius, outerRadius, startValue) {
         const progressArc = arc()
             .innerRadius(innerRadius)
             .outerRadius(outerRadius)
             .startAngle(this.startAngle)
-            .endAngle(this.valueToAngle(this.value))
+            .endAngle((datum) => datum.endAngle)
             .cornerRadius(this.cornerRadius);
-        gaugeGroup
+        const startAngle = this.valueToAngle(startValue);
+        const endAngle = this.valueToAngle(this.value);
+        const startPath = progressArc({
+            ...DUMMY_ARC_DATUM,
+            endAngle: startAngle,
+        });
+        const endPath = progressArc({
+            ...DUMMY_ARC_DATUM,
+            endAngle,
+        });
+        const shouldAnimate = this.shouldAnimateTransition(startValue);
+        const progressPath = gaugeGroup
             .append('path')
             .attr('class', 'gauge-progress')
-            .attr('fill', progressColor)
-            .attr('d', progressArc(DUMMY_ARC_DATUM));
+            .attr('fill', progressColor);
+        if (shouldAnimate) {
+            const angleInterpolator = interpolateNumber(startAngle, endAngle);
+            progressPath
+                .attr('d', startPath)
+                .transition()
+                .duration(this.animation.duration)
+                .ease(this.animation.easing)
+                .attrTween('d', () => {
+                return (progress) => progressArc({
+                    ...DUMMY_ARC_DATUM,
+                    endAngle: angleInterpolator(progress),
+                }) ?? '';
+            });
+            return;
+        }
+        progressPath.attr('d', endPath);
     }
     renderTicks(gaugeGroup, outerRadius) {
         const tickGroup = gaugeGroup.append('g').attr('class', 'gauge-ticks');
@@ -889,21 +1049,43 @@ export class GaugeChart extends BaseChart {
             .attr('stroke-width', DEFAULT_TARGET_MARKER_STROKE_WIDTH)
             .attr('stroke-linecap', 'round');
     }
-    renderNeedle(gaugeGroup, innerRadius, outerRadius) {
+    renderNeedle(gaugeGroup, innerRadius, outerRadius, startValue) {
         const needleAngle = this.valueToAngle(this.value);
+        const startNeedleAngle = this.valueToAngle(startValue);
         const maxLength = Math.max(innerRadius + 2, outerRadius - 2);
         const length = maxLength * this.needle.lengthRatio;
         const needlePoint = this.pointAt(needleAngle, length);
-        gaugeGroup
+        const startNeedlePoint = this.pointAt(startNeedleAngle, length);
+        const shouldAnimate = this.shouldAnimateTransition(startValue);
+        const initialNeedlePoint = shouldAnimate
+            ? startNeedlePoint
+            : needlePoint;
+        const needleLine = gaugeGroup
             .append('line')
             .attr('class', 'gauge-needle')
             .attr('x1', 0)
             .attr('y1', 0)
-            .attr('x2', needlePoint.x)
-            .attr('y2', needlePoint.y)
+            .attr('x2', initialNeedlePoint.x)
+            .attr('y2', initialNeedlePoint.y)
             .attr('stroke', this.needle.color)
             .attr('stroke-width', this.needle.width)
             .attr('stroke-linecap', 'round');
+        if (shouldAnimate) {
+            const angleInterpolator = interpolateNumber(startNeedleAngle, needleAngle);
+            needleLine
+                .transition()
+                .duration(this.animation.duration)
+                .ease(this.animation.easing)
+                .tween('needle-rotation', () => {
+                return (progress) => {
+                    const interpolatedAngle = angleInterpolator(progress);
+                    const interpolatedPoint = this.pointAt(interpolatedAngle, length);
+                    needleLine
+                        .attr('x2', interpolatedPoint.x)
+                        .attr('y2', interpolatedPoint.y);
+                };
+            });
+        }
         gaugeGroup
             .append('circle')
             .attr('class', 'gauge-needle-cap')
@@ -912,28 +1094,55 @@ export class GaugeChart extends BaseChart {
             .attr('r', this.needle.capRadius)
             .attr('fill', this.needle.color);
     }
-    renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius) {
+    renderCurrentValueMarker(gaugeGroup, innerRadius, outerRadius, startValue) {
         const markerAngle = this.valueToAngle(this.value);
+        const startMarkerAngle = this.valueToAngle(startValue);
         const markerInner = innerRadius + 1;
         const markerOuter = Math.max(markerInner + 1, outerRadius - 1);
         const innerPoint = this.pointAt(markerAngle, markerInner);
         const outerPoint = this.pointAt(markerAngle, markerOuter);
-        gaugeGroup
+        const startInnerPoint = this.pointAt(startMarkerAngle, markerInner);
+        const startOuterPoint = this.pointAt(startMarkerAngle, markerOuter);
+        const shouldAnimate = this.shouldAnimateTransition(startValue);
+        const initialInnerPoint = shouldAnimate ? startInnerPoint : innerPoint;
+        const initialOuterPoint = shouldAnimate ? startOuterPoint : outerPoint;
+        const markerLine = gaugeGroup
             .append('line')
             .attr('class', 'gauge-marker')
-            .attr('x1', innerPoint.x)
-            .attr('y1', innerPoint.y)
-            .attr('x2', outerPoint.x)
-            .attr('y2', outerPoint.y)
+            .attr('x1', initialInnerPoint.x)
+            .attr('y1', initialInnerPoint.y)
+            .attr('x2', initialOuterPoint.x)
+            .attr('y2', initialOuterPoint.y)
             .attr('stroke', this.marker.color)
             .attr('stroke-width', this.marker.width)
             .attr('stroke-linecap', 'round');
+        if (shouldAnimate) {
+            const angleInterpolator = interpolateNumber(startMarkerAngle, markerAngle);
+            markerLine
+                .transition()
+                .duration(this.animation.duration)
+                .ease(this.animation.easing)
+                .tween('marker-sweep', () => {
+                return (progress) => {
+                    const interpolatedAngle = angleInterpolator(progress);
+                    const interpolatedInner = this.pointAt(interpolatedAngle, markerInner);
+                    const interpolatedOuter = this.pointAt(interpolatedAngle, markerOuter);
+                    markerLine
+                        .attr('x1', interpolatedInner.x)
+                        .attr('y1', interpolatedInner.y)
+                        .attr('x2', interpolatedOuter.x)
+                        .attr('y2', interpolatedOuter.y);
+                };
+            });
+        }
     }
-    renderValueText(gaugeGroup, outerRadius) {
+    renderValueText(gaugeGroup, outerRadius, startValue) {
         const mainValueY = this.halfCircle
             ? DEFAULT_HALF_CIRCLE_VALUE_TEXT_Y
             : Math.max(DEFAULT_FULL_CIRCLE_VALUE_TEXT_MIN_Y, outerRadius * 0.58);
-        gaugeGroup
+        const shouldAnimate = this.shouldAnimateTransition(startValue);
+        const initialValue = shouldAnimate ? startValue : this.value;
+        const valueText = gaugeGroup
             .append('text')
             .attr('class', 'gauge-value')
             .attr('x', 0)
@@ -943,7 +1152,19 @@ export class GaugeChart extends BaseChart {
             .attr('font-weight', this.valueLabelStyle.fontWeight)
             .attr('font-family', this.valueLabelStyle.fontFamily)
             .attr('fill', this.valueLabelStyle.color)
-            .text(this.valueFormatter(this.value));
+            .text(this.valueFormatter(initialValue));
+        if (shouldAnimate) {
+            valueText
+                .transition()
+                .duration(this.animation.duration)
+                .ease(this.animation.easing)
+                .tween('text', () => {
+                return (progress) => {
+                    const currentValue = startValue + (this.value - startValue) * progress;
+                    valueText.text(this.valueFormatter(currentValue));
+                };
+            });
+        }
     }
     attachTooltipLayer(gaugeGroup, innerRadius, outerRadius, progressColor) {
         const interactionArc = arc()
@@ -1039,16 +1260,6 @@ export class GaugeChart extends BaseChart {
             EDGE_MARGIN_PX));
         tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
     }
-    renderLegend() {
-        if (!this.legend ||
-            !this.legend.isInlineMode() ||
-            !this.svg ||
-            this.segments.length === 0) {
-            return;
-        }
-        const legendPosition = this.layoutManager.getComponentPosition(this.legend);
-        this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, legendPosition.x, legendPosition.y);
-    }
     getLegendSeries() {
         return this.segments.map((segment) => {
             return {

package/{grid.d.ts → dist/grid.d.ts}

@@ -8,6 +8,6 @@ export declare class Grid implements ChartComponent<GridConfigBase> {
     readonly exportHooks?: ExportHooks<GridConfigBase>;
     constructor(config?: GridConfig);
     getExportConfig(): GridConfigBase;
-    createExportComponent(override?: Partial<GridConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<GridConfigBase>): ChartComponent<GridConfigBase>;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, x: D3Scale, y: D3Scale, theme: ChartTheme): void;
 }

package/{layout-manager.d.ts → dist/layout-manager.d.ts}

@@ -1,5 +1,5 @@
-import type { LayoutAwareComponent } from './chart-interface.js';
-import type { ChartTheme } from './types.js';
+import type { LayoutAwareComponentBase } from './chart-interface.js';
+import type { ResolvedChartTheme } from './types.js';
 export type PlotAreaBounds = {
     left: number;
     right: number;
@@ -20,16 +20,16 @@ export declare class LayoutManager {
     private theme;
     private plotBounds;
     private componentPositions;
-    constructor(theme: ChartTheme);
+    constructor(theme: ResolvedChartTheme);
     /**
      * Calculate layout based on registered components
      * Returns the plot area bounds
      */
-    calculateLayout(components: LayoutAwareComponent[]): PlotAreaBounds;
+    calculateLayout(components: LayoutAwareComponentBase[]): PlotAreaBounds;
     /**
      * Get the position for a specific component
      */
-    getComponentPosition(component: LayoutAwareComponent): ComponentPosition;
+    getComponentPosition(component: LayoutAwareComponentBase): ComponentPosition;
     /**
      * Calculate positions for all components based on their space requirements
      * Components are positioned in registration order, stacking outward from the plot area

package/{legend.d.ts → dist/legend.d.ts}

@@ -20,7 +20,7 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private estimatedLayoutSignature;
     constructor(config?: LegendConfig);
     getExportConfig(): LegendConfigBase;
-    createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent;
+    createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent<LegendConfigBase>;
     setToggleCallback(callback: () => void): void;
     isInlineMode(): boolean;
     isDisconnectedMode(): boolean;
@@ -40,6 +40,8 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     getRequiredSpace(): ComponentSpace;
     getMeasuredHeight(): number;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, series: LegendSeries[], theme: ChartTheme, width: number, _x?: number, y?: number): void;
+    private isLegendItemVisible;
+    private isToggleActivationKey;
     private computeLayout;
     private resolveLayoutSettings;
     private buildLegendItems;