@internetstiftelsen/charts 0.19.2 → 0.20.0

package/README.md

@@ -396,9 +396,14 @@ chart.render('#word-cloud');
 ```
 
 `minFontSize` and `maxFontSize` are percentages of the smaller plot-area
-dimension and define the relative size range passed into `d3-cloud`. The chart
+dimension and define the initial size range passed into `d3-cloud`. The chart
 expects flat `{ word, count }` rows, aggregates duplicate words after trimming,
 and maps theme typography and colors directly into the layout and rendered SVG.
+Long phrases are fitted to the available area, with at most six placement
+attempts. Container resizing is debounced by 150 ms; initial rendering and data
+updates remain immediate. If space remains insufficient, the chart retains the highest-frequency
+words without shrinking below the configured minimum. See the
+[WordCloudChart API](./docs/word-cloud-chart.md#notes) for fitting behavior.
 Set `animate: true` or pass an animation config to fade and scale words from
 their own centers on initial render and `chart.update(...)`.
 

package/dist/area.d.ts

@@ -3,7 +3,7 @@ import type { AreaConfig, AreaCurveType, AreaConfigBase, AreaStackingContext, Ch
 import type { ChartComponent } from './chart-interface.js';
 import type { XYAreaAnimationContext, XYAreaPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Area implements ChartComponent<AreaConfigBase> {
-    readonly type: "area";
+    readonly type: 'area';
     readonly dataKey: string;
     readonly fill: string;
     readonly stroke: string;

package/dist/bar.d.ts

@@ -3,7 +3,7 @@ import type { BarConfig, BarStackingContext, BarSide, BarValueLabelConfig, Chart
 import type { ChartComponent } from './chart-interface.js';
 import type { XYBarAnimationContext, XYBarSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Bar implements ChartComponent<BarConfigBase> {
-    readonly type: "bar";
+    readonly type: 'bar';
     readonly dataKey: string;
     readonly fill: string;
     readonly colorAdapter?: (data: DataItem, index: number) => string;

package/dist/base-chart.d.ts

@@ -213,6 +213,8 @@ export declare abstract class BaseChart {
      * Setup ResizeObserver for automatic resize handling
      */
     private setupResizeObserver;
+    protected hasContainerSizeChanged(): boolean;
+    protected handleResize(): void;
     private notifyLegendChanged;
     /**
      * Subclasses must implement this method to define their rendering logic

package/dist/base-chart.js

@@ -939,19 +939,22 @@ export class BaseChart {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
-        this.resizeObserver = new ResizeObserver(() => {
-            if (!this.container) {
-                return;
-            }
-            const nextDimensions = this.resolveRenderDimensions(this.container.getBoundingClientRect());
-            if (nextDimensions.width === this.width &&
-                nextDimensions.height === this.height) {
-                return;
-            }
-            this.rerender('resize');
-        });
+        this.resizeObserver = new ResizeObserver(() => this.handleResize());
         this.resizeObserver.observe(this.container);
     }
+    hasContainerSizeChanged() {
+        if (!this.container) {
+            return false;
+        }
+        const nextDimensions = this.resolveRenderDimensions(this.container.getBoundingClientRect());
+        return (nextDimensions.width !== this.width ||
+            nextDimensions.height !== this.height);
+    }
+    handleResize() {
+        if (this.hasContainerSizeChanged()) {
+            this.rerender('resize');
+        }
+    }
     notifyLegendChanged() {
         this.emit('legend:change');
     }
@@ -1310,6 +1313,7 @@ export class BaseChart {
         return exportXLSXBlob(this.sourceData, options);
     }
     async exportImage(format, options) {
+        await this.whenReady();
         const { width, height } = this.exportSize(options);
         const svg = await this.exportSVG(options, format);
         const backgroundColor = options?.backgroundColor ??
@@ -1325,8 +1329,8 @@ export class BaseChart {
         });
     }
     async exportSVG(options, formatForHooks = 'svg') {
-        const liveSvg = this.requireRenderedSvg();
         await this.whenReady();
+        const liveSvg = this.requireRenderedSvg();
         const { exportWidth, exportHeight, requiresExportRender, baseContext } = this.resolveExportContext(options, formatForHooks);
         const clone = this.createExportSvgClone(liveSvg, exportWidth, exportHeight);
         const overrides = this.collectExportOverrides(baseContext);

package/dist/donut-center-content.d.ts

@@ -19,7 +19,7 @@ export type DonutCenterContentConfig = DonutCenterContentConfigBase & {
     exportHooks?: ExportHooks<DonutCenterContentConfigBase>;
 };
 export declare class DonutCenterContent implements ChartComponent<DonutCenterContentConfigBase> {
-    readonly type: "donutCenterContent";
+    readonly type: 'donutCenterContent';
     readonly mainValue?: string;
     readonly title?: string;
     readonly subtitle?: string;

package/dist/grid.d.ts

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 import type { GridConfig, ChartTheme, D3Scale, ExportHooks, GridConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Grid implements ChartComponent<GridConfigBase> {
-    readonly type: "grid";
+    readonly type: 'grid';
     readonly value: boolean;
     readonly category: boolean;
     readonly exportHooks?: ExportHooks<GridConfigBase>;

package/dist/legend.d.ts

@@ -3,7 +3,7 @@ import type { LegendConfig, ChartTheme, HorizontalAlignment, LegendSeries, Expor
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 import { LegendStateController } from './legend-state.js';
 export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
-    readonly type: "legend";
+    readonly type: 'legend';
     mode: LegendMode;
     readonly position: LegendConfig['position'];
     readonly disconnectedTarget?: string | HTMLElement;

package/dist/line.d.ts

@@ -3,7 +3,7 @@ import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLab
 import type { ChartComponent } from './chart-interface.js';
 import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Line implements ChartComponent<LineConfigBase> {
-    readonly type: "line";
+    readonly type: 'line';
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;

package/dist/scatter.d.ts

@@ -3,7 +3,7 @@ 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 type: 'scatter';
     readonly dataKey: string;
     readonly stroke: string;
     readonly pointSize?: number;

package/dist/title.d.ts

@@ -2,10 +2,10 @@ import { type Selection } from 'd3';
 import type { ChartTheme, ExportHooks, TitleConfig, TitleConfigBase } from './types.js';
 import type { ComponentSpace, LayoutAwareComponent } from './chart-interface.js';
 export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
-    readonly type: "title";
+    readonly type: 'title';
     readonly display: boolean;
     readonly text: string;
-    readonly position: "top";
+    readonly position: 'top';
     readonly variant = "title";
     readonly exportHooks?: ExportHooks<TitleConfigBase>;
     private readonly textComponent;

package/dist/tooltip/geometry.js

@@ -725,7 +725,7 @@ function getHorizontalAboveBelowPlacementCost(candidate, layout, preferredEdge,
     return (connectorPenalty +
         edgePenalty +
         xDistance +
-        yDistance * 0.5 +
+        yDistance * 4 +
         overflowPenalty);
 }
 function getPreferredAndOppositeEdges(preferredEdge) {

package/dist/tooltip/xy-interaction.js

@@ -757,8 +757,9 @@ function getTooltipPlacementBounds(svgNode) {
     let bounds = getSplitTooltipViewportBounds();
     let currentElement = svgNode.parentElement;
     while (currentElement) {
-        if (isScrollableElement(currentElement)) {
-            bounds = intersectTooltipBounds(bounds, getElementTooltipBounds(currentElement));
+        const scrollAxes = getScrollableElementAxes(currentElement);
+        if (scrollAxes.horizontal || scrollAxes.vertical) {
+            bounds = intersectTooltipBounds(bounds, getElementTooltipBounds(currentElement), scrollAxes);
         }
         currentElement = currentElement.parentElement;
     }
@@ -775,15 +776,26 @@ function getElementTooltipBounds(element) {
         maxBottom: top + rect.height,
     };
 }
-function intersectTooltipBounds(bounds, nextBounds) {
+function intersectTooltipBounds(bounds, nextBounds, axes = {
+    horizontal: true,
+    vertical: true,
+}) {
     if (nextBounds.maxRight <= nextBounds.minLeft ||
         nextBounds.maxBottom <= nextBounds.minTop) {
         return bounds;
     }
-    const minLeft = Math.max(bounds.minLeft, nextBounds.minLeft);
-    const maxRight = Math.min(bounds.maxRight, nextBounds.maxRight);
-    const minTop = Math.max(bounds.minTop, nextBounds.minTop);
-    const maxBottom = Math.min(bounds.maxBottom, nextBounds.maxBottom);
+    const minLeft = axes.horizontal
+        ? Math.max(bounds.minLeft, nextBounds.minLeft)
+        : bounds.minLeft;
+    const maxRight = axes.horizontal
+        ? Math.min(bounds.maxRight, nextBounds.maxRight)
+        : bounds.maxRight;
+    const minTop = axes.vertical
+        ? Math.max(bounds.minTop, nextBounds.minTop)
+        : bounds.minTop;
+    const maxBottom = axes.vertical
+        ? Math.min(bounds.maxBottom, nextBounds.maxBottom)
+        : bounds.maxBottom;
     if (maxRight <= minLeft || maxBottom <= minTop) {
         return bounds;
     }
@@ -820,6 +832,26 @@ function getTooltipScrollTargets(svgNode) {
     return [...scrollTargets];
 }
 function isScrollableElement(element) {
+    const scrollAxes = getScrollableElementAxes(element);
+    return scrollAxes.horizontal || scrollAxes.vertical;
+}
+function getScrollableElementAxes(element) {
     const style = window.getComputedStyle(element);
-    return [style.overflow, style.overflowX, style.overflowY].some((value) => value === 'auto' || value === 'scroll' || value === 'overlay');
+    return {
+        horizontal: isScrollableOverflowValue(style.overflowX) &&
+            hasScrollableOverflow(element, 'horizontal'),
+        vertical: isScrollableOverflowValue(style.overflowY) &&
+            hasScrollableOverflow(element, 'vertical'),
+    };
+}
+function isScrollableOverflowValue(value) {
+    return value === 'auto' || value === 'scroll' || value === 'overlay';
+}
+function hasScrollableOverflow(element, axis) {
+    const scrollSize = axis === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const clientSize = axis === 'horizontal' ? element.clientWidth : element.clientHeight;
+    if (scrollSize === 0 && clientSize === 0) {
+        return true;
+    }
+    return scrollSize > clientSize;
 }

package/dist/tooltip.d.ts

@@ -6,7 +6,7 @@ import { type XYTooltipSeries } from './tooltip/types.js';
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private static nextTooltipId;
     readonly id: string;
-    readonly type: "tooltip";
+    readonly type: 'tooltip';
     readonly mode: TooltipMode;
     readonly position: TooltipPosition;
     readonly barAnchorPosition: TooltipBarAnchorPosition;

package/dist/word-cloud-chart.d.ts

@@ -31,13 +31,21 @@ export declare class WordCloudChart extends BaseChart {
     private hasRenderedLive;
     private nextRenderShouldAnimate;
     private previousWordSnapshot;
+    private resizeTimeout;
+    private pendingResize;
+    private resolvePendingResize;
     constructor(config: WordCloudChartConfig);
     update(data: ChartData): void;
     destroy(): void;
+    whenReady(): Promise<void>;
+    protected handleResize(): void;
+    private cancelPendingResize;
     protected validateSourceData(data: ChartData): void;
     protected renderChart({ svg, plotArea }: BaseRenderContext): void;
     protected createExportChart(): BaseChart;
     private prepareAnimationForUpdate;
+    private minimumFontSize;
+    private fitWordSizes;
     private startLayout;
     private renderWords;
     private shouldAnimateWords;

package/dist/word-cloud-chart.js

@@ -2,6 +2,7 @@ import cloud from 'd3-cloud';
 import { scaleSqrt } from 'd3';
 import { BaseChart, } from './base-chart.js';
 import { isGroupedData } from './grouped-data.js';
+import { measureTextWidth } from './utils.js';
 import { normalizeRadialAnimationConfig, } from './radial-animation.js';
 const DEFAULT_OPTIONS = {
     maxWords: 75,
@@ -14,6 +15,10 @@ const DEFAULT_OPTIONS = {
     spiral: 'archimedean',
 };
 const INITIAL_WORD_SCALE = 0.2;
+const MAX_LAYOUT_ATTEMPTS = 6;
+const LAYOUT_TIME_SLICE_MS = 8;
+const FONT_SIZE_REDUCTION = 0.75;
+const RESIZE_DEBOUNCE_MS = 150;
 const GROUPED_DATA_ERROR = 'WordCloudChart: grouped datasets are not supported; provide a flat array of rows instead';
 function createPreparedWords(data, plotArea, options, colors) {
     const counts = new Map();
@@ -54,6 +59,18 @@ function createPreparedWords(data, plotArea, options, colors) {
         };
     });
 }
+function getPlacedPrefix(words, placedWords) {
+    const placedByText = new Map(placedWords.map((word) => [word.text, word]));
+    const prefix = [];
+    // A missing common word must never be replaced by rarer words.
+    for (const word of words) {
+        const placed = placedByText.get(word.text);
+        if (!placed)
+            break;
+        prefix.push(placed);
+    }
+    return prefix;
+}
 export class WordCloudChart extends BaseChart {
     constructor(config) {
         super(config);
@@ -105,6 +122,24 @@ export class WordCloudChart extends BaseChart {
             writable: true,
             value: new Map()
         });
+        Object.defineProperty(this, "resizeTimeout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pendingResize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "resolvePendingResize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         const wordCloud = config.wordCloud ?? {};
         this.options = {
             maxWords: wordCloud.maxWords ?? DEFAULT_OPTIONS.maxWords,
@@ -127,20 +162,62 @@ export class WordCloudChart extends BaseChart {
         super.update(data);
     }
     destroy() {
+        this.cancelPendingResize();
         this.layoutRunId += 1;
         this.stopLayout();
         this.setReadyPromise(Promise.resolve());
         super.destroy();
     }
+    whenReady() {
+        if (this.pendingResize) {
+            return this.pendingResize.then(() => super.whenReady());
+        }
+        return super.whenReady();
+    }
+    handleResize() {
+        if (!this.hasContainerSizeChanged()) {
+            this.cancelPendingResize();
+            return;
+        }
+        if (this.resizeTimeout !== null) {
+            clearTimeout(this.resizeTimeout);
+        }
+        // Keep the same promise throughout a burst of resize notifications.
+        if (!this.pendingResize) {
+            this.pendingResize = new Promise((resolve) => {
+                this.resolvePendingResize = resolve;
+            });
+        }
+        this.resizeTimeout = setTimeout(() => {
+            this.resizeTimeout = null;
+            try {
+                super.handleResize();
+            }
+            finally {
+                this.cancelPendingResize();
+            }
+        }, RESIZE_DEBOUNCE_MS);
+    }
+    cancelPendingResize() {
+        if (this.resizeTimeout !== null) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
+        this.resolvePendingResize?.();
+        this.resolvePendingResize = null;
+        this.pendingResize = null;
+    }
     validateSourceData(data) {
         if (isGroupedData(data)) {
             throw new Error(GROUPED_DATA_ERROR);
         }
     }
     renderChart({ svg, plotArea }) {
+        this.cancelPendingResize();
         this.stopLayout();
         this.renderTitle(svg);
-        const words = createPreparedWords(this.data, plotArea, this.options, this.renderTheme.colorPalette);
+        const preparedWords = createPreparedWords(this.data, plotArea, this.options, this.renderTheme.colorPalette);
+        const words = this.fitWordSizes(preparedWords, plotArea, svg.node());
         this.setReadyPromise(new Promise((resolve) => {
             this.resolvePendingReady = resolve;
             this.startLayout(words, plotArea, ++this.layoutRunId, resolve);
@@ -163,9 +240,46 @@ export class WordCloudChart extends BaseChart {
                 this.animation.duration > 0 &&
                 this.hasRenderedLive;
     }
-    startLayout(words, plotArea, runId, resolve) {
+    minimumFontSize(plotArea) {
+        return Math.max(1, Math.ceil((Math.min(plotArea.width, plotArea.height) *
+            this.options.minFontSize) /
+            100));
+    }
+    fitWordSizes(words, plotArea, svg) {
+        const minimumSize = this.minimumFontSize(plotArea);
+        let scale = 1;
+        words.forEach((word, index) => {
+            // d3-cloud measures at size + 1 and rounds sprite widths to 32px.
+            const width = measureTextWidth(word.text, word.size + 1, this.renderTheme.fontFamily, String(this.renderTheme.valueLabel.fontWeight), svg) + 1;
+            const height = (word.size + 1) * 2;
+            let rotatedWidth = width;
+            let rotatedHeight = height;
+            if (this.options.rotation === 'right-angle' && index % 2 === 1) {
+                rotatedWidth = height;
+                rotatedHeight = width;
+            }
+            else if (this.options.rotation === undefined) {
+                // Leave room for any angle selected by d3-cloud.
+                rotatedWidth = rotatedHeight = Math.hypot(width, height);
+            }
+            const padding = this.options.padding * 2;
+            const fit = Math.min(1, Math.max(1, plotArea.width - 32 - padding) / rotatedWidth, Math.max(1, plotArea.height - padding) / rotatedHeight);
+            const fittedSize = (word.size + 1) * fit - 1;
+            if (word.size > minimumSize) {
+                scale = Math.min(scale, Math.max(0, (fittedSize - minimumSize) / (word.size - minimumSize)));
+            }
+        });
+        // Compress the range uniformly to preserve frequency order and the
+        // configured minimum size, including for long, high-frequency phrases.
+        return words.map((word) => ({
+            ...word,
+            size: Math.max(minimumSize, minimumSize + (word.size - minimumSize) * scale),
+        }));
+    }
+    startLayout(words, plotArea, runId, resolve, attempt = 1, bestWords = []) {
         const layout = cloud()
             .words(words.map((word) => ({ ...word })))
+            .timeInterval(LAYOUT_TIME_SLICE_MS)
             .size([
             Math.max(1, Math.floor(plotArea.width)),
             Math.max(1, Math.floor(plotArea.height)),
@@ -177,18 +291,39 @@ export class WordCloudChart extends BaseChart {
             .fontSize((word) => word.size)
             .text((word) => word.text)
             .on('end', (placedWords) => {
-            this.layout = null;
             if (runId !== this.layoutRunId ||
                 !this.plotGroup ||
                 !this.plotArea) {
                 this.finishReady(resolve);
                 return;
             }
-            if (placedWords.length < words.length) {
-                console.warn(`[Chart Warning] WordCloudChart: rendered ${placedWords.length} of ${words.length} words within the available area; reduce maxWords or font sizes to fit more words`);
+            this.layout = null;
+            const prioritizedWords = getPlacedPrefix(words, placedWords);
+            if (prioritizedWords.length > bestWords.length) {
+                bestWords = prioritizedWords;
             }
-            const transitions = this.renderWords(this.plotGroup, this.plotArea, placedWords);
-            this.completeRender(placedWords, transitions).then(() => {
+            if (bestWords.length < words.length &&
+                attempt < MAX_LAYOUT_ATTEMPTS) {
+                const minimumSize = this.minimumFontSize(plotArea);
+                const smallerWords = words.map((word) => ({
+                    ...word,
+                    // Always try the minimum on the final attempt.
+                    size: attempt === MAX_LAYOUT_ATTEMPTS - 1
+                        ? minimumSize
+                        : Math.max(minimumSize, word.size * FONT_SIZE_REDUCTION),
+                }));
+                const canShrink = smallerWords.some((word, index) => Math.floor(word.size) <
+                    Math.floor(words[index].size));
+                if (canShrink) {
+                    this.startLayout(smallerWords, plotArea, runId, resolve, attempt + 1, bestWords);
+                    return;
+                }
+            }
+            if (bestWords.length < words.length) {
+                console.warn(`[Chart Warning] WordCloudChart: rendered ${bestWords.length} of ${words.length} words within the available area after ${attempt} layout attempt(s); retained the highest-frequency words`);
+            }
+            const transitions = this.renderWords(this.plotGroup, this.plotArea, bestWords);
+            this.completeRender(bestWords, transitions).then(() => {
                 this.finishReady(resolve);
             });
         });
@@ -395,7 +530,9 @@ export class WordCloudChart extends BaseChart {
         this.resolvePendingReady = null;
     }
     finishReady(resolve) {
-        this.resolvePendingReady = null;
+        if (this.resolvePendingReady === resolve) {
+            this.resolvePendingReady = null;
+        }
         resolve();
     }
 }

package/dist/x-axis.d.ts

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 import type { XAxisConfig, ChartTheme, D3Scale, DataItem, ExportHooks, XAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
-    readonly type: "xAxis";
+    readonly type: 'xAxis';
     readonly display: boolean;
     readonly dataKey?: string;
     readonly labelKey?: string;

package/dist/y-axis.d.ts

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 import type { ChartTheme, YAxisConfig, D3Scale, ExportHooks, YAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
-    readonly type: "yAxis";
+    readonly type: 'yAxis';
     readonly display: boolean;
     private readonly tickPadding;
     private fontSize;

package/docs/word-cloud-chart.md

@@ -126,7 +126,23 @@ chart.render('#word-cloud');
 ## Notes
 
 - `minFontSize` and `maxFontSize` use percentages of the smaller plot-area
-  dimension and define the relative size range passed into `d3-cloud`.
+  dimension and define the initial size range. The chart fits long phrases to
+  the available area and may reduce text sizes while preserving frequency order
+  and the configured minimum (rounded up to a whole pixel, at least one pixel).
+- Placement makes at most six attempts, stopping earlier when all words fit or
+  text sizes cannot shrink further. If a sixth attempt is needed, it uses the minimum text size.
+  Each attempt yields between short batches of work. Updating, resizing, or
+  destroying the chart cancels pending placement.
+- If words still do not fit, the chart retains the longest successfully placed
+  prefix of the frequency-sorted input across those attempts and logs a warning.
+  It never substitutes rarer words for a missing more frequent word. If even the
+  most frequent word cannot fit at the minimum size, the cloud may be empty.
+- `whenReady()` resolves after the final placement and any animation, including
+  when only part of the input can be rendered.
+- Container resizing is debounced by 150 ms. `whenReady()` also waits for a
+  pending resize and its layout. Initial renders and data updates remain
+  immediate. Updates, explicit renders, and destruction cancel queued resize
+  work; returning to the current rendered dimensions skips the rerender.
 - The chart uses theme typography and palette colors directly when configuring
   `d3-cloud` and rendering the final SVG.
 - If `rotation` is omitted, the chart uses the native `d3-cloud` rotate

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.19.2",
+    "version": "0.20.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -50,56 +50,57 @@
         "write-excel-file": "^4.1.1"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^5.2.1",
+        "@chromatic-com/storybook": "^5.3.0",
         "@eslint/js": "^10.0.1",
-        "@handsontable/react-wrapper": "^17.1.0",
+        "@handsontable/react-wrapper": "^18.0.0",
         "@internetstiftelsen/styleguide": "^5.1.27",
-        "@radix-ui/react-label": "^2.1.9",
-        "@radix-ui/react-select": "^2.3.0",
-        "@radix-ui/react-switch": "^1.3.0",
-        "@radix-ui/react-tabs": "^1.1.14",
-        "@speed-highlight/core": "^1.2.17",
-        "@storybook/addon-a11y": "^10.4.6",
-        "@storybook/addon-docs": "^10.4.6",
-        "@storybook/addon-mcp": "^0.6.0",
-        "@storybook/addon-vitest": "^10.4.6",
-        "@storybook/react-vite": "^10.4.6",
-        "@tailwindcss/vite": "^4.3.1",
+        "@radix-ui/react-label": "^2.1.15",
+        "@radix-ui/react-select": "^2.3.7",
+        "@radix-ui/react-switch": "^1.3.7",
+        "@radix-ui/react-tabs": "^1.1.21",
+        "@speed-highlight/core": "^1.2.24",
+        "@storybook/addon-a11y": "^10.5.7",
+        "@storybook/addon-docs": "^10.5.7",
+        "@storybook/addon-mcp": "^0.7.0",
+        "@storybook/addon-vitest": "^10.5.7",
+        "@storybook/react-vite": "^10.5.7",
+        "@tailwindcss/vite": "^4.3.3",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/jest-dom": "^7.0.0",
         "@testing-library/react": "^16.3.2",
         "@types/d3": "^7.4.3",
         "@types/d3-cloud": "^1.2.9",
-        "@types/node": "^25.9.3",
-        "@types/react": "^19.2.17",
-        "@types/react-dom": "^19.2.3",
-        "@vitest/browser-playwright": "4.1.8",
-        "@vitest/coverage-v8": "4.1.8",
-        "@vitejs/plugin-react-swc": "^4.3.1",
+        "@types/node": "^26.2.0",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@typescript/native": "npm:typescript@~7.0.2",
+        "@vitejs/plugin-react": "^6.0.5",
+        "@vitest/browser-playwright": "4.1.10",
+        "@vitest/coverage-v8": "4.1.10",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "eslint": "^10.5.0",
+        "eslint": "^10.8.1",
         "eslint-plugin-react-hooks": "^7.1.1",
-        "eslint-plugin-react-refresh": "^0.5.2",
-        "eslint-plugin-storybook": "^10.4.6",
-        "globals": "^17.6.0",
-        "handsontable": "^17.1.0",
-        "jsdom": "^29.1.1",
-        "lucide-react": "^1.18.0",
-        "playwright": "^1.61.1",
-        "prettier": "3.8.4",
-        "radix-ui": "^1.5.0",
-        "react": "^19.2.7",
-        "react-dom": "^19.2.7",
-        "sass": "^1.101.0",
-        "storybook": "^10.4.6",
+        "eslint-plugin-react-refresh": "^0.5.3",
+        "eslint-plugin-storybook": "^10.5.7",
+        "globals": "^17.9.0",
+        "handsontable": "^18.0.0",
+        "jsdom": "^30.0.1",
+        "lucide-react": "^1.30.0",
+        "playwright": "^1.62.1",
+        "prettier": "3.9.6",
+        "radix-ui": "^1.6.7",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "sass": "^1.102.0",
+        "storybook": "^10.5.7",
         "tailwind-merge": "^3.6.0",
-        "tailwindcss": "^4.3.1",
-        "tsc-alias": "^1.8.17",
+        "tailwindcss": "^4.3.3",
+        "tsc-alias": "^1.9.1",
         "tw-animate-css": "^1.4.0",
-        "typescript": "~6.0.3",
-        "typescript-eslint": "^8.61.0",
-        "vite": "^8.0.16",
-        "vitest": "^4.1.8"
+        "typescript": "npm:@typescript/typescript6@~6.0.2",
+        "typescript-eslint": "^8.66.0",
+        "vite": "^8.2.1",
+        "vitest": "^4.1.10"
     }
 }