@internetstiftelsen/charts 0.10.1 → 0.11.0

package/dist/scatter.d.ts

@@ -1,6 +1,7 @@
 import type { ChartTheme, D3Scale, DataItem, ExportHooks, LineValueLabelConfig, ScaleType, ScatterConfig, ScatterConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { Selection } from 'd3';
+import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Scatter implements ChartComponent<ScatterConfigBase> {
     readonly type: "scatter";
     readonly dataKey: string;
@@ -11,6 +12,9 @@ export declare class Scatter implements ChartComponent<ScatterConfigBase> {
     constructor(config: ScatterConfig);
     getExportConfig(): ScatterConfigBase;
     createExportComponent(override?: Partial<ScatterConfigBase>): ChartComponent<ScatterConfigBase>;
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme, animation?: XYPointAnimationContext): XYSeriesRenderResult<XYPointSnapshot>;
+    private buildAnimatedData;
+    private createSnapshot;
+    private renderPoints;
     private renderValueLabels;
 }

package/dist/scatter.js

@@ -1,5 +1,6 @@
 import { mergeDeep, sanitizeForCSS } from './utils.js';
 import { getScalePosition } from './scale-utils.js';
+import { buildXYDatumSnapshotKeys, createTransitionCompletionPromise, getEnterStaggerTiming, } from './xy-motion/helpers.js';
 export class Scatter {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -59,7 +60,7 @@ export class Scatter {
             exportHooks: this.exportHooks,
         });
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, animation) {
         const getXPosition = (d) => {
             return (getScalePosition(x, d[xKey], xScaleType) +
                 (x.bandwidth ? x.bandwidth() / 2 : 0));
@@ -71,26 +72,106 @@ export class Scatter {
             }
             return Number.isFinite(parseValue(value));
         };
-        const validData = data.filter(hasValidValue);
+        const snapshotKeys = buildXYDatumSnapshotKeys(data, xKey);
+        const validData = data.flatMap((entry, index) => {
+            if (!hasValidValue(entry)) {
+                return [];
+            }
+            return [
+                {
+                    data: entry,
+                    snapshotKey: snapshotKeys[index] ?? String(index),
+                    x: getXPosition(entry),
+                    y: y(parseValue(entry[this.dataKey])) ?? 0,
+                },
+            ];
+        });
+        const animatedData = this.buildAnimatedData(validData, animation);
         const pointSize = this.pointSize ?? theme.line.point.size;
         const pointStrokeWidth = theme.line.point.strokeWidth;
         const pointStrokeColor = theme.line.point.strokeColor || this.stroke;
         const pointColor = theme.line.point.color || this.stroke;
         const sanitizedKey = sanitizeForCSS(this.dataKey);
-        plotGroup
+        const transitions = this.renderPoints(plotGroup, validData, animatedData, sanitizedKey, pointSize, pointColor, pointStrokeColor, pointStrokeWidth, animation);
+        const snapshot = this.createSnapshot(validData);
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(plotGroup, validData.map((entry) => entry.data), y, parseValue, theme, getXPosition, pointSize);
+        }
+        return {
+            snapshot,
+            transitions,
+        };
+    }
+    buildAnimatedData(validData, animation) {
+        return validData.map((entry) => {
+            if (!animation) {
+                return entry;
+            }
+            const previousSnapshot = animation.previousSnapshot?.get(entry.snapshotKey);
+            return {
+                ...entry,
+                x: previousSnapshot?.x ?? entry.x,
+                y: previousSnapshot?.y ?? animation.baselineY,
+            };
+        });
+    }
+    createSnapshot(validData) {
+        const snapshot = new Map();
+        validData.forEach((entry) => {
+            snapshot.set(entry.snapshotKey, {
+                x: entry.x,
+                y: entry.y,
+            });
+        });
+        return snapshot;
+    }
+    renderPoints(plotGroup, validData, animatedData, sanitizedKey, pointSize, pointColor, pointStrokeColor, pointStrokeWidth, animation) {
+        const isInitialAnimation = animation?.mode === 'initial';
+        const circles = plotGroup
             .selectAll(`.scatter-point-${sanitizedKey}`)
             .data(validData)
             .join('circle')
             .attr('class', `scatter-point-${sanitizedKey}`)
-            .attr('cx', getXPosition)
-            .attr('cy', (d) => y(parseValue(d[this.dataKey])) || 0)
-            .attr('r', pointSize)
+            .attr('cx', (_, index) => (isInitialAnimation
+            ? validData[index]?.x
+            : animation
+                ? animatedData[index]?.x
+                : validData[index]?.x) ?? 0)
+            .attr('cy', (_, index) => (isInitialAnimation
+            ? (validData[index]?.y ?? 0) - pointSize * 2
+            : animation
+                ? animatedData[index]?.y
+                : validData[index]?.y) ?? 0)
+            .attr('r', isInitialAnimation ? 0 : pointSize)
+            .attr('opacity', isInitialAnimation ? 0 : 1)
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
-        if (this.valueLabel?.show) {
-            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition, pointSize);
+        if (!animation) {
+            return [];
+        }
+        const transition = circles.transition();
+        if (isInitialAnimation) {
+            transition
+                .delay((_, index) => {
+                return getEnterStaggerTiming(index, validData.length, animation.duration).delay;
+            })
+                .duration((_, index) => {
+                return getEnterStaggerTiming(index, validData.length, animation.duration).duration;
+            })
+                .ease(animation.easing)
+                .attr('cy', (_, index) => validData[index]?.y ?? 0)
+                .attr('r', pointSize)
+                .attr('opacity', 1);
+        }
+        else {
+            transition
+                .duration(animation.duration)
+                .ease(animation.easing)
+                .attr('cx', (_, index) => validData[index]?.x ?? 0)
+                .attr('cy', (_, index) => validData[index]?.y ?? 0);
         }
+        return [createTransitionCompletionPromise(transition)];
     }
     renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition, pointSize) {
         const config = this.valueLabel;

package/dist/theme.js

@@ -40,6 +40,14 @@ export const defaultTheme = {
         itemSpacingX: 20,
         itemSpacingY: 8,
     },
+    tooltip: {
+        background: '#ffffff',
+        border: '#dddddd',
+        color: '#1f2a36',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontSize: 12,
+        fontWeight: 'normal',
+    },
     line: {
         strokeWidth: 4,
         point: {
@@ -120,6 +128,14 @@ export const newspaperTheme = {
         itemSpacingX: 20,
         itemSpacingY: 8,
     },
+    tooltip: {
+        background: '#ffffff',
+        border: '#2c2c2c',
+        color: '#1a1a1a',
+        fontFamily: 'Georgia, "Times New Roman", Times, serif',
+        fontSize: 11,
+        fontWeight: 'normal',
+    },
     line: {
         strokeWidth: 2.5,
         point: {
@@ -169,6 +185,7 @@ export const defaultResponsiveConfig = {
             theme: {
                 axis: { fontSize: 11 },
                 legend: { fontSize: 11 },
+                tooltip: { fontSize: 11 },
                 valueLabel: { fontSize: 10 },
             },
         },

package/dist/tooltip.d.ts

@@ -1,14 +1,20 @@
 import { type Selection } from 'd3';
-import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase, ScaleType } from './types.js';
+import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase, ScaleType, TooltipMode, TooltipPosition, TooltipBarAnchorPosition, TooltipTransitionConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { Area } from './area.js';
 import type { Scatter } from './scatter.js';
 import type { PlotAreaBounds } from './layout-manager.js';
+type XYTooltipSeries = Line | Bar | Area | Scatter;
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
-    readonly id = "iisChartTooltip";
+    private static nextTooltipId;
+    readonly id: string;
     readonly type: "tooltip";
+    readonly mode: TooltipMode;
+    readonly position: TooltipPosition;
+    readonly barAnchorPosition: TooltipBarAnchorPosition;
+    readonly transition: Required<TooltipTransitionConfig>;
     readonly formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     readonly labelFormatter?: (label: string, data: DataItem) => string;
     readonly customFormatter?: (data: DataItem, series: {
@@ -17,11 +23,57 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
         fill?: string;
     }[]) => string;
     readonly exportHooks?: ExportHooks<TooltipConfigBase>;
+    private readonly splitTooltipOwner;
+    private readonly tooltipStyleKeys;
     private tooltipDiv;
+    private tooltipTheme;
     constructor(config?: TooltipConfig);
     getExportConfig(): TooltipConfigBase;
     createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent<TooltipConfigBase>;
     initialize(theme: ChartTheme): void;
-    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar | Area | Scatter)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: Line | Bar | Area | Scatter, dataPoint: DataItem, index: number) => number): void;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: XYTooltipSeries[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: XYTooltipSeries, dataPoint: DataItem, index: number) => number): void;
+    setContent(content: string): void;
+    getBounds(): DOMRect | null;
+    showAt(left: number, top: number): void;
+    hide(): void;
     cleanup(): void;
+    private applyTooltipStylesIfNeeded;
+    private getTooltipStyleKey;
+    private writeTooltipStyles;
+    private measureTooltip;
+    private renderTooltipWithConnector;
+    private renderTooltipWithoutConnector;
+    private showTooltipAt;
+    private showTooltipSelection;
+    private hideTooltipSelection;
+    private hideTooltipElement;
+    private setTooltipMarkup;
+    private appendTooltipConnector;
+    private resolveBarTooltipAnchor;
+    private resolvePointTooltipAnchor;
+    private getSplitTooltip;
+    private hideSplitTooltips;
+    private removeSplitTooltips;
+    private removeRootTooltip;
+    private resolveTooltipArrowEdge;
+    private resolveSidePlacementArrowEdge;
+    private resolveVerticalPlacementArrowEdge;
+    private resolveSharedTooltipTarget;
+    private resolveSplitTooltipTarget;
+    private getTooltipConnectorOffset;
+    private getAnchoredTooltipPosition;
+    private resolveTooltipConnectorLayout;
+    private resolveTooltipBoxArrowPosition;
+    private resolveTooltipArrowBaseMaskPath;
+    private resolveTooltipConnectorPath;
+    private resolveTooltipBoxArrow;
+    private hasFiniteNumbers;
+    private resolveSplitTooltipCollisions;
+    private getOppositeSideArrowEdge;
+    private getOppositeVerticalArrowEdge;
+    private flipTooltipIfItReducesCollisions;
+    private countSplitTooltipCollisions;
+    private doSplitTooltipLayoutsOverlap;
+    private resolveSplitTooltipPositions;
 }
+export {};