@internetstiftelsen/charts 0.19.1 → 0.19.3

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;
@@ -636,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/package.json

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