@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/charts/core/components/annotations/hooks/useMarkerEventHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useMarkerEventHandlers.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type MouseEvent as ReactMouseEvent, type RefObject } from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport type { AnnotationsMarkerGroup } from '../types/annotations.js';\nimport type { SelectionState } from '../types/state.js';\nimport { calculateTooltipPosition } from '../utils/calculate-tooltip-position.js';\n\nexport const useMarkerEventHandlers = (\n  annotationsContainerRef: RefObject<HTMLDivElement> | undefined,\n) => {\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const isTooltipPinned = !isUndefined(pinnedGroup);\n  const handleMouseMove = (event: ReactMouseEvent) => {\n    if (isTooltipPinned || !annotationsContainerRef?.current) {\n      return;\n    }\n\n    const { clientX, clientY } = event;\n    const absolutePosition = calculateTooltipPosition(clientX, clientY);\n    const annotationsContainerRect =\n      annotationsContainerRef.current.getBoundingClientRect();\n    updateTooltipState({\n      position: absolutePosition,\n      relativePosition: {\n        x: absolutePosition.x - annotationsContainerRect.left,\n        y: absolutePosition.y - annotationsContainerRect.top,\n      },\n    });\n  };\n\n  const handleMouseEnter =\n    (\n      markerId: string,\n      groupId: string,\n      annotationsGroup: AnnotationsMarkerGroup[],\n    ) =>\n    (event: ReactMouseEvent) => {\n      if (isTooltipPinned || !annotationsContainerRef?.current) {\n        return;\n      }\n\n      const { clientX, clientY } = event;\n      const absolutePosition = calculateTooltipPosition(clientX, clientY);\n      const annotationsContainerRect =\n        annotationsContainerRef.current.getBoundingClientRect();\n      updateTooltipState({\n        position: absolutePosition,\n        relativePosition: {\n          x: absolutePosition.x - annotationsContainerRect.left,\n          y: absolutePosition.y - annotationsContainerRect.top,\n        },\n        data: annotationsGroup,\n        visibility: true,\n      });\n\n      const selectionState: SelectionState = {\n        hoveredItem: markerId,\n        hoveredGroup: groupId,\n        data: annotationsGroup,\n      };\n\n      updateTooltipSelection(selectionState);\n      onMarkersInteraction?.(selectionState);\n    };\n\n  const handleClick =\n    (groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) =>\n    (event: ReactMouseEvent) => {\n      event.stopPropagation();\n\n      const { clientX, clientY } = event;\n      const newSelection = {\n        hoveredGroup: groupId,\n        data: annotationsGroup,\n        pinnedGroup: isTooltipPinned ? undefined : groupId, // if tooltip was already pinned, unpin\n      };\n\n      updateTooltipState({\n        position: calculateTooltipPosition(clientX, clientY),\n        data: annotationsGroup,\n        visibility: true,\n        pinned: !isTooltipPinned, // if tooltip was already pinned, show updated info but unpin\n      });\n      updateTooltipSelection(newSelection);\n      onMarkersInteraction?.(newSelection);\n    };\n\n  const handleMouseLeave = () => {\n    if (isTooltipPinned) {\n      return;\n    }\n\n    updateTooltipState(initialState.tooltip);\n    updateTooltipSelection(initialState.selection);\n    onMarkersInteraction?.(initialState.selection);\n  };\n\n  return {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleClick,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAG7B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,CACpC,4BACG;AACH,QAAM,qBAAqB,mBAAmB;AAC9C,QAAM,yBAAyB,qBAAqB;AAEpD,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,uBAAuB,uBAAuB;AAEpD,QAAM,kBAAkB,CAAC,YAAY,WAAW;AAChD,QAAM,kBAAkB,CAAC,UAA2B;AAClD,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,mBACJ,CACE,UACA,SACA,qBAEF,CAAC,UAA2B;AAC1B,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,MACA,MAAM;AAAA,MACN,YAAY;AAAA,IACd,CAAC;AAED,UAAM,iBAAiC;AAAA,MACrC,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,IACR;AAEA,2BAAuB,cAAc;AACrC,2BAAuB,cAAc;AAAA,EACvC;AAEF,QAAM,cACJ,CAAC,SAAiB,qBAClB,CAAC,UAA2B;AAC1B,UAAM,gBAAgB;AAEtB,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,eAAe;AAAA,MACnB,cAAc;AAAA,MACd,MAAM;AAAA,MACN,aAAa,kBAAkB,SAAY;AAAA;AAAA,IAC7C;AAEA,uBAAmB;AAAA,MACjB,UAAU,yBAAyB,SAAS,OAAO;AAAA,MACnD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,QAAQ,CAAC;AAAA;AAAA,IACX,CAAC;AACD,2BAAuB,YAAY;AACnC,2BAAuB,YAAY;AAAA,EACrC;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB;AAAA,IACF;AAEA,uBAAmB,aAAa,OAAO;AACvC,2BAAuB,aAAa,SAAS;AAC7C,2BAAuB,aAAa,SAAS;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MouseEvent as ReactMouseEvent, RefObject } from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { isTouchableDevice } from '../../../utils/is-touchable-device.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport type { AnnotationsMarkerGroup } from '../types/annotations.js';\nimport type { MarkerClickCoords } from '../types/marker.js';\nimport type { SelectionState } from '../types/state.js';\nimport { calculateTooltipPosition } from '../utils/calculate-tooltip-position.js';\n\nexport const useMarkerEventHandlers = (\n  annotationsContainerRef: RefObject<HTMLDivElement> | undefined,\n) => {\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const isTooltipPinned = !isUndefined(pinnedGroup);\n  const handleMouseMove = (event: ReactMouseEvent) => {\n    if (isTooltipPinned || !annotationsContainerRef?.current) {\n      return;\n    }\n\n    const { clientX, clientY } = event;\n    const absolutePosition = calculateTooltipPosition(clientX, clientY);\n    const annotationsContainerRect =\n      annotationsContainerRef.current.getBoundingClientRect();\n    updateTooltipState({\n      position: absolutePosition,\n      relativePosition: {\n        x: absolutePosition.x - annotationsContainerRect.left,\n        y: absolutePosition.y - annotationsContainerRect.top,\n      },\n    });\n  };\n\n  const handleMouseEnter =\n    (\n      markerId: string,\n      groupId: string,\n      annotationsGroup: AnnotationsMarkerGroup[],\n    ) =>\n    (event: ReactMouseEvent) => {\n      if (isTooltipPinned || !annotationsContainerRef?.current) {\n        return;\n      }\n\n      const { clientX, clientY } = event;\n      const absolutePosition = calculateTooltipPosition(clientX, clientY);\n      const annotationsContainerRect =\n        annotationsContainerRef.current.getBoundingClientRect();\n      updateTooltipState({\n        position: absolutePosition,\n        relativePosition: {\n          x: absolutePosition.x - annotationsContainerRect.left,\n          y: absolutePosition.y - annotationsContainerRect.top,\n        },\n        data: annotationsGroup,\n        visibility: true,\n      });\n\n      const selectionState: SelectionState = {\n        hoveredItem: markerId,\n        hoveredGroup: groupId,\n        data: annotationsGroup,\n      };\n\n      updateTooltipSelection(selectionState);\n      onMarkersInteraction?.(selectionState);\n    };\n\n  const applyPinToggle = (\n    clientX: number,\n    clientY: number,\n    groupId: string,\n    annotationsGroup: AnnotationsMarkerGroup[],\n  ) => {\n    if (isTooltipPinned && isTouchableDevice()) {\n      updateTooltipState(initialState.tooltip);\n      updateTooltipSelection(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n      return;\n    }\n\n    const newSelection = {\n      hoveredGroup: groupId,\n      data: annotationsGroup,\n      pinnedGroup: isTooltipPinned ? undefined : groupId,\n    };\n    updateTooltipState({\n      position: calculateTooltipPosition(clientX, clientY),\n      data: annotationsGroup,\n      visibility: true,\n      pinned: !isTooltipPinned,\n    });\n    updateTooltipSelection(newSelection);\n    onMarkersInteraction?.(newSelection);\n  };\n\n  const handleClick =\n    (groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) =>\n    (event: MarkerClickCoords) => {\n      event.stopPropagation();\n      applyPinToggle(event.clientX, event.clientY, groupId, annotationsGroup);\n    };\n\n  const handleMouseLeave = () => {\n    if (isTooltipPinned) {\n      return;\n    }\n\n    updateTooltipState(initialState.tooltip);\n    updateTooltipSelection(initialState.selection);\n    onMarkersInteraction?.(initialState.selection);\n  };\n\n  return {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleClick,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAI7B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,CACpC,4BACG;AACH,QAAM,qBAAqB,mBAAmB;AAC9C,QAAM,yBAAyB,qBAAqB;AAEpD,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,uBAAuB,uBAAuB;AAEpD,QAAM,kBAAkB,CAAC,YAAY,WAAW;AAChD,QAAM,kBAAkB,CAAC,UAA2B;AAClD,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,mBACJ,CACE,UACA,SACA,qBAEF,CAAC,UAA2B;AAC1B,QAAI,mBAAmB,CAAC,yBAAyB,SAAS;AACxD;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,mBAAmB,yBAAyB,SAAS,OAAO;AAClE,UAAM,2BACJ,wBAAwB,QAAQ,sBAAsB;AACxD,uBAAmB;AAAA,MACjB,UAAU;AAAA,MACV,kBAAkB;AAAA,QAChB,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,QACjD,GAAG,iBAAiB,IAAI,yBAAyB;AAAA,MACnD;AAAA,MACA,MAAM;AAAA,MACN,YAAY;AAAA,IACd,CAAC;AAED,UAAM,iBAAiC;AAAA,MACrC,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,IACR;AAEA,2BAAuB,cAAc;AACrC,2BAAuB,cAAc;AAAA,EACvC;AAEF,QAAM,iBAAiB,CACrB,SACA,SACA,SACA,qBACG;AACH,QAAI,mBAAmB,kBAAkB,GAAG;AAC1C,yBAAmB,aAAa,OAAO;AACvC,6BAAuB,aAAa,SAAS;AAC7C,6BAAuB,aAAa,SAAS;AAC7C;AAAA,IACF;AAEA,UAAM,eAAe;AAAA,MACnB,cAAc;AAAA,MACd,MAAM;AAAA,MACN,aAAa,kBAAkB,SAAY;AAAA,IAC7C;AACA,uBAAmB;AAAA,MACjB,UAAU,yBAAyB,SAAS,OAAO;AAAA,MACnD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,QAAQ,CAAC;AAAA,IACX,CAAC;AACD,2BAAuB,YAAY;AACnC,2BAAuB,YAAY;AAAA,EACrC;AAEA,QAAM,cACJ,CAAC,SAAiB,qBAClB,CAAC,UAA6B;AAC5B,UAAM,gBAAgB;AACtB,mBAAe,MAAM,SAAS,MAAM,SAAS,SAAS,gBAAgB;AAAA,EACxE;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB;AAAA,IACF;AAEA,uBAAmB,aAAa,OAAO;AACvC,2BAAuB,aAAa,SAAS;AAC7C,2BAAuB,aAAa,SAAS;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/hooks/useOverlayEvents.js

@@ -1,15 +1,10 @@
-import { isUndefined } from "lodash-es";
-import { useContext } from "react";
-import { useAnnotationsSelectionState } from "./store/selectors.js";
+import { noop } from "lodash-es";
 import {
-  useSetStateSelection,
-  useSetStateTooltip
-} from "./store/state-setters.js";
+  useContext
+} from "react";
 import { useAnnotationsHandlers } from "./useAnnotationsHandlers.js";
-import { useMarkersInteractions } from "./useMarkersInteractions.js";
 import { TRACK_HEIGHT } from "../constants.js";
 import { MarkerCoordinatesContext } from "../contexts/MarkerCoordinates.context.js";
-import { initialState } from "../providers/AnnotationsDataInitialState.js";
 import { inMarkerBounds } from "../utils/in-marker-bounds.js";
 const useOverlayEvents = () => {
   const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);
@@ -19,13 +14,10 @@ const useOverlayEvents = () => {
     hoverMarker,
     blurMarker,
     clickMarker,
+    clearHovered,
     currentHoveredTrack,
     currentHoveredMarker
   } = useAnnotationsHandlers();
-  const { pinnedGroup } = useAnnotationsSelectionState();
-  const updateTooltipState = useSetStateTooltip();
-  const updateTooltipSelection = useSetStateSelection();
-  const onMarkersInteraction = useMarkersInteractions();
   const handleMouseMove = (e) => {
     const { clientX, clientY, currentTarget } = e;
     const { top, left } = currentTarget.getBoundingClientRect();
@@ -37,7 +29,7 @@ const useOverlayEvents = () => {
     if (trackIndex !== currentHoveredTrack.current) {
       hoverTrack(e, trackIndex);
     }
-    if (markerCoordsPerTrack !== void 0) {
+    if (markerCoordsPerTrack !== void 0 && markerCoordsPerTrack.length > 0) {
       let isHoveringMarker = false;
       if (trackIndex >= markerCoordsPerTrack.length) {
         trackIndex = markerCoordsPerTrack.length - 1;
@@ -53,7 +45,7 @@ const useOverlayEvents = () => {
         }
       }
       if (!isHoveringMarker && currentHoveredMarker.current !== void 0) {
-        blurMarker(e, currentHoveredMarker.current);
+        blurMarker(currentHoveredMarker.current);
         hoverTrack(e, trackIndex);
       }
     }
@@ -61,26 +53,52 @@ const useOverlayEvents = () => {
   const handleClick = (e) => {
     if (currentHoveredMarker.current !== void 0) {
       clickMarker(e, currentHoveredMarker.current);
+    }
+  };
+  const handleTouchEnd = (e) => {
+    const touch = e.changedTouches[0];
+    if (!touch || !markerCoordsPerTrack || markerCoordsPerTrack.length === 0) {
       return;
     }
-    if (!isUndefined(pinnedGroup)) {
-      updateTooltipState(initialState.tooltip);
-      updateTooltipSelection(initialState.selection);
-      onMarkersInteraction?.(initialState.selection);
+    const { clientX, clientY } = touch;
+    const { top, left } = e.currentTarget.getBoundingClientRect();
+    const mousePosition = { x: clientX - left, y: clientY - top };
+    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));
+    if (trackIndex >= markerCoordsPerTrack.length) {
+      trackIndex = markerCoordsPerTrack.length - 1;
+    }
+    const markerCoords = markerCoordsPerTrack[trackIndex];
+    for (let markerIndex = markerCoords.length - 1; markerIndex >= 0; markerIndex--) {
+      const marker = markerCoords[markerIndex];
+      if (inMarkerBounds(mousePosition, trackIndex, marker)) {
+        if (e.cancelable) {
+          e.preventDefault();
+        }
+        clickMarker(
+          { clientX, clientY, stopPropagation: noop },
+          `${trackIndex}_${marker.join("_")}`
+        );
+        return;
+      }
     }
   };
-  const handleMouseLeave = (e) => {
+  const handlePointerLeave = (e) => {
+    if (e.pointerType === "touch") {
+      clearHovered();
+      return;
+    }
     if (currentHoveredTrack.current !== void 0) {
       blurTrack();
     }
     if (currentHoveredMarker.current !== void 0) {
-      blurMarker(e, currentHoveredMarker.current);
+      blurMarker(currentHoveredMarker.current);
     }
   };
   return {
     handleMouseMove,
     handleClick,
-    handleMouseLeave
+    handleTouchEnd,
+    handlePointerLeave
   };
 };
 export {

package/esm/charts/core/components/annotations/hooks/useOverlayEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/hooks/useOverlayEvents.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useContext, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAnnotationsSelectionState } from './store/selectors.js';\nimport {\n  useSetStateSelection,\n  useSetStateTooltip,\n} from './store/state-setters.js';\nimport { useAnnotationsHandlers } from './useAnnotationsHandlers.js';\nimport { useMarkersInteractions } from './useMarkersInteractions.js';\nimport { TRACK_HEIGHT } from '../constants.js';\nimport { MarkerCoordinatesContext } from '../contexts/MarkerCoordinates.context.js';\nimport { initialState } from '../providers/AnnotationsDataInitialState.js';\nimport { inMarkerBounds } from '../utils/in-marker-bounds.js';\n\nexport const useOverlayEvents = () => {\n  const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);\n\n  const {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  } = useAnnotationsHandlers();\n\n  const { pinnedGroup } = useAnnotationsSelectionState();\n  const updateTooltipState = useSetStateTooltip();\n  const updateTooltipSelection = useSetStateSelection();\n  const onMarkersInteraction = useMarkersInteractions();\n\n  const handleMouseMove = (e: ReactMouseEvent) => {\n    const { clientX, clientY, currentTarget } = e;\n    const { top, left } = (currentTarget as Element).getBoundingClientRect();\n\n    const mousePosition = {\n      x: clientX - left,\n      y: clientY - top,\n    };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n\n    if (trackIndex !== currentHoveredTrack.current) {\n      hoverTrack(e, trackIndex);\n    }\n\n    if (markerCoordsPerTrack !== undefined) {\n      let isHoveringMarker = false;\n\n      if (trackIndex >= markerCoordsPerTrack.length) {\n        trackIndex = markerCoordsPerTrack.length - 1;\n      }\n\n      const markerCoords = markerCoordsPerTrack[trackIndex];\n\n      // start from the end of the array to look first for the markers that are rendered on top\n      for (\n        let markerIndex = markerCoords.length - 1;\n        markerIndex >= 0;\n        markerIndex--\n      ) {\n        const marker = markerCoords[markerIndex];\n\n        if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n          const markerId = `${trackIndex}_${marker.join('_')}`;\n\n          hoverMarker(e, markerId);\n\n          isHoveringMarker = true;\n          break;\n        }\n      }\n\n      // no marker found at the given mouse position\n      if (!isHoveringMarker && currentHoveredMarker.current !== undefined) {\n        blurMarker(e, currentHoveredMarker.current);\n\n        // hover the track back when leaving the marker\n        hoverTrack(e, trackIndex);\n      }\n    }\n  };\n\n  const handleClick = (e: ReactMouseEvent) => {\n    if (currentHoveredMarker.current !== undefined) {\n      clickMarker(e, currentHoveredMarker.current);\n      return;\n    }\n\n    if (!isUndefined(pinnedGroup)) {\n      updateTooltipState(initialState.tooltip);\n      updateTooltipSelection(initialState.selection);\n      onMarkersInteraction?.(initialState.selection);\n    }\n  };\n\n  const handleMouseLeave = (e: ReactMouseEvent) => {\n    if (currentHoveredTrack.current !== undefined) {\n      blurTrack();\n    }\n\n    if (currentHoveredMarker.current !== undefined) {\n      blurMarker(e, currentHoveredMarker.current);\n    }\n  };\n\n  return {\n    handleMouseMove,\n    handleClick,\n    handleMouseLeave,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,kBAAsD;AAE/D,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,MAAM;AACpC,QAAM,uBAAuB,WAAW,wBAAwB;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,EAAE,YAAY,IAAI,6BAA6B;AACrD,QAAM,qBAAqB,mBAAmB;AAC9C,QAAM,yBAAyB,qBAAqB;AACpD,QAAM,uBAAuB,uBAAuB;AAEpD,QAAM,kBAAkB,CAAC,MAAuB;AAC9C,UAAM,EAAE,SAAS,SAAS,cAAc,IAAI;AAC5C,UAAM,EAAE,KAAK,KAAK,IAAK,cAA0B,sBAAsB;AAEvE,UAAM,gBAAgB;AAAA,MACpB,GAAG,UAAU;AAAA,MACb,GAAG,UAAU;AAAA,IACf;AAEA,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AAEvE,QAAI,eAAe,oBAAoB,SAAS;AAC9C,iBAAW,GAAG,UAAU;AAAA,IAC1B;AAEA,QAAI,yBAAyB,QAAW;AACtC,UAAI,mBAAmB;AAEvB,UAAI,cAAc,qBAAqB,QAAQ;AAC7C,qBAAa,qBAAqB,SAAS;AAAA,MAC7C;AAEA,YAAM,eAAe,qBAAqB,UAAU;AAGpD,eACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,cAAM,SAAS,aAAa,WAAW;AAEvC,YAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,gBAAM,WAAW,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAElD,sBAAY,GAAG,QAAQ;AAEvB,6BAAmB;AACnB;AAAA,QACF;AAAA,MACF;AAGA,UAAI,CAAC,oBAAoB,qBAAqB,YAAY,QAAW;AACnE,mBAAW,GAAG,qBAAqB,OAAO;AAG1C,mBAAW,GAAG,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAuB;AAC1C,QAAI,qBAAqB,YAAY,QAAW;AAC9C,kBAAY,GAAG,qBAAqB,OAAO;AAC3C;AAAA,IACF;AAEA,QAAI,CAAC,YAAY,WAAW,GAAG;AAC7B,yBAAmB,aAAa,OAAO;AACvC,6BAAuB,aAAa,SAAS;AAC7C,6BAAuB,aAAa,SAAS;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,MAAuB;AAC/C,QAAI,oBAAoB,YAAY,QAAW;AAC7C,gBAAU;AAAA,IACZ;AAEA,QAAI,qBAAqB,YAAY,QAAW;AAC9C,iBAAW,GAAG,qBAAqB,OAAO;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { noop } from 'lodash-es';\nimport {\n  useContext,\n  type MouseEvent as ReactMouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { useAnnotationsHandlers } from './useAnnotationsHandlers.js';\nimport { TRACK_HEIGHT } from '../constants.js';\nimport { MarkerCoordinatesContext } from '../contexts/MarkerCoordinates.context.js';\nimport { inMarkerBounds } from '../utils/in-marker-bounds.js';\n\nexport const useOverlayEvents = () => {\n  const markerCoordsPerTrack = useContext(MarkerCoordinatesContext);\n\n  const {\n    hoverTrack,\n    blurTrack,\n    hoverMarker,\n    blurMarker,\n    clickMarker,\n    clearHovered,\n    currentHoveredTrack,\n    currentHoveredMarker,\n  } = useAnnotationsHandlers();\n\n  const handleMouseMove = (e: ReactMouseEvent) => {\n    const { clientX, clientY, currentTarget } = e;\n    const { top, left } = (currentTarget as Element).getBoundingClientRect();\n\n    const mousePosition = {\n      x: clientX - left,\n      y: clientY - top,\n    };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n\n    if (trackIndex !== currentHoveredTrack.current) {\n      hoverTrack(e, trackIndex);\n    }\n\n    if (markerCoordsPerTrack !== undefined && markerCoordsPerTrack.length > 0) {\n      let isHoveringMarker = false;\n\n      if (trackIndex >= markerCoordsPerTrack.length) {\n        trackIndex = markerCoordsPerTrack.length - 1;\n      }\n\n      const markerCoords = markerCoordsPerTrack[trackIndex];\n\n      // start from the end of the array to look first for the markers that are rendered on top\n      for (\n        let markerIndex = markerCoords.length - 1;\n        markerIndex >= 0;\n        markerIndex--\n      ) {\n        const marker = markerCoords[markerIndex];\n\n        if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n          const markerId = `${trackIndex}_${marker.join('_')}`;\n\n          hoverMarker(e, markerId);\n\n          isHoveringMarker = true;\n          break;\n        }\n      }\n\n      // no marker found at the given mouse position\n      if (!isHoveringMarker && currentHoveredMarker.current !== undefined) {\n        blurMarker(currentHoveredMarker.current);\n        // hover the track back when leaving the marker\n        hoverTrack(e, trackIndex);\n      }\n    }\n  };\n\n  const handleClick = (e: ReactMouseEvent) => {\n    if (currentHoveredMarker.current !== undefined) {\n      clickMarker(e, currentHoveredMarker.current);\n    }\n  };\n\n  // On iOS, touchstart causes the toolbar to appear and the browser suppresses the\n  // subsequent synthetic click. touchend fires before synthetic mousemove so\n  // currentHoveredMarker is not yet set \u2014 hit detection is required here.\n  // preventDefault() suppresses the synthetic click on subsequent taps to prevent\n  // double-toggling the pin.\n  const handleTouchEnd = (e: ReactTouchEvent<HTMLDivElement>) => {\n    const touch = e.changedTouches[0];\n    if (!touch || !markerCoordsPerTrack || markerCoordsPerTrack.length === 0) {\n      return;\n    }\n\n    const { clientX, clientY } = touch;\n    const { top, left } = (e.currentTarget as Element).getBoundingClientRect();\n    const mousePosition = { x: clientX - left, y: clientY - top };\n\n    let trackIndex = Math.max(0, Math.floor(mousePosition.y / TRACK_HEIGHT));\n    if (trackIndex >= markerCoordsPerTrack.length) {\n      trackIndex = markerCoordsPerTrack.length - 1;\n    }\n\n    const markerCoords = markerCoordsPerTrack[trackIndex];\n    for (\n      let markerIndex = markerCoords.length - 1;\n      markerIndex >= 0;\n      markerIndex--\n    ) {\n      const marker = markerCoords[markerIndex];\n      if (inMarkerBounds(mousePosition, trackIndex, marker)) {\n        if (e.cancelable) {\n          e.preventDefault();\n        }\n        // stopPropagation is a no-op here: preventDefault() above already suppresses the synthetic click.\n        clickMarker(\n          { clientX, clientY, stopPropagation: noop },\n          `${trackIndex}_${marker.join('_')}`,\n        );\n        return;\n      }\n    }\n  };\n\n  // Without this guard, pointerleave on finger-lift fires blurMarker before React\n  // re-renders, hiding the tooltip that handleTouchEnd just pinned.\n  // clearHovered() resets the tracked state so a subsequent mouse hover over the\n  // same marker triggers onMouseEnter (visibility) rather than onMouseMove (position only).\n  const handlePointerLeave = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (e.pointerType === 'touch') {\n      clearHovered();\n      return;\n    }\n\n    if (currentHoveredTrack.current !== undefined) {\n      blurTrack();\n    }\n\n    if (currentHoveredMarker.current !== undefined) {\n      blurMarker(currentHoveredMarker.current);\n    }\n  };\n\n  return {\n    handleMouseMove,\n    handleClick,\n    handleTouchEnd,\n    handlePointerLeave,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,OAIK;AAEP,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,MAAM;AACpC,QAAM,uBAAuB,WAAW,wBAAwB;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,kBAAkB,CAAC,MAAuB;AAC9C,UAAM,EAAE,SAAS,SAAS,cAAc,IAAI;AAC5C,UAAM,EAAE,KAAK,KAAK,IAAK,cAA0B,sBAAsB;AAEvE,UAAM,gBAAgB;AAAA,MACpB,GAAG,UAAU;AAAA,MACb,GAAG,UAAU;AAAA,IACf;AAEA,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AAEvE,QAAI,eAAe,oBAAoB,SAAS;AAC9C,iBAAW,GAAG,UAAU;AAAA,IAC1B;AAEA,QAAI,yBAAyB,UAAa,qBAAqB,SAAS,GAAG;AACzE,UAAI,mBAAmB;AAEvB,UAAI,cAAc,qBAAqB,QAAQ;AAC7C,qBAAa,qBAAqB,SAAS;AAAA,MAC7C;AAEA,YAAM,eAAe,qBAAqB,UAAU;AAGpD,eACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,cAAM,SAAS,aAAa,WAAW;AAEvC,YAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,gBAAM,WAAW,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAElD,sBAAY,GAAG,QAAQ;AAEvB,6BAAmB;AACnB;AAAA,QACF;AAAA,MACF;AAGA,UAAI,CAAC,oBAAoB,qBAAqB,YAAY,QAAW;AACnE,mBAAW,qBAAqB,OAAO;AAEvC,mBAAW,GAAG,UAAU;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAuB;AAC1C,QAAI,qBAAqB,YAAY,QAAW;AAC9C,kBAAY,GAAG,qBAAqB,OAAO;AAAA,IAC7C;AAAA,EACF;AAOA,QAAM,iBAAiB,CAAC,MAAuC;AAC7D,UAAM,QAAQ,EAAE,eAAe,CAAC;AAChC,QAAI,CAAC,SAAS,CAAC,wBAAwB,qBAAqB,WAAW,GAAG;AACxE;AAAA,IACF;AAEA,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,EAAE,KAAK,KAAK,IAAK,EAAE,cAA0B,sBAAsB;AACzE,UAAM,gBAAgB,EAAE,GAAG,UAAU,MAAM,GAAG,UAAU,IAAI;AAE5D,QAAI,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,cAAc,IAAI,YAAY,CAAC;AACvE,QAAI,cAAc,qBAAqB,QAAQ;AAC7C,mBAAa,qBAAqB,SAAS;AAAA,IAC7C;AAEA,UAAM,eAAe,qBAAqB,UAAU;AACpD,aACM,cAAc,aAAa,SAAS,GACxC,eAAe,GACf,eACA;AACA,YAAM,SAAS,aAAa,WAAW;AACvC,UAAI,eAAe,eAAe,YAAY,MAAM,GAAG;AACrD,YAAI,EAAE,YAAY;AAChB,YAAE,eAAe;AAAA,QACnB;AAEA;AAAA,UACE,EAAE,SAAS,SAAS,iBAAiB,KAAK;AAAA,UAC1C,GAAG,UAAU,IAAI,OAAO,KAAK,GAAG,CAAC;AAAA,QACnC;AACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAMA,QAAM,qBAAqB,CAAC,MAAyC;AACnE,QAAI,EAAE,gBAAgB,SAAS;AAC7B,mBAAa;AACb;AAAA,IACF;AAEA,QAAI,oBAAoB,YAAY,QAAW;AAC7C,gBAAU;AAAA,IACZ;AAEA,QAAI,qBAAqB,YAAY,QAAW;AAC9C,iBAAW,qBAAqB,OAAO;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/aggregate-markers-coords.js

@@ -1,16 +1,16 @@
 import { Children } from "react";
 import { isElement } from "react-is";
 import Colors from "@dynatrace/strato-design-tokens/colors";
-import {
-  calculateRangeMarkerCoordinates,
-  calculateValueMarkerCoordinates
-} from "./calculate-expand-marker-coordinates.js";
+import { calculateRangeMarkerCoordinates } from "./calculate-expand-marker-coordinates.js";
+import { resolveValueMarkerHitArea } from "./resolve-value-marker-hit-area.js";
 import { isSlot } from "../../../../../core/utils/is-slot.js";
 import {
   getColorByContrast,
   getColorTokenDefaultValue
 } from "../../../utils/color-contrast.js";
 import { getTokenComputedStyle } from "../../../utils/getTokenComputedStyle.js";
+import { VALUE_MARKER_WIDTH } from "../components/canvas/renderers/value-marker-renderer/constants.js";
+import { calculateMarkerWidthAndContent } from "../components/canvas/utils/calculate-marker-width-and-content.js";
 import { MarkerAtom } from "../slots/MarkerAtom.js";
 import { TrackAtom } from "../slots/TrackAtom.js";
 function aggregateMarkersCoords(children, trackWidth) {
@@ -32,10 +32,24 @@ function aggregateMarkersCoords(children, trackWidth) {
           markersByTrackConfig.push(marker.props);
           const { textOverflow, content, x, width } = marker.props;
           if (marker.props.width === 0) {
-            markerAtomCoords = calculateValueMarkerCoordinates(
+            const {
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
+            } = calculateMarkerWidthAndContent({
+              trackWidth,
+              trackLeftBoundary: 0,
               content,
+              width: VALUE_MARKER_WIDTH,
               x,
-              trackWidth
+              isRange: false,
+              textOverflow,
+              truncateMode: marker.props.truncateMode
+            });
+            markerAtomCoords = resolveValueMarkerHitArea(
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
             );
           } else {
             markerAtomCoords = calculateRangeMarkerCoordinates(
@@ -54,19 +68,12 @@ function aggregateMarkersCoords(children, trackWidth) {
           };
           markersPerTrack[trackIndex].push(markerAtomCoords);
           if (isElement(marker.props.content)) {
-            const markerColor = getTokenComputedStyle(marker.props.color);
-            const lightTextColor = getColorTokenDefaultValue(
-              Colors.Text.Neutral.OnAccent.Default
-            );
-            const darkTextColor = getColorTokenDefaultValue(
-              Colors.Text.Neutral.Default
-            );
-            const contrastTextColor = getColorByContrast(
-              markerColor,
-              lightTextColor,
-              darkTextColor
+            const iconColor = marker.props.symbolColor ?? getColorByContrast(
+              getTokenComputedStyle(marker.props.color),
+              getColorTokenDefaultValue(Colors.Text.Neutral.OnAccent.Default),
+              getColorTokenDefaultValue(Colors.Text.Neutral.Default)
             );
-            icons.push([marker.props.content, contrastTextColor]);
+            icons.push([marker.props.content, iconColor]);
           }
         }
       });

package/esm/charts/core/components/annotations/utils/aggregate-markers-coords.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/utils/aggregate-markers-coords.ts"],
-  "sourcesContent": ["import { Children, type ReactElement, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  calculateRangeMarkerCoordinates,\n  calculateValueMarkerCoordinates,\n} from './calculate-expand-marker-coordinates.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../utils/color-contrast.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport {\n  MarkerEventHandlersMap,\n  TrackEventHandlersMap,\n} from '../types/event-handlers.js';\nimport { MarkerCoords, MarkersCoordsPerTrack } from '../types/marker-coords.js';\nimport { MarkerAtomProps } from '../types/marker.js';\nimport { TrackAtomProps } from '../types/track.js';\n\nexport function aggregateMarkersCoords(\n  children: ReactNode,\n  trackWidth: number,\n) {\n  const markersPerTrack: MarkersCoordsPerTrack[] = [];\n\n  const markerEventHandlers: MarkerEventHandlersMap = {};\n  const trackEventHandlers: TrackEventHandlersMap = {};\n\n  const tracksConfig: (TrackAtomProps & { markers: MarkerAtomProps[] })[] = [];\n  const icons: Array<[ReactElement, string]> = [];\n\n  Children.forEach(children, (track, trackIndex) => {\n    if (isSlot(track, TrackAtom)) {\n      markersPerTrack[trackIndex] = [];\n\n      trackEventHandlers[trackIndex] = {\n        onMouseEnter: track.props.onMouseEnter,\n      };\n\n      const markersByTrackConfig: MarkerAtomProps[] = [];\n      Children.forEach(track.props.children, (marker) => {\n        if (isSlot(marker, MarkerAtom)) {\n          let markerAtomCoords: MarkerCoords;\n          markersByTrackConfig.push(marker.props);\n\n          const { textOverflow, content, x, width } = marker.props;\n\n          if (marker.props.width === 0) {\n            markerAtomCoords = calculateValueMarkerCoordinates(\n              content,\n              x,\n              trackWidth,\n            );\n          } else {\n            markerAtomCoords = calculateRangeMarkerCoordinates(\n              content,\n              x,\n              width,\n              trackWidth,\n              textOverflow,\n            );\n          }\n\n          markerEventHandlers[`${trackIndex}_${markerAtomCoords.join('_')}`] = {\n            onMouseEnter: marker.props.onMouseEnter,\n            onMouseMove: marker.props.onMouseMove,\n            onMouseLeave: marker.props.onMouseLeave,\n            onClick: marker.props.onClick,\n          };\n\n          markersPerTrack[trackIndex].push(markerAtomCoords);\n          if (isElement(marker.props.content)) {\n            const markerColor = getTokenComputedStyle(marker.props.color);\n            const lightTextColor = getColorTokenDefaultValue(\n              Colors.Text.Neutral.OnAccent.Default,\n            );\n            const darkTextColor = getColorTokenDefaultValue(\n              Colors.Text.Neutral.Default,\n            );\n            const contrastTextColor = getColorByContrast(\n              markerColor,\n              lightTextColor,\n              darkTextColor,\n            );\n\n            icons.push([marker.props.content, contrastTextColor]);\n          }\n        }\n      });\n\n      tracksConfig.push({ ...track.props, markers: markersByTrackConfig });\n    }\n  });\n\n  return {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAmD;AAC5D,SAAS,iBAAiB;AAE1B,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AASnB,SAAS,uBACd,UACA,YACA;AACA,QAAM,kBAA2C,CAAC;AAElD,QAAM,sBAA8C,CAAC;AACrD,QAAM,qBAA4C,CAAC;AAEnD,QAAM,eAAoE,CAAC;AAC3E,QAAM,QAAuC,CAAC;AAE9C,WAAS,QAAQ,UAAU,CAAC,OAAO,eAAe;AAChD,QAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,sBAAgB,UAAU,IAAI,CAAC;AAE/B,yBAAmB,UAAU,IAAI;AAAA,QAC/B,cAAc,MAAM,MAAM;AAAA,MAC5B;AAEA,YAAM,uBAA0C,CAAC;AACjD,eAAS,QAAQ,MAAM,MAAM,UAAU,CAAC,WAAW;AACjD,YAAI,OAAO,QAAQ,UAAU,GAAG;AAC9B,cAAI;AACJ,+BAAqB,KAAK,OAAO,KAAK;AAEtC,gBAAM,EAAE,cAAc,SAAS,GAAG,MAAM,IAAI,OAAO;AAEnD,cAAI,OAAO,MAAM,UAAU,GAAG;AAC5B,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AACL,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAEA,8BAAoB,GAAG,UAAU,IAAI,iBAAiB,KAAK,GAAG,CAAC,EAAE,IAAI;AAAA,YACnE,cAAc,OAAO,MAAM;AAAA,YAC3B,aAAa,OAAO,MAAM;AAAA,YAC1B,cAAc,OAAO,MAAM;AAAA,YAC3B,SAAS,OAAO,MAAM;AAAA,UACxB;AAEA,0BAAgB,UAAU,EAAE,KAAK,gBAAgB;AACjD,cAAI,UAAU,OAAO,MAAM,OAAO,GAAG;AACnC,kBAAM,cAAc,sBAAsB,OAAO,MAAM,KAAK;AAC5D,kBAAM,iBAAiB;AAAA,cACrB,OAAO,KAAK,QAAQ,SAAS;AAAA,YAC/B;AACA,kBAAM,gBAAgB;AAAA,cACpB,OAAO,KAAK,QAAQ;AAAA,YACtB;AACA,kBAAM,oBAAoB;AAAA,cACxB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,kBAAM,KAAK,CAAC,OAAO,MAAM,SAAS,iBAAiB,CAAC;AAAA,UACtD;AAAA,QACF;AAAA,MACF,CAAC;AAED,mBAAa,KAAK,EAAE,GAAG,MAAM,OAAO,SAAS,qBAAqB,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Children, type ReactElement, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { calculateRangeMarkerCoordinates } from './calculate-expand-marker-coordinates.js';\nimport { resolveValueMarkerHitArea } from './resolve-value-marker-hit-area.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../utils/color-contrast.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { VALUE_MARKER_WIDTH } from '../components/canvas/renderers/value-marker-renderer/constants.js';\nimport { calculateMarkerWidthAndContent } from '../components/canvas/utils/calculate-marker-width-and-content.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport {\n  MarkerEventHandlersMap,\n  TrackEventHandlersMap,\n} from '../types/event-handlers.js';\nimport { MarkerCoords, MarkersCoordsPerTrack } from '../types/marker-coords.js';\nimport { MarkerAtomProps } from '../types/marker.js';\nimport { TrackAtomProps } from '../types/track.js';\n\nexport function aggregateMarkersCoords(\n  children: ReactNode,\n  trackWidth: number,\n) {\n  const markersPerTrack: MarkersCoordsPerTrack[] = [];\n\n  const markerEventHandlers: MarkerEventHandlersMap = {};\n  const trackEventHandlers: TrackEventHandlersMap = {};\n\n  const tracksConfig: (TrackAtomProps & { markers: MarkerAtomProps[] })[] = [];\n  const icons: Array<[ReactElement, string]> = [];\n\n  Children.forEach(children, (track, trackIndex) => {\n    if (isSlot(track, TrackAtom)) {\n      markersPerTrack[trackIndex] = [];\n\n      trackEventHandlers[trackIndex] = {\n        onMouseEnter: track.props.onMouseEnter,\n      };\n\n      const markersByTrackConfig: MarkerAtomProps[] = [];\n      Children.forEach(track.props.children, (marker) => {\n        if (isSlot(marker, MarkerAtom)) {\n          let markerAtomCoords: MarkerCoords;\n          markersByTrackConfig.push(marker.props);\n\n          const { textOverflow, content, x, width } = marker.props;\n\n          if (marker.props.width === 0) {\n            const {\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            } = calculateMarkerWidthAndContent({\n              trackWidth,\n              trackLeftBoundary: 0,\n              content,\n              width: VALUE_MARKER_WIDTH,\n              x,\n              isRange: false,\n              textOverflow,\n              truncateMode: marker.props.truncateMode,\n            });\n            markerAtomCoords = resolveValueMarkerHitArea(\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            );\n          } else {\n            markerAtomCoords = calculateRangeMarkerCoordinates(\n              content,\n              x,\n              width,\n              trackWidth,\n              textOverflow,\n            );\n          }\n\n          markerEventHandlers[`${trackIndex}_${markerAtomCoords.join('_')}`] = {\n            onMouseEnter: marker.props.onMouseEnter,\n            onMouseMove: marker.props.onMouseMove,\n            onMouseLeave: marker.props.onMouseLeave,\n            onClick: marker.props.onClick,\n          };\n\n          markersPerTrack[trackIndex].push(markerAtomCoords);\n          if (isElement(marker.props.content)) {\n            const iconColor =\n              marker.props.symbolColor ??\n              getColorByContrast(\n                getTokenComputedStyle(marker.props.color),\n                getColorTokenDefaultValue(Colors.Text.Neutral.OnAccent.Default),\n                getColorTokenDefaultValue(Colors.Text.Neutral.Default),\n              );\n            icons.push([marker.props.content, iconColor]);\n          }\n        }\n      });\n\n      tracksConfig.push({ ...track.props, markers: markersByTrackConfig });\n    }\n  });\n\n  return {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAmD;AAC5D,SAAS,iBAAiB;AAE1B,OAAO,YAAY;AAEnB,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AASnB,SAAS,uBACd,UACA,YACA;AACA,QAAM,kBAA2C,CAAC;AAElD,QAAM,sBAA8C,CAAC;AACrD,QAAM,qBAA4C,CAAC;AAEnD,QAAM,eAAoE,CAAC;AAC3E,QAAM,QAAuC,CAAC;AAE9C,WAAS,QAAQ,UAAU,CAAC,OAAO,eAAe;AAChD,QAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,sBAAgB,UAAU,IAAI,CAAC;AAE/B,yBAAmB,UAAU,IAAI;AAAA,QAC/B,cAAc,MAAM,MAAM;AAAA,MAC5B;AAEA,YAAM,uBAA0C,CAAC;AACjD,eAAS,QAAQ,MAAM,MAAM,UAAU,CAAC,WAAW;AACjD,YAAI,OAAO,QAAQ,UAAU,GAAG;AAC9B,cAAI;AACJ,+BAAqB,KAAK,OAAO,KAAK;AAEtC,gBAAM,EAAE,cAAc,SAAS,GAAG,MAAM,IAAI,OAAO;AAEnD,cAAI,OAAO,MAAM,UAAU,GAAG;AAC5B,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI,+BAA+B;AAAA,cACjC;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAc,OAAO,MAAM;AAAA,YAC7B,CAAC;AACD,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AACL,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAEA,8BAAoB,GAAG,UAAU,IAAI,iBAAiB,KAAK,GAAG,CAAC,EAAE,IAAI;AAAA,YACnE,cAAc,OAAO,MAAM;AAAA,YAC3B,aAAa,OAAO,MAAM;AAAA,YAC1B,cAAc,OAAO,MAAM;AAAA,YAC3B,SAAS,OAAO,MAAM;AAAA,UACxB;AAEA,0BAAgB,UAAU,EAAE,KAAK,gBAAgB;AACjD,cAAI,UAAU,OAAO,MAAM,OAAO,GAAG;AACnC,kBAAM,YACJ,OAAO,MAAM,eACb;AAAA,cACE,sBAAsB,OAAO,MAAM,KAAK;AAAA,cACxC,0BAA0B,OAAO,KAAK,QAAQ,SAAS,OAAO;AAAA,cAC9D,0BAA0B,OAAO,KAAK,QAAQ,OAAO;AAAA,YACvD;AACF,kBAAM,KAAK,CAAC,OAAO,MAAM,SAAS,SAAS,CAAC;AAAA,UAC9C;AAAA,QACF;AAAA,MACF,CAAC;AAED,mBAAa,KAAK,EAAE,GAAG,MAAM,OAAO,SAAS,qBAAqB,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/calculate-marker-dimension.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/utils/calculate-marker-dimension.ts"],
-  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\nimport { isNumber } from 'lodash-es';\n\nimport { isRangeMarker } from './is-range-marker.js';\nimport { MINIMUM_MARKER_WIDTH } from '../constants.js';\nimport type { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';\n\nexport const calculateMarkerDimension = (\n  marker: AnnotationsMarkerConfig,\n  scale:\n    | ScaleTime<number, number>\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleSymLog<number, number>,\n) => {\n  let x: number;\n  const isReversed = scale.domain()[0] > scale.domain()[1];\n  const finishMarker = marker.end ?? marker.start;\n  const start = isReversed ? finishMarker : marker.start;\n  const end = isReversed ? marker.start : finishMarker;\n\n  if (isNumber(start)) {\n    x = scale(start) ?? 0;\n  } else {\n    x = scale(start.getTime()) ?? 0;\n  }\n\n  let width = 0;\n\n  if (isRangeMarker(marker)) {\n    let x1: number;\n\n    if (isNumber(end)) {\n      x1 = scale(end) ?? 0;\n    } else {\n      x1 = scale(end.getTime()) ?? 0;\n    }\n\n    width = calculateMarkerWidth(x, x1);\n  }\n\n  return { x, width };\n};\n\nconst calculateMarkerWidth = (x0: number, x1: number) => {\n  const width = x1 - x0;\n\n  if (width < MINIMUM_MARKER_WIDTH) {\n    return MINIMUM_MARKER_WIDTH;\n  }\n\n  return width;\n};\n"],
-  "mappings": "AAMA,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAG9B,MAAM,2BAA2B,CACtC,QACA,UAKG;AACH,MAAI;AACJ,QAAM,aAAa,MAAM,OAAO,EAAE,CAAC,IAAI,MAAM,OAAO,EAAE,CAAC;AACvD,QAAM,eAAe,OAAO,OAAO,OAAO;AAC1C,QAAM,QAAQ,aAAa,eAAe,OAAO;AACjD,QAAM,MAAM,aAAa,OAAO,QAAQ;AAExC,MAAI,SAAS,KAAK,GAAG;AACnB,QAAI,MAAM,KAAK,KAAK;AAAA,EACtB,OAAO;AACL,QAAI,MAAM,MAAM,QAAQ,CAAC,KAAK;AAAA,EAChC;AAEA,MAAI,QAAQ;AAEZ,MAAI,cAAc,MAAM,GAAG;AACzB,QAAI;AAEJ,QAAI,SAAS,GAAG,GAAG;AACjB,WAAK,MAAM,GAAG,KAAK;AAAA,IACrB,OAAO;AACL,WAAK,MAAM,IAAI,QAAQ,CAAC,KAAK;AAAA,IAC/B;AAEA,YAAQ,qBAAqB,GAAG,EAAE;AAAA,EACpC;AAEA,SAAO,EAAE,GAAG,MAAM;AACpB;AAEA,MAAM,uBAAuB,CAAC,IAAY,OAAe;AACvD,QAAM,QAAQ,KAAK;AAEnB,MAAI,QAAQ,sBAAsB;AAChC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\nimport { isNumber } from 'lodash-es';\n\nimport { isRangeMarker } from './is-range-marker.js';\nimport { MINIMUM_MARKER_WIDTH } from '../constants.js';\nimport type { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';\n\nexport type AnnotationsScale =\n  | ScaleTime<number, number>\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ScaleSymLog<number, number>;\n\nexport const calculateMarkerDimension = (\n  marker: AnnotationsMarkerConfig,\n  scale: AnnotationsScale,\n) => {\n  let x: number;\n  const isReversed = scale.domain()[0] > scale.domain()[1];\n  const finishMarker = marker.end ?? marker.start;\n  const start = isReversed ? finishMarker : marker.start;\n  const end = isReversed ? marker.start : finishMarker;\n\n  if (isNumber(start)) {\n    x = scale(start) ?? 0;\n  } else {\n    x = scale(start.getTime()) ?? 0;\n  }\n\n  let width = 0;\n\n  if (isRangeMarker(marker)) {\n    let x1: number;\n\n    if (isNumber(end)) {\n      x1 = scale(end) ?? 0;\n    } else {\n      x1 = scale(end.getTime()) ?? 0;\n    }\n\n    width = calculateMarkerWidth(x, x1);\n  }\n\n  return { x, width };\n};\n\nconst calculateMarkerWidth = (x0: number, x1: number) => {\n  const width = x1 - x0;\n\n  if (width < MINIMUM_MARKER_WIDTH) {\n    return MINIMUM_MARKER_WIDTH;\n  }\n\n  return width;\n};\n"],
+  "mappings": "AAMA,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AAS9B,MAAM,2BAA2B,CACtC,QACA,UACG;AACH,MAAI;AACJ,QAAM,aAAa,MAAM,OAAO,EAAE,CAAC,IAAI,MAAM,OAAO,EAAE,CAAC;AACvD,QAAM,eAAe,OAAO,OAAO,OAAO;AAC1C,QAAM,QAAQ,aAAa,eAAe,OAAO;AACjD,QAAM,MAAM,aAAa,OAAO,QAAQ;AAExC,MAAI,SAAS,KAAK,GAAG;AACnB,QAAI,MAAM,KAAK,KAAK;AAAA,EACtB,OAAO;AACL,QAAI,MAAM,MAAM,QAAQ,CAAC,KAAK;AAAA,EAChC;AAEA,MAAI,QAAQ;AAEZ,MAAI,cAAc,MAAM,GAAG;AACzB,QAAI;AAEJ,QAAI,SAAS,GAAG,GAAG;AACjB,WAAK,MAAM,GAAG,KAAK;AAAA,IACrB,OAAO;AACL,WAAK,MAAM,IAAI,QAAQ,CAAC,KAAK;AAAA,IAC/B;AAEA,YAAQ,qBAAqB,GAAG,EAAE;AAAA,EACpC;AAEA,SAAO,EAAE,GAAG,MAAM;AACpB;AAEA,MAAM,uBAAuB,CAAC,IAAY,OAAe;AACvD,QAAM,QAAQ,KAAK;AAEnB,MAAI,QAAQ,sBAAsB;AAChC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/define-marker-color.js

@@ -1,13 +1,16 @@
-function defineMarkerColor(markers) {
+function defineMarkerColors(markers) {
   let topPriorityMarker = markers[0];
   for (let i = 1; i < markers.length; i++) {
     if (markers[i].priority > topPriorityMarker.priority) {
       topPriorityMarker = markers[i];
     }
   }
-  return topPriorityMarker.color;
+  return {
+    color: topPriorityMarker.color,
+    symbolColor: topPriorityMarker.symbolColor
+  };
 }
 export {
-  defineMarkerColor
+  defineMarkerColors
 };
 //# sourceMappingURL=define-marker-color.js.map

package/esm/charts/core/components/annotations/utils/define-marker-color.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/utils/define-marker-color.ts"],
-  "sourcesContent": ["import { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';\n\n/**\n * Defines the main color of the marker depending on priority.\n * If all of them have the same priority, or no priority is set, the first color will be returned\n *\n * @param markers -\n *\n * @returns color(string)\n */\nexport function defineMarkerColor(markers: AnnotationsMarkerConfig[]): string {\n  let topPriorityMarker = markers[0];\n\n  for (let i = 1; i < markers.length; i++) {\n    if (markers[i].priority > topPriorityMarker.priority) {\n      topPriorityMarker = markers[i];\n    }\n  }\n\n  return topPriorityMarker.color;\n}\n"],
-  "mappings": "AAUO,SAAS,kBAAkB,SAA4C;AAC5E,MAAI,oBAAoB,QAAQ,CAAC;AAEjC,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,QAAQ,CAAC,EAAE,WAAW,kBAAkB,UAAU;AACpD,0BAAoB,QAAQ,CAAC;AAAA,IAC/B;AAAA,EACF;AAEA,SAAO,kBAAkB;AAC3B;",
+  "sourcesContent": ["import { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';\n\ntype MarkerColors = {\n  color: string;\n  symbolColor: string | undefined;\n};\n\n/**\n * Returns the color and symbolColor of the highest-priority marker.\n * If all markers have the same priority, or no priority is set, the first marker is used.\n *\n * @param markers -\n *\n * @returns MarkerColors\n */\nexport function defineMarkerColors(\n  markers: AnnotationsMarkerConfig[],\n): MarkerColors {\n  let topPriorityMarker = markers[0];\n\n  for (let i = 1; i < markers.length; i++) {\n    if (markers[i].priority > topPriorityMarker.priority) {\n      topPriorityMarker = markers[i];\n    }\n  }\n\n  return {\n    color: topPriorityMarker.color,\n    symbolColor: topPriorityMarker.symbolColor,\n  };\n}\n"],
+  "mappings": "AAeO,SAAS,mBACd,SACc;AACd,MAAI,oBAAoB,QAAQ,CAAC;AAEjC,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,QAAQ,CAAC,EAAE,WAAW,kBAAkB,UAAU;AACpD,0BAAoB,QAAQ,CAAC;AAAA,IAC/B;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO,kBAAkB;AAAA,IACzB,aAAa,kBAAkB;AAAA,EACjC;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/get-marker-pixel-extent.js

@@ -0,0 +1,72 @@
+import { isNumber, isString } from "lodash-es";
+import {
+  calculateMarkerDimension
+} from "./calculate-marker-dimension.js";
+import { charsFontWidth12pixelsSize500Map } from "../../text-ellipsis/chars-font-width-map.js";
+import { calculateWidth } from "../../text-ellipsis/truncate-string.js";
+import { VALUE_MARKER_WIDTH } from "../components/canvas/renderers/value-marker-renderer/constants.js";
+import { MARKER_CONTENT_TO_BORDER_PADDING } from "../constants.js";
+function getMarkerLabelWidth(marker) {
+  const { symbol, title } = marker;
+  const content = isString(symbol) || isNumber(symbol) ? String(symbol) : title ?? "";
+  return calculateWidth(content, charsFontWidth12pixelsSize500Map);
+}
+function fitsWithinVisibleRange(left, right, visibleLeft, visibleRight) {
+  return left >= visibleLeft && right <= visibleRight;
+}
+function resolvePointMarkerExtent(x, visualWidth, visibleLeft, visibleRight) {
+  const half = visualWidth / 2;
+  if (fitsWithinVisibleRange(x - half, x + half, visibleLeft, visibleRight)) {
+    return [x - half, x + half];
+  }
+  if (x - visualWidth >= visibleLeft) {
+    return [x - visualWidth, x];
+  }
+  if (x + visualWidth <= visibleRight) {
+    return [x, x + visualWidth];
+  }
+  return [Math.max(x - half, visibleLeft), Math.min(x + half, visibleRight)];
+}
+function resolveRangeExpandedExtent(x, width, labelWidth, visibleLeft, visibleRight) {
+  const center = x + width / 2;
+  const half = labelWidth / 2;
+  if (fitsWithinVisibleRange(
+    center - half,
+    center + half,
+    visibleLeft,
+    visibleRight
+  )) {
+    return [center - half, center + half];
+  }
+  const leftSpace = x - visibleLeft;
+  const rightSpace = visibleRight - x;
+  if (leftSpace > rightSpace) {
+    return [Math.max(x - labelWidth, visibleLeft), x];
+  }
+  return [x, Math.min(x + labelWidth, visibleRight)];
+}
+function getMarkerPixelExtent(marker, scale, textOverflow) {
+  const { x, width } = calculateMarkerDimension(marker, scale);
+  const labelWidth = getMarkerLabelWidth(marker) + MARKER_CONTENT_TO_BORDER_PADDING * 2;
+  const [r0, r1] = scale.range();
+  const visibleLeft = Math.min(r0, r1);
+  const visibleRight = Math.max(r0, r1);
+  if (width === 0) {
+    const visualWidth = Math.max(labelWidth, VALUE_MARKER_WIDTH);
+    return resolvePointMarkerExtent(x, visualWidth, visibleLeft, visibleRight);
+  }
+  if (textOverflow !== "expand" || labelWidth <= width) {
+    return [x, x + width];
+  }
+  return resolveRangeExpandedExtent(
+    x,
+    width,
+    labelWidth,
+    visibleLeft,
+    visibleRight
+  );
+}
+export {
+  getMarkerPixelExtent
+};
+//# sourceMappingURL=get-marker-pixel-extent.js.map

package/esm/charts/core/components/annotations/utils/get-marker-pixel-extent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/annotations/utils/get-marker-pixel-extent.ts"],
+  "sourcesContent": ["import { isNumber, isString } from 'lodash-es';\n\nimport {\n  calculateMarkerDimension,\n  type AnnotationsScale,\n} from './calculate-marker-dimension.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport { VALUE_MARKER_WIDTH } from '../components/canvas/renderers/value-marker-renderer/constants.js';\nimport { MARKER_CONTENT_TO_BORDER_PADDING } from '../constants.js';\nimport type { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';\nimport type { TextOverflowOptions } from '../types/marker.js';\n\nfunction getMarkerLabelWidth(marker: AnnotationsMarkerConfig): number {\n  const { symbol, title } = marker;\n  const content =\n    isString(symbol) || isNumber(symbol) ? String(symbol) : title ?? '';\n  return calculateWidth(content, charsFontWidth12pixelsSize500Map);\n}\n\nfunction fitsWithinVisibleRange(\n  left: number,\n  right: number,\n  visibleLeft: number,\n  visibleRight: number,\n): boolean {\n  return left >= visibleLeft && right <= visibleRight;\n}\n\n// Mirrors calculateMarkerWidthAndContent's point-marker branch order: prefer\n// centering on the marker's own position, else expand left if it fits, else\n// expand right, else fall back to a clamped centered box.\nfunction resolvePointMarkerExtent(\n  x: number,\n  visualWidth: number,\n  visibleLeft: number,\n  visibleRight: number,\n): [number, number] {\n  const half = visualWidth / 2;\n  if (fitsWithinVisibleRange(x - half, x + half, visibleLeft, visibleRight)) {\n    return [x - half, x + half];\n  }\n  if (x - visualWidth >= visibleLeft) {\n    return [x - visualWidth, x];\n  }\n  if (x + visualWidth <= visibleRight) {\n    return [x, x + visualWidth];\n  }\n  return [Math.max(x - half, visibleLeft), Math.min(x + half, visibleRight)];\n}\n\n// Mirrors calculateRangeMarkerCoordinates/calculateMarkerExpandToSideCoordinates:\n// prefer centering on the range's midpoint, else expand from the range's own\n// start edge toward whichever side (left or right of that edge) has more room.\nfunction resolveRangeExpandedExtent(\n  x: number,\n  width: number,\n  labelWidth: number,\n  visibleLeft: number,\n  visibleRight: number,\n): [number, number] {\n  const center = x + width / 2;\n  const half = labelWidth / 2;\n  if (\n    fitsWithinVisibleRange(\n      center - half,\n      center + half,\n      visibleLeft,\n      visibleRight,\n    )\n  ) {\n    return [center - half, center + half];\n  }\n  const leftSpace = x - visibleLeft;\n  const rightSpace = visibleRight - x;\n  if (leftSpace > rightSpace) {\n    return [Math.max(x - labelWidth, visibleLeft), x];\n  }\n  return [x, Math.min(x + labelWidth, visibleRight)];\n}\n\nexport function getMarkerPixelExtent(\n  marker: AnnotationsMarkerConfig,\n  scale: AnnotationsScale,\n  textOverflow: TextOverflowOptions,\n): [number, number] {\n  const { x, width } = calculateMarkerDimension(marker, scale);\n  const labelWidth =\n    getMarkerLabelWidth(marker) + MARKER_CONTENT_TO_BORDER_PADDING * 2;\n  const [r0, r1] = scale.range();\n  const visibleLeft = Math.min(r0, r1);\n  const visibleRight = Math.max(r0, r1);\n\n  if (width === 0) {\n    const visualWidth = Math.max(labelWidth, VALUE_MARKER_WIDTH);\n    return resolvePointMarkerExtent(x, visualWidth, visibleLeft, visibleRight);\n  }\n\n  if (textOverflow !== 'expand' || labelWidth <= width) {\n    return [x, x + width];\n  }\n\n  return resolveRangeExpandedExtent(\n    x,\n    width,\n    labelWidth,\n    visibleLeft,\n    visibleRight,\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,gBAAgB;AAEnC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,wCAAwC;AAIjD,SAAS,oBAAoB,QAAyC;AACpE,QAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,QAAM,UACJ,SAAS,MAAM,KAAK,SAAS,MAAM,IAAI,OAAO,MAAM,IAAI,SAAS;AACnE,SAAO,eAAe,SAAS,gCAAgC;AACjE;AAEA,SAAS,uBACP,MACA,OACA,aACA,cACS;AACT,SAAO,QAAQ,eAAe,SAAS;AACzC;AAKA,SAAS,yBACP,GACA,aACA,aACA,cACkB;AAClB,QAAM,OAAO,cAAc;AAC3B,MAAI,uBAAuB,IAAI,MAAM,IAAI,MAAM,aAAa,YAAY,GAAG;AACzE,WAAO,CAAC,IAAI,MAAM,IAAI,IAAI;AAAA,EAC5B;AACA,MAAI,IAAI,eAAe,aAAa;AAClC,WAAO,CAAC,IAAI,aAAa,CAAC;AAAA,EAC5B;AACA,MAAI,IAAI,eAAe,cAAc;AACnC,WAAO,CAAC,GAAG,IAAI,WAAW;AAAA,EAC5B;AACA,SAAO,CAAC,KAAK,IAAI,IAAI,MAAM,WAAW,GAAG,KAAK,IAAI,IAAI,MAAM,YAAY,CAAC;AAC3E;AAKA,SAAS,2BACP,GACA,OACA,YACA,aACA,cACkB;AAClB,QAAM,SAAS,IAAI,QAAQ;AAC3B,QAAM,OAAO,aAAa;AAC1B,MACE;AAAA,IACE,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF,GACA;AACA,WAAO,CAAC,SAAS,MAAM,SAAS,IAAI;AAAA,EACtC;AACA,QAAM,YAAY,IAAI;AACtB,QAAM,aAAa,eAAe;AAClC,MAAI,YAAY,YAAY;AAC1B,WAAO,CAAC,KAAK,IAAI,IAAI,YAAY,WAAW,GAAG,CAAC;AAAA,EAClD;AACA,SAAO,CAAC,GAAG,KAAK,IAAI,IAAI,YAAY,YAAY,CAAC;AACnD;AAEO,SAAS,qBACd,QACA,OACA,cACkB;AAClB,QAAM,EAAE,GAAG,MAAM,IAAI,yBAAyB,QAAQ,KAAK;AAC3D,QAAM,aACJ,oBAAoB,MAAM,IAAI,mCAAmC;AACnE,QAAM,CAAC,IAAI,EAAE,IAAI,MAAM,MAAM;AAC7B,QAAM,cAAc,KAAK,IAAI,IAAI,EAAE;AACnC,QAAM,eAAe,KAAK,IAAI,IAAI,EAAE;AAEpC,MAAI,UAAU,GAAG;AACf,UAAM,cAAc,KAAK,IAAI,YAAY,kBAAkB;AAC3D,WAAO,yBAAyB,GAAG,aAAa,aAAa,YAAY;AAAA,EAC3E;AAEA,MAAI,iBAAiB,YAAY,cAAc,OAAO;AACpD,WAAO,CAAC,GAAG,IAAI,KAAK;AAAA,EACtB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/charts/core/components/annotations/utils/process-annotation-tracks-data.js

@@ -1,7 +1,11 @@
 import { isNil, isUndefined } from "lodash-es";
+import { getMarkerPixelExtent } from "./get-marker-pixel-extent.js";
 import { isNumericalMarker } from "./is-numerical-marker.js";
 import { serializeMarkerRange } from "./serialize-marker-range.js";
-import { DEFAULT_MARKER_PRIORITY } from "../constants.js";
+import {
+  DEFAULT_MARKER_PRIORITY,
+  DEFAULT_TEXT_OVERFLOW
+} from "../constants.js";
 import { parseDateNumberToNumber } from "./parse-date-number-to-number.js";
 const areNumerical = (markers) => {
   return isNumericalMarker(markers[0]);
@@ -51,54 +55,105 @@ const handleOverlappingMarker = (ctx) => {
   ctx.processedMarkers.delete(ctx.lastProcessedGroupKey);
   return updatedGroupsKey;
 };
-function processAnnotationTracksData(trackProps, trackIndex, domain) {
+const growGroupPixelRight = (currentPixelRight, markerPixelExtent) => {
+  if (markerPixelExtent === void 0) {
+    return currentPixelRight;
+  }
+  return isNaN(currentPixelRight) ? markerPixelExtent[1] : Math.max(currentPixelRight, markerPixelExtent[1]);
+};
+const parseGroupRange = (groupKey) => {
+  const [start, end] = groupKey.slice(groupKey.indexOf("_") + 1).split("_").map(Number);
+  return [start, end];
+};
+const isVisuallyColliding = (lastGroupPixelRight, markerPixelExtent) => markerPixelExtent !== void 0 && !isNaN(lastGroupPixelRight) && markerPixelExtent[0] <= lastGroupPixelRight;
+const collidesWithLastGroup = (lastGroupStart, lastGroupEnd, markerStart, markerEnd, lastGroupPixelRight, markerPixelExtent) => overlapsWithTheLastGroup(
+  lastGroupStart,
+  lastGroupEnd,
+  markerStart,
+  markerEnd
+) || isVisuallyColliding(lastGroupPixelRight, markerPixelExtent);
+const processMarkerIntoGroups = (processedMarkers, marker, trackIndex, markerPixelExtent, state) => {
+  const markerKey = serializeMarkerRange(marker, trackIndex);
+  const markerStart = parseDateNumberToNumber(marker.start);
+  const markerEnd = marker.end ? parseDateNumberToNumber(marker.end) : markerStart;
+  if (!state.lastProcessedGroupKey) {
+    handleNonOverlappingMarker(processedMarkers, marker, markerKey);
+    return {
+      lastProcessedGroupKey: markerKey,
+      lastGroupPixelRight: markerPixelExtent?.[1] ?? NaN
+    };
+  }
+  const [lastGroupStart, lastGroupEnd] = parseGroupRange(
+    state.lastProcessedGroupKey
+  );
+  const collides = collidesWithLastGroup(
+    lastGroupStart,
+    lastGroupEnd,
+    markerStart,
+    markerEnd,
+    state.lastGroupPixelRight,
+    markerPixelExtent
+  );
+  if (!collides) {
+    handleNonOverlappingMarker(processedMarkers, marker, markerKey);
+    return {
+      lastProcessedGroupKey: markerKey,
+      lastGroupPixelRight: markerPixelExtent?.[1] ?? NaN
+    };
+  }
+  const groups = processedMarkers.get(state.lastProcessedGroupKey) ?? [];
+  if (handleRepeatedAnnotation(groups, marker, markerKey)) {
+    return {
+      lastProcessedGroupKey: state.lastProcessedGroupKey,
+      lastGroupPixelRight: growGroupPixelRight(
+        state.lastGroupPixelRight,
+        markerPixelExtent
+      )
+    };
+  }
+  const lastProcessedGroupKey = handleOverlappingMarker({
+    processedMarkers,
+    groups,
+    marker,
+    markerKey,
+    lastGroupStart,
+    lastGroupEnd,
+    markerStart,
+    markerEnd,
+    lastProcessedGroupKey: state.lastProcessedGroupKey,
+    trackIndex
+  });
+  return {
+    lastProcessedGroupKey,
+    lastGroupPixelRight: growGroupPixelRight(
+      state.lastGroupPixelRight,
+      markerPixelExtent
+    )
+  };
+};
+function processAnnotationTracksData(trackProps, trackIndex, domain, scale, textOverflow = DEFAULT_TEXT_OVERFLOW) {
   const { markers } = trackProps;
   const processedMarkers = /* @__PURE__ */ new Map();
   if (markers.length === 0) {
     return processedMarkers;
   }
   const sortedMarkers = sortMarkers(markers);
-  let lastProcessedGroupKey = "";
+  let state = {
+    lastProcessedGroupKey: "",
+    lastGroupPixelRight: NaN
+  };
   for (const marker of sortedMarkers) {
     if (marker.hidden || outOfBounds(marker, domain)) {
       continue;
     }
-    const markerKey = serializeMarkerRange(marker, trackIndex);
-    const markerStart = parseDateNumberToNumber(marker.start);
-    const markerEnd = marker.end ? parseDateNumberToNumber(marker.end) : markerStart;
-    if (!lastProcessedGroupKey) {
-      handleNonOverlappingMarker(processedMarkers, marker, markerKey);
-      lastProcessedGroupKey = markerKey;
-      continue;
-    }
-    const [lastGroupStart, lastGroupEnd] = lastProcessedGroupKey.slice(lastProcessedGroupKey.indexOf("_") + 1).split("_").map(Number);
-    const isOverlapping = overlapsWithTheLastGroup(
-      lastGroupStart,
-      lastGroupEnd,
-      markerStart,
-      markerEnd
-    );
-    if (!isOverlapping) {
-      handleNonOverlappingMarker(processedMarkers, marker, markerKey);
-      lastProcessedGroupKey = markerKey;
-      continue;
-    }
-    const groups = processedMarkers.get(lastProcessedGroupKey) ?? [];
-    if (handleRepeatedAnnotation(groups, marker, markerKey)) {
-      continue;
-    }
-    lastProcessedGroupKey = handleOverlappingMarker({
+    const markerPixelExtent = scale ? getMarkerPixelExtent(marker, scale, textOverflow) : void 0;
+    state = processMarkerIntoGroups(
       processedMarkers,
-      groups,
       marker,
-      markerKey,
-      lastGroupStart,
-      lastGroupEnd,
-      markerStart,
-      markerEnd,
-      lastProcessedGroupKey,
-      trackIndex
-    });
+      trackIndex,
+      markerPixelExtent,
+      state
+    );
   }
   return processedMarkers;
 }