@internetstiftelsen/charts 0.16.0 → 0.17.0

package/README.md

@@ -16,7 +16,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **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`
 - **Stacking Control** - Bar and area stacking modes with optional reversed visual series order
-- **Configurable Tooltips** - Shared or split tooltips with connectors, transitions, and default max-width wrapping
+- **Configurable Tooltips** - Shared, split, or single tooltips with connectors, transitions, color-coded series styling, and default max-width wrapping
 - **Axis Direction Control** - Use `scales.x.reverse` / `scales.y.reverse` to flip an axis when needed
 - **Flexible Scales** - Band, linear, time, and logarithmic scales (bar value axes stay linear)
 - **Explicit or Responsive Sizing** - Set top-level `width`/`height` or let the container drive size

package/dist/tooltip/dom.d.ts

@@ -6,6 +6,7 @@ type TooltipDomConfig = {
     maxWidth: number;
     transition: Required<TooltipTransitionConfig>;
 };
+export type TooltipStyleOverrides = Partial<Pick<ChartTheme['tooltip'], 'background' | 'border' | 'color'>>;
 export declare class TooltipDom {
     private readonly id;
     private readonly splitTooltipOwner;
@@ -13,11 +14,12 @@ export declare class TooltipDom {
     private readonly transition;
     private readonly tooltipStyleKeys;
     private readonly tooltipTransitionFrameIds;
+    private readonly tooltipStyles;
     private tooltipDiv;
-    private tooltipTheme;
     constructor(config: TooltipDomConfig);
     initialize(theme: ChartTheme): void;
     getRootTooltip(): TooltipDivSelection | null;
+    applyRootTooltipStyles(theme: ChartTheme, styleOverrides?: TooltipStyleOverrides): void;
     setContent(content: string): void;
     getBounds(): DOMRect | null;
     showAt(left: number, top: number): void;
@@ -30,10 +32,11 @@ export declare class TooltipDom {
     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;
+    getSplitTooltip(index: number, theme: ChartTheme, styleOverrides?: TooltipStyleOverrides): TooltipDivSelection;
     hideSplitTooltips(): void;
     hideUnusedSplitTooltips(visibleTooltips: TooltipDivSelection[]): void;
     private applyTooltipStylesIfNeeded;
+    private resolveTooltipStyle;
     private getTooltipStyleKey;
     private writeTooltipStyles;
     private showTooltipAt;
@@ -50,6 +53,7 @@ export declare class TooltipDom {
     private appendTooltipConnector;
     private appendTooltipArrow;
     private appendTooltipArrowTriangle;
+    private getTooltipStyle;
     private removeSplitTooltips;
     private removeRootTooltip;
 }

package/dist/tooltip/dom.js

@@ -39,13 +39,13 @@ export class TooltipDom {
             writable: true,
             value: new WeakMap()
         });
-        Object.defineProperty(this, "tooltipDiv", {
+        Object.defineProperty(this, "tooltipStyles", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: null
+            value: new WeakMap()
         });
-        Object.defineProperty(this, "tooltipTheme", {
+        Object.defineProperty(this, "tooltipDiv", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -72,6 +72,12 @@ export class TooltipDom {
     getRootTooltip() {
         return this.tooltipDiv;
     }
+    applyRootTooltipStyles(theme, styleOverrides) {
+        if (!this.tooltipDiv) {
+            return;
+        }
+        this.applyTooltipStylesIfNeeded(this.tooltipDiv, theme, styleOverrides);
+    }
     setContent(content) {
         if (!this.tooltipDiv) {
             return;
@@ -158,7 +164,7 @@ export class TooltipDom {
         }
         this.hideTooltipElement(node);
     }
-    getSplitTooltip(index, theme) {
+    getSplitTooltip(index, theme, styleOverrides) {
         const tooltipId = `${this.splitTooltipOwner}-${index}`;
         const existingTooltip = select(`#${tooltipId}`);
         const tooltip = existingTooltip.empty()
@@ -169,7 +175,7 @@ export class TooltipDom {
                 .attr('data-chart-tooltip-owner', this.splitTooltipOwner)
                 .attr('data-chart-tooltip-index', String(index))
             : existingTooltip;
-        this.applyTooltipStylesIfNeeded(tooltip, theme);
+        this.applyTooltipStylesIfNeeded(tooltip, theme, styleOverrides);
         return tooltip;
     }
     hideSplitTooltips() {
@@ -192,46 +198,53 @@ export class TooltipDom {
             this.hideTooltipElement(node);
         });
     }
-    applyTooltipStylesIfNeeded(tooltip, theme) {
+    applyTooltipStylesIfNeeded(tooltip, theme, styleOverrides) {
         const node = tooltip.node();
         if (!node) {
             return;
         }
-        const styleKey = this.getTooltipStyleKey(theme);
+        const tooltipStyle = this.resolveTooltipStyle(theme, styleOverrides);
+        const styleKey = this.getTooltipStyleKey(tooltipStyle);
         if (this.tooltipStyleKeys.get(node) === styleKey) {
-            this.tooltipTheme = theme.tooltip;
+            this.tooltipStyles.set(node, tooltipStyle);
             return;
         }
         this.tooltipStyleKeys.set(node, styleKey);
-        this.writeTooltipStyles(tooltip, theme);
+        this.tooltipStyles.set(node, tooltipStyle);
+        this.writeTooltipStyles(tooltip, tooltipStyle);
     }
-    getTooltipStyleKey(theme) {
+    resolveTooltipStyle(theme, styleOverrides) {
+        return {
+            ...theme.tooltip,
+            ...styleOverrides,
+        };
+    }
+    getTooltipStyleKey(tooltipStyle) {
         return [
-            theme.tooltip.background,
-            theme.tooltip.border,
-            theme.tooltip.color,
-            theme.tooltip.fontFamily,
-            theme.tooltip.fontSize,
-            theme.tooltip.fontWeight,
+            tooltipStyle.background,
+            tooltipStyle.border,
+            tooltipStyle.color,
+            tooltipStyle.fontFamily,
+            tooltipStyle.fontSize,
+            tooltipStyle.fontWeight,
             this.maxWidth,
             this.transition.show,
             this.transition.duration,
             this.transition.easing,
         ].join('|');
     }
-    writeTooltipStyles(tooltip, theme) {
-        this.tooltipTheme = theme.tooltip;
+    writeTooltipStyles(tooltip, tooltipStyle) {
         tooltip
             .style('position', 'absolute')
-            .style('background-color', theme.tooltip.background)
-            .style('border', `${TOOLTIP_BORDER_WIDTH_PX}px solid ${theme.tooltip.border}`)
+            .style('background-color', tooltipStyle.background)
+            .style('border', `${TOOLTIP_BORDER_WIDTH_PX}px solid ${tooltipStyle.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('color', tooltipStyle.color)
+            .style('font-family', tooltipStyle.fontFamily)
+            .style('font-size', `${tooltipStyle.fontSize}px`)
+            .style('font-weight', tooltipStyle.fontWeight)
             .style('box-sizing', 'border-box')
             .style('overflow-wrap', 'break-word')
             .style('overflow', 'visible')
@@ -351,7 +364,8 @@ export class TooltipDom {
         body.style('position', 'relative').style('z-index', String(TOOLTIP_BODY_Z_INDEX));
     }
     appendTooltipConnector(tooltip, connectorLayout) {
-        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        const tooltipStyle = this.getTooltipStyle(tooltip);
+        const tooltipBorder = tooltipStyle?.border ?? '#dddddd';
         const connector = tooltip
             .append('svg')
             .attr('data-chart-tooltip-connector', 'true')
@@ -377,8 +391,9 @@ export class TooltipDom {
             .attr('stroke-linejoin', 'round');
     }
     appendTooltipArrow(tooltip, connectorLayout) {
-        const tooltipBackground = this.tooltipTheme?.background ?? '#ffffff';
-        const tooltipBorder = this.tooltipTheme?.border ?? '#dddddd';
+        const tooltipStyle = this.getTooltipStyle(tooltip);
+        const tooltipBackground = tooltipStyle?.background ?? '#ffffff';
+        const tooltipBorder = tooltipStyle?.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);
     }
@@ -422,6 +437,10 @@ export class TooltipDom {
             .style('border-right', `${halfHeight}px solid transparent`)
             .style('border-top', `${length}px solid ${color}`);
     }
+    getTooltipStyle(tooltip) {
+        const node = tooltip.node();
+        return node ? this.tooltipStyles.get(node) : undefined;
+    }
     removeSplitTooltips() {
         document
             .querySelectorAll(`[data-chart-tooltip-owner="${this.splitTooltipOwner}"]`)

package/dist/tooltip/geometry.d.ts

@@ -1,12 +1,13 @@
 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 clipTooltipAnchorToBounds(anchor: TooltipAnchor, bounds: SplitTooltipViewportBounds): TooltipAnchor;
+export declare function resolveTooltipArrowEdge(position: TooltipPosition, anchor: TooltipAnchor, target: TooltipTarget, tooltipWidth: number, tooltipHeight: number, bounds?: SplitTooltipViewportBounds): 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): {
+export declare function getAnchoredTooltipPosition(anchor: TooltipAnchor, target: TooltipTarget, tooltipWidth: number, tooltipHeight: number, arrowEdge: TooltipArrowEdge, bounds?: SplitTooltipViewportBounds): {
     left: number;
     top: number;
 } | null;
@@ -15,4 +16,4 @@ export declare function resolveTooltipArrowPosition(arrowEdge: TooltipArrowEdge,
     left: number;
     top: number;
 };
-export declare function resolveSplitTooltipPositions(layouts: SplitTooltipLayout[], position: TooltipPosition): void;
+export declare function resolveSplitTooltipPositions(layouts: SplitTooltipLayout[], position: TooltipPosition, bounds?: SplitTooltipViewportBounds, isHorizontal?: boolean): void;