@internetstiftelsen/charts 0.13.3 → 0.14.1

package/dist/pie-chart.js

@@ -1,9 +1,10 @@
 import { arc, pie, select } from 'd3';
 import { ChartValidator } from './validation.js';
-import { getContrastTextColor, measureTextWidth, sanitizeForCSS, } from './utils.js';
+import { getContrastTextColor, sanitizeForCSS } from './utils.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 FULL_CIRCLE_RADIANS = Math.PI * 2;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
@@ -15,9 +16,9 @@ const DEFAULT_PIE_VALUE_LABEL = {
     outsideOffset: 16,
     insideMargin: 8,
     minVerticalSpacing: 14,
-    formatter: (label, value, _data, _percentage) => {
-        return `${label}: ${value}`;
-    },
+    oversizedBehavior: 'truncate',
+    forceVisible: false,
+    separator: ': ',
 };
 export class PieChart extends RadialChartBase {
     constructor(config) {
@@ -76,6 +77,12 @@ export class PieChart 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,
@@ -108,6 +115,7 @@ export class PieChart extends RadialChartBase {
             ...DEFAULT_PIE_VALUE_LABEL,
             ...config.valueLabel,
         };
+        this.motionController = new RadialMotionController(normalizeRadialAnimationConfig(config.animate, 'PieChart'));
         this.initializeDataState();
     }
     validatePieData() {
@@ -203,10 +211,36 @@ export class PieChart extends RadialChartBase {
         });
     }
     update(data) {
+        this.motionController.prepareForUpdate();
         super.update(data);
     }
-    formatValueLabelText(segment, total) {
-        return this.valueLabel.formatter(segment.label, segment.value, segment.source, total > 0 ? (segment.value / total) * 100 : 0);
+    prepareForLegendChange() {
+        this.motionController.prepareForUpdate();
+    }
+    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,
+        };
+    }
+    getValueLabelPercentage(segment, total) {
+        return total > 0 ? (segment.value / total) * 100 : 0;
     }
     createExportChart() {
         return new PieChart({
@@ -224,6 +258,7 @@ export class PieChart extends RadialChartBase {
                 sort: this.sort,
             },
             valueLabel: this.valueLabel,
+            animate: false,
             valueKey: this.valueKey,
             labelKey: this.labelKey,
         });
@@ -235,16 +270,16 @@ export class PieChart 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();
-        if (visibleSegments.length > 0) {
-            const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
-            const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
-            if (this.valueLabel.show) {
-                this.renderLabels(segmentGroup, pieData, innerRadius, outerRadius, visibleSegments.reduce((sum, segment) => {
-                    return sum + segment.value;
-                }, 0), fontScale);
-            }
+        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, innerRadius, outerRadius, visibleSegments.reduce((sum, segment) => {
+                return sum + segment.value;
+            }, 0), fontScale);
         }
+        this.setReadyPromise(this.motionController.completeRender(pieData, transitions));
         this.renderInlineLegend(svg);
     }
     getLegendSeries() {
@@ -262,7 +297,7 @@ export class PieChart extends RadialChartBase {
         }
         return null;
     }
-    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius, animationContext, allSegments) {
         const pieGenerator = pie()
             .value((d) => d.value)
             .startAngle(this.startAngle)
@@ -284,30 +319,72 @@ export class PieChart 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', 'pie-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
         const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+        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('.pie-segment')
-            .data(pieData)
+            .data(renderedArcData, (d) => getAnimation(d).key)
             .join('path')
             .attr('class', (d) => `pie-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)
-            .attr('tabindex', 0)
-            .attr('aria-label', (d) => this.buildAriaLabel(d, total))
-            .style('cursor', 'pointer')
+            .attr('opacity', (d) => getAnimation(d).initialOpacity)
+            .attr('tabindex', (d) => (getAnimation(d).interactive ? 0 : null))
+            .attr('aria-hidden', (d) => getAnimation(d).interactive ? null : 'true')
+            .attr('aria-label', (d) => {
+            return getAnimation(d).interactive
+                ? this.buildAriaLabel(d, total)
+                : null;
+        })
+            .style('cursor', (d) => getAnimation(d).interactive ? 'pointer' : 'default')
+            .style('pointer-events', (d) => getAnimation(d).interactive ? 'all' : 'none')
             .style('transition', 'opacity 0.15s ease');
-        segmentSelection
+        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) => {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', hoverArcGenerator(d));
-            segmentSelection
+            interactiveSegmentSelection
                 .filter((_, i, nodes) => nodes[i] !== target)
                 .style('opacity', 0.5);
             this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
@@ -319,18 +396,18 @@ export class PieChart extends RadialChartBase {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
-            segmentSelection.style('opacity', 1);
+            interactiveSegmentSelection.style('opacity', 1);
             this.hideTooltip();
         })
             .on('focus', (event, d) => {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', hoverArcGenerator(d));
-            segmentSelection
+            interactiveSegmentSelection
                 .filter((_, i, nodes) => nodes[i] !== target)
                 .style('opacity', 0.5);
             this.showTooltipAtElement(target, this.buildTooltipContent(d, segments));
@@ -339,9 +416,9 @@ export class PieChart extends RadialChartBase {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
-            segmentSelection.style('opacity', 1);
+            interactiveSegmentSelection.style('opacity', 1);
             this.hideTooltip();
         })
             .on('keydown', (event) => {
@@ -350,6 +427,7 @@ export class PieChart extends RadialChartBase {
         return {
             segmentGroup,
             pieData,
+            transitions,
         };
     }
     handleSegmentKeyNavigation(event) {
@@ -415,30 +493,44 @@ export class PieChart extends RadialChartBase {
             .innerRadius(insideLabelRadius)
             .outerRadius(insideLabelRadius);
         const fontSize = this.renderTheme.legend.fontSize * fontScale;
+        const fontFamily = this.renderTheme.axis.fontFamily;
         const fontWeight = this.renderTheme.axis.fontWeight ?? 'normal';
+        const labelOverflowOptions = {
+            maxLabelWidth: this.valueLabel.maxLabelWidth,
+            oversizedBehavior: this.valueLabel.oversizedBehavior,
+            forceVisible: this.valueLabel.forceVisible,
+            fontSize,
+            fontFamily,
+            fontWeight,
+        };
         const outsideLabels = [];
         pieData.forEach((d) => {
             const percentage = total > 0 ? (d.data.value / total) * 100 : 0;
-            const labelText = this.formatValueLabelText(d.data, total);
-            const placement = this.resolveValueLabelPlacement(d, labelText, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
+            const valueLabel = this.resolveValueLabelText(d.data, total);
+            const labelDimensions = this.measureValueLabelDimensions(valueLabel, labelOverflowOptions);
+            const placement = this.resolveValueLabelPlacement(d, labelDimensions, percentage, innerRadius, outerRadius, insideLabelRadius);
             if (placement === 'inside') {
                 const [x, y] = insideArc.centroid(d);
-                labelGroup
+                const textElement = labelGroup
                     .append('text')
                     .attr('class', `pie-label pie-label--inside pie-label-${sanitizeForCSS(d.data.label)}`)
                     .attr('x', x)
                     .attr('y', y)
                     .attr('text-anchor', 'middle')
                     .attr('dominant-baseline', 'middle')
-                    .attr('font-family', this.renderTheme.axis.fontFamily)
+                    .attr('font-family', fontFamily)
                     .attr('font-size', `${fontSize}px`)
                     .attr('font-weight', fontWeight)
-                    .attr('fill', getContrastTextColor(d.data.color))
-                    .text(labelText);
+                    .attr('fill', getContrastTextColor(d.data.color));
+                if (valueLabel.isCustom) {
+                    this.renderRadialLabelText(textElement, valueLabel.fullText, labelOverflowOptions);
+                    return;
+                }
+                this.renderRadialStructuredLabelText(textElement, valueLabel.label, valueLabel.value, valueLabel.separator, labelOverflowOptions);
                 return;
             }
             if (placement === 'outside') {
-                outsideLabels.push(this.resolveOutsideLabel(d, outerRadius));
+                outsideLabels.push(this.resolveOutsideLabel(d, outerRadius, valueLabel, labelDimensions.height));
             }
         });
         if (outsideLabels.length === 0) {
@@ -468,24 +560,30 @@ export class PieChart extends RadialChartBase {
                 .attr('fill', 'none')
                 .attr('stroke', '#9ca3af')
                 .attr('stroke-width', 1);
-            labelGroup
+            const textElement = labelGroup
                 .append('text')
                 .attr('class', `pie-label pie-label--outside pie-label-${sanitizeForCSS(outsideLabel.datum.data.label)}`)
                 .attr('x', textX)
                 .attr('y', outsideLabel.y)
                 .attr('text-anchor', outsideLabel.textAnchor)
                 .attr('dominant-baseline', 'middle')
-                .attr('font-family', this.renderTheme.axis.fontFamily)
+                .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);
         });
     }
-    resolveValueLabelPlacement(datum, labelText, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
-        const fitsInside = this.canFitInsideLabel(datum, labelText, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
+    resolveValueLabelPlacement(datum, labelDimensions, percentage, innerRadius, outerRadius, insideLabelRadius) {
+        const fitsInside = this.canFitInsideLabel(datum, labelDimensions, innerRadius, outerRadius, insideLabelRadius);
         if (this.valueLabel.position === 'inside') {
-            return fitsInside ? 'inside' : 'hidden';
+            return fitsInside || this.valueLabel.forceVisible
+                ? 'inside'
+                : 'hidden';
         }
         if (this.valueLabel.position === 'outside') {
             return 'outside';
@@ -498,23 +596,14 @@ export class PieChart extends RadialChartBase {
         }
         return 'inside';
     }
-    canFitInsideLabel(datum, labelText, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
-        if (!this.svg) {
-            return false;
-        }
-        const svgNode = this.svg.node();
-        if (!svgNode) {
-            return false;
-        }
-        const textWidth = measureTextWidth(labelText, fontSize, this.renderTheme.axis.fontFamily, fontWeight, svgNode);
+    canFitInsideLabel(datum, labelDimensions, innerRadius, outerRadius, insideLabelRadius) {
         const angle = Math.max(0, datum.endAngle - datum.startAngle);
         const availableArcLength = angle * insideLabelRadius - this.valueLabel.insideMargin * 2;
         const availableRadialThickness = outerRadius - innerRadius - this.valueLabel.insideMargin * 2;
-        const verticalFitThreshold = fontSize * 1.15;
-        return (availableArcLength >= textWidth &&
-            availableRadialThickness >= verticalFitThreshold);
+        return (availableArcLength >= labelDimensions.width &&
+            availableRadialThickness >= labelDimensions.height);
     }
-    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';
@@ -523,8 +612,16 @@ export class PieChart 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
@@ -537,7 +634,8 @@ export class PieChart 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;
@@ -545,7 +643,7 @@ export class PieChart 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;
@@ -564,4 +662,7 @@ export class PieChart extends RadialChartBase {
         const leftLabels = adjustForSide('left');
         return [...rightLabels, ...leftLabels];
     }
+    getOutsideLabelSpacing(previousLabel, currentLabel) {
+        return Math.max(this.valueLabel.minVerticalSpacing, (previousLabel.height + currentLabel.height) / 2);
+    }
 }

package/dist/radial-animation.d.ts

@@ -0,0 +1,69 @@
+import { type PieArcDatum } from 'd3';
+export type RadialAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out' | 'spring-out';
+export type RadialAnimationConfig = {
+    show?: boolean;
+    duration?: number;
+    easing?: RadialAnimationEasingPreset | `linear(${string})` | ((progress: number) => number);
+};
+export type NormalizedRadialAnimation = {
+    show: boolean;
+    duration: number;
+    easing: (progress: number) => number;
+};
+export type RadialRenderAnimationMode = 'none' | 'initial' | 'update';
+export type RadialSegmentAnimationData = {
+    label: string;
+    value: number;
+};
+type RadialSegmentSnapshot = {
+    startAngle: number;
+    endAngle: number;
+    padAngle: number;
+    value: number;
+    index: number;
+};
+export type RadialSegmentSnapshotCollection = Map<string, RadialSegmentSnapshot>;
+export type RadialAnimationContext = {
+    mode: Exclude<RadialRenderAnimationMode, 'none'>;
+    duration: number;
+    easing: (progress: number) => number;
+    previousSnapshot?: RadialSegmentSnapshotCollection;
+};
+export type RadialArcShape = {
+    innerRadius: number;
+    outerRadius: number;
+    cornerRadius: number;
+};
+export type RadialAnimatedArcDatum<TData extends RadialSegmentAnimationData> = {
+    key: string;
+    datum: PieArcDatum<TData>;
+    startDatum: PieArcDatum<TData>;
+    endDatum: PieArcDatum<TData>;
+    startShape: RadialArcShape;
+    endShape: RadialArcShape;
+    initialOpacity: number;
+    finalOpacity: number;
+    interactive: boolean;
+};
+export declare function normalizeRadialAnimationConfig(config: boolean | RadialAnimationConfig | undefined, chartName: string): NormalizedRadialAnimation;
+export declare class RadialMotionController {
+    private readonly animation;
+    private hasRenderedLive;
+    private nextRenderAnimationMode;
+    private pendingAnimationSnapshot;
+    private lastSegmentSnapshot;
+    constructor(animation: NormalizedRadialAnimation);
+    prepareForUpdate(): void;
+    getAnimationContext(): RadialAnimationContext | undefined;
+    completeRender<TData extends RadialSegmentAnimationData>(pieData: Array<PieArcDatum<TData>>, transitions: Promise<void>[]): Promise<void>;
+}
+export declare function buildRadialSegmentKeys<TData extends RadialSegmentAnimationData>(pieData: Array<PieArcDatum<TData>>): string[];
+export declare function buildRadialAnimatedArcData<TData extends RadialSegmentAnimationData>(pieData: Array<PieArcDatum<TData>>, allSegments: TData[], context: RadialAnimationContext | undefined, shape: RadialArcShape, exitTargetPieData?: Array<PieArcDatum<TData>>): Array<RadialAnimatedArcDatum<TData>>;
+export declare function buildRadialExitTargetPieData<TData extends RadialSegmentAnimationData>(pieGenerator: (segments: TData[]) => Array<PieArcDatum<TData>>, visibleSegments: TData[], allSegments: TData[], context: RadialAnimationContext | undefined, currentPieData: Array<PieArcDatum<TData>>): Array<PieArcDatum<TData>>;
+export declare function renderRadialArcDatum<TData extends RadialSegmentAnimationData>(datum: PieArcDatum<TData>, shape: RadialArcShape): string;
+export declare function interpolateRadialArcDatum<TData extends RadialSegmentAnimationData>(startDatum: PieArcDatum<TData>, endDatum: PieArcDatum<TData>): (progress: number) => PieArcDatum<TData>;
+export declare function interpolateRadialArcShape(startShape: RadialArcShape, endShape: RadialArcShape): (progress: number) => RadialArcShape;
+export declare function createTransitionCompletionPromise(transition: {
+    end: () => Promise<unknown>;
+}): Promise<void>;
+export {};