@internetstiftelsen/charts 0.8.0 → 0.9.0

package/donut-chart.js

@@ -1,12 +1,10 @@
 import { arc, pie, select } from 'd3';
-import { BaseChart } from './base-chart.js';
 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 TOOLTIP_OFFSET_PX = 12;
-const EDGE_MARGIN_PX = 10;
-export class DonutChart extends BaseChart {
+export class DonutChart extends RadialChartBase {
     constructor(config) {
         super(config);
         Object.defineProperty(this, "innerRadiusRatio", {
@@ -58,8 +56,7 @@ export class DonutChart extends BaseChart {
         this.cornerRadius = donut.cornerRadius ?? this.theme.donut.cornerRadius;
         this.valueKey = config.valueKey ?? 'value';
         this.labelKey = config.labelKey ?? 'name';
-        this.validateDonutData();
-        this.prepareSegments();
+        this.initializeDataState();
     }
     validateDonutData() {
         ChartValidator.validateDataKey(this.data, this.labelKey, 'DonutChart');
@@ -81,65 +78,34 @@ export class DonutChart 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;
-        }
-        else if (type === 'donutCenterContent') {
-            this.centerContent = component;
+        if (this.tryRegisterComponent(component, [
+            {
+                type: 'donutCenterContent',
+                get: () => this.centerContent,
+                set: (entry) => {
+                    this.centerContent = entry;
+                },
+            },
+        ])) {
+            return this;
         }
-        return this;
+        return super.addChild(component);
     }
     getExportComponents() {
-        const components = [];
-        if (this.title) {
-            components.push(this.title);
-        }
-        if (this.centerContent) {
-            components.push(this.centerContent);
-        }
-        if (this.tooltip) {
-            components.push(this.tooltip);
-        }
-        if (this.legend?.isInlineMode()) {
-            components.push(this.legend);
-        }
-        return components;
+        return [
+            ...this.getBaseExportComponents({
+                title: true,
+            }),
+            ...(this.centerContent ? [this.centerContent] : []),
+            ...this.getBaseExportComponents({
+                tooltip: true,
+                legend: this.legend?.isInlineMode(),
+            }),
+        ];
     }
     update(data) {
-        this.data = data;
-        this.validateDonutData();
-        this.prepareSegments();
         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 DonutChart({
             data: this.data,
@@ -156,81 +122,37 @@ export class DonutChart extends BaseChart {
     }
     applyComponentOverrides(overrides) {
         const restoreBase = super.applyComponentOverrides(overrides);
-        if (overrides.size === 0) {
-            return restoreBase;
-        }
-        const previousCenterContent = this.centerContent;
-        if (this.centerContent) {
-            const override = overrides.get(this.centerContent);
-            if (override && override.type === 'donutCenterContent') {
-                this.centerContent = override;
-            }
-        }
+        const restoreCenterContent = this.applySlotOverrides(overrides, [
+            {
+                type: 'donutCenterContent',
+                get: () => this.centerContent,
+                set: (component) => {
+                    this.centerContent = component;
+                },
+            },
+        ]);
         return () => {
-            this.centerContent = previousCenterContent;
+            restoreCenterContent();
             restoreBase();
         };
     }
-    renderChart() {
-        if (!this.plotArea || !this.svg || !this.plotGroup) {
-            throw new Error('Plot area not calculated');
-        }
-        if (this.title) {
-            const pos = this.layoutManager.getComponentPosition(this.title);
-            this.title.render(this.svg, this.theme, this.width, pos.x, pos.y);
-        }
-        const visibleSegments = this.legend
-            ? this.segments.filter((seg) => this.legend.isSeriesVisible(seg.label))
-            : this.segments;
-        const cx = this.plotArea.left + this.plotArea.width / 2;
-        const cy = this.plotArea.top + this.plotArea.height / 2;
-        const outerRadius = Math.min(this.plotArea.width, this.plotArea.height) / 2;
-        const innerRadius = outerRadius * this.innerRadiusRatio;
-        const fontScale = this.resolveFontScale(outerRadius);
-        if (this.tooltip) {
-            this.tooltip.initialize(this.theme);
-        }
-        this.renderSegments(visibleSegments, cx, cy, innerRadius, outerRadius);
+    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();
+        this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
         if (this.centerContent) {
-            this.centerContent.render(this.svg, cx, cy, this.theme, fontScale);
-        }
-        if (this.legend?.isInlineMode()) {
-            const pos = this.layoutManager.getComponentPosition(this.legend);
-            this.legend.render(this.svg, this.getLegendSeries(), this.theme, this.width, pos.x, pos.y);
+            this.centerContent.render(svg, cx, cy, this.renderTheme, fontScale);
         }
-    }
-    resolveFontScale(outerRadius) {
-        const plotHeight = Math.max(1, this.theme.height -
-            this.theme.margins.top -
-            this.theme.margins.bottom);
-        const referenceRadius = Math.max(1, plotHeight / 2);
-        const rawScale = outerRadius / referenceRadius;
-        return Math.max(0.5, Math.min(1, rawScale));
+        this.renderInlineLegend(svg);
     }
     getLegendSeries() {
-        return this.segments.map((segment) => {
-            return {
-                dataKey: segment.label,
-                fill: segment.color,
-            };
-        });
-    }
-    positionTooltip(event, tooltipDiv) {
-        const node = tooltipDiv.node();
-        if (!node)
-            return;
-        const rect = node.getBoundingClientRect();
-        let x = event.pageX + TOOLTIP_OFFSET_PX;
-        let y = event.pageY - rect.height / 2;
-        if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
-            x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
-        }
-        x = Math.max(EDGE_MARGIN_PX, x);
-        y = Math.max(EDGE_MARGIN_PX, Math.min(y, window.innerHeight +
-            window.scrollY -
-            rect.height -
-            EDGE_MARGIN_PX));
-        tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
+        return this.getRadialLegendSeries(this.segments);
     }
     buildTooltipContent(d, segments) {
         const total = segments.reduce((sum, s) => sum + s.value, 0);
@@ -246,9 +168,7 @@ export class DonutChart extends BaseChart {
         }
         return `<strong>${d.data.label}</strong><br/>${d.data.value} (${percentage}%)`;
     }
-    renderSegments(segments, cx, cy, innerRadius, outerRadius) {
-        if (!this.plotGroup || !this.svg)
-            return;
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
         const pieGenerator = pie()
             .value((d) => d.value)
             .padAngle(this.padAngle)
@@ -262,7 +182,7 @@ export class DonutChart extends BaseChart {
             .outerRadius(outerRadius + HOVER_EXPAND_PX)
             .cornerRadius(this.cornerRadius);
         const pieData = pieGenerator(segments);
-        const segmentGroup = this.plotGroup
+        const segmentGroup = plotGroup
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
@@ -292,13 +212,13 @@ export class DonutChart extends BaseChart {
                 tooltipDiv
                     .style('visibility', 'visible')
                     .html(this.buildTooltipContent(d, segments));
-                this.positionTooltip(event, tooltipDiv);
+                this.positionTooltipFromPointer(event, tooltipDiv);
             }
         })
             .on('mousemove', (event) => {
             const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
-                this.positionTooltip(event, tooltipDiv);
+                this.positionTooltipFromPointer(event, tooltipDiv);
             }
         })
             .on('mouseleave', (event, d) => {

package/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 { ChartComponent } 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[];
     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[];
 }