@internetstiftelsen/charts 0.13.2 → 0.13.3

package/dist/tooltip.d.ts

@@ -81,6 +81,10 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private countPlacedLayoutsOnEdge;
     private doSplitTooltipLayoutsOverlap;
     private resolveSplitTooltipPositions;
+    private resolveHorizontalChartSplitTooltipPositions;
+    private resolveVerticalChartSplitTooltipPositions;
+    private getSplitTooltipViewportBounds;
+    private groupSplitTooltipLayoutsByEdge;
     private resolveSideSplitTooltipPositions;
     private resolveHorizontalSideSplitTooltipPositions;
     private resolveHorizontalSideSplitTooltipCollisions;
@@ -91,6 +95,11 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private assignLayoutToHorizontalTooltipLane;
     private doHorizontalTooltipLanesOverlap;
     private doSplitTooltipLayoutsOverlapHorizontally;
-    private resolveVerticalSplitTooltipPositions;
+    private resolveHorizontalChartAboveBelowSplitTooltipPositions;
+    private resolvePackedAboveBelowTooltipRow;
+    private resolveVerticalChartAboveBelowSplitTooltipPositions;
+    private resolveCollisionAwareAboveBelowTooltipPositions;
+    private resolveNonOverlappingAboveBelowTooltipLeft;
+    private doesSplitTooltipOverlapPlacedLayouts;
 }
 export {};

package/dist/tooltip.js

@@ -466,10 +466,6 @@ export class Tooltip {
             if (layouts.length === 0) {
                 return;
             }
-            if (!isHorizontal) {
-                this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
-                this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
-            }
             this.resolveSplitTooltipPositions(layouts, isHorizontal);
             layouts.forEach((layout) => {
                 this.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY, layout.anchor);
@@ -1303,19 +1299,42 @@ export class Tooltip {
             a.top + a.height + SPLIT_TOOLTIP_GAP_PX > b.top);
     }
     resolveSplitTooltipPositions(layouts, isHorizontal) {
-        if (isHorizontal && this.position === 'side') {
-            this.resolveHorizontalSideSplitTooltipPositions(layouts);
+        if (isHorizontal) {
+            this.resolveHorizontalChartSplitTooltipPositions(layouts);
             return;
         }
+        this.resolveVerticalChartSplitTooltipPositions(layouts);
+    }
+    resolveHorizontalChartSplitTooltipPositions(layouts) {
         if (this.position === 'vertical') {
-            this.resolveVerticalSplitTooltipPositions(layouts);
+            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
+            this.resolveHorizontalChartAboveBelowSplitTooltipPositions(layouts);
             return;
         }
+        this.resolveHorizontalSideSplitTooltipPositions(layouts);
+    }
+    resolveVerticalChartSplitTooltipPositions(layouts) {
+        if (this.position === 'vertical') {
+            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
+            this.resolveVerticalChartAboveBelowSplitTooltipPositions(layouts);
+            return;
+        }
+        this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
         this.resolveSideSplitTooltipPositions(layouts);
     }
-    resolveSideSplitTooltipPositions(layouts) {
-        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
+    getSplitTooltipViewportBounds() {
+        return {
+            minLeft: window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX,
+            maxRight: window.scrollX +
+                window.innerWidth -
+                TOOLTIP_VIEWPORT_PADDING_PX,
+            minTop: window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX,
+            maxBottom: window.scrollY +
+                window.innerHeight -
+                TOOLTIP_VIEWPORT_PADDING_PX,
+        };
+    }
+    groupSplitTooltipLayoutsByEdge(layouts) {
         const tooltipsByEdge = {
             left: [],
             right: [],
@@ -1325,6 +1344,11 @@ export class Tooltip {
         layouts.forEach((layout) => {
             tooltipsByEdge[layout.arrowEdge].push(layout);
         });
+        return tooltipsByEdge;
+    }
+    resolveSideSplitTooltipPositions(layouts) {
+        const { minTop, maxBottom } = this.getSplitTooltipViewportBounds();
+        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
         Object.values(tooltipsByEdge).forEach((edgeLayouts) => {
             if (edgeLayouts.length === 0) {
                 return;
@@ -1463,65 +1487,98 @@ export class Tooltip {
         return (a.left < b.left + b.width + SPLIT_TOOLTIP_GAP_PX &&
             a.left + a.width + SPLIT_TOOLTIP_GAP_PX > b.left);
     }
-    resolveVerticalSplitTooltipPositions(layouts) {
-        const minLeft = window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxRight = window.scrollX + window.innerWidth - TOOLTIP_VIEWPORT_PADDING_PX;
-        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
-        const tooltipsByEdge = {
-            left: [],
-            right: [],
-            top: [],
-            bottom: [],
-        };
-        layouts.forEach((layout) => {
-            tooltipsByEdge[layout.arrowEdge].push(layout);
+    resolveHorizontalChartAboveBelowSplitTooltipPositions(layouts) {
+        const bounds = this.getSplitTooltipViewportBounds();
+        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
+        this.resolvePackedAboveBelowTooltipRow(tooltipsByEdge.top, bounds);
+        this.resolvePackedAboveBelowTooltipRow(tooltipsByEdge.bottom, bounds);
+        this.resolveSideSplitTooltipPositions([
+            ...tooltipsByEdge.left,
+            ...tooltipsByEdge.right,
+        ]);
+    }
+    resolvePackedAboveBelowTooltipRow(layouts, bounds) {
+        if (layouts.length === 0) {
+            return;
+        }
+        const orderedLayouts = [...layouts].sort((a, b) => a.left - b.left || a.targetX - b.targetX);
+        orderedLayouts.forEach((layout) => {
+            const maxTop = Math.max(bounds.minTop, bounds.maxBottom - layout.height);
+            layout.top = Math.max(bounds.minTop, Math.min(layout.top, maxTop));
         });
-        [tooltipsByEdge.top, tooltipsByEdge.bottom].forEach((edgeLayouts) => {
-            if (edgeLayouts.length === 0) {
-                return;
-            }
-            edgeLayouts.sort((a, b) => a.left - b.left);
-            edgeLayouts[0].left = Math.max(minLeft, edgeLayouts[0].left);
-            for (let i = 1; i < edgeLayouts.length; i++) {
-                const previousLayout = edgeLayouts[i - 1];
-                const currentLayout = edgeLayouts[i];
-                const minAllowedLeft = previousLayout.left +
-                    previousLayout.width +
+        const firstLayout = orderedLayouts[0];
+        const firstMaxLeft = Math.max(bounds.minLeft, bounds.maxRight - firstLayout.width);
+        firstLayout.left = Math.max(bounds.minLeft, Math.min(firstLayout.left, firstMaxLeft));
+        for (let i = 1; i < orderedLayouts.length; i++) {
+            const previousLayout = orderedLayouts[i - 1];
+            const currentLayout = orderedLayouts[i];
+            const minAllowedLeft = previousLayout.left +
+                previousLayout.width +
+                SPLIT_TOOLTIP_GAP_PX;
+            currentLayout.left = Math.max(currentLayout.left, minAllowedLeft);
+        }
+        const lastLayout = orderedLayouts[orderedLayouts.length - 1];
+        const overflow = lastLayout.left + lastLayout.width - bounds.maxRight;
+        if (overflow > 0) {
+            lastLayout.left -= overflow;
+            for (let i = orderedLayouts.length - 2; i >= 0; i--) {
+                const currentLayout = orderedLayouts[i];
+                const nextLayout = orderedLayouts[i + 1];
+                const maxAllowedLeft = nextLayout.left -
+                    currentLayout.width -
                     SPLIT_TOOLTIP_GAP_PX;
-                currentLayout.left = Math.max(currentLayout.left, minAllowedLeft);
+                currentLayout.left = Math.min(currentLayout.left, maxAllowedLeft);
             }
-            const lastLayout = edgeLayouts[edgeLayouts.length - 1];
-            const overflow = lastLayout.left + lastLayout.width - maxRight;
-            if (overflow > 0) {
-                lastLayout.left -= overflow;
-                for (let i = edgeLayouts.length - 2; i >= 0; i--) {
-                    const currentLayout = edgeLayouts[i];
-                    const nextLayout = edgeLayouts[i + 1];
-                    const maxAllowedLeft = nextLayout.left -
-                        currentLayout.width -
-                        SPLIT_TOOLTIP_GAP_PX;
-                    currentLayout.left = Math.min(currentLayout.left, maxAllowedLeft);
-                }
-                const underflow = minLeft - edgeLayouts[0].left;
-                if (underflow > 0) {
-                    edgeLayouts.forEach((layout) => {
-                        layout.left += underflow;
-                    });
-                }
+            const underflow = bounds.minLeft - orderedLayouts[0].left;
+            if (underflow > 0) {
+                orderedLayouts.forEach((layout) => {
+                    layout.left += underflow;
+                });
             }
-            edgeLayouts.forEach((layout) => {
-                const maxLeft = maxRight - layout.width;
-                const maxTop = maxBottom - layout.height;
-                layout.left = Math.max(minLeft, Math.min(layout.left, maxLeft));
-                layout.top = Math.max(minTop, Math.min(layout.top, maxTop));
-            });
+        }
+        orderedLayouts.forEach((layout) => {
+            const maxLeft = Math.max(bounds.minLeft, bounds.maxRight - layout.width);
+            layout.left = Math.max(bounds.minLeft, Math.min(layout.left, maxLeft));
         });
+    }
+    resolveVerticalChartAboveBelowSplitTooltipPositions(layouts) {
+        const bounds = this.getSplitTooltipViewportBounds();
+        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
+        this.resolveCollisionAwareAboveBelowTooltipPositions(tooltipsByEdge.top, bounds);
+        this.resolveCollisionAwareAboveBelowTooltipPositions(tooltipsByEdge.bottom, bounds);
         this.resolveSideSplitTooltipPositions([
             ...tooltipsByEdge.left,
             ...tooltipsByEdge.right,
         ]);
     }
+    resolveCollisionAwareAboveBelowTooltipPositions(layouts, bounds) {
+        const placedLayouts = [];
+        const orderedLayouts = [...layouts].sort((a, b) => a.left - b.left || a.top - b.top);
+        orderedLayouts.forEach((layout) => {
+            const maxLeft = Math.max(bounds.minLeft, bounds.maxRight - layout.width);
+            const maxTop = Math.max(bounds.minTop, bounds.maxBottom - layout.height);
+            layout.top = Math.max(bounds.minTop, Math.min(layout.top, maxTop));
+            layout.left = this.resolveNonOverlappingAboveBelowTooltipLeft(layout, placedLayouts, bounds.minLeft, maxLeft);
+            placedLayouts.push(layout);
+        });
+    }
+    resolveNonOverlappingAboveBelowTooltipLeft(layout, placedLayouts, minLeft, maxLeft) {
+        const preferredLeft = Math.max(minLeft, Math.min(layout.left, maxLeft));
+        if (!this.doesSplitTooltipOverlapPlacedLayouts({ ...layout, left: preferredLeft }, placedLayouts)) {
+            return preferredLeft;
+        }
+        const candidates = placedLayouts.flatMap((placedLayout) => [
+            placedLayout.left + placedLayout.width + SPLIT_TOOLTIP_GAP_PX,
+            placedLayout.left - layout.width - SPLIT_TOOLTIP_GAP_PX,
+        ]);
+        return (Array.from(new Set(candidates.map((candidate) => Math.round(Math.max(minLeft, Math.min(candidate, maxLeft))))))
+            .sort((a, b) => Math.abs(a - preferredLeft) -
+            Math.abs(b - preferredLeft))
+            .find((candidate) => !this.doesSplitTooltipOverlapPlacedLayouts({ ...layout, left: candidate }, placedLayouts)) ?? preferredLeft);
+    }
+    doesSplitTooltipOverlapPlacedLayouts(layout, placedLayouts) {
+        return placedLayouts.some((placedLayout) => this.doSplitTooltipLayoutsOverlap(layout, placedLayout));
+    }
 }
 Object.defineProperty(Tooltip, "nextTooltipId", {
     enumerable: true,

package/package.json

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