@internetstiftelsen/charts 0.13.2 → 0.14.0

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 {};

package/dist/radial-animation.js

@@ -0,0 +1,416 @@
+import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, } from 'd3';
+import { createCubicBezierEasing } from './easing.js';
+import { ChartValidationError, ChartValidator } from './validation.js';
+const DEFAULT_ANIMATE = false;
+const DEFAULT_ANIMATION_DURATION_MS = 700;
+const DEFAULT_ANIMATION_EASING_PRESET = 'ease-in-out';
+const easeSpringOut = createCubicBezierEasing(0.85, 0, 0.15, 1);
+const RADIAL_ANIMATION_EASING_PRESETS = {
+    linear: easeLinear,
+    'ease-in': easeCubicIn,
+    'ease-out': easeCubicOut,
+    'ease-in-out': easeCubicInOut,
+    'bounce-out': easeBounceOut,
+    'elastic-out': easeElasticOut,
+    'spring-out': easeSpringOut,
+};
+export function normalizeRadialAnimationConfig(config, chartName) {
+    if (config === undefined) {
+        return {
+            show: DEFAULT_ANIMATE,
+            duration: DEFAULT_ANIMATION_DURATION_MS,
+            easing: RADIAL_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET],
+        };
+    }
+    if (typeof config === 'boolean') {
+        return {
+            show: config,
+            duration: DEFAULT_ANIMATION_DURATION_MS,
+            easing: RADIAL_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET],
+        };
+    }
+    const normalized = {
+        show: config.show ?? true,
+        duration: config.duration ?? DEFAULT_ANIMATION_DURATION_MS,
+        easing: resolveRadialAnimationEasing(config.easing, chartName),
+    };
+    if (!Number.isFinite(normalized.duration) || normalized.duration < 0) {
+        throw new ChartValidationError(`${chartName}: animate.duration must be >= 0, received '${normalized.duration}'`);
+    }
+    return normalized;
+}
+function resolveRadialAnimationEasing(easing, chartName) {
+    if (!easing) {
+        return RADIAL_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET];
+    }
+    if (typeof easing === 'function') {
+        return easing;
+    }
+    if (easing in RADIAL_ANIMATION_EASING_PRESETS) {
+        return RADIAL_ANIMATION_EASING_PRESETS[easing];
+    }
+    if (easing.startsWith('linear(')) {
+        const parsedCssLinear = parseCssLinearEasing(easing);
+        if (parsedCssLinear) {
+            return parsedCssLinear;
+        }
+    }
+    ChartValidator.warn(`${chartName}: unsupported animate.easing '${easing}', falling back to '${DEFAULT_ANIMATION_EASING_PRESET}'`);
+    return RADIAL_ANIMATION_EASING_PRESETS[DEFAULT_ANIMATION_EASING_PRESET];
+}
+function 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) => parseLinearEasingStop(token));
+    if (rawStops.some((stop) => stop === null)) {
+        return null;
+    }
+    const stops = rawStops;
+    const firstPosition = stops[0].position ?? 0;
+    const lastPosition = stops[stops.length - 1].position ?? 1;
+    if (!hasValidLinearStopPositions(stops, firstPosition, lastPosition)) {
+        return null;
+    }
+    fillMissingLinearStopPositions(stops, firstPosition, lastPosition);
+    return (progress) => sampleLinearEasing(stops, progress);
+}
+function parseLinearEasingStop(token) {
+    const parts = token
+        .trim()
+        .split(/\s+/)
+        .map((part) => part.trim())
+        .filter((part) => part.length > 0);
+    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 positionText = parts[1];
+    if (!positionText.endsWith('%')) {
+        return null;
+    }
+    const percentValue = Number(positionText.slice(0, -1));
+    if (!Number.isFinite(percentValue)) {
+        return null;
+    }
+    return {
+        value,
+        position: percentValue / 100,
+    };
+}
+function hasValidLinearStopPositions(stops, firstPosition, lastPosition) {
+    if (lastPosition <= firstPosition) {
+        return false;
+    }
+    let previousPosition = firstPosition;
+    for (let index = 1; index < stops.length; index += 1) {
+        const stopPosition = stops[index].position;
+        if (stopPosition === undefined) {
+            continue;
+        }
+        if (stopPosition < previousPosition) {
+            return false;
+        }
+        previousPosition = stopPosition;
+    }
+    return true;
+}
+function fillMissingLinearStopPositions(stops, firstPosition, lastPosition) {
+    stops[0].position = firstPosition;
+    stops[stops.length - 1].position = lastPosition;
+    let index = 1;
+    while (index < stops.length - 1) {
+        if (stops[index].position !== undefined) {
+            index += 1;
+            continue;
+        }
+        const startIndex = index - 1;
+        let endIndex = index + 1;
+        while (endIndex < stops.length &&
+            stops[endIndex].position === undefined) {
+            endIndex += 1;
+        }
+        const startPosition = stops[startIndex].position ?? firstPosition;
+        const endPosition = stops[endIndex]?.position ?? lastPosition;
+        const missingCount = endIndex - startIndex;
+        for (let fillIndex = startIndex + 1; fillIndex < endIndex; fillIndex += 1) {
+            const ratio = (fillIndex - startIndex) / missingCount;
+            stops[fillIndex].position =
+                startPosition + (endPosition - startPosition) * ratio;
+        }
+        index = endIndex;
+    }
+}
+function sampleLinearEasing(stops, progress) {
+    const clampedProgress = Math.max(0, Math.min(1, progress));
+    if (clampedProgress <= (stops[0].position ?? 0)) {
+        return stops[0].value;
+    }
+    for (let index = 1; index < stops.length; index += 1) {
+        const previousStop = stops[index - 1];
+        const nextStop = stops[index];
+        const start = previousStop.position ?? 0;
+        const end = nextStop.position ?? 1;
+        if (clampedProgress > end) {
+            continue;
+        }
+        if (end === start) {
+            return nextStop.value;
+        }
+        const ratio = (clampedProgress - start) / (end - start);
+        return (previousStop.value + (nextStop.value - previousStop.value) * ratio);
+    }
+    return stops[stops.length - 1].value;
+}
+export class RadialMotionController {
+    constructor(animation) {
+        Object.defineProperty(this, "animation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hasRenderedLive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "nextRenderAnimationMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pendingAnimationSnapshot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "lastSegmentSnapshot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        this.animation = animation;
+        this.nextRenderAnimationMode = animation.show ? 'initial' : 'none';
+    }
+    prepareForUpdate() {
+        if (!this.animation.show ||
+            !this.hasRenderedLive ||
+            this.animation.duration === 0) {
+            this.pendingAnimationSnapshot = null;
+            this.nextRenderAnimationMode = 'none';
+            return;
+        }
+        this.pendingAnimationSnapshot = new Map(this.lastSegmentSnapshot);
+        this.nextRenderAnimationMode = 'update';
+    }
+    getAnimationContext() {
+        if (!this.animation.show ||
+            this.animation.duration === 0 ||
+            this.nextRenderAnimationMode === 'none') {
+            return undefined;
+        }
+        return {
+            mode: this.nextRenderAnimationMode,
+            duration: this.animation.duration,
+            easing: this.animation.easing,
+            previousSnapshot: this.pendingAnimationSnapshot ?? undefined,
+        };
+    }
+    completeRender(pieData, transitions) {
+        this.lastSegmentSnapshot =
+            createRadialSegmentSnapshotCollection(pieData);
+        this.hasRenderedLive = true;
+        this.nextRenderAnimationMode = 'none';
+        this.pendingAnimationSnapshot = null;
+        if (transitions.length === 0) {
+            return Promise.resolve();
+        }
+        return Promise.allSettled(transitions).then(() => undefined);
+    }
+}
+export function buildRadialSegmentKeys(pieData) {
+    const labelCounts = new Map();
+    return pieData.map((datum) => {
+        const baseKey = datum.data.label;
+        const occurrenceIndex = labelCounts.get(baseKey) ?? 0;
+        labelCounts.set(baseKey, occurrenceIndex + 1);
+        return occurrenceIndex === 0
+            ? baseKey
+            : `${baseKey}::${occurrenceIndex}`;
+    });
+}
+export function buildRadialAnimatedArcData(pieData, allSegments, context, shape, exitTargetPieData = pieData) {
+    const segmentKeys = buildRadialSegmentKeys(pieData);
+    const exitTargetByKey = buildRadialDatumByKey(exitTargetPieData);
+    const currentKeys = new Set(segmentKeys);
+    const collapsedShape = createCollapsedRadialArcShape(shape);
+    const animatedData = pieData.map((datum, index) => {
+        const key = segmentKeys[index];
+        const previous = context?.previousSnapshot?.get(key);
+        const startDatum = previous
+            ? createRadialDatumFromSnapshot(datum.data, previous)
+            : context
+                ? createCollapsedRadialDatum(datum)
+                : datum;
+        return {
+            key,
+            datum,
+            startDatum,
+            endDatum: datum,
+            startShape: context && !previous ? collapsedShape : shape,
+            endShape: shape,
+            initialOpacity: context && !previous ? 0 : 1,
+            finalOpacity: 1,
+            interactive: true,
+        };
+    });
+    if (!context?.previousSnapshot) {
+        return animatedData;
+    }
+    context.previousSnapshot.forEach((snapshot, key) => {
+        if (currentKeys.has(key)) {
+            return;
+        }
+        const exitTargetDatum = exitTargetByKey.get(key);
+        const segment = exitTargetDatum?.data ?? findSegmentBySnapshotKey(allSegments, key);
+        if (!segment) {
+            return;
+        }
+        const startDatum = createRadialDatumFromSnapshot(segment, snapshot);
+        animatedData.push({
+            key,
+            datum: startDatum,
+            startDatum,
+            endDatum: createCollapsedRadialDatum(exitTargetDatum ?? startDatum),
+            startShape: shape,
+            endShape: collapsedShape,
+            initialOpacity: 1,
+            finalOpacity: 0,
+            interactive: false,
+        });
+    });
+    return animatedData;
+}
+export function buildRadialExitTargetPieData(pieGenerator, visibleSegments, allSegments, context, currentPieData) {
+    if (!context?.previousSnapshot) {
+        return currentPieData;
+    }
+    const visibleSegmentSet = new Set(visibleSegments);
+    const exitTargetSegments = allSegments.map((segment) => {
+        if (visibleSegmentSet.has(segment)) {
+            return segment;
+        }
+        return {
+            ...segment,
+            value: 0,
+        };
+    });
+    return pieGenerator(exitTargetSegments);
+}
+export function renderRadialArcDatum(datum, shape) {
+    return (arc()
+        .innerRadius(shape.innerRadius)
+        .outerRadius(shape.outerRadius)
+        .cornerRadius(shape.cornerRadius)(datum) ?? '');
+}
+export function interpolateRadialArcDatum(startDatum, endDatum) {
+    const startAngle = interpolateNumber(startDatum.startAngle, endDatum.startAngle);
+    const endAngle = interpolateNumber(startDatum.endAngle, endDatum.endAngle);
+    const padAngle = interpolateNumber(startDatum.padAngle, endDatum.padAngle);
+    const value = interpolateNumber(startDatum.value, endDatum.value);
+    return (progress) => {
+        return {
+            ...endDatum,
+            startAngle: startAngle(progress),
+            endAngle: endAngle(progress),
+            padAngle: padAngle(progress),
+            value: value(progress),
+        };
+    };
+}
+export function interpolateRadialArcShape(startShape, endShape) {
+    const innerRadius = interpolateNumber(startShape.innerRadius, endShape.innerRadius);
+    const outerRadius = interpolateNumber(startShape.outerRadius, endShape.outerRadius);
+    const cornerRadius = interpolateNumber(startShape.cornerRadius, endShape.cornerRadius);
+    return (progress) => {
+        return {
+            innerRadius: innerRadius(progress),
+            outerRadius: outerRadius(progress),
+            cornerRadius: cornerRadius(progress),
+        };
+    };
+}
+export function createTransitionCompletionPromise(transition) {
+    return transition.end().then(() => undefined, () => undefined);
+}
+function createCollapsedRadialDatum(datum) {
+    const midAngle = (datum.startAngle + datum.endAngle) / 2;
+    return {
+        ...datum,
+        startAngle: midAngle,
+        endAngle: midAngle,
+        padAngle: 0,
+        value: 0,
+    };
+}
+function createCollapsedRadialArcShape(shape) {
+    return {
+        innerRadius: shape.innerRadius,
+        outerRadius: shape.outerRadius,
+        cornerRadius: 0,
+    };
+}
+function createRadialDatumFromSnapshot(data, snapshot) {
+    return {
+        data,
+        value: snapshot.value,
+        index: snapshot.index,
+        startAngle: snapshot.startAngle,
+        endAngle: snapshot.endAngle,
+        padAngle: snapshot.padAngle,
+    };
+}
+function findSegmentBySnapshotKey(segments, key) {
+    const [label] = key.split('::');
+    return segments.find((segment) => segment.label === label);
+}
+function buildRadialDatumByKey(pieData) {
+    return new Map(buildRadialSegmentKeys(pieData).map((key, index) => {
+        return [key, pieData[index]];
+    }));
+}
+function createRadialSegmentSnapshotCollection(pieData) {
+    const segmentKeys = buildRadialSegmentKeys(pieData);
+    return new Map(pieData.map((datum, index) => {
+        return [
+            segmentKeys[index],
+            {
+                startAngle: datum.startAngle,
+                endAngle: datum.endAngle,
+                padAngle: datum.padAngle,
+                value: datum.value,
+                index: datum.index,
+            },
+        ];
+    }));
+}

package/dist/radial-chart-base.d.ts

@@ -1,10 +1,23 @@
+import type { BaseType, Selection } from 'd3';
 import { BaseChart } from './base-chart.js';
 import type { PlotAreaBounds } from './layout-manager.js';
-import type { LegendSeries } from './types.js';
+import type { LabelOversizedBehavior, LegendSeries } from './types.js';
 type RadialLegendItem = {
     label: string;
     color: string;
 };
+type RadialLabelOverflowOptions = {
+    maxLabelWidth?: number;
+    oversizedBehavior: LabelOversizedBehavior;
+    fontSize: number | string;
+    fontFamily: string;
+    fontWeight: number | string;
+    forceVisible?: boolean;
+};
+type RadialLabelDimensions = {
+    width: number;
+    height: number;
+};
 export declare abstract class RadialChartBase extends BaseChart {
     protected initializeTooltip(): void;
     protected getVisibleRadialItems<T extends RadialLegendItem>(items: T[]): T[];
@@ -16,11 +29,21 @@ export declare abstract class RadialChartBase extends BaseChart {
         fontScale: number;
     };
     protected getRadialLegendSeries<T extends RadialLegendItem>(items: T[]): LegendSeries[];
+    protected renderRadialLabelText<Datum, ParentElement extends BaseType, ParentDatum>(textElement: Selection<SVGTextElement, Datum, ParentElement, ParentDatum>, text: string, options: RadialLabelOverflowOptions, verticalAnchor?: 'middle' | 'baseline'): void;
+    protected renderRadialStructuredLabelText<Datum, ParentElement extends BaseType, ParentDatum>(textElement: Selection<SVGTextElement, Datum, ParentElement, ParentDatum>, labelText: string, valueText: string, separator: string, options: RadialLabelOverflowOptions, verticalAnchor?: 'middle' | 'baseline'): void;
+    protected measureRadialLabelDimensions(text: string, options: RadialLabelOverflowOptions): RadialLabelDimensions;
+    protected measureRadialStructuredLabelDimensions(labelText: string, valueText: string, separator: string, options: RadialLabelOverflowOptions): RadialLabelDimensions;
+    protected resolveRadialLabelLineHeight(fontSize: number | string): number;
     protected showTooltipFromPointer(event: MouseEvent, content: string): void;
     protected positionTooltipFromPointer(event: MouseEvent): void;
     protected showTooltipAtElement(target: Element, content: string): void;
     protected hideTooltip(): void;
     private applyTooltipPosition;
+    private resolveRadialLabelLayout;
+    private resolveRadialLabelOverflowContext;
+    private createVisibleRadialLabelLayout;
+    private resolveOverflowingRadialLabelLayout;
+    private addRadialLabelTitle;
     private resolveRadialFontScale;
 }
 export {};