@internetstiftelsen/charts 0.19.0 → 0.19.2

package/dist/radial-chart-base.d.ts

@@ -39,6 +39,10 @@ export declare abstract class RadialChartBase extends BaseChart {
     protected showTooltipAtElement(target: Element, content: string): void;
     protected hideTooltip(): void;
     private applyTooltipPosition;
+    private getTooltipViewportLeft;
+    private getTooltipViewportRight;
+    private getTooltipViewportTop;
+    private getTooltipViewportBottom;
     private resolveRadialLabelLayout;
     private resolveRadialLabelOverflowContext;
     private createVisibleRadialLabelLayout;

package/dist/radial-chart-base.js

@@ -159,7 +159,7 @@ export class RadialChartBase extends BaseChart {
         }
         let x = event.pageX + TOOLTIP_OFFSET_PX;
         const y = event.pageY - rect.height / 2;
-        if (x + rect.width > window.innerWidth - EDGE_MARGIN_PX) {
+        if (x + rect.width > this.getTooltipViewportRight()) {
             x = event.pageX - rect.width - TOOLTIP_OFFSET_PX;
         }
         this.applyTooltipPosition(x, y, rect.height, rect.width);
@@ -182,7 +182,7 @@ export class RadialChartBase extends BaseChart {
             window.scrollY +
             targetRect.height / 2 -
             tooltipRect.height / 2;
-        if (x + tooltipRect.width > window.innerWidth - EDGE_MARGIN_PX) {
+        if (x + tooltipRect.width > this.getTooltipViewportRight()) {
             x =
                 targetRect.left +
                     window.scrollX -
@@ -195,10 +195,22 @@ export class RadialChartBase extends BaseChart {
         this.tooltip?.hide();
     }
     applyTooltipPosition(rawX, rawY, height, width) {
-        const x = Math.max(EDGE_MARGIN_PX, Math.min(rawX, window.innerWidth + window.scrollX - width - EDGE_MARGIN_PX));
-        const y = Math.max(EDGE_MARGIN_PX, Math.min(rawY, window.innerHeight + window.scrollY - height - EDGE_MARGIN_PX));
+        const x = Math.max(this.getTooltipViewportLeft(), Math.min(rawX, this.getTooltipViewportRight() - width));
+        const y = Math.max(this.getTooltipViewportTop(), Math.min(rawY, this.getTooltipViewportBottom() - height));
         this.tooltip?.showAt(x, y);
     }
+    getTooltipViewportLeft() {
+        return window.scrollX + EDGE_MARGIN_PX;
+    }
+    getTooltipViewportRight() {
+        return window.scrollX + window.innerWidth - EDGE_MARGIN_PX;
+    }
+    getTooltipViewportTop() {
+        return window.scrollY + EDGE_MARGIN_PX;
+    }
+    getTooltipViewportBottom() {
+        return window.scrollY + window.innerHeight - EDGE_MARGIN_PX;
+    }
     resolveRadialLabelLayout(text, options) {
         const overflowContext = this.resolveRadialLabelOverflowContext(options.maxLabelWidth);
         if (!overflowContext) {

package/dist/tooltip/dom.d.ts

@@ -17,6 +17,7 @@ export declare class TooltipDom {
     private readonly transition;
     private readonly tooltipStyleKeys;
     private readonly tooltipTransitionFrameIds;
+    private readonly tooltipPositionResetTimeoutIds;
     private readonly tooltipStyles;
     private tooltipDiv;
     constructor(config: TooltipDomConfig);
@@ -45,6 +46,9 @@ export declare class TooltipDom {
     private showTooltipAt;
     private showTooltipSelection;
     private hideTooltipElement;
+    private resetTooltipPosition;
+    private scheduleTooltipPositionReset;
+    private cancelTooltipPositionReset;
     private getTooltipTransitionStyle;
     private isTooltipVisible;
     private getTooltipPosition;

package/dist/tooltip/dom.js

@@ -1,6 +1,7 @@
 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';
+const HIDDEN_TOOLTIP_POSITION_PX = '0px';
 export class TooltipDom {
     constructor(config) {
         Object.defineProperty(this, "id", {
@@ -39,6 +40,12 @@ export class TooltipDom {
             writable: true,
             value: new WeakMap()
         });
+        Object.defineProperty(this, "tooltipPositionResetTimeoutIds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new WeakMap()
+        });
         Object.defineProperty(this, "tooltipStyles", {
             enumerable: true,
             configurable: true,
@@ -284,15 +291,16 @@ export class TooltipDom {
             : null);
     }
     showTooltipSelection(tooltip, slideOffset = null) {
+        const node = tooltip.node();
+        if (!node) {
+            return;
+        }
+        this.cancelTooltipPositionReset(node);
         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);
@@ -301,14 +309,43 @@ export class TooltipDom {
         this.slideTooltipFromOffset(node, slideOffset);
     }
     hideTooltipElement(node) {
+        const wasVisible = this.isTooltipVisible(node);
+        this.cancelTooltipPositionReset(node);
         this.cancelTooltipTransitionFrame(node);
         if (!this.transition.show) {
             node.style.visibility = 'hidden';
+            this.resetTooltipPosition(node);
             return;
         }
         node.style.visibility = 'visible';
         node.style.opacity = '0';
         node.style.transform = TOOLTIP_HIDDEN_TRANSFORM;
+        if (!wasVisible) {
+            this.resetTooltipPosition(node);
+            return;
+        }
+        this.scheduleTooltipPositionReset(node);
+    }
+    resetTooltipPosition(node) {
+        node.style.left = HIDDEN_TOOLTIP_POSITION_PX;
+        node.style.top = HIDDEN_TOOLTIP_POSITION_PX;
+    }
+    scheduleTooltipPositionReset(node) {
+        const timeoutId = window.setTimeout(() => {
+            this.tooltipPositionResetTimeoutIds.delete(node);
+            if (!this.isTooltipVisible(node)) {
+                this.resetTooltipPosition(node);
+            }
+        }, this.transition.duration);
+        this.tooltipPositionResetTimeoutIds.set(node, timeoutId);
+    }
+    cancelTooltipPositionReset(node) {
+        const timeoutId = this.tooltipPositionResetTimeoutIds.get(node);
+        if (timeoutId === undefined) {
+            return;
+        }
+        window.clearTimeout(timeoutId);
+        this.tooltipPositionResetTimeoutIds.delete(node);
     }
     getTooltipTransitionStyle() {
         return `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`;

package/dist/tooltip/geometry.js

@@ -525,8 +525,97 @@ function packHorizontalAboveBelowRow(layouts, arrowEdge, bounds) {
         top: getHorizontalAboveBelowTop(layout, arrowEdge),
         arrowEdge,
     }));
+    if (shouldWrapHorizontalAboveBelowRow(placements, arrowEdge, bounds)) {
+        return packHorizontalAboveBelowRows(placements, arrowEdge, bounds);
+    }
     return packHorizontalTooltipRow(placements, bounds);
 }
+function packHorizontalAboveBelowRows(placements, arrowEdge, bounds) {
+    const rows = getHorizontalTooltipRows(placements, bounds);
+    if (arrowEdge === 'bottom') {
+        positionHorizontalTooltipRowsAbove(rows);
+    }
+    else {
+        positionHorizontalTooltipRowsBelow(rows);
+    }
+    return rows.flatMap((row) => packHorizontalTooltipRow(row, bounds));
+}
+function shouldWrapHorizontalAboveBelowRow(placements, arrowEdge, bounds) {
+    if (placements.length < 2) {
+        return false;
+    }
+    const availableWidth = Math.max(0, bounds.maxRight - bounds.minLeft);
+    const totalWidth = placements.reduce((sum, placement, index) => {
+        const gap = index === 0 ? 0 : SPLIT_TOOLTIP_GAP_PX;
+        return sum + gap + placement.layout.width;
+    }, 0);
+    if (totalWidth <= availableWidth) {
+        return false;
+    }
+    return !hasRoomOnOppositeHorizontalTooltipSide(placements, arrowEdge, bounds);
+}
+function hasRoomOnOppositeHorizontalTooltipSide(placements, arrowEdge, bounds) {
+    const rowHeight = getHorizontalTooltipRowHeight(placements);
+    if (arrowEdge === 'top') {
+        const oppositeTop = Math.min(...placements.map((placement) => placement.layout.anchor.top)) -
+            TOOLTIP_OFFSET_PX -
+            rowHeight;
+        return oppositeTop >= bounds.minTop;
+    }
+    const oppositeBottom = Math.max(...placements.map((placement) => placement.layout.anchor.bottom)) +
+        TOOLTIP_OFFSET_PX +
+        rowHeight;
+    return oppositeBottom <= bounds.maxBottom;
+}
+function getHorizontalTooltipRows(placements, bounds) {
+    const availableWidth = Math.max(0, bounds.maxRight - bounds.minLeft);
+    const rows = [];
+    let currentRow = [];
+    let currentRowWidth = 0;
+    placements.forEach((placement) => {
+        const nextRowWidth = currentRow.length === 0
+            ? placement.layout.width
+            : currentRowWidth +
+                SPLIT_TOOLTIP_GAP_PX +
+                placement.layout.width;
+        if (currentRow.length > 0 && nextRowWidth > availableWidth) {
+            rows.push(currentRow);
+            currentRow = [placement];
+            currentRowWidth = placement.layout.width;
+            return;
+        }
+        currentRow.push(placement);
+        currentRowWidth = nextRowWidth;
+    });
+    if (currentRow.length > 0) {
+        rows.push(currentRow);
+    }
+    return rows;
+}
+function positionHorizontalTooltipRowsAbove(rows) {
+    let nextRowBottom = Math.min(...rows.flatMap((row) => row.map((placement) => placement.top + placement.layout.height)));
+    rows.forEach((row) => {
+        const rowHeight = getHorizontalTooltipRowHeight(row);
+        const rowTop = nextRowBottom - rowHeight;
+        row.forEach((placement) => {
+            placement.top = rowTop;
+        });
+        nextRowBottom = rowTop - SPLIT_TOOLTIP_GAP_PX;
+    });
+}
+function positionHorizontalTooltipRowsBelow(rows) {
+    let nextRowTop = Math.max(...rows.flatMap((row) => row.map((placement) => placement.top)));
+    rows.forEach((row) => {
+        const rowHeight = getHorizontalTooltipRowHeight(row);
+        row.forEach((placement) => {
+            placement.top = nextRowTop;
+        });
+        nextRowTop += rowHeight + SPLIT_TOOLTIP_GAP_PX;
+    });
+}
+function getHorizontalTooltipRowHeight(row) {
+    return Math.max(...row.map((placement) => placement.layout.height));
+}
 function packHorizontalTooltipRow(placements, bounds) {
     if (placements.length === 0) {
         return placements;

package/dist/tooltip/xy-interaction.js

@@ -809,7 +809,7 @@ function attachTooltipScrollListeners(svgNode, onScroll) {
     };
 }
 function getTooltipScrollTargets(svgNode) {
-    const scrollTargets = new Set([window]);
+    const scrollTargets = new Set();
     let currentElement = svgNode.parentElement;
     while (currentElement) {
         if (isScrollableElement(currentElement)) {

package/package.json

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