@internetstiftelsen/charts 0.15.0 → 0.17.0

package/dist/types.d.ts

@@ -269,6 +269,8 @@ export type XAxisConfigBase = {
     groupLabelKey?: string;
     showGroupLabels?: boolean;
     groupLabelGap?: number;
+    groupLabelMaxWidth?: number;
+    groupLabelOversizedBehavior?: LabelOversizedBehavior;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
@@ -297,9 +299,10 @@ export type GridConfigBase = {
 export type GridConfig = GridConfigBase & {
     exportHooks?: ExportHooks<GridConfigBase>;
 };
-export type TooltipMode = 'shared' | 'split';
-export type TooltipPosition = 'side' | 'vertical';
-export type TooltipBarAnchorPosition = 'top' | 'middle';
+export type TooltipMode = 'shared' | 'split' | 'single';
+export type TooltipPosition = 'auto' | 'side' | 'vertical';
+export type TooltipBarAnchorPosition = 'auto' | 'top' | 'middle';
+export type TooltipColorMode = 'theme' | 'series';
 export type TooltipTransitionConfig = {
     show?: boolean;
     duration?: number;
@@ -309,6 +312,7 @@ export type TooltipConfigBase = {
     mode?: TooltipMode;
     position?: TooltipPosition;
     barAnchorPosition?: TooltipBarAnchorPosition;
+    colorMode?: TooltipColorMode;
     maxWidth?: number;
     transition?: TooltipTransitionConfig;
     formatter?: SeriesValueFormatter;

package/dist/x-axis.d.ts

@@ -9,6 +9,8 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     readonly groupLabelKey?: string;
     readonly showGroupLabels: boolean;
     readonly groupLabelGap: number;
+    private readonly groupLabelMaxWidth?;
+    private readonly groupLabelOversizedBehavior;
     private readonly rotatedLabels;
     private readonly tickPadding;
     private fontSize;
@@ -16,6 +18,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly oversizedBehavior;
     private readonly tickFormat;
     private wrapLineCount;
+    private groupLabelWrapLineCount;
     private estimatedHeight;
     private estimatedTickLabelVerticalFootprint;
     private readonly autoHideOverlapping;
@@ -31,7 +34,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
      * Returns the space required by the x-axis
      */
     getRequiredSpace(): ComponentSpace;
-    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
+    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement, data?: DataItem[], estimatedXAxisRangeWidth?: number): void;
     clearEstimatedSpace(): void;
     private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
@@ -39,15 +42,22 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private renderGroupLabels;
     private buildGroupRanges;
     private applyLabelConstraints;
+    private applyGroupLabelConstraints;
+    private resolveGroupLabelMaxWidth;
     private wrapTextElement;
     private addTitleTooltip;
     private applyAutoHiding;
     private measureLabel;
+    private estimateGroupLabelWrapLineCount;
+    private buildGroupLabelEstimates;
+    private resolveEstimatedGroupLabelMaxWidth;
+    private getLabelBlockHeight;
     private setEstimatedDimensions;
     private createAxisGenerator;
     private applyAxisTextConstraints;
     private applyLabelRotation;
     private resolveGroupRangeInput;
+    private resolveGroupLabelKey;
     private collectAutoHideLabels;
     private measureMaxAutoHideLabelWidth;
     private applyAutoHideVisibility;

package/dist/x-axis.js

@@ -1,10 +1,12 @@
 import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
+const GROUP_LABEL_HORIZONTAL_PADDING = 4;
 const DEFAULT_X_AXIS_CONFIG = {
     display: true,
     showGroupLabels: false,
     groupLabelGap: 10,
+    groupLabelOversizedBehavior: 'truncate',
     rotatedLabels: false,
     oversizedBehavior: 'truncate',
     tickFormat: null,
@@ -81,6 +83,18 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "groupLabelMaxWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "groupLabelOversizedBehavior", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "rotatedLabels", {
             enumerable: true,
             configurable: true,
@@ -123,6 +137,12 @@ export class XAxis {
             writable: true,
             value: 1
         });
+        Object.defineProperty(this, "groupLabelWrapLineCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
         Object.defineProperty(this, "estimatedHeight", {
             enumerable: true,
             configurable: true,
@@ -169,6 +189,9 @@ export class XAxis {
         this.groupLabelKey = resolvedConfig.groupLabelKey;
         this.showGroupLabels = resolvedConfig.showGroupLabels;
         this.groupLabelGap = resolvedConfig.groupLabelGap;
+        this.groupLabelMaxWidth = resolvedConfig.groupLabelMaxWidth;
+        this.groupLabelOversizedBehavior =
+            resolvedConfig.groupLabelOversizedBehavior;
         this.rotatedLabels = resolvedConfig.rotatedLabels;
         this.maxLabelWidth = resolvedConfig.maxLabelWidth;
         this.oversizedBehavior = resolvedConfig.oversizedBehavior;
@@ -186,6 +209,8 @@ export class XAxis {
             groupLabelKey: this.groupLabelKey,
             showGroupLabels: this.showGroupLabels,
             groupLabelGap: this.groupLabelGap,
+            groupLabelMaxWidth: this.groupLabelMaxWidth,
+            groupLabelOversizedBehavior: this.groupLabelOversizedBehavior,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
@@ -231,7 +256,10 @@ export class XAxis {
             height += (this.wrapLineCount - 1) * this.fontSize * 1.2;
         }
         if (this.showGroupLabels) {
-            height += this.groupLabelGap + this.fontSize + 5;
+            height +=
+                this.groupLabelGap +
+                    this.getLabelBlockHeight(this.fontSize, this.groupLabelWrapLineCount) +
+                    5;
         }
         return {
             width: 0, // X-axis spans full width
@@ -239,11 +267,12 @@ export class XAxis {
             position: 'bottom',
         };
     }
-    estimateLayoutSpace(labels, theme, svg) {
+    estimateLayoutSpace(labels, theme, svg, data = [], estimatedXAxisRangeWidth) {
         if (!labels.length) {
             this.estimatedHeight = null;
             this.estimatedTickLabelVerticalFootprint = null;
             this.wrapLineCount = 1;
+            this.groupLabelWrapLineCount = 1;
             return;
         }
         this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
@@ -261,12 +290,14 @@ export class XAxis {
             maxLines = Math.max(maxLines, measurement.lines);
             maxWidth = Math.max(maxWidth, measurement.width);
         }
+        this.groupLabelWrapLineCount = this.estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth);
         this.setEstimatedDimensions(maxWidth, maxLines, theme);
         this.wrapLineCount = maxLines;
     }
     clearEstimatedSpace() {
         this.estimatedHeight = null;
         this.estimatedTickLabelVerticalFootprint = null;
+        this.groupLabelWrapLineCount = 1;
     }
     getTickLabelVerticalFootprint() {
         if (this.estimatedTickLabelVerticalFootprint !== null) {
@@ -345,6 +376,7 @@ export class XAxis {
             .attr('font-weight', groupLabelStyle.fontWeight)
             .attr('fill', groupLabelStyle.color)
             .text((range) => range.label);
+        this.applyGroupLabelConstraints(groupLayer.selectAll('text'), svg.node(), groupLabelStyle);
     }
     buildGroupRanges(scale, data) {
         const input = this.resolveGroupRangeInput(scale, data);
@@ -422,12 +454,55 @@ export class XAxis {
             }
         });
     }
-    wrapTextElement(textEl, lines, originalText) {
+    applyGroupLabelConstraints(groupLabels, svg, groupLabelStyle) {
+        groupLabels.each((range, i, nodes) => {
+            const textEl = nodes[i];
+            const maxWidth = this.resolveGroupLabelMaxWidth(range);
+            if (maxWidth <= 0) {
+                textEl.style.visibility = 'hidden';
+                return;
+            }
+            const originalText = textEl.textContent || '';
+            const textWidth = measureTextWidth(originalText, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+            if (textWidth <= maxWidth) {
+                return;
+            }
+            switch (this.groupLabelOversizedBehavior) {
+                case 'truncate': {
+                    const result = truncateText(originalText, maxWidth, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+                    textEl.textContent = result.text;
+                    if (result.truncated) {
+                        this.addTitleTooltip(textEl, originalText);
+                    }
+                    break;
+                }
+                case 'wrap': {
+                    const lines = wrapText(originalText, maxWidth, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+                    this.wrapTextElement(textEl, lines, originalText, groupLabelStyle.fontSize, false);
+                    break;
+                }
+                case 'hide': {
+                    textEl.style.visibility = 'hidden';
+                    break;
+                }
+            }
+        });
+    }
+    resolveGroupLabelMaxWidth(range) {
+        if (this.groupLabelMaxWidth !== undefined) {
+            return this.groupLabelMaxWidth;
+        }
+        const rangeWidth = Math.abs(range.end - range.start);
+        return Math.max(0, rangeWidth - GROUP_LABEL_HORIZONTAL_PADDING * 2);
+    }
+    wrapTextElement(textEl, lines, originalText, fontSize = this.fontSize, updateWrapLineCount = true) {
         // Clear existing content
         textEl.textContent = '';
-        const lineHeight = this.fontSize * 1.2;
+        const lineHeight = fontSize * 1.2;
         // Update wrap line count for height calculation
-        this.wrapLineCount = Math.max(this.wrapLineCount, lines.length);
+        if (updateWrapLineCount) {
+            this.wrapLineCount = Math.max(this.wrapLineCount, lines.length);
+        }
         lines.forEach((line, i) => {
             const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
             tspan.textContent = line;
@@ -482,6 +557,66 @@ export class XAxis {
             lines: 1,
         };
     }
+    estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth) {
+        if (!this.showGroupLabels ||
+            this.groupLabelOversizedBehavior !== 'wrap') {
+            return 1;
+        }
+        const groupLabels = this.buildGroupLabelEstimates(data);
+        if (groupLabels.length === 0) {
+            return 1;
+        }
+        const groupLabelStyle = this.resolveGroupLabelStyle(theme);
+        const totalItemCount = data.length;
+        return groupLabels.reduce((maxLines, groupLabel) => {
+            const maxWidth = this.groupLabelMaxWidth ??
+                this.resolveEstimatedGroupLabelMaxWidth(groupLabel.itemCount, totalItemCount, estimatedXAxisRangeWidth);
+            if (maxWidth === undefined || maxWidth <= 0) {
+                return maxLines;
+            }
+            const lines = wrapText(groupLabel.label, maxWidth, groupLabelStyle.fontSize, groupLabelStyle.fontFamily, groupLabelStyle.fontWeight, svg);
+            return Math.max(maxLines, lines.length || 1);
+        }, 1);
+    }
+    buildGroupLabelEstimates(data) {
+        const groupLabelKey = this.resolveGroupLabelKey();
+        if (!this.dataKey || !groupLabelKey || data.length === 0) {
+            return [];
+        }
+        const labels = [];
+        let previousLabel = null;
+        let currentEstimate = null;
+        data.forEach((row) => {
+            const label = String(row[groupLabelKey] ?? '');
+            if (label === previousLabel) {
+                if (currentEstimate) {
+                    currentEstimate.itemCount += 1;
+                }
+                return;
+            }
+            previousLabel = label;
+            if (label.trim() !== '') {
+                currentEstimate = { label, itemCount: 1 };
+                labels.push(currentEstimate);
+                return;
+            }
+            currentEstimate = null;
+        });
+        return labels;
+    }
+    resolveEstimatedGroupLabelMaxWidth(itemCount, totalItemCount, estimatedXAxisRangeWidth) {
+        if (estimatedXAxisRangeWidth === undefined ||
+            totalItemCount <= 0 ||
+            itemCount <= 0) {
+            return undefined;
+        }
+        const groupWidth = (estimatedXAxisRangeWidth * itemCount) / totalItemCount;
+        return Math.max(0, groupWidth - GROUP_LABEL_HORIZONTAL_PADDING * 2);
+    }
+    getLabelBlockHeight(fontSize, lineCount) {
+        const lineHeight = fontSize * 1.2;
+        return fontSize + Math.max(0, lineCount - 1) * lineHeight;
+    }
     setEstimatedDimensions(maxWidth, maxLines, theme) {
         const lineHeight = this.fontSize * 1.2;
         const textHeight = lineHeight * maxLines;
@@ -500,7 +635,9 @@ export class XAxis {
         if (this.showGroupLabels) {
             const groupLabelStyle = this.resolveGroupLabelStyle(theme);
             this.estimatedHeight +=
-                this.groupLabelGap + groupLabelStyle.fontSize + 5;
+                this.groupLabelGap +
+                    this.getLabelBlockHeight(groupLabelStyle.fontSize, this.groupLabelWrapLineCount) +
+                    5;
         }
     }
     createAxisGenerator(x, labelLookup) {
@@ -548,10 +685,7 @@ export class XAxis {
             typeof scale.bandwidth !== 'function') {
             return null;
         }
-        const groupLabelKey = this.groupLabelKey ??
-            (this.dataKey === GROUPED_CATEGORY_ID_KEY
-                ? GROUPED_GROUP_LABEL_KEY
-                : undefined);
+        const groupLabelKey = this.resolveGroupLabelKey();
         if (!groupLabelKey) {
             return null;
         }
@@ -570,6 +704,12 @@ export class XAxis {
             groupLookup,
         };
     }
+    resolveGroupLabelKey() {
+        return (this.groupLabelKey ??
+            (this.dataKey === GROUPED_CATEGORY_ID_KEY
+                ? GROUPED_GROUP_LABEL_KEY
+                : undefined));
+    }
     collectAutoHideLabels(axisGroup) {
         return axisGroup
             .selectAll('.tick')

package/dist/xy-chart.d.ts

@@ -26,6 +26,7 @@ export declare class XYChart extends BaseChart {
     update(data: ChartData): void;
     protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
+    private getEstimatedXAxisRangeWidth;
     private getYAxisEstimateLabels;
     private createContinuousScaleForLayoutEstimate;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;

package/dist/xy-chart.js

@@ -155,6 +155,9 @@ export class XYChart extends BaseChart {
         super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace?.();
         this.yAxis?.clearEstimatedSpace?.();
+        if (this.yAxis) {
+            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+        }
         if (this.xAxis) {
             const xKey = this.getXKey();
             const labelKey = this.xAxis.labelKey;
@@ -164,12 +167,15 @@ export class XYChart extends BaseChart {
                 }
                 return item[xKey];
             });
-            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode);
-        }
-        if (this.yAxis) {
-            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode, this.data, this.getEstimatedXAxisRangeWidth());
         }
     }
+    getEstimatedXAxisRangeWidth() {
+        const yAxisWidth = this.yAxis?.getRequiredSpace().width ?? 0;
+        const { left, right } = this.renderTheme.margins;
+        const xScalePadding = 10;
+        return Math.max(0, this.width - left - right - yAxisWidth - xScalePadding);
+    }
     getYAxisEstimateLabels() {
         if (!this.yAxis) {
             return [];

package/docs/components.md

@@ -14,6 +14,8 @@ new XAxis({
     groupLabelKey?: string,   // Optional key used for second-row grouped labels
     showGroupLabels?: boolean, // Show second-row grouped labels (default: false)
     groupLabelGap?: number,   // Vertical gap between tick row and grouped row
+    groupLabelMaxWidth?: number, // Optional cap for grouped-label width
+    groupLabelOversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Defaults to truncate
     rotatedLabels?: boolean,  // Rotate tick labels -45deg
     maxLabelWidth?: number,   // Optional cap for tick-label width
     oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Only applies when maxLabelWidth is set
@@ -24,7 +26,11 @@ new XAxis({
 })
 ```
 
-Grouped label styles come from `theme.axis.groupLabel` and are bold by default.
+Grouped label styles come from `theme.axis.groupLabel` and are bold by
+default. When `groupLabelMaxWidth` is omitted, grouped labels are automatically
+capped to their rendered group range so adjacent group labels do not collide.
+Use `groupLabelOversizedBehavior` to truncate, wrap, or hide labels that exceed
+that cap.
 
 ### Example
 
@@ -119,9 +125,10 @@ Renders interactive tooltips on hover and keyboard focus.
 
 ```typescript
 new Tooltip({
-    mode?: 'shared' | 'split',
-    position?: 'side' | 'vertical',
-    barAnchorPosition?: 'top' | 'middle',
+    mode?: 'shared' | 'split' | 'single',
+    position?: 'auto' | 'side' | 'vertical',
+    barAnchorPosition?: 'auto' | 'top' | 'middle',
+    colorMode?: 'theme' | 'series',
     maxWidth?: number, // default: 280
     transition?: {
         show?: boolean,
@@ -140,30 +147,30 @@ The formatter receives:
 
 Tooltip modes:
 
-- `shared` - One tooltip per hovered category/value group
 - `split` - Default. One tooltip per visible series at the hovered category/value group
+- `single` - One tooltip for the closest visible series at the hovered category/value group
+- `shared` - One grouped tooltip per hovered category/value group
 
-Split tooltip positions:
+Single and shared tooltips omit series whose value is `null` or `undefined` for
+the hovered data point. `customFormatter` receives the current series in
+`split` and `single` modes, and the visible series list in `shared` mode.
 
-- `side` - Default. Place split tooltips to the side of each data point
-- `vertical` - Place split tooltips above or below each data point
+Use `position: 'auto' | 'side' | 'vertical'` for XY tooltip placement.
+`auto` is the default. It uses above/below placement for horizontal XY charts
+and side placement elsewhere. For bar tooltips, `barAnchorPosition` defaults to
+`auto`, which aims arrows inside the visible bar segment when possible.
 
-When `split` mode is active, `customFormatter` receives the current series only for
-that tooltip box instead of the full visible series list. Split tooltips include
-directional arrows and avoid overlapping on the same side of the chart when
-possible.
+For horizontal bar charts, prefer `position: 'auto'` or `position: 'vertical'`.
+`position: 'side'` and `barAnchorPosition: 'top' | 'middle'` are kept for
+legacy configs, but horizontal bars resolve bar anchoring automatically.
 
-For bars, `barAnchorPosition` controls whether split tooltips point to the `top`
-or `middle` of each bar.
+Tooltips default to a `280px` max width. Set `transition.show: true` to fade and
+slide tooltips between hovered positions. Tooltip colors use `theme.tooltip` by
+default. Set `colorMode: 'series'` to color-code XY tooltips from the series
+color, with matching background and border colors plus automatic contrast text.
 
-Tooltips default to a `280px` max width so longer content wraps. Set `maxWidth`
-to choose a different cap in pixels.
-
-Set `transition.show: true` to fade tooltips in and out. Tooltip position and
-connector geometry update immediately; only opacity and the small entrance
-offset transition.
-
-Tooltip box, text, connector, and arrow colors use `theme.tooltip`.
+`defaultResponsiveConfig` switches tooltip components to `mode: 'shared'` at
+the `sm` breakpoint so compact XY charts use one grouped tooltip by default.
 
 Formatter, label formatter, and custom formatter output is inserted as HTML.
 Only return trusted content or sanitize user-provided strings before returning

package/docs/xy-chart.md

@@ -78,6 +78,7 @@ Rules for grouped datasets:
 - Remaining keys are treated as metric columns.
 - Each `group` must be a non-empty string.
 - Group labels are rendered on a second x-axis row when `XAxis.showGroupLabels` is enabled.
+- Group labels are capped to their rendered group range by default. Set `XAxis.groupLabelMaxWidth` and `XAxis.groupLabelOversizedBehavior` to override truncation, wrapping, or hiding.
 - CSV/XLSX exports use spreadsheet-style grouped rows (blank first two headers, blank continuation group cells, no spacer rows).
 
 ### Scale Options
@@ -514,16 +515,8 @@ Bar charts support different stacking modes:
 - `percent` - 100% stacked bars
 - `layer` - Overlapping bars
 
-XY charts use split tooltips by default, rendering one tooltip per visible
-series at the hovered category. Use
-`new Tooltip({ mode: 'shared' | 'split', position: 'side' | 'vertical' })`
-to override the grouping and split-tooltip placement.
-For bars, set `barAnchorPosition: 'top' | 'middle'` to choose whether split
-tooltips point to the top or middle of each bar.
-Tooltips default to a `280px` max width. Set `maxWidth` to choose a different
-cap in pixels.
-Use `transition: { show: true, duration: 120, easing: 'ease-out' }` to opt in
-to softer tooltip opacity transitions without delaying position updates.
+Add `new Tooltip()` for hover and focus tooltips. XY charts use split tooltips
+by default; see the [Tooltip component](./components.md#tooltip) for options.
 
 Use `barStack.reverseSeries: true` to reverse bar series display order for
 rendering, legend entries, and split tooltip ordering without changing data

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.15.0",
+    "version": "0.17.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,