@internetstiftelsen/charts 0.8.0 → 0.9.1

package/dist/chart-interface.d.ts

@@ -0,0 +1,19 @@
+import type { ExportHooks } from './types.js';
+export type ChartComponentType = 'line' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+export interface ChartComponentBase {
+    type: ChartComponentType;
+}
+export interface ChartComponent<TConfig = unknown> extends ChartComponentBase {
+    type: ChartComponentType;
+    exportHooks?: ExportHooks<TConfig>;
+}
+export type ComponentSpace = {
+    width: number;
+    height: number;
+    position: 'top' | 'bottom' | 'left' | 'right';
+};
+export interface LayoutAwareComponentBase extends ChartComponentBase {
+    getRequiredSpace(): ComponentSpace;
+}
+export interface LayoutAwareComponent<TConfig = unknown> extends ChartComponent<TConfig>, LayoutAwareComponentBase {
+}

package/{donut-center-content.d.ts → dist/donut-center-content.d.ts}

@@ -27,7 +27,7 @@ export declare class DonutCenterContent implements ChartComponent<DonutCenterCon
     private readonly config;
     constructor(config?: DonutCenterContentConfig);
     getExportConfig(): DonutCenterContentConfigBase;
-    createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent<DonutCenterContentConfigBase>;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, cx: number, cy: number, theme: ChartTheme, fontScale?: number): void;
 }
 export {};

package/dist/donut-chart.d.ts

@@ -0,0 +1,51 @@
+import type { DataItem, 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';
+export type DonutConfig = {
+    innerRadius?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+};
+export type DonutValueLabelPosition = 'outside' | 'auto';
+export type DonutValueLabelConfig = {
+    show?: boolean;
+    position?: DonutValueLabelPosition;
+    outsideOffset?: number;
+    minVerticalSpacing?: number;
+    formatter?: (label: string, value: number, data: DataItem, percentage: number) => string;
+};
+export type DonutChartConfig = BaseChartConfig & {
+    donut?: DonutConfig;
+    valueLabel?: DonutValueLabelConfig;
+    valueKey?: string;
+    labelKey?: string;
+};
+export declare class DonutChart extends RadialChartBase {
+    private readonly innerRadiusRatio;
+    private readonly padAngle;
+    private readonly cornerRadius;
+    private readonly valueKey;
+    private readonly labelKey;
+    private readonly valueLabel;
+    private segments;
+    private centerContent;
+    constructor(config: DonutChartConfig);
+    private validateDonutData;
+    private prepareSegments;
+    addChild(component: ChartComponentBase): this;
+    protected getExportComponents(): ChartComponentBase[];
+    update(data: DataItem[]): 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 renderSegments;
+    private renderLabels;
+    private getArcPoint;
+    private resolveOutsideLabel;
+    private adjustOutsideLabelPositions;
+}

package/dist/donut-chart.js

@@ -0,0 +1,374 @@
+import { arc, pie, select } from 'd3';
+import { sanitizeForCSS } from './utils.js';
+import { ChartValidator } from './validation.js';
+import { RadialChartBase } from './radial-chart-base.js';
+const HOVER_EXPAND_PX = 8;
+const ANIMATION_DURATION_MS = 150;
+const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
+const OUTSIDE_LABEL_LINE_INSET_PX = 4;
+export class DonutChart extends RadialChartBase {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "innerRadiusRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "padAngle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cornerRadius", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "labelKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "segments", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "centerContent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        const donut = config.donut ?? {};
+        this.innerRadiusRatio =
+            donut.innerRadius ?? this.theme.donut.innerRadius;
+        this.padAngle = donut.padAngle ?? this.theme.donut.padAngle;
+        this.cornerRadius = donut.cornerRadius ?? this.theme.donut.cornerRadius;
+        this.valueKey = config.valueKey ?? 'value';
+        this.labelKey = config.labelKey ?? 'name';
+        this.valueLabel = {
+            show: config.valueLabel?.show ?? false,
+            position: config.valueLabel?.position ?? 'auto',
+            outsideOffset: config.valueLabel?.outsideOffset ?? 16,
+            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ?? 14,
+            formatter: config.valueLabel?.formatter ??
+                ((label, value, _data, _percentage) => `${label}: ${value}`),
+        };
+        this.initializeDataState();
+    }
+    validateDonutData() {
+        ChartValidator.validateDataKey(this.data, this.labelKey, 'DonutChart');
+        ChartValidator.validateDataKey(this.data, this.valueKey, 'DonutChart');
+        ChartValidator.validateNumericData(this.data, this.valueKey, 'DonutChart');
+        for (const [index, item] of this.data.entries()) {
+            const value = this.parseValue(item[this.valueKey]);
+            if (value < 0) {
+                throw new Error(`DonutChart: data item at index ${index} has negative value '${item[this.valueKey]}' for key '${this.valueKey}'`);
+            }
+        }
+        if (this.valueLabel.outsideOffset < 0) {
+            throw new Error(`DonutChart: valueLabel.outsideOffset must be >= 0, received '${this.valueLabel.outsideOffset}'`);
+        }
+        if (this.valueLabel.minVerticalSpacing < 0) {
+            throw new Error(`DonutChart: valueLabel.minVerticalSpacing must be >= 0, received '${this.valueLabel.minVerticalSpacing}'`);
+        }
+    }
+    prepareSegments() {
+        this.segments = this.data.map((item, index) => ({
+            label: String(item[this.labelKey]),
+            value: this.parseValue(item[this.valueKey]),
+            color: (typeof item['color'] === 'string' ? item['color'] : null) ||
+                this.theme.colorPalette[index % this.theme.colorPalette.length],
+            source: item,
+        }));
+    }
+    addChild(component) {
+        if (this.tryRegisterComponent(component, [
+            {
+                type: 'donutCenterContent',
+                get: () => this.centerContent,
+                set: (entry) => {
+                    this.centerContent = entry;
+                },
+            },
+        ])) {
+            return this;
+        }
+        return super.addChild(component);
+    }
+    getExportComponents() {
+        return [
+            ...this.getBaseExportComponents({
+                title: true,
+            }),
+            ...(this.centerContent ? [this.centerContent] : []),
+            ...this.getBaseExportComponents({
+                tooltip: true,
+                legend: this.legend?.isInlineMode(),
+            }),
+        ];
+    }
+    update(data) {
+        super.update(data);
+    }
+    createExportChart() {
+        return new DonutChart({
+            data: this.data,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
+            theme: this.theme,
+            responsive: this.responsiveConfig,
+            donut: {
+                innerRadius: this.innerRadiusRatio,
+                padAngle: this.padAngle,
+                cornerRadius: this.cornerRadius,
+            },
+            valueLabel: this.valueLabel,
+            valueKey: this.valueKey,
+            labelKey: this.labelKey,
+        });
+    }
+    applyComponentOverrides(overrides) {
+        const restoreBase = super.applyComponentOverrides(overrides);
+        const restoreCenterContent = this.applySlotOverrides(overrides, [
+            {
+                type: 'donutCenterContent',
+                get: () => this.centerContent,
+                set: (component) => {
+                    this.centerContent = component;
+                },
+            },
+        ]);
+        return () => {
+            restoreCenterContent();
+            restoreBase();
+        };
+    }
+    syncDerivedState() {
+        this.validateDonutData();
+        this.prepareSegments();
+    }
+    renderChart({ svg, plotGroup, plotArea, }) {
+        this.renderTitle(svg);
+        const visibleSegments = this.getVisibleRadialItems(this.segments);
+        const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
+        this.initializeTooltip();
+        const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
+        if (this.valueLabel.show && visibleSegments.length > 0) {
+            this.renderLabels(segmentGroup, pieData, outerRadius, visibleSegments.reduce((sum, segment) => {
+                return sum + segment.value;
+            }, 0), fontScale);
+        }
+        if (this.centerContent) {
+            this.centerContent.render(svg, cx, cy, this.renderTheme, fontScale);
+        }
+        this.renderInlineLegend(svg);
+    }
+    getLegendSeries() {
+        return this.getRadialLegendSeries(this.segments);
+    }
+    buildTooltipContent(d, segments) {
+        const total = segments.reduce((sum, s) => sum + s.value, 0);
+        const percentage = total > 0 ? ((d.data.value / total) * 100).toFixed(1) : '0.0';
+        const dataItem = this.data.find((item) => String(item[this.labelKey]) === d.data.label);
+        if (this.tooltip?.customFormatter) {
+            return this.tooltip.customFormatter(dataItem || {}, [
+                { dataKey: d.data.label, fill: d.data.color },
+            ]);
+        }
+        if (this.tooltip?.formatter) {
+            return `<strong>${d.data.label}</strong><br/>${this.tooltip.formatter(d.data.label, d.data.value, dataItem || {})}`;
+        }
+        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);
+    }
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
+        const pieGenerator = pie()
+            .value((d) => d.value)
+            .padAngle(this.padAngle)
+            .sort(null);
+        const arcGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .cornerRadius(this.cornerRadius);
+        const hoverArcGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius + HOVER_EXPAND_PX)
+            .cornerRadius(this.cornerRadius);
+        const pieData = pieGenerator(segments);
+        const segmentGroup = plotGroup
+            .append('g')
+            .attr('class', 'donut-segments')
+            .attr('transform', `translate(${cx}, ${cy})`);
+        const resolveTooltipDiv = () => this.tooltip
+            ? select(`#${this.tooltip.id}`)
+            : null;
+        segmentGroup
+            .selectAll('.donut-segment')
+            .data(pieData)
+            .join('path')
+            .attr('class', (d) => `donut-segment segment-${sanitizeForCSS(d.data.label)}`)
+            .attr('d', arcGenerator)
+            .attr('fill', (d) => d.data.color)
+            .style('cursor', 'pointer')
+            .style('transition', 'opacity 0.15s ease')
+            .on('mouseenter', (event, d) => {
+            select(event.currentTarget)
+                .transition()
+                .duration(ANIMATION_DURATION_MS)
+                .attr('d', hoverArcGenerator(d));
+            segmentGroup
+                .selectAll('.donut-segment')
+                .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
+                .style('opacity', 0.5);
+            const tooltipDiv = resolveTooltipDiv();
+            if (tooltipDiv && !tooltipDiv.empty()) {
+                tooltipDiv
+                    .style('visibility', 'visible')
+                    .html(this.buildTooltipContent(d, segments));
+                this.positionTooltipFromPointer(event, tooltipDiv);
+            }
+        })
+            .on('mousemove', (event) => {
+            const tooltipDiv = resolveTooltipDiv();
+            if (tooltipDiv && !tooltipDiv.empty()) {
+                this.positionTooltipFromPointer(event, tooltipDiv);
+            }
+        })
+            .on('mouseleave', (event, d) => {
+            select(event.currentTarget)
+                .transition()
+                .duration(ANIMATION_DURATION_MS)
+                .attr('d', arcGenerator(d));
+            segmentGroup.selectAll('.donut-segment').style('opacity', 1);
+            const tooltipDiv = resolveTooltipDiv();
+            if (tooltipDiv && !tooltipDiv.empty()) {
+                tooltipDiv.style('visibility', 'hidden');
+            }
+        });
+        return {
+            segmentGroup,
+            pieData,
+        };
+    }
+    renderLabels(segmentGroup, pieData, outerRadius, total, fontScale) {
+        if (pieData.length === 0) {
+            return;
+        }
+        const labelGroup = segmentGroup
+            .append('g')
+            .attr('class', 'donut-labels');
+        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 adjustedOutsideLabels = this.adjustOutsideLabelPositions(outsideLabels, outerRadius);
+        const linesGroup = labelGroup
+            .append('g')
+            .attr('class', 'donut-label-leader-lines');
+        adjustedOutsideLabels.forEach((outsideLabel) => {
+            const midAngle = (outsideLabel.datum.startAngle + outsideLabel.datum.endAngle) /
+                2;
+            const anchorX = outerRadius + this.valueLabel.outsideOffset;
+            const textX = outsideLabel.side === 'right'
+                ? anchorX + OUTSIDE_LABEL_TEXT_OFFSET_PX
+                : -anchorX - OUTSIDE_LABEL_TEXT_OFFSET_PX;
+            const lineEndX = outsideLabel.side === 'right'
+                ? textX - OUTSIDE_LABEL_TEXT_OFFSET_PX / 2
+                : textX + OUTSIDE_LABEL_TEXT_OFFSET_PX / 2;
+            const start = this.getArcPoint(midAngle, outerRadius + OUTSIDE_LABEL_LINE_INSET_PX);
+            const elbow = this.getArcPoint(midAngle, outerRadius + this.valueLabel.outsideOffset * 0.65);
+            const elbowY = outsideLabel.y;
+            linesGroup
+                .append('path')
+                .attr('class', `donut-label-line donut-label-line-${sanitizeForCSS(outsideLabel.datum.data.label)}`)
+                .attr('d', `M ${start.x},${start.y} L ${elbow.x},${elbowY} L ${lineEndX},${outsideLabel.y}`)
+                .attr('fill', 'none')
+                .attr('stroke', this.renderTheme.valueLabel.border)
+                .attr('stroke-width', 1);
+            labelGroup
+                .append('text')
+                .attr('class', `donut-label donut-label--outside donut-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', fontFamily)
+                .attr('font-size', `${fontSize}px`)
+                .attr('font-weight', fontWeight)
+                .attr('fill', this.renderTheme.valueLabel.color)
+                .text(this.formatValueLabelText(outsideLabel.datum.data, total));
+        });
+    }
+    getArcPoint(angle, radius) {
+        return {
+            x: Math.sin(angle) * radius,
+            y: -Math.cos(angle) * radius,
+        };
+    }
+    resolveOutsideLabel(datum, outerRadius) {
+        const midAngle = (datum.startAngle + datum.endAngle) / 2;
+        const point = this.getArcPoint(midAngle, outerRadius + this.valueLabel.outsideOffset);
+        const side = point.x >= 0 ? 'right' : 'left';
+        return {
+            datum,
+            y: point.y,
+            side,
+            textAnchor: side === 'right' ? 'start' : 'end',
+        };
+    }
+    adjustOutsideLabelPositions(labels, outerRadius) {
+        const adjustForSide = (side) => {
+            const sideLabels = labels
+                .filter((label) => label.side === side)
+                .sort((a, b) => a.y - b.y);
+            if (sideLabels.length === 0) {
+                return [];
+            }
+            const topLimit = -outerRadius;
+            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;
+                sideLabels[i].y = Math.max(sideLabels[i].y, minY);
+            }
+            const overflow = sideLabels[sideLabels.length - 1].y - bottomLimit;
+            if (overflow > 0) {
+                sideLabels[sideLabels.length - 1].y -= overflow;
+                for (let i = sideLabels.length - 2; i >= 0; i--) {
+                    const maxY = sideLabels[i + 1].y -
+                        this.valueLabel.minVerticalSpacing;
+                    sideLabels[i].y = Math.min(sideLabels[i].y, maxY);
+                }
+                const underflow = topLimit - sideLabels[0].y;
+                if (underflow > 0) {
+                    sideLabels.forEach((label) => {
+                        label.y += underflow;
+                    });
+                }
+            }
+            return sideLabels;
+        };
+        return [...adjustForSide('left'), ...adjustForSide('right')];
+    }
+}

package/{gauge-chart.d.ts → dist/gauge-chart.d.ts}

@@ -1,6 +1,6 @@
 import type { DataItem, LegendSeries } from './types.js';
-import { BaseChart, type BaseChartConfig } from './base-chart.js';
-import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
+import { BaseChart, type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
+import type { ChartComponentBase } from './chart-interface.js';
 export type GaugeSegment = {
     from: number;
     to: number;
@@ -35,10 +35,17 @@ export type GaugeLabelStyle = {
     fontWeight?: number | string;
     color?: string;
 };
+export type GaugeAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out';
+export type GaugeAnimationConfig = {
+    show?: boolean;
+    duration?: number;
+    easing?: GaugeAnimationEasingPreset | `linear(${string})` | ((progress: number) => number);
+};
 export type GaugeConfig = {
     value?: number;
     min?: number;
     max?: number;
+    animate?: boolean | GaugeAnimationConfig;
     halfCircle?: boolean;
     startAngle?: number;
     endAngle?: number;
@@ -71,6 +78,7 @@ export declare class GaugeChart extends BaseChart {
     private readonly targetValueKey;
     private readonly minValue;
     private readonly maxValue;
+    private readonly animation;
     private readonly halfCircle;
     private readonly startAngle;
     private readonly endAngle;
@@ -91,11 +99,15 @@ export declare class GaugeChart extends BaseChart {
     private segments;
     private value;
     private targetValue;
+    private lastRenderedValue;
     constructor(config: GaugeChartConfig);
     private normalizeNeedleConfig;
     private normalizeMarkerConfig;
     private getThemePaletteColor;
     private normalizeTickConfig;
+    private normalizeAnimationConfig;
+    private resolveAnimationEasing;
+    private parseCssLinearEasing;
     private normalizeTickLabelStyle;
     private normalizeValueLabelStyle;
     private validateGaugeConfig;
@@ -108,13 +120,13 @@ export declare class GaugeChart extends BaseChart {
     private clampToDomain;
     private prepareSegments;
     private defaultFormat;
-    addChild(component: ChartComponent): this;
-    protected getExportComponents(): ChartComponent[];
+    protected getExportComponents(): ChartComponentBase[];
     update(data: DataItem[]): void;
-    protected getLayoutComponents(): LayoutAwareComponent[];
-    protected prepareLayout(): void;
     protected createExportChart(): BaseChart;
-    protected renderChart(): void;
+    protected syncDerivedState(): void;
+    protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
+    private resolveAnimationStartValue;
+    private shouldAnimateTransition;
     private buildAriaLabel;
     private findSegmentStatusLabel;
     private getVisibleSegments;
@@ -135,6 +147,5 @@ export declare class GaugeChart extends BaseChart {
     private resolveTooltipDiv;
     private buildTooltipContent;
     private positionTooltip;
-    private renderLegend;
     protected getLegendSeries(): LegendSeries[];
 }