@internetstiftelsen/charts 0.18.1 → 0.18.2

package/dist/tooltip/geometry.js

@@ -1,6 +1,7 @@
 import { SPLIT_TOOLTIP_GAP_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX, TOOLTIP_CONNECTOR_ELBOW_RATIO, TOOLTIP_CONNECTOR_INSET_PX, TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX, TOOLTIP_CONNECTOR_PADDING_PX, TOOLTIP_OFFSET_PX, TOOLTIP_TOTAL_BORDER_WIDTH_PX, TOOLTIP_VIEWPORT_PADDING_PX, } from './types.js';
 const MAX_EXHAUSTIVE_HORIZONTAL_ROW_LAYOUTS = 10;
 const HORIZONTAL_ROW_ORDER_FLIP_PENALTY_PX = 128;
+const AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 8;
 export function getSplitTooltipViewportBounds() {
     const visualViewport = window.visualViewport;
     const viewportLeft = window.scrollX + (visualViewport?.offsetLeft ?? 0);
@@ -98,13 +99,16 @@ export function getAnchoredTooltipPosition(anchor, target, tooltipWidth, tooltip
     };
 }
 export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
-    const localTargetX = targetX - tooltipLeft;
-    const localTargetY = targetY - tooltipTop;
+    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
+    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
+    const arrowTipX = tooltipLeft + arrowTip.x;
+    const arrowTipY = tooltipTop + arrowTip.y;
+    const connectorTarget = resolveTooltipConnectorTarget(arrowEdge, targetX, targetY, arrowTipX, arrowTipY, anchor);
+    const localTargetX = connectorTarget.x - tooltipLeft;
+    const localTargetY = connectorTarget.y - tooltipTop;
     if (!Number.isFinite(localTargetX) || !Number.isFinite(localTargetY)) {
         return null;
     }
-    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
-    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
     const minX = Math.min(arrowTip.x, localTargetX) - TOOLTIP_CONNECTOR_PADDING_PX;
     const maxX = Math.max(arrowTip.x, localTargetX) + TOOLTIP_CONNECTOR_PADDING_PX;
     const minY = Math.min(arrowTip.y, localTargetY) - TOOLTIP_CONNECTOR_PADDING_PX;
@@ -117,9 +121,7 @@ export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop
     const startY = arrowTip.y - minY;
     const endX = localTargetX - minX;
     const endY = localTargetY - minY;
-    const arrowTipX = tooltipLeft + arrowTip.x;
-    const arrowTipY = tooltipTop + arrowTip.y;
-    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor);
+    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor, connectorTarget.preferDirectPath);
     if (!hasFiniteNumbers(width, height, boxX, boxY, startX, startY, endX, endY)) {
         return null;
     }
@@ -134,6 +136,43 @@ export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop
         arrowY: boxArrowPosition.y,
     };
 }
+function resolveTooltipConnectorTarget(arrowEdge, targetX, targetY, arrowTipX, arrowTipY, anchor) {
+    if (isPointTooltipAnchor(anchor)) {
+        return { x: targetX, y: targetY, preferDirectPath: false };
+    }
+    if (arrowEdge === 'left') {
+        return {
+            x: anchor.right,
+            y: clampTooltipCoordinate(arrowTipY, anchor.top, anchor.bottom),
+            preferDirectPath: true,
+        };
+    }
+    if (arrowEdge === 'right') {
+        return {
+            x: anchor.left,
+            y: clampTooltipCoordinate(arrowTipY, anchor.top, anchor.bottom),
+            preferDirectPath: true,
+        };
+    }
+    if (arrowEdge === 'top') {
+        return {
+            x: clampTooltipCoordinate(arrowTipX, anchor.left, anchor.right),
+            y: anchor.bottom,
+            preferDirectPath: true,
+        };
+    }
+    return {
+        x: clampTooltipCoordinate(arrowTipX, anchor.left, anchor.right),
+        y: anchor.top,
+        preferDirectPath: true,
+    };
+}
+function isPointTooltipAnchor(anchor) {
+    return (Math.abs(anchor.left - anchor.right) <=
+        TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        Math.abs(anchor.top - anchor.bottom) <=
+            TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
 export function resolveTooltipArrowPosition(arrowEdge, boxX, boxY, length, halfHeight) {
     switch (arrowEdge) {
         case 'left':
@@ -210,17 +249,26 @@ function getTooltipConnectorOffset(start, size, target) {
     const preferredOffset = target - start;
     return Math.max(minOffset, Math.min(preferredOffset, maxOffset));
 }
-function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor) {
+function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor, preferDirectPath) {
     if (arrowEdge === 'left' || arrowEdge === 'right') {
-        if (isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor)) {
+        const minPathLength = preferDirectPath
+            ? AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX
+            : TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX;
+        if (isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor, minPathLength)) {
             return '';
         }
+        if (preferDirectPath) {
+            return `M ${startX},${startY} L ${endX},${endY}`;
+        }
         const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
         return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
     }
     if (isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor)) {
         return '';
     }
+    if (preferDirectPath) {
+        return `M ${startX},${startY} L ${endX},${endY}`;
+    }
     const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
     return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
 }
@@ -232,12 +280,12 @@ function isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor) {
     return (arrowTipY >= anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
         arrowTipY <= anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
 }
-function isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor) {
+function isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor, minPathLength = TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX) {
     if (isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
         return true;
     }
-    return (arrowTipY >= anchor.top - TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX &&
-        arrowTipY <= anchor.bottom + TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX);
+    return (arrowTipY >= anchor.top - minPathLength &&
+        arrowTipY <= anchor.bottom + minPathLength);
 }
 function resolveTooltipArrowTip(arrowEdge, boxX, boxY, length) {
     if (arrowEdge === 'left' || arrowEdge === 'right') {
@@ -288,6 +336,7 @@ function getCombinedSplitTooltipTarget(layouts) {
 function getSideSplitTooltipLayouts(layouts) {
     if (layouts.every((layout) => layout.targetMode === 'auto')) {
         return [...layouts].sort((a, b) => a.anchor.top - b.anchor.top ||
+            a.anchor.bottom - b.anchor.bottom ||
             a.anchor.left - b.anchor.left ||
             a.order - b.order);
     }
@@ -662,6 +711,15 @@ function getSidePlacementCandidates(layout, placedLayouts, allLayouts, bounds) {
     ];
     if (layout.targetMode === 'auto') {
         const connectorlessRange = getSideConnectorlessTopRange(layout);
+        const exactConnectorlessRange = getExactSideConnectorlessTopRange(layout);
+        candidates.push({
+            top: exactConnectorlessRange.min,
+            arrowEdge: layout.arrowEdge,
+        });
+        candidates.push({
+            top: exactConnectorlessRange.max,
+            arrowEdge: layout.arrowEdge,
+        });
         candidates.push({
             top: connectorlessRange.min,
             arrowEdge: layout.arrowEdge,
@@ -750,6 +808,17 @@ function getFixedPointSideSpreadPreferredTop(layout, direction) {
     return layout.targetY - TOOLTIP_CONNECTOR_INSET_PX;
 }
 function getSideConnectorlessTopRange(layout) {
+    const nearPathPadding = layout.targetMode === 'auto'
+        ? AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX
+        : 0;
+    return {
+        min: layout.anchor.top -
+            getTooltipConnectorMaxOffset(layout.height) -
+            nearPathPadding,
+        max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX + nearPathPadding,
+    };
+}
+function getExactSideConnectorlessTopRange(layout) {
     return {
         min: layout.anchor.top - getTooltipConnectorMaxOffset(layout.height),
         max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX,
@@ -757,7 +826,9 @@ function getSideConnectorlessTopRange(layout) {
 }
 function isSidePlacementConnectorless(candidate, layout) {
     if (layout.targetMode === 'auto') {
-        return doRangesOverlap(layout.anchor.top, layout.anchor.bottom, candidate.top + TOOLTIP_CONNECTOR_INSET_PX, candidate.top + getTooltipConnectorMaxOffset(layout.height));
+        const connectorlessRange = getSideConnectorlessTopRange(layout);
+        return (candidate.top >= connectorlessRange.min &&
+            candidate.top <= connectorlessRange.max);
     }
     const arrowTipY = getSidePlacementArrowTipY(candidate.top, layout);
     return (arrowTipY >=

package/dist/tooltip/types.d.ts

@@ -6,7 +6,7 @@ import type { Scatter } from '../scatter.js';
 import type { TooltipTransitionConfig } from '../types.js';
 export declare const TOOLTIP_OFFSET_PX = 12;
 export declare const TOOLTIP_VIEWPORT_PADDING_PX = 10;
-export declare const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export declare const TOOLTIP_CONNECTOR_INSET_PX = 10;
 export declare const TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 16;
 export declare const TOOLTIP_CONNECTOR_PADDING_PX = 4;
 export declare const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
@@ -20,7 +20,7 @@ export declare const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 export declare const TOOLTIP_BODY_Z_INDEX = 6;
 export declare const TOOLTIP_TOTAL_BORDER_WIDTH_PX: number;
 export declare const TOOLTIP_ROOT_Z_INDEX = 30;
-export declare const SPLIT_TOOLTIP_GAP_PX = 8;
+export declare const SPLIT_TOOLTIP_GAP_PX = 4;
 export declare const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 export declare const DEFAULT_TOOLTIP_TRANSITION: Required<TooltipTransitionConfig>;
 export declare const TOOLTIP_HIDDEN_TRANSFORM = "translateY(2px)";

package/dist/tooltip/types.js

@@ -1,6 +1,6 @@
 export const TOOLTIP_OFFSET_PX = 12;
 export const TOOLTIP_VIEWPORT_PADDING_PX = 10;
-export const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export const TOOLTIP_CONNECTOR_INSET_PX = 10;
 export const TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 16;
 export const TOOLTIP_CONNECTOR_PADDING_PX = 4;
 export const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
@@ -14,7 +14,7 @@ export const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 export const TOOLTIP_BODY_Z_INDEX = 6;
 export const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
 export const TOOLTIP_ROOT_Z_INDEX = 30;
-export const SPLIT_TOOLTIP_GAP_PX = 8;
+export const SPLIT_TOOLTIP_GAP_PX = 4;
 export const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 export const DEFAULT_TOOLTIP_TRANSITION = {
     show: false,

package/package.json

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