@dynatrace/strato-components 3.7.1 → 3.9.0

package/charts/core/components/annotations/contexts/AnnotationsConfig.context.js

@@ -25,6 +25,7 @@ var import_constants = require("../constants.js");
 const AnnotationsConfigContext = (0, import_react.createContext)({
   showLabels: true,
   labelsWidth: import_constants.DEFAULT_LABELS_OFFSET + import_constants.DEFAULT_LABELS_WIDTH,
-  trackWidth: 0
+  trackWidth: 0,
+  outerBottomLine: false
 });
 AnnotationsConfigContext["displayName"] = "AnnotationsConfig.Context";

package/charts/core/components/annotations/hooks/useAnnotationsHandlers.d.ts

@@ -1,10 +1,12 @@
 import { type MouseEvent as ReactMouseEvent } from 'react';
+import type { MarkerClickCoords } from '../types/marker.js';
 export declare const useAnnotationsHandlers: () => {
     hoverTrack: (e: ReactMouseEvent, trackIndex: number) => void;
     blurTrack: () => void;
     hoverMarker: (e: ReactMouseEvent, markerId: string) => void;
-    blurMarker: (e: ReactMouseEvent, markerId: string) => void;
-    clickMarker: (e: ReactMouseEvent, markerId: string) => void;
+    blurMarker: (markerId: string) => void;
+    clickMarker: (e: MarkerClickCoords, markerId: string) => void;
+    clearHovered: () => void;
     currentHoveredTrack: import("react").MutableRefObject<number | undefined>;
     currentHoveredMarker: import("react").MutableRefObject<string | undefined>;
 };

package/charts/core/components/annotations/hooks/useAnnotationsHandlers.js

@@ -37,8 +37,8 @@ const useAnnotationsHandlers = () => {
       markerEventHandlers?.[markerId].onMouseMove?.(e);
     }
   };
-  const blurMarker = (e, markerId) => {
-    markerEventHandlers?.[markerId]?.onMouseLeave?.(e);
+  const blurMarker = (markerId) => {
+    markerEventHandlers?.[markerId]?.onMouseLeave?.();
     currentHoveredMarker.current = void 0;
   };
   const clickMarker = (e, markerId) => {
@@ -51,12 +51,17 @@ const useAnnotationsHandlers = () => {
   const blurTrack = () => {
     currentHoveredTrack.current = void 0;
   };
+  const clearHovered = () => {
+    currentHoveredMarker.current = void 0;
+    currentHoveredTrack.current = void 0;
+  };
   return {
     hoverTrack,
     blurTrack,
     hoverMarker,
     blurMarker,
     clickMarker,
+    clearHovered,
     currentHoveredTrack,
     currentHoveredMarker
   };

package/charts/core/components/annotations/hooks/useGroupedAnnotationsData.d.ts

@@ -1,11 +1,16 @@
 import { AnnotationsTrackConfig } from '../types/annotations-track-props.js';
+import type { TextOverflowOptions } from '../types/marker.js';
+import { type AnnotationsScale } from '../utils/calculate-marker-dimension.js';
 /**
  *
  * @param tracks -
- * @param domain -
+ * @param scale - used to derive the visible domain and to detect markers that
+ * visually collide on canvas so they can be grouped into a shared tooltip
+ * @param textOverflow - how range marker labels behave when they overflow
+ * used together with `scale`
  * @returns
  */
-export declare const useGroupedAnnotationsData: (tracks: AnnotationsTrackConfig[], domain?: Date[] | number[]) => {
+export declare const useGroupedAnnotationsData: (tracks: AnnotationsTrackConfig[], scale?: AnnotationsScale, textOverflow?: TextOverflowOptions) => {
     markers: Map<string, import("../types/annotations.js").AnnotationsMarkerGroup[]>;
     label: string | undefined;
     hidden: boolean;

package/charts/core/components/annotations/hooks/useGroupedAnnotationsData.js

@@ -22,10 +22,17 @@ __export(useGroupedAnnotationsData_exports, {
 module.exports = __toCommonJS(useGroupedAnnotationsData_exports);
 var import_react = require("react");
 var import_process_annotation_tracks_data = require("../utils/process-annotation-tracks-data.js");
-const useGroupedAnnotationsData = (tracks, domain) => (0, import_react.useMemo)(() => {
+const useGroupedAnnotationsData = (tracks, scale, textOverflow) => (0, import_react.useMemo)(() => {
+  const domain = scale?.domain();
   return tracks.map((track, index) => ({
-    markers: (0, import_process_annotation_tracks_data.processAnnotationTracksData)(track, index, domain),
+    markers: (0, import_process_annotation_tracks_data.processAnnotationTracksData)(
+      track,
+      index,
+      domain,
+      scale,
+      textOverflow
+    ),
     label: track.label,
     hidden: track.hidden
   }));
-}, [tracks]);
+}, [tracks, scale, textOverflow]);

package/charts/core/components/annotations/hooks/useMarkerEventHandlers.d.ts

@@ -1,8 +1,9 @@
-import { type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
+import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
 import type { AnnotationsMarkerGroup } from '../types/annotations.js';
+import type { MarkerClickCoords } from '../types/marker.js';
 export declare const useMarkerEventHandlers: (annotationsContainerRef: RefObject<HTMLDivElement> | undefined) => {
     handleMouseEnter: (markerId: string, groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) => (event: ReactMouseEvent) => void;
     handleMouseMove: (event: ReactMouseEvent) => void;
     handleMouseLeave: () => void;
-    handleClick: (groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) => (event: ReactMouseEvent) => void;
+    handleClick: (groupId: string, annotationsGroup: AnnotationsMarkerGroup[]) => (event: MarkerClickCoords) => void;
 };

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

@@ -24,6 +24,7 @@ var import_lodash_es = require("lodash");
 var import_selectors = require("./store/selectors.js");
 var import_state_setters = require("./store/state-setters.js");
 var import_useMarkersInteractions = require("./useMarkersInteractions.js");
+var import_is_touchable_device = require("../../../utils/is-touchable-device.js");
 var import_AnnotationsDataInitialState = require("../providers/AnnotationsDataInitialState.js");
 var import_calculate_tooltip_position = require("../utils/calculate-tooltip-position.js");
 const useMarkerEventHandlers = (annotationsContainerRef) => {
@@ -71,25 +72,31 @@ const useMarkerEventHandlers = (annotationsContainerRef) => {
     updateTooltipSelection(selectionState);
     onMarkersInteraction?.(selectionState);
   };
-  const handleClick = (groupId, annotationsGroup) => (event) => {
-    event.stopPropagation();
-    const { clientX, clientY } = event;
+  const applyPinToggle = (clientX, clientY, groupId, annotationsGroup) => {
+    if (isTooltipPinned && (0, import_is_touchable_device.isTouchableDevice)()) {
+      updateTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
+      updateTooltipSelection(import_AnnotationsDataInitialState.initialState.selection);
+      onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
+      return;
+    }
     const newSelection = {
       hoveredGroup: groupId,
       data: annotationsGroup,
       pinnedGroup: isTooltipPinned ? void 0 : groupId
-      // if tooltip was already pinned, unpin
     };
     updateTooltipState({
       position: (0, import_calculate_tooltip_position.calculateTooltipPosition)(clientX, clientY),
       data: annotationsGroup,
       visibility: true,
       pinned: !isTooltipPinned
-      // if tooltip was already pinned, show updated info but unpin
     });
     updateTooltipSelection(newSelection);
     onMarkersInteraction?.(newSelection);
   };
+  const handleClick = (groupId, annotationsGroup) => (event) => {
+    event.stopPropagation();
+    applyPinToggle(event.clientX, event.clientY, groupId, annotationsGroup);
+  };
   const handleMouseLeave = () => {
     if (isTooltipPinned) {
       return;

package/charts/core/components/annotations/hooks/useOverlayEvents.d.ts

@@ -1,6 +1,7 @@
-import { type MouseEvent as ReactMouseEvent } from 'react';
+import { type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type TouchEvent as ReactTouchEvent } from 'react';
 export declare const useOverlayEvents: () => {
     handleMouseMove: (e: ReactMouseEvent) => void;
     handleClick: (e: ReactMouseEvent) => void;
-    handleMouseLeave: (e: ReactMouseEvent) => void;
+    handleTouchEnd: (e: ReactTouchEvent<HTMLDivElement>) => void;
+    handlePointerLeave: (e: ReactPointerEvent<HTMLDivElement>) => void;
 };

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

@@ -22,13 +22,9 @@ __export(useOverlayEvents_exports, {
 module.exports = __toCommonJS(useOverlayEvents_exports);
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-var import_selectors = require("./store/selectors.js");
-var import_state_setters = require("./store/state-setters.js");
 var import_useAnnotationsHandlers = require("./useAnnotationsHandlers.js");
-var import_useMarkersInteractions = require("./useMarkersInteractions.js");
 var import_constants = require("../constants.js");
 var import_MarkerCoordinates_context = require("../contexts/MarkerCoordinates.context.js");
-var import_AnnotationsDataInitialState = require("../providers/AnnotationsDataInitialState.js");
 var import_in_marker_bounds = require("../utils/in-marker-bounds.js");
 const useOverlayEvents = () => {
   const markerCoordsPerTrack = (0, import_react.useContext)(import_MarkerCoordinates_context.MarkerCoordinatesContext);
@@ -38,13 +34,10 @@ const useOverlayEvents = () => {
     hoverMarker,
     blurMarker,
     clickMarker,
+    clearHovered,
     currentHoveredTrack,
     currentHoveredMarker
   } = (0, import_useAnnotationsHandlers.useAnnotationsHandlers)();
-  const { pinnedGroup } = (0, import_selectors.useAnnotationsSelectionState)();
-  const updateTooltipState = (0, import_state_setters.useSetStateTooltip)();
-  const updateTooltipSelection = (0, import_state_setters.useSetStateSelection)();
-  const onMarkersInteraction = (0, import_useMarkersInteractions.useMarkersInteractions)();
   const handleMouseMove = (e) => {
     const { clientX, clientY, currentTarget } = e;
     const { top, left } = currentTarget.getBoundingClientRect();
@@ -56,7 +49,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;
@@ -72,7 +65,7 @@ const useOverlayEvents = () => {
         }
       }
       if (!isHoveringMarker && currentHoveredMarker.current !== void 0) {
-        blurMarker(e, currentHoveredMarker.current);
+        blurMarker(currentHoveredMarker.current);
         hoverTrack(e, trackIndex);
       }
     }
@@ -80,25 +73,51 @@ 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 (!(0, import_lodash_es.isUndefined)(pinnedGroup)) {
-      updateTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
-      updateTooltipSelection(import_AnnotationsDataInitialState.initialState.selection);
-      onMarkersInteraction?.(import_AnnotationsDataInitialState.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 / import_constants.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 ((0, import_in_marker_bounds.inMarkerBounds)(mousePosition, trackIndex, marker)) {
+        if (e.cancelable) {
+          e.preventDefault();
+        }
+        clickMarker(
+          { clientX, clientY, stopPropagation: import_lodash_es.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
   };
 };

package/charts/core/components/annotations/types/annotations-marker-props.d.ts

@@ -26,6 +26,11 @@ export interface BaseMarkerProps {
      * @defaultValue Colors.Charts.Categorical.Color01.Default
      */
     color?: string;
+    /**
+     * The color applied to the marker symbol (text or SVG icon). When not set, the color is
+     * determined automatically using WCAG contrast logic based on the marker background color.
+     */
+    symbolColor?: string;
     /**
      * The priority of the marker, which can be used to specify which marker will be rendered on top of the other, in case of overlapping,
      * and also will specify the order of the tooltip items in case of having the same range/value.

package/charts/core/components/annotations/types/event-handlers.d.ts

@@ -1,9 +1,10 @@
 import { type MouseEvent as ReactMouseEvent } from 'react';
+import type { MarkerClickCoords } from './marker.js';
 interface MarkerEventHandlers {
     onMouseEnter?: (e: ReactMouseEvent) => void;
     onMouseMove?: (e: ReactMouseEvent) => void;
-    onMouseLeave?: (e: ReactMouseEvent) => void;
-    onClick?: (e: ReactMouseEvent) => void;
+    onMouseLeave?: () => void;
+    onClick?: (e: MarkerClickCoords) => void;
 }
 interface TrackEventHandlers {
     onMouseEnter?: (e: ReactMouseEvent) => void;

package/charts/core/components/annotations/types/marker.d.ts

@@ -1,5 +1,11 @@
 import { type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+/** @internal */
+export interface MarkerClickCoords {
+    clientX: number;
+    clientY: number;
+    stopPropagation: () => void;
+}
 /**
  * The marker brightness state
  * @internal
@@ -30,13 +36,13 @@ export type MarkerAtomProps = {
     /** Optional callback when the mouse moves inside the marker. */
     onMouseMove?: (event: ReactMouseEvent) => void;
     /** Optional callback when the mouse leaves the marker. */
-    onMouseLeave?: (event: ReactMouseEvent) => void;
+    onMouseLeave?: () => void;
     /** Optional callback when mouse click inside  the marker. */
-    onClick?: (event: ReactMouseEvent) => void;
+    onClick?: (event: MarkerClickCoords) => void;
     /** The content to be rendered inside the marker  */
     content?: ReactNode;
-    /** The color to be applied to the content  */
-    contentColor?: string;
+    /** The color applied to the marker symbol (text or SVG icon). When not set, the color is determined automatically using WCAG contrast logic. */
+    symbolColor?: string;
     /**
      * Current marker state
      * @defaultValue 'default'

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

@@ -34,9 +34,12 @@ var import_react = require("react");
 var import_react_is = require("react-is");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_calculate_expand_marker_coordinates = require("./calculate-expand-marker-coordinates.js");
+var import_resolve_value_marker_hit_area = require("./resolve-value-marker-hit-area.js");
 var import_is_slot = require("../../../../../core/utils/is-slot.js");
 var import_color_contrast = require("../../../utils/color-contrast.js");
 var import_getTokenComputedStyle = require("../../../utils/getTokenComputedStyle.js");
+var import_constants = require("../components/canvas/renderers/value-marker-renderer/constants.js");
+var import_calculate_marker_width_and_content = require("../components/canvas/utils/calculate-marker-width-and-content.js");
 var import_MarkerAtom = require("../slots/MarkerAtom.js");
 var import_TrackAtom = require("../slots/TrackAtom.js");
 function aggregateMarkersCoords(children, trackWidth) {
@@ -58,10 +61,24 @@ function aggregateMarkersCoords(children, trackWidth) {
           markersByTrackConfig.push(marker.props);
           const { textOverflow, content, x, width } = marker.props;
           if (marker.props.width === 0) {
-            markerAtomCoords = (0, import_calculate_expand_marker_coordinates.calculateValueMarkerCoordinates)(
+            const {
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
+            } = (0, import_calculate_marker_width_and_content.calculateMarkerWidthAndContent)({
+              trackWidth,
+              trackLeftBoundary: 0,
               content,
+              width: import_constants.VALUE_MARKER_WIDTH,
               x,
-              trackWidth
+              isRange: false,
+              textOverflow,
+              truncateMode: marker.props.truncateMode
+            });
+            markerAtomCoords = (0, import_resolve_value_marker_hit_area.resolveValueMarkerHitArea)(
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
             );
           } else {
             markerAtomCoords = (0, import_calculate_expand_marker_coordinates.calculateRangeMarkerCoordinates)(
@@ -80,19 +97,12 @@ function aggregateMarkersCoords(children, trackWidth) {
           };
           markersPerTrack[trackIndex].push(markerAtomCoords);
           if ((0, import_react_is.isElement)(marker.props.content)) {
-            const markerColor = (0, import_getTokenComputedStyle.getTokenComputedStyle)(marker.props.color);
-            const lightTextColor = (0, import_color_contrast.getColorTokenDefaultValue)(
-              import_colors.default.Text.Neutral.OnAccent.Default
-            );
-            const darkTextColor = (0, import_color_contrast.getColorTokenDefaultValue)(
-              import_colors.default.Text.Neutral.Default
-            );
-            const contrastTextColor = (0, import_color_contrast.getColorByContrast)(
-              markerColor,
-              lightTextColor,
-              darkTextColor
+            const iconColor = marker.props.symbolColor ?? (0, import_color_contrast.getColorByContrast)(
+              (0, import_getTokenComputedStyle.getTokenComputedStyle)(marker.props.color),
+              (0, import_color_contrast.getColorTokenDefaultValue)(import_colors.default.Text.Neutral.OnAccent.Default),
+              (0, import_color_contrast.getColorTokenDefaultValue)(import_colors.default.Text.Neutral.Default)
             );
-            icons.push([marker.props.content, contrastTextColor]);
+            icons.push([marker.props.content, iconColor]);
           }
         }
       });

package/charts/core/components/annotations/utils/calculate-marker-dimension.d.ts

@@ -1,6 +1,7 @@
 import type { ScaleLinear, ScaleLogarithmic, ScaleSymLog, ScaleTime } from 'd3-scale';
 import type { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';
-export declare const calculateMarkerDimension: (marker: AnnotationsMarkerConfig, scale: ScaleTime<number, number> | ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ScaleSymLog<number, number>) => {
+export type AnnotationsScale = ScaleTime<number, number> | ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ScaleSymLog<number, number>;
+export declare const calculateMarkerDimension: (marker: AnnotationsMarkerConfig, scale: AnnotationsScale) => {
     x: number;
     width: number;
 };

package/charts/core/components/annotations/utils/define-marker-color.d.ts

@@ -1,10 +1,15 @@
 import { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';
+type MarkerColors = {
+    color: string;
+    symbolColor: string | undefined;
+};
 /**
- * Defines the main color of the marker depending on priority.
- * If all of them have the same priority, or no priority is set, the first color will be returned
+ * Returns the color and symbolColor of the highest-priority marker.
+ * If all markers have the same priority, or no priority is set, the first marker is used.
  *
  * @param markers -
  *
- * @returns color(string)
+ * @returns MarkerColors
  */
-export declare function defineMarkerColor(markers: AnnotationsMarkerConfig[]): string;
+export declare function defineMarkerColors(markers: AnnotationsMarkerConfig[]): MarkerColors;
+export {};

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

@@ -17,15 +17,18 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var define_marker_color_exports = {};
 __export(define_marker_color_exports, {
-  defineMarkerColor: () => defineMarkerColor
+  defineMarkerColors: () => defineMarkerColors
 });
 module.exports = __toCommonJS(define_marker_color_exports);
-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
+  };
 }

package/charts/core/components/annotations/utils/get-marker-pixel-extent.d.ts

@@ -0,0 +1,4 @@
+import { type AnnotationsScale } from './calculate-marker-dimension.js';
+import type { AnnotationsMarkerConfig } from '../types/annotations-marker-props.js';
+import type { TextOverflowOptions } from '../types/marker.js';
+export declare function getMarkerPixelExtent(marker: AnnotationsMarkerConfig, scale: AnnotationsScale, textOverflow: TextOverflowOptions): [number, number];

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

@@ -0,0 +1,88 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var get_marker_pixel_extent_exports = {};
+__export(get_marker_pixel_extent_exports, {
+  getMarkerPixelExtent: () => getMarkerPixelExtent
+});
+module.exports = __toCommonJS(get_marker_pixel_extent_exports);
+var import_lodash_es = require("lodash");
+var import_calculate_marker_dimension = require("./calculate-marker-dimension.js");
+var import_chars_font_width_map = require("../../text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../text-ellipsis/truncate-string.js");
+var import_constants = require("../components/canvas/renderers/value-marker-renderer/constants.js");
+var import_constants2 = require("../constants.js");
+function getMarkerLabelWidth(marker) {
+  const { symbol, title } = marker;
+  const content = (0, import_lodash_es.isString)(symbol) || (0, import_lodash_es.isNumber)(symbol) ? String(symbol) : title ?? "";
+  return (0, import_truncate_string.calculateWidth)(content, import_chars_font_width_map.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 } = (0, import_calculate_marker_dimension.calculateMarkerDimension)(marker, scale);
+  const labelWidth = getMarkerLabelWidth(marker) + import_constants2.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, import_constants.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
+  );
+}

package/charts/core/components/annotations/utils/process-annotation-tracks-data.d.ts

@@ -1,5 +1,7 @@
+import { type AnnotationsScale } from './calculate-marker-dimension.js';
 import { AnnotationsTrackConfig } from '../types/annotations-track-props.js';
 import { AnnotationsMarkerGroup } from '../types/annotations.js';
+import type { TextOverflowOptions } from '../types/marker.js';
 /**
  * Process annotation markers.
  * That includes sorting and grouping by time.
@@ -7,6 +9,10 @@ import { AnnotationsMarkerGroup } from '../types/annotations.js';
  * @param trackProps - track props
  * @param trackIndex - track index
  * @param domain - visible domain
+ * @param scale - detects markers whose rendered labels
+ * visually collide even though their data ranges don't overlap
+ * @param textOverflow - how range marker labels behave when they don't fit
+ * only relevant together with `scale`
  * @returns processed markers
  */
-export declare function processAnnotationTracksData(trackProps: AnnotationsTrackConfig, trackIndex: number, domain?: Date[] | number[]): Map<string, AnnotationsMarkerGroup[]>;
+export declare function processAnnotationTracksData(trackProps: AnnotationsTrackConfig, trackIndex: number, domain?: Date[] | number[], scale?: AnnotationsScale, textOverflow?: TextOverflowOptions): Map<string, AnnotationsMarkerGroup[]>;