@internetstiftelsen/charts 0.15.0 → 0.16.0

package/README.md

@@ -11,6 +11,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Divergent Bar Support** - Bar charts automatically render from zero and diverge around `0` for mixed positive/negative values
 - **Mirrored Bar Sides** - Horizontal bars can mirror a series to the left for population-pyramid style charts without changing source data
 - **Custom Value Labels** - XY, pie, donut, and gauge charts support configurable labels with formatters, max-width overflow behavior, and forced rendering when labels would otherwise be hidden
+- **Axis Label Overflow** - X/Y tick labels and grouped X-axis labels support max-width overflow behavior
 - **Optional XY Animation** - Animate XY series on first render and `chart.update(...)` with `animate`
 - **Optional Radial Animation** - Animate pie and donut segments on first render and `chart.update(...)` with `animate`
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
@@ -349,6 +350,9 @@ const chart = new XYChart({
 });
 ```
 
+The exported `defaultResponsiveConfig` also switches tooltip components to
+`mode: 'shared'` at its `sm` breakpoint for compact XY charts.
+
 ## Word Cloud
 
 ```javascript

package/dist/theme.js

@@ -325,6 +325,12 @@ export const defaultResponsiveConfig = {
                 tooltip: { fontSize: 11 },
                 valueLabel: { fontSize: 10 },
             },
+            components: [
+                {
+                    match: { type: 'tooltip' },
+                    override: { mode: 'shared' },
+                },
+            ],
         },
         md: {
             minWidth: 480,

package/dist/tooltip/dom.d.ts

@@ -0,0 +1,56 @@
+import type { ChartTheme, TooltipTransitionConfig } from '../types.js';
+import { type TooltipAnchor, type TooltipArrowEdge, type TooltipDivSelection } from './types.js';
+type TooltipDomConfig = {
+    id: string;
+    splitTooltipOwner: string;
+    maxWidth: number;
+    transition: Required<TooltipTransitionConfig>;
+};
+export declare class TooltipDom {
+    private readonly id;
+    private readonly splitTooltipOwner;
+    private readonly maxWidth;
+    private readonly transition;
+    private readonly tooltipStyleKeys;
+    private readonly tooltipTransitionFrameIds;
+    private tooltipDiv;
+    private tooltipTheme;
+    constructor(config: TooltipDomConfig);
+    initialize(theme: ChartTheme): void;
+    getRootTooltip(): TooltipDivSelection | null;
+    setContent(content: string): void;
+    getBounds(): DOMRect | null;
+    showAt(left: number, top: number): void;
+    hide(): void;
+    cleanup(): void;
+    measureTooltip(tooltip: TooltipDivSelection, content: string): {
+        width: number;
+        height: number;
+    } | null;
+    renderTooltipWithConnector(tooltip: TooltipDivSelection, arrowEdge: TooltipArrowEdge, left: number, top: number, tooltipWidth: number, tooltipHeight: number, targetX: number, targetY: number, anchor: TooltipAnchor): void;
+    renderTooltipWithoutConnector(tooltip: TooltipDivSelection, left: number, top: number): void;
+    hideTooltipSelection(tooltip: TooltipDivSelection): void;
+    getSplitTooltip(index: number, theme: ChartTheme): TooltipDivSelection;
+    hideSplitTooltips(): void;
+    hideUnusedSplitTooltips(visibleTooltips: TooltipDivSelection[]): void;
+    private applyTooltipStylesIfNeeded;
+    private getTooltipStyleKey;
+    private writeTooltipStyles;
+    private showTooltipAt;
+    private showTooltipSelection;
+    private hideTooltipElement;
+    private getTooltipTransitionStyle;
+    private isTooltipVisible;
+    private getTooltipPosition;
+    private hasVisibleSlideOffset;
+    private slideTooltipFromOffset;
+    private requestTooltipTransitionFrame;
+    private cancelTooltipTransitionFrame;
+    private setTooltipMarkup;
+    private appendTooltipConnector;
+    private appendTooltipArrow;
+    private appendTooltipArrowTriangle;
+    private removeSplitTooltips;
+    private removeRootTooltip;
+}
+export {};

package/dist/tooltip/dom.js

@@ -0,0 +1,438 @@
+import { select } from 'd3';
+import { resolveTooltipArrowPosition, resolveTooltipConnectorLayout, } from './geometry.js';
+import { TOOLTIP_ARROW_BORDER_Z_INDEX, TOOLTIP_ARROW_FILL_Z_INDEX, TOOLTIP_BODY_Z_INDEX, TOOLTIP_BORDER_WIDTH_PX, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_Z_INDEX, TOOLTIP_HIDDEN_TRANSFORM, TOOLTIP_ROOT_Z_INDEX, TOOLTIP_VISIBLE_TRANSFORM, } from './types.js';
+export class TooltipDom {
+    constructor(config) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "splitTooltipOwner", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "maxWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "transition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tooltipStyleKeys", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
+        Object.defineProperty(this, "tooltipTransitionFrameIds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
+        Object.defineProperty(this, "tooltipDiv", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "tooltipTheme", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.id = config.id;
+        this.splitTooltipOwner = config.splitTooltipOwner;
+        this.maxWidth = config.maxWidth;
+        this.transition = config.transition;
+    }
+    initialize(theme) {
+        const existingTooltip = select(`#${this.id}`);
+        const tooltip = existingTooltip.empty()
+            ? select('body')
+                .append('div')
+                .attr('class', 'chart-tooltip')
+                .attr('id', this.id)
+            : existingTooltip;
+        this.removeSplitTooltips();
+        this.applyTooltipStylesIfNeeded(tooltip, theme);
+        this.tooltipDiv = tooltip;
+        this.hideTooltipSelection(tooltip);
+    }
+    getRootTooltip() {
+        return this.tooltipDiv;
+    }
+    setContent(content) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        this.setTooltipMarkup(this.tooltipDiv, content);
+    }
+    getBounds() {
+        const node = this.tooltipDiv?.node();
+        if (!node) {
+            return null;
+        }
+        return node.getBoundingClientRect();
+    }
+    showAt(left, top) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            this.hide();
+            return;
+        }
+        this.showTooltipAt(this.tooltipDiv, left, top);
+    }
+    hide() {
+        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
+        if (!tooltip.empty()) {
+            this.hideTooltipSelection(tooltip);
+        }
+        this.hideSplitTooltips();
+    }
+    cleanup() {
+        this.removeRootTooltip();
+        this.removeSplitTooltips();
+        this.tooltipDiv = null;
+    }
+    measureTooltip(tooltip, content) {
+        this.setTooltipMarkup(tooltip, content);
+        const tooltipNode = tooltip.node();
+        if (!tooltipNode) {
+            return null;
+        }
+        if (!this.isTooltipVisible(tooltipNode)) {
+            tooltip.style('left', '-9999px').style('top', '-9999px');
+            this.hideTooltipSelection(tooltip);
+        }
+        const tooltipRect = tooltipNode.getBoundingClientRect();
+        if (!Number.isFinite(tooltipRect.width) ||
+            !Number.isFinite(tooltipRect.height)) {
+            return null;
+        }
+        return {
+            width: tooltipRect.width,
+            height: tooltipRect.height,
+        };
+    }
+    renderTooltipWithConnector(tooltip, arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
+        if (!Number.isFinite(left) ||
+            !Number.isFinite(top) ||
+            !Number.isFinite(targetX) ||
+            !Number.isFinite(targetY)) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        const connectorLayout = resolveTooltipConnectorLayout(arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY, anchor);
+        if (!connectorLayout) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        this.appendTooltipConnector(tooltip, connectorLayout);
+        this.appendTooltipArrow(tooltip, connectorLayout);
+        this.showTooltipAt(tooltip, left, top);
+    }
+    renderTooltipWithoutConnector(tooltip, left, top) {
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            this.hideTooltipSelection(tooltip);
+            return;
+        }
+        this.showTooltipAt(tooltip, left, top);
+    }
+    hideTooltipSelection(tooltip) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        this.hideTooltipElement(node);
+    }
+    getSplitTooltip(index, theme) {
+        const tooltipId = `${this.splitTooltipOwner}-${index}`;
+        const existingTooltip = select(`#${tooltipId}`);
+        const tooltip = existingTooltip.empty()
+            ? select('body')
+                .append('div')
+                .attr('class', 'chart-tooltip chart-tooltip--split')
+                .attr('id', tooltipId)
+                .attr('data-chart-tooltip-owner', this.splitTooltipOwner)
+                .attr('data-chart-tooltip-index', String(index))
+            : existingTooltip;
+        this.applyTooltipStylesIfNeeded(tooltip, theme);
+        return tooltip;
+    }
+    hideSplitTooltips() {
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            this.hideTooltipElement(node);
+        });
+    }
+    hideUnusedSplitTooltips(visibleTooltips) {
+        const visibleNodes = new Set(visibleTooltips
+            .map((tooltip) => tooltip.node())
+            .filter((node) => Boolean(node)));
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            if (visibleNodes.has(node)) {
+                return;
+            }
+            this.hideTooltipElement(node);
+        });
+    }
+    applyTooltipStylesIfNeeded(tooltip, theme) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        const styleKey = this.getTooltipStyleKey(theme);
+        if (this.tooltipStyleKeys.get(node) === styleKey) {
+            this.tooltipTheme = theme.tooltip;
+            return;
+        }
+        this.tooltipStyleKeys.set(node, styleKey);
+        this.writeTooltipStyles(tooltip, theme);
+    }
+    getTooltipStyleKey(theme) {
+        return [
+            theme.tooltip.background,
+            theme.tooltip.border,
+            theme.tooltip.color,
+            theme.tooltip.fontFamily,
+            theme.tooltip.fontSize,
+            theme.tooltip.fontWeight,
+            this.maxWidth,
+            this.transition.show,
+            this.transition.duration,
+            this.transition.easing,
+        ].join('|');
+    }
+    writeTooltipStyles(tooltip, theme) {
+        this.tooltipTheme = theme.tooltip;
+        tooltip
+            .style('position', 'absolute')
+            .style('background-color', theme.tooltip.background)
+            .style('border', `${TOOLTIP_BORDER_WIDTH_PX}px solid ${theme.tooltip.border}`)
+            .style('border-radius', '4px')
+            .style('padding', '8px')
+            .style('box-shadow', '0 2px 4px rgba(0,0,0,0.1)')
+            .style('color', theme.tooltip.color)
+            .style('font-family', theme.tooltip.fontFamily)
+            .style('font-size', `${theme.tooltip.fontSize}px`)
+            .style('font-weight', theme.tooltip.fontWeight)
+            .style('box-sizing', 'border-box')
+            .style('overflow-wrap', 'break-word')
+            .style('overflow', 'visible')
+            .style('isolation', 'isolate')
+            .style('pointer-events', 'none')
+            .style('z-index', String(TOOLTIP_ROOT_Z_INDEX));
+        tooltip.style('max-width', `${this.maxWidth}px`);
+        if (this.transition.show) {
+            tooltip
+                .style('transition', this.getTooltipTransitionStyle())
+                .style('will-change', 'opacity, transform');
+            return;
+        }
+        tooltip
+            .style('opacity', null)
+            .style('transform', null)
+            .style('transition', null)
+            .style('will-change', null);
+    }
+    showTooltipAt(tooltip, left, top) {
+        const tooltipNode = tooltip.node();
+        const previousPosition = tooltipNode && this.isTooltipVisible(tooltipNode)
+            ? this.getTooltipPosition(tooltipNode)
+            : null;
+        tooltip.style('left', `${left}px`).style('top', `${top}px`);
+        this.showTooltipSelection(tooltip, previousPosition
+            ? {
+                x: previousPosition.left - left,
+                y: previousPosition.top - top,
+            }
+            : null);
+    }
+    showTooltipSelection(tooltip, slideOffset = null) {
+        tooltip.style('visibility', 'visible');
+        if (!this.transition.show) {
+            return;
+        }
+        tooltip.style('opacity', '1');
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        if (!slideOffset || !this.hasVisibleSlideOffset(slideOffset)) {
+            this.cancelTooltipTransitionFrame(node);
+            tooltip.style('transform', TOOLTIP_VISIBLE_TRANSFORM);
+            return;
+        }
+        this.slideTooltipFromOffset(node, slideOffset);
+    }
+    hideTooltipElement(node) {
+        this.cancelTooltipTransitionFrame(node);
+        if (!this.transition.show) {
+            node.style.visibility = 'hidden';
+            return;
+        }
+        node.style.visibility = 'visible';
+        node.style.opacity = '0';
+        node.style.transform = TOOLTIP_HIDDEN_TRANSFORM;
+    }
+    getTooltipTransitionStyle() {
+        return `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`;
+    }
+    isTooltipVisible(node) {
+        return (node.style.visibility === 'visible' && node.style.opacity !== '0');
+    }
+    getTooltipPosition(node) {
+        const left = Number.parseFloat(node.style.left || '0');
+        const top = Number.parseFloat(node.style.top || '0');
+        if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            return null;
+        }
+        return { left, top };
+    }
+    hasVisibleSlideOffset(offset) {
+        return Math.abs(offset.x) > 0.5 || Math.abs(offset.y) > 0.5;
+    }
+    slideTooltipFromOffset(node, offset) {
+        const transition = node.style.transition || this.getTooltipTransitionStyle();
+        this.cancelTooltipTransitionFrame(node);
+        node.style.setProperty('transition', 'none');
+        node.style.setProperty('transform', `translate(${offset.x}px, ${offset.y}px)`);
+        node.getBoundingClientRect();
+        node.style.setProperty('transition', transition);
+        const frameId = this.requestTooltipTransitionFrame(() => {
+            this.tooltipTransitionFrameIds.delete(node);
+            node.style.setProperty('transform', TOOLTIP_VISIBLE_TRANSFORM);
+        });
+        this.tooltipTransitionFrameIds.set(node, frameId);
+    }
+    requestTooltipTransitionFrame(callback) {
+        if (typeof window.requestAnimationFrame === 'function') {
+            return window.requestAnimationFrame(callback);
+        }
+        return window.setTimeout(() => {
+            callback(window.performance.now());
+        }, 16);
+    }
+    cancelTooltipTransitionFrame(node) {
+        const frameId = this.tooltipTransitionFrameIds.get(node);
+        if (frameId === undefined) {
+            return;
+        }
+        if (typeof window.cancelAnimationFrame === 'function') {
+            window.cancelAnimationFrame(frameId);
+        }
+        else {
+            window.clearTimeout(frameId);
+        }
+        this.tooltipTransitionFrameIds.delete(node);
+    }
+    setTooltipMarkup(tooltip, content) {
+        tooltip.html(`<div data-chart-tooltip-body="true">${content}</div>`);
+        const body = tooltip.select('[data-chart-tooltip-body]');
+        if (body.empty()) {
+            return;
+        }
+        body.style('position', 'relative').style('z-index', String(TOOLTIP_BODY_Z_INDEX));
+    }
+    appendTooltipConnector(tooltip, connectorLayout) {
+        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        const connector = tooltip
+            .append('svg')
+            .attr('data-chart-tooltip-connector', 'true')
+            .attr('data-chart-tooltip-arrow-edge', connectorLayout.arrowEdge)
+            .attr('aria-hidden', 'true')
+            .attr('width', connectorLayout.width)
+            .attr('height', connectorLayout.height)
+            .attr('viewBox', `0 0 ${connectorLayout.width} ${connectorLayout.height}`)
+            .style('position', 'absolute')
+            .style('left', `${connectorLayout.left}px`)
+            .style('top', `${connectorLayout.top}px`)
+            .style('pointer-events', 'none')
+            .style('overflow', 'visible')
+            .style('z-index', String(TOOLTIP_CONNECTOR_Z_INDEX));
+        connector
+            .append('path')
+            .attr('data-chart-tooltip-connector-path', 'true')
+            .attr('d', connectorLayout.path)
+            .attr('fill', 'none')
+            .attr('stroke', tooltipBorder)
+            .attr('stroke-width', 1.25)
+            .attr('stroke-linecap', 'round')
+            .attr('stroke-linejoin', 'round');
+    }
+    appendTooltipArrow(tooltip, connectorLayout) {
+        const tooltipBackground = this.tooltipTheme?.background ?? '#ffffff';
+        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        this.appendTooltipArrowTriangle(tooltip, connectorLayout, 'data-chart-tooltip-arrow', tooltipBorder, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX, TOOLTIP_ARROW_BORDER_Z_INDEX);
+        this.appendTooltipArrowTriangle(tooltip, connectorLayout, 'data-chart-tooltip-arrow-fill', tooltipBackground, TOOLTIP_BOX_ARROW_LENGTH_PX - 1, TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX - 1, TOOLTIP_ARROW_FILL_Z_INDEX);
+    }
+    appendTooltipArrowTriangle(tooltip, connectorLayout, dataAttribute, color, length, halfHeight, zIndex) {
+        const position = resolveTooltipArrowPosition(connectorLayout.arrowEdge, connectorLayout.arrowX, connectorLayout.arrowY, length, halfHeight);
+        const arrow = tooltip
+            .append('div')
+            .attr(dataAttribute, 'true')
+            .attr('data-chart-tooltip-arrow-edge', connectorLayout.arrowEdge)
+            .attr('aria-hidden', 'true')
+            .style('position', 'absolute')
+            .style('left', `${position.left}px`)
+            .style('top', `${position.top}px`)
+            .style('width', '0')
+            .style('height', '0')
+            .style('pointer-events', 'none')
+            .style('z-index', String(zIndex));
+        if (connectorLayout.arrowEdge === 'left') {
+            arrow
+                .style('border-top', `${halfHeight}px solid transparent`)
+                .style('border-bottom', `${halfHeight}px solid transparent`)
+                .style('border-right', `${length}px solid ${color}`);
+            return;
+        }
+        if (connectorLayout.arrowEdge === 'right') {
+            arrow
+                .style('border-top', `${halfHeight}px solid transparent`)
+                .style('border-bottom', `${halfHeight}px solid transparent`)
+                .style('border-left', `${length}px solid ${color}`);
+            return;
+        }
+        if (connectorLayout.arrowEdge === 'top') {
+            arrow
+                .style('border-left', `${halfHeight}px solid transparent`)
+                .style('border-right', `${halfHeight}px solid transparent`)
+                .style('border-bottom', `${length}px solid ${color}`);
+            return;
+        }
+        arrow
+            .style('border-left', `${halfHeight}px solid transparent`)
+            .style('border-right', `${halfHeight}px solid transparent`)
+            .style('border-top', `${length}px solid ${color}`);
+    }
+    removeSplitTooltips() {
+        document
+            .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)
+            .forEach((node) => {
+            node.remove();
+        });
+    }
+    removeRootTooltip() {
+        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
+        if (!tooltip.empty()) {
+            tooltip.remove();
+        }
+    }
+}

package/dist/tooltip/geometry.d.ts

@@ -0,0 +1,18 @@
+import type { TooltipBarAnchorPosition, TooltipPosition } from '../types.js';
+import { type SplitTooltipLayout, type SplitTooltipViewportBounds, type TooltipAnchor, type TooltipArrowEdge, type TooltipConnectorLayout, type TooltipTarget, type XYTooltipSeries } from './types.js';
+export declare function getSplitTooltipViewportBounds(): SplitTooltipViewportBounds;
+export declare function resolveTooltipArrowEdge(position: TooltipPosition, anchor: TooltipAnchor, target: TooltipTarget, tooltipWidth: number, tooltipHeight: number): TooltipArrowEdge;
+export declare function resolveSidePlacementArrowEdge(anchor: TooltipAnchor, tooltipWidth: number, bounds?: SplitTooltipViewportBounds): TooltipArrowEdge;
+export declare function resolveVerticalPlacementArrowEdge(target: TooltipTarget, tooltipHeight: number, bounds?: SplitTooltipViewportBounds): TooltipArrowEdge;
+export declare function resolveSharedTooltipTarget(anchor: TooltipAnchor): TooltipTarget;
+export declare function resolveSplitTooltipTarget(currentSeries: XYTooltipSeries, anchor: TooltipAnchor, barAnchorPosition: TooltipBarAnchorPosition): TooltipTarget;
+export declare function getAnchoredTooltipPosition(anchor: TooltipAnchor, target: TooltipTarget, tooltipWidth: number, tooltipHeight: number, arrowEdge: TooltipArrowEdge): {
+    left: number;
+    top: number;
+} | null;
+export declare function resolveTooltipConnectorLayout(arrowEdge: TooltipArrowEdge, tooltipLeft: number, tooltipTop: number, tooltipWidth: number, tooltipHeight: number, targetX: number, targetY: number, anchor: TooltipAnchor): TooltipConnectorLayout | null;
+export declare function resolveTooltipArrowPosition(arrowEdge: TooltipArrowEdge, boxX: number, boxY: number, length: number, halfHeight: number): {
+    left: number;
+    top: number;
+};
+export declare function resolveSplitTooltipPositions(layouts: SplitTooltipLayout[], position: TooltipPosition): void;