npm - @dynatrace/strato-components - Versions diffs - 3.7.1 → 3.9.0 - Mend

@dynatrace/strato-components 3.7.1 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3207) hide show

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { Fragment as Fragment2, useContext } from "react";
 import { AnnotationsMarkersDisplay } from "./AnnotationsMarkersDisplay.js";
 import { getTokenComputedStyle } from "../../../../../utils/getTokenComputedStyle.js";
 import {
-  EMPHASIZED_TRACK_SEPARATOR_COLOR,
   LABEL_OFFSET,
   MARKER_LABEL_PADDING,
   TRACK_SEPARATOR_COLOR
@@ -15,14 +14,19 @@ import { AnnotationsLabelRenderer } from "../renderers/AnnotationsLabelRenderer.
 import { AnnotationsLineRenderer } from "../renderers/AnnotationsLineRenderer.js";
 const getLabelYPosition = (index) => getTrackSeparatorOffset(index) + LABEL_OFFSET;
 const AnnotationsTrackDisplay = (props) => {
-  const { drawTopLine, label, markers, trackIndex, emphasizeBottomLine } = props;
+  const {
+    drawTopLine,
+    drawBottomLine = true,
+    label,
+    markers,
+    trackIndex
+  } = props;
   const { labelsWidth, trackWidth, showLabels } = useContext(
     AnnotationsConfigContext
   );
   const trackFinalXPosition = labelsWidth + trackWidth;
   const topLineY = getTrackSeparatorOffset(trackIndex);
   const bottomLineY = getTrackSeparatorOffset(trackIndex + 1);
-  const bottomLineColor = emphasizeBottomLine ? EMPHASIZED_TRACK_SEPARATOR_COLOR : TRACK_SEPARATOR_COLOR;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     drawTopLine && /* @__PURE__ */ jsx(
       AnnotationsLineRenderer,
@@ -53,7 +57,7 @@ const AnnotationsTrackDisplay = (props) => {
           children: /* @__PURE__ */ jsx(AnnotationsMarkersDisplay, { markers })
         }
       ),
-      /* @__PURE__ */ jsx(
+      drawBottomLine && /* @__PURE__ */ jsx(
         AnnotationsLineRenderer,
         {
           source: { x: labelsWidth, y: bottomLineY },
@@ -61,7 +65,7 @@ const AnnotationsTrackDisplay = (props) => {
             x: trackFinalXPosition,
             y: bottomLineY
           },
-          strokeColor: getTokenComputedStyle(bottomLineColor)
+          strokeColor: getTokenComputedStyle(TRACK_SEPARATOR_COLOR)
         }
       )
     ] })

package/esm/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/displays/AnnotationsTrackDisplay.tsx"],
-  "sourcesContent": ["import { Fragment, useContext } from 'react';\n\nimport { AnnotationsMarkersDisplay } from './AnnotationsMarkersDisplay.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport {\n  EMPHASIZED_TRACK_SEPARATOR_COLOR,\n  LABEL_OFFSET,\n  MARKER_LABEL_PADDING,\n  TRACK_SEPARATOR_COLOR,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { MarkerAtomProps } from '../../../types/marker.js';\nimport { TrackAtomProps } from '../../../types/track.js';\nimport { getTrackSeparatorOffset } from '../../../utils/get-track-separator-offset.js';\nimport { TrackDisplayContext } from '../context/track-display.context.js';\nimport { AnnotationsLabelRenderer } from '../renderers/AnnotationsLabelRenderer.js';\nimport { AnnotationsLineRenderer } from '../renderers/AnnotationsLineRenderer.js';\n\ninterface AnnotationsTrackDisplayProps extends TrackAtomProps {\n  trackIndex: number;\n  drawTopLine?: boolean;\n  markers: MarkerAtomProps[];\n  emphasizeBottomLine?: boolean;\n}\n\nconst getLabelYPosition = (index: number) =>\n  getTrackSeparatorOffset(index) + LABEL_OFFSET;\n\nexport const AnnotationsTrackDisplay = (\n  props: AnnotationsTrackDisplayProps,\n) => {\n  const { drawTopLine, label, markers, trackIndex, emphasizeBottomLine } =\n    props;\n  const { labelsWidth, trackWidth, showLabels } = useContext(\n    AnnotationsConfigContext,\n  );\n\n  const trackFinalXPosition = labelsWidth + trackWidth;\n  const topLineY = getTrackSeparatorOffset(trackIndex);\n  const bottomLineY = getTrackSeparatorOffset(trackIndex + 1);\n  const bottomLineColor = emphasizeBottomLine\n    ? EMPHASIZED_TRACK_SEPARATOR_COLOR\n    : TRACK_SEPARATOR_COLOR;\n\n  return (\n    <>\n      {drawTopLine && (\n        <AnnotationsLineRenderer\n          source={{ x: labelsWidth, y: topLineY }}\n          destination={{ x: trackFinalXPosition, y: topLineY }}\n          strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n        />\n      )}\n\n      <Fragment>\n        {showLabels && label && (\n          <AnnotationsLabelRenderer\n            text={label}\n            x={labelsWidth - MARKER_LABEL_PADDING}\n            y={getLabelYPosition(trackIndex)}\n            maxWidth={labelsWidth - MARKER_LABEL_PADDING}\n            ellipsis\n          />\n        )}\n        <TrackDisplayContext.Provider\n          value={{\n            offsetX: labelsWidth,\n            trackIndex,\n          }}\n        >\n          <AnnotationsMarkersDisplay markers={markers} />\n        </TrackDisplayContext.Provider>\n        <AnnotationsLineRenderer\n          source={{ x: labelsWidth, y: bottomLineY }}\n          destination={{\n            x: trackFinalXPosition,\n            y: bottomLineY,\n          }}\n          strokeColor={getTokenComputedStyle(bottomLineColor)}\n        />\n      </Fragment>\n    </>\n  );\n};\n\nAnnotationsTrackDisplay['displayName'] = 'AnnotationsTrackDisplay';\n"],
-  "mappings": "AA6CI,mBAEI,KAOF,YATF;AA7CJ,SAAS,YAAAA,WAAU,kBAAkB;AAErC,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAGzC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AASxC,MAAM,oBAAoB,CAAC,UACzB,wBAAwB,KAAK,IAAI;AAE5B,MAAM,0BAA0B,CACrC,UACG;AACH,QAAM,EAAE,aAAa,OAAO,SAAS,YAAY,oBAAoB,IACnE;AACF,QAAM,EAAE,aAAa,YAAY,WAAW,IAAI;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,sBAAsB,cAAc;AAC1C,QAAM,WAAW,wBAAwB,UAAU;AACnD,QAAM,cAAc,wBAAwB,aAAa,CAAC;AAC1D,QAAM,kBAAkB,sBACpB,mCACA;AAEJ,SACE,iCACG;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,GAAG,aAAa,GAAG,SAAS;AAAA,QACtC,aAAa,EAAE,GAAG,qBAAqB,GAAG,SAAS;AAAA,QACnD,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,IAC1D;AAAA,IAGF,qBAACA,WAAA,EACE;AAAA,oBAAc,SACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,GAAG,cAAc;AAAA,UACjB,GAAG,kBAAkB,UAAU;AAAA,UAC/B,UAAU,cAAc;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,MAEF;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT;AAAA,UACF;AAAA,UAEA,8BAAC,6BAA0B,SAAkB;AAAA;AAAA,MAC/C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,EAAE,GAAG,aAAa,GAAG,YAAY;AAAA,UACzC,aAAa;AAAA,YACX,GAAG;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,aAAa,sBAAsB,eAAe;AAAA;AAAA,MACpD;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { Fragment, useContext } from 'react';\n\nimport { AnnotationsMarkersDisplay } from './AnnotationsMarkersDisplay.js';\nimport { getTokenComputedStyle } from '../../../../../utils/getTokenComputedStyle.js';\nimport {\n  LABEL_OFFSET,\n  MARKER_LABEL_PADDING,\n  TRACK_SEPARATOR_COLOR,\n} from '../../../constants.js';\nimport { AnnotationsConfigContext } from '../../../contexts/AnnotationsConfig.context.js';\nimport { MarkerAtomProps } from '../../../types/marker.js';\nimport { TrackAtomProps } from '../../../types/track.js';\nimport { getTrackSeparatorOffset } from '../../../utils/get-track-separator-offset.js';\nimport { TrackDisplayContext } from '../context/track-display.context.js';\nimport { AnnotationsLabelRenderer } from '../renderers/AnnotationsLabelRenderer.js';\nimport { AnnotationsLineRenderer } from '../renderers/AnnotationsLineRenderer.js';\n\ninterface AnnotationsTrackDisplayProps extends TrackAtomProps {\n  trackIndex: number;\n  drawTopLine?: boolean;\n  drawBottomLine?: boolean;\n  markers: MarkerAtomProps[];\n}\n\nconst getLabelYPosition = (index: number) =>\n  getTrackSeparatorOffset(index) + LABEL_OFFSET;\n\nexport const AnnotationsTrackDisplay = (\n  props: AnnotationsTrackDisplayProps,\n) => {\n  const {\n    drawTopLine,\n    drawBottomLine = true,\n    label,\n    markers,\n    trackIndex,\n  } = props;\n  const { labelsWidth, trackWidth, showLabels } = useContext(\n    AnnotationsConfigContext,\n  );\n\n  const trackFinalXPosition = labelsWidth + trackWidth;\n  const topLineY = getTrackSeparatorOffset(trackIndex);\n  const bottomLineY = getTrackSeparatorOffset(trackIndex + 1);\n\n  return (\n    <>\n      {drawTopLine && (\n        <AnnotationsLineRenderer\n          source={{ x: labelsWidth, y: topLineY }}\n          destination={{ x: trackFinalXPosition, y: topLineY }}\n          strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n        />\n      )}\n\n      <Fragment>\n        {showLabels && label && (\n          <AnnotationsLabelRenderer\n            text={label}\n            x={labelsWidth - MARKER_LABEL_PADDING}\n            y={getLabelYPosition(trackIndex)}\n            maxWidth={labelsWidth - MARKER_LABEL_PADDING}\n            ellipsis\n          />\n        )}\n        <TrackDisplayContext.Provider\n          value={{\n            offsetX: labelsWidth,\n            trackIndex,\n          }}\n        >\n          <AnnotationsMarkersDisplay markers={markers} />\n        </TrackDisplayContext.Provider>\n        {drawBottomLine && (\n          <AnnotationsLineRenderer\n            source={{ x: labelsWidth, y: bottomLineY }}\n            destination={{\n              x: trackFinalXPosition,\n              y: bottomLineY,\n            }}\n            strokeColor={getTokenComputedStyle(TRACK_SEPARATOR_COLOR)}\n          />\n        )}\n      </Fragment>\n    </>\n  );\n};\n\nAnnotationsTrackDisplay['displayName'] = 'AnnotationsTrackDisplay';\n"],
+  "mappings": "AA8CI,mBAEI,KAOF,YATF;AA9CJ,SAAS,YAAAA,WAAU,kBAAkB;AAErC,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAGzC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AASxC,MAAM,oBAAoB,CAAC,UACzB,wBAAwB,KAAK,IAAI;AAE5B,MAAM,0BAA0B,CACrC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,aAAa,YAAY,WAAW,IAAI;AAAA,IAC9C;AAAA,EACF;AAEA,QAAM,sBAAsB,cAAc;AAC1C,QAAM,WAAW,wBAAwB,UAAU;AACnD,QAAM,cAAc,wBAAwB,aAAa,CAAC;AAE1D,SACE,iCACG;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,GAAG,aAAa,GAAG,SAAS;AAAA,QACtC,aAAa,EAAE,GAAG,qBAAqB,GAAG,SAAS;AAAA,QACnD,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,IAC1D;AAAA,IAGF,qBAACA,WAAA,EACE;AAAA,oBAAc,SACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,GAAG,cAAc;AAAA,UACjB,GAAG,kBAAkB,UAAU;AAAA,UAC/B,UAAU,cAAc;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,MAEF;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT;AAAA,UACF;AAAA,UAEA,8BAAC,6BAA0B,SAAkB;AAAA;AAAA,MAC/C;AAAA,MACC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,EAAE,GAAG,aAAa,GAAG,YAAY;AAAA,UACzC,aAAa;AAAA,YACX,GAAG;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,aAAa,sBAAsB,qBAAqB;AAAA;AAAA,MAC1D;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
   "names": ["Fragment"]
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js CHANGED Viewed

@@ -25,7 +25,8 @@ const RangeMarkerRenderer = (props) => {
     children,
     opacity = MARKER_OPACITY,
     brightness,
-    strokeColor
+    strokeColor,
+    symbolColor
   } = props;
   const iconImages = useAnnotationsIconImages();
   const draw = useCallback(
@@ -57,7 +58,8 @@ const RangeMarkerRenderer = (props) => {
           textX,
           y + CONTENT_OFFSET_Y,
           "center",
-          fillColor
+          fillColor,
+          symbolColor
         );
       }
       return false;
@@ -72,7 +74,8 @@ const RangeMarkerRenderer = (props) => {
       fillColor,
       strokeColor,
       children,
-      iconImages
+      iconImages,
+      symbolColor
     ]
   );
   useCanvas("annotations-range-marker", draw);

package/esm/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useCallback } from 'react';\nimport { isElement } from 'react-is';\n\nimport { MARKER_HALF_WIDTH } from './value-marker-renderer/constants.js';\nimport { ValueMarkerRendererProps } from './value-marker-renderer/ValueMarkerRenderer.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { drawRoundRect } from '../../../../canvas/utils/drawRoundRect.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_ICON_OFFSET,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\nimport { applyMarkerStyles } from '../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../utils/render-text-in-canvas.js';\n\nconst CONTENT_OFFSET_Y = 10;\n\nexport const RangeMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    height,\n    width,\n    x,\n    y,\n    fillColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    strokeColor,\n  } = props;\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      const rectX = x;\n      const rectY = y - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;\n      const rectWidth = width;\n      const rectHeight = height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;\n\n      drawRoundRect(\n        ctx,\n        rectX,\n        rectY,\n        rectWidth,\n        rectHeight,\n        MARKER_BORDER_RADIUS,\n      );\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isElement(children)) {\n        const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;\n        const iconY = y + MARKER_ICON_OFFSET;\n\n        renderIconContent(ctx, children, iconImages, iconX, iconY);\n      } else if (typeof children === 'string') {\n        const textX = x + width / 2;\n        renderTextContent(\n          ctx,\n          children,\n          textX,\n          y + CONTENT_OFFSET_Y,\n          'center',\n          fillColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      height,\n      opacity,\n      brightness,\n      fillColor,\n      strokeColor,\n      children,\n      iconImages,\n    ],\n  );\n\n  useCanvas('annotations-range-marker', draw);\n\n  return null;\n};\n\nRangeMarkerRenderer['displayName'] = 'RangeMarkerRenderer';\n"],
-  "mappings": "AAAA,SAAiC,mBAAmB;AACpD,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB;AAElB,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,YAAM,QAAQ;AACd,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,YAAY;AAClB,YAAM,aAAa,SAAS,sBAAsB,IAAI;AAEtD;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,UAAU,QAAQ,GAAG;AACvB,cAAM,QAAQ,IAAI,QAAQ,IAAI,oBAAoB;AAClD,cAAM,QAAQ,IAAI;AAElB,0BAAkB,KAAK,UAAU,YAAY,OAAO,KAAK;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU;AACvC,cAAM,QAAQ,IAAI,QAAQ;AAC1B;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren, useCallback } from 'react';\nimport { isElement } from 'react-is';\n\nimport { MARKER_HALF_WIDTH } from './value-marker-renderer/constants.js';\nimport { ValueMarkerRendererProps } from './value-marker-renderer/ValueMarkerRenderer.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { drawRoundRect } from '../../../../canvas/utils/drawRoundRect.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_ICON_OFFSET,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\nimport { applyMarkerStyles } from '../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../utils/render-text-in-canvas.js';\n\nconst CONTENT_OFFSET_Y = 10;\n\nexport const RangeMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    height,\n    width,\n    x,\n    y,\n    fillColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    strokeColor,\n    symbolColor,\n  } = props;\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      const rectX = x;\n      const rectY = y - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;\n      const rectWidth = width;\n      const rectHeight = height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;\n\n      drawRoundRect(\n        ctx,\n        rectX,\n        rectY,\n        rectWidth,\n        rectHeight,\n        MARKER_BORDER_RADIUS,\n      );\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isElement(children)) {\n        const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;\n        const iconY = y + MARKER_ICON_OFFSET;\n\n        renderIconContent(ctx, children, iconImages, iconX, iconY);\n      } else if (typeof children === 'string') {\n        const textX = x + width / 2;\n        renderTextContent(\n          ctx,\n          children,\n          textX,\n          y + CONTENT_OFFSET_Y,\n          'center',\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      height,\n      opacity,\n      brightness,\n      fillColor,\n      strokeColor,\n      children,\n      iconImages,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-range-marker', draw);\n\n  return null;\n};\n\nRangeMarkerRenderer['displayName'] = 'RangeMarkerRenderer';\n"],
+  "mappings": "AAAA,SAAiC,mBAAmB;AACpD,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB;AAElB,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,YAAM,QAAQ;AACd,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,YAAY;AAClB,YAAM,aAAa,SAAS,sBAAsB,IAAI;AAEtD;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,UAAU,QAAQ,GAAG;AACvB,cAAM,QAAQ,IAAI,QAAQ,IAAI,oBAAoB;AAClD,cAAM,QAAQ,IAAI;AAElB,0BAAkB,KAAK,UAAU,YAAY,OAAO,KAAK;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU;AACvC,cAAM,QAAQ,IAAI,QAAQ;AAC1B;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.js CHANGED Viewed

@@ -18,7 +18,7 @@ import { renderTextContent } from "../../utils/render-text-in-canvas.js";
 const EXTENDED_AND_COLORED_EMOJI_REGEX = /(\p{Emoji}\uFE0F|\p{Emoji_Presentation})/gu;
 const isEmojiSymbol = (text) => typeof text === "string" && text.match(EXTENDED_AND_COLORED_EMOJI_REGEX)?.length === 1;
 const EMOJI_RETINA_OFFSET = 1.5;
-function renderStringToContext(ctx, children, x, width, orientation, y, fillColor) {
+function renderStringToContext(ctx, children, x, width, orientation, y, fillColor, symbolColor) {
   const contentWidth = ctx.measureText(children).width;
   const xOffset = calculateCenteredText(x, width, orientation, contentWidth);
   const contentOffset = y + CONTENT_OFFSET_Y;
@@ -28,7 +28,8 @@ function renderStringToContext(ctx, children, x, width, orientation, y, fillColo
     xOffset,
     contentOffset,
     orientation,
-    fillColor
+    fillColor,
+    symbolColor
   );
 }
 const ValueMarkerRenderer = (props) => {
@@ -41,7 +42,8 @@ const ValueMarkerRenderer = (props) => {
     opacity = MARKER_OPACITY,
     brightness,
     width: widthProp,
-    orientation = "center"
+    orientation = "center",
+    symbolColor
   } = props;
   const width = Math.max(widthProp, VALUE_MARKER_WIDTH);
   const geometry = getMarkerGeometry(
@@ -81,7 +83,8 @@ const ValueMarkerRenderer = (props) => {
           isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,
           orientation,
           y,
-          fillColor
+          fillColor,
+          symbolColor
         );
       } else {
         renderStringToContext(
@@ -91,7 +94,8 @@ const ValueMarkerRenderer = (props) => {
           width,
           orientation,
           y,
-          fillColor
+          fillColor,
+          symbolColor
         );
       }
       return false;
@@ -105,7 +109,8 @@ const ValueMarkerRenderer = (props) => {
       x,
       y,
       brightness,
-      width
+      width,
+      symbolColor
     ]
   );
   useCanvas("annotations-value-marker", draw);

package/esm/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactNode, useCallback } from 'react';\nimport { isElement } from 'react-is';\n\nimport { CONTENT_OFFSET_Y, VALUE_MARKER_WIDTH } from './constants.js';\nimport { ValueMarkerPointerPosition } from './types.js';\nimport { calculateCenteredIcon } from './utils/calculate-centered-icon.js';\nimport { calculateCenteredText } from './utils/calculate-centered-text.js';\nimport { getMarkerGeometry } from './utils/get-marker-geometry.js';\nimport { useCanvas } from '../../../../../canvas/hooks/useCanvas.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../../constants.js';\nimport { applyMarkerStyles } from '../../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../../utils/render-text-in-canvas.js';\n\nconst EXTENDED_AND_COLORED_EMOJI_REGEX =\n  /(\\p{Emoji}\\uFE0F|\\p{Emoji_Presentation})/gu;\n\nconst isEmojiSymbol = (text: ReactNode) =>\n  typeof text === 'string' &&\n  text.match(EXTENDED_AND_COLORED_EMOJI_REGEX)?.length === 1;\n\n// In retina display emojis are a little bit smaller.\nconst EMOJI_RETINA_OFFSET = 1.5;\n\nexport type ValueMarkerRendererProps = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  fillColor: string;\n  strokeColor: string;\n  opacity?: number;\n  brightness?: string;\n  orientation?: ValueMarkerPointerPosition;\n};\n\nfunction renderStringToContext(\n  ctx: CanvasRenderingContext2D,\n  children: string,\n  x: number,\n  width: number,\n  orientation: ValueMarkerPointerPosition,\n  y: number,\n  fillColor: string,\n) {\n  const contentWidth = ctx.measureText(children).width;\n  const xOffset = calculateCenteredText(x, width, orientation, contentWidth);\n  const contentOffset = y + CONTENT_OFFSET_Y;\n  renderTextContent(\n    ctx,\n    children,\n    xOffset,\n    contentOffset,\n    orientation,\n    fillColor,\n  );\n}\n\nexport const ValueMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    x,\n    y,\n    fillColor,\n    strokeColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    width: widthProp,\n    orientation = 'center',\n  } = props;\n\n  const width = Math.max(widthProp, VALUE_MARKER_WIDTH);\n  const geometry = getMarkerGeometry(\n    orientation,\n    x,\n    y - MARKER_STROKE_WIDTH,\n    isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n  );\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      // Web-kit browsers need to move to the initial point to avoid weird behavior: APPDEV-8494\n      ctx.moveTo(geometry[0].x, geometry[0].y);\n      for (let i = 0; i < geometry.length; i += 2) {\n        const vertex = geometry[i];\n        const lineBisect = geometry[i + 1];\n\n        ctx.arcTo(\n          vertex.x - CANVAS_PIXEL_OFFSET,\n          vertex.y - CANVAS_PIXEL_OFFSET,\n          lineBisect.x - CANVAS_PIXEL_OFFSET,\n          lineBisect.y - CANVAS_PIXEL_OFFSET,\n          MARKER_BORDER_RADIUS,\n        );\n      }\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isElement(children)) {\n        const iconX = calculateCenteredIcon(x, orientation);\n\n        renderIconContent(ctx, children, iconImages, iconX, y);\n      } else if (\n        typeof children === 'string' &&\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children)\n      ) {\n        // this makes no sense, but if I remove this assertion, a weird behavior is shown in retina.\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children);\n        const retinaOffset = devicePixelRatio > 1 ? EMOJI_RETINA_OFFSET : 0;\n        renderStringToContext(\n          ctx,\n          children,\n          x + retinaOffset,\n          isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n          orientation,\n          y,\n          fillColor,\n        );\n      } else {\n        renderStringToContext(\n          ctx,\n          children as string,\n          x,\n          width,\n          orientation,\n          y,\n          fillColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      geometry,\n      opacity,\n      fillColor,\n      children,\n      iconImages,\n      x,\n      y,\n      brightness,\n      width,\n    ],\n  );\n\n  useCanvas('annotations-value-marker', draw);\n\n  return null;\n};\n"],
-  "mappings": "AAAA,SAAiD,mBAAmB;AACpE,SAAS,iBAAiB;AAE1B,SAAS,kBAAkB,0BAA0B;AAErD,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mCACJ;AAEF,MAAM,gBAAgB,CAAC,SACrB,OAAO,SAAS,YAChB,KAAK,MAAM,gCAAgC,GAAG,WAAW;AAG3D,MAAM,sBAAsB;AAc5B,SAAS,sBACP,KACA,UACA,GACA,OACA,aACA,GACA,WACA;AACA,QAAM,eAAe,IAAI,YAAY,QAAQ,EAAE;AAC/C,QAAM,UAAU,sBAAsB,GAAG,OAAO,aAAa,YAAY;AACzE,QAAM,gBAAgB,IAAI;AAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,EAChB,IAAI;AAEJ,QAAM,QAAQ,KAAK,IAAI,WAAW,kBAAkB;AACpD,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,EACjD;AAEA,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AAEd,UAAI,OAAO,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;AACvC,eAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;AAC3C,cAAM,SAAS,SAAS,CAAC;AACzB,cAAM,aAAa,SAAS,IAAI,CAAC;AAEjC,YAAI;AAAA,UACF,OAAO,IAAI;AAAA,UACX,OAAO,IAAI;AAAA,UACX,WAAW,IAAI;AAAA,UACf,WAAW,IAAI;AAAA,UACf;AAAA,QACF;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,UAAU,QAAQ,GAAG;AACvB,cAAM,QAAQ,sBAAsB,GAAG,WAAW;AAElD,0BAAkB,KAAK,UAAU,YAAY,OAAO,CAAC;AAAA,MACvD,WACE,OAAO,aAAa,YACpB,iCAAiC,KAAK,QAAQ,GAC9C;AAEA,yCAAiC,KAAK,QAAQ;AAC9C,cAAM,eAAe,mBAAmB,IAAI,sBAAsB;AAClE;AAAA,UACE;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,UAC/C;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,OAAO;AACL;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactNode, useCallback } from 'react';\nimport { isElement } from 'react-is';\n\nimport { CONTENT_OFFSET_Y, VALUE_MARKER_WIDTH } from './constants.js';\nimport { ValueMarkerPointerPosition } from './types.js';\nimport { calculateCenteredIcon } from './utils/calculate-centered-icon.js';\nimport { calculateCenteredText } from './utils/calculate-centered-text.js';\nimport { getMarkerGeometry } from './utils/get-marker-geometry.js';\nimport { useCanvas } from '../../../../../canvas/hooks/useCanvas.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../../constants.js';\nimport { applyMarkerStyles } from '../../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../../utils/render-text-in-canvas.js';\n\nconst EXTENDED_AND_COLORED_EMOJI_REGEX =\n  /(\\p{Emoji}\\uFE0F|\\p{Emoji_Presentation})/gu;\n\nconst isEmojiSymbol = (text: ReactNode) =>\n  typeof text === 'string' &&\n  text.match(EXTENDED_AND_COLORED_EMOJI_REGEX)?.length === 1;\n\n// In retina display emojis are a little bit smaller.\nconst EMOJI_RETINA_OFFSET = 1.5;\n\nexport type ValueMarkerRendererProps = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  fillColor: string;\n  strokeColor: string;\n  opacity?: number;\n  brightness?: string;\n  orientation?: ValueMarkerPointerPosition;\n  symbolColor?: string;\n};\n\nfunction renderStringToContext(\n  ctx: CanvasRenderingContext2D,\n  children: string,\n  x: number,\n  width: number,\n  orientation: ValueMarkerPointerPosition,\n  y: number,\n  fillColor: string,\n  symbolColor?: string,\n) {\n  const contentWidth = ctx.measureText(children).width;\n  const xOffset = calculateCenteredText(x, width, orientation, contentWidth);\n  const contentOffset = y + CONTENT_OFFSET_Y;\n  renderTextContent(\n    ctx,\n    children,\n    xOffset,\n    contentOffset,\n    orientation,\n    fillColor,\n    symbolColor,\n  );\n}\n\nexport const ValueMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    x,\n    y,\n    fillColor,\n    strokeColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    width: widthProp,\n    orientation = 'center',\n    symbolColor,\n  } = props;\n\n  const width = Math.max(widthProp, VALUE_MARKER_WIDTH);\n  const geometry = getMarkerGeometry(\n    orientation,\n    x,\n    y - MARKER_STROKE_WIDTH,\n    isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n  );\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      // Web-kit browsers need to move to the initial point to avoid weird behavior: APPDEV-8494\n      ctx.moveTo(geometry[0].x, geometry[0].y);\n      for (let i = 0; i < geometry.length; i += 2) {\n        const vertex = geometry[i];\n        const lineBisect = geometry[i + 1];\n\n        ctx.arcTo(\n          vertex.x - CANVAS_PIXEL_OFFSET,\n          vertex.y - CANVAS_PIXEL_OFFSET,\n          lineBisect.x - CANVAS_PIXEL_OFFSET,\n          lineBisect.y - CANVAS_PIXEL_OFFSET,\n          MARKER_BORDER_RADIUS,\n        );\n      }\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isElement(children)) {\n        const iconX = calculateCenteredIcon(x, orientation);\n\n        renderIconContent(ctx, children, iconImages, iconX, y);\n      } else if (\n        typeof children === 'string' &&\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children)\n      ) {\n        // this makes no sense, but if I remove this assertion, a weird behavior is shown in retina.\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children);\n        const retinaOffset = devicePixelRatio > 1 ? EMOJI_RETINA_OFFSET : 0;\n        renderStringToContext(\n          ctx,\n          children,\n          x + retinaOffset,\n          isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n          orientation,\n          y,\n          fillColor,\n          symbolColor,\n        );\n      } else {\n        renderStringToContext(\n          ctx,\n          children as string,\n          x,\n          width,\n          orientation,\n          y,\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      geometry,\n      opacity,\n      fillColor,\n      children,\n      iconImages,\n      x,\n      y,\n      brightness,\n      width,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-value-marker', draw);\n\n  return null;\n};\n"],
+  "mappings": "AAAA,SAAiD,mBAAmB;AACpE,SAAS,iBAAiB;AAE1B,SAAS,kBAAkB,0BAA0B;AAErD,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mCACJ;AAEF,MAAM,gBAAgB,CAAC,SACrB,OAAO,SAAS,YAChB,KAAK,MAAM,gCAAgC,GAAG,WAAW;AAG3D,MAAM,sBAAsB;AAe5B,SAAS,sBACP,KACA,UACA,GACA,OACA,aACA,GACA,WACA,aACA;AACA,QAAM,eAAe,IAAI,YAAY,QAAQ,EAAE;AAC/C,QAAM,UAAU,sBAAsB,GAAG,OAAO,aAAa,YAAY;AACzE,QAAM,gBAAgB,IAAI;AAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,KAAK,IAAI,WAAW,kBAAkB;AACpD,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,EACjD;AAEA,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AAEd,UAAI,OAAO,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;AACvC,eAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;AAC3C,cAAM,SAAS,SAAS,CAAC;AACzB,cAAM,aAAa,SAAS,IAAI,CAAC;AAEjC,YAAI;AAAA,UACF,OAAO,IAAI;AAAA,UACX,OAAO,IAAI;AAAA,UACX,WAAW,IAAI;AAAA,UACf,WAAW,IAAI;AAAA,UACf;AAAA,QACF;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,UAAU,QAAQ,GAAG;AACvB,cAAM,QAAQ,sBAAsB,GAAG,WAAW;AAElD,0BAAkB,KAAK,UAAU,YAAY,OAAO,CAAC;AAAA,MACvD,WACE,OAAO,aAAa,YACpB,iCAAiC,KAAK,QAAQ,GAC9C;AAEA,yCAAiC,KAAK,QAAQ;AAC9C,cAAM,eAAe,mBAAmB,IAAI,sBAAsB;AAClE;AAAA,UACE;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,UAC/C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,OAAO;AACL;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.js CHANGED Viewed

@@ -78,12 +78,11 @@ function resolveExpandedStringLayout(content, width, isRange, textOverflow, boun
     };
   }
   if (xPosition - markerWidth >= trackLeftBoundary) {
-    const adjustedX = !isRange && textOverflow === "expand" ? xPosition - markerWidth : xPosition;
     return {
       sanitizedContent: content,
       calculatedMarkerWidth: markerWidth,
       valueMarkerOrientation: "right",
-      calculatedX: adjustedX
+      calculatedX: xPosition
     };
   }
   if (xPosition + markerWidth <= trackRightBoundary) {

package/esm/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.ts"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { checkMarkerFitCentered } from './check-marker-fit-centered.js';\nimport { getDefaultValueMarkerPointerPosition } from './get-default-value-marker-pointer-position.js';\nimport { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../../../../typography/utils.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../../text-ellipsis/truncate-string.js';\nimport { MARKER_CONTENT_TO_BORDER_PADDING } from '../../../constants.js';\nimport type { TextOverflowOptions } from '../../../types/marker.js';\nimport type { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';\n\nconst MIN_TEXT_TO_RENDER = `W${ELLIPSIS_CHARACTER}W`;\nconst RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH = 20;\n\ntype TrackBoundaries = {\n  xPosition: number;\n  trackLeftBoundary: number;\n  trackRightBoundary: number;\n  markerWidth: number;\n  defaultPointer: ValueMarkerPointerPosition;\n};\n\ntype MarkerLayoutInput = {\n  trackWidth: number;\n  trackLeftBoundary: number;\n  content: ReactNode;\n  width: number;\n  x: number;\n  isRange: boolean;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n};\n\ntype MarkerLayout = {\n  sanitizedContent: ReactNode;\n  calculatedMarkerWidth: number;\n  valueMarkerOrientation: ValueMarkerPointerPosition;\n  calculatedX: number;\n};\n\nfunction getAvailableWidth(width: number) {\n  return width - MARKER_CONTENT_TO_BORDER_PADDING * 2;\n}\n\nfunction getSanitizedContent(\n  content: string,\n  availableWidth: number,\n  truncateMode?: TruncationMode,\n) {\n  const minimumContentAllowedWidth = calculateWidth(\n    MIN_TEXT_TO_RENDER,\n    charsFontWidth12pixelsSize500Map,\n  );\n\n  if (minimumContentAllowedWidth > availableWidth) {\n    return '';\n  }\n\n  return truncateString(\n    content,\n    availableWidth,\n    charsFontWidth12pixelsSize500Map,\n    truncateMode,\n  );\n}\n\nfunction resolveConstrainedLayout(\n  content: string,\n  xPosition: number,\n  markerWidth: number,\n  trackLeftBoundary: number,\n  trackRightBoundary: number,\n  isRange: boolean,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const spaceToTheRight = trackRightBoundary - xPosition;\n  const moreSpaceRight = spaceToTheRight > xPosition;\n  const constrainedWidth = moreSpaceRight\n    ? Math.min(spaceToTheRight, markerWidth)\n    : xPosition - trackLeftBoundary;\n  return {\n    sanitizedContent: getSanitizedContent(\n      content,\n      getAvailableWidth(constrainedWidth),\n      truncateMode,\n    ),\n    calculatedMarkerWidth: constrainedWidth,\n    valueMarkerOrientation: moreSpaceRight ? 'left' : 'right',\n    calculatedX: !moreSpaceRight && isRange ? trackLeftBoundary : xPosition,\n  };\n}\n\nfunction resolveExpandedStringLayout(\n  content: string,\n  width: number,\n  isRange: boolean,\n  textOverflow: TextOverflowOptions,\n  boundaries: TrackBoundaries,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  } = boundaries;\n\n  if (isRange && textOverflow !== 'expand') {\n    return {\n      sanitizedContent: getSanitizedContent(\n        content,\n        getAvailableWidth(width),\n        truncateMode,\n      ),\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const canExpandCenter = checkMarkerFitCentered(\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (canExpandCenter) {\n    const adjustedX = isRange\n      ? width / 2 + xPosition - markerWidth / 2\n      : xPosition;\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: adjustedX,\n    };\n  }\n\n  if (xPosition - markerWidth >= trackLeftBoundary) {\n    const adjustedX =\n      !isRange && textOverflow === 'expand'\n        ? xPosition - markerWidth\n        : xPosition;\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'right',\n      calculatedX: adjustedX,\n    };\n  }\n\n  if (xPosition + markerWidth <= trackRightBoundary) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'left',\n      calculatedX: xPosition,\n    };\n  }\n\n  return resolveConstrainedLayout(\n    content,\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n    isRange,\n    truncateMode,\n  );\n}\n\nexport function calculateMarkerWidthAndContent({\n  trackWidth,\n  trackLeftBoundary,\n  content,\n  width,\n  x,\n  isRange,\n  textOverflow,\n  truncateMode,\n}: MarkerLayoutInput): MarkerLayout {\n  const trackRightBoundary = trackWidth + trackLeftBoundary;\n  const xPosition = trackLeftBoundary + x;\n  const defaultPointer = getDefaultValueMarkerPointerPosition(\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (typeof content !== 'string') {\n    const sanitizedContent =\n      isRange && RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH > getAvailableWidth(width)\n        ? ''\n        : content;\n    return {\n      sanitizedContent,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const textWidth = calculateWidth(content, charsFontWidth12pixelsSize500Map);\n  const markerWidth = Math.max(\n    textWidth + MARKER_CONTENT_TO_BORDER_PADDING * 2,\n    width,\n  );\n\n  if (markerWidth <= width) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const boundaries: TrackBoundaries = {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  };\n\n  return resolveExpandedStringLayout(\n    content,\n    width,\n    isRange,\n    textOverflow,\n    boundaries,\n    truncateMode,\n  );\n}\n"],
-  "mappings": "AAEA,SAAS,8BAA8B;AACvC,SAAS,4CAA4C;AAErD,SAAS,0BAA0B;AACnC,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,wCAAwC;AAIjD,MAAM,qBAAqB,IAAI,kBAAkB;AACjD,MAAM,qCAAqC;AA4B3C,SAAS,kBAAkB,OAAe;AACxC,SAAO,QAAQ,mCAAmC;AACpD;AAEA,SAAS,oBACP,SACA,gBACA,cACA;AACA,QAAM,6BAA6B;AAAA,IACjC;AAAA,IACA;AAAA,EACF;AAEA,MAAI,6BAA6B,gBAAgB;AAC/C,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,SAAS,yBACP,SACA,WACA,aACA,mBACA,oBACA,SACA,cACc;AACd,QAAM,kBAAkB,qBAAqB;AAC7C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,mBAAmB,iBACrB,KAAK,IAAI,iBAAiB,WAAW,IACrC,YAAY;AAChB,SAAO;AAAA,IACL,kBAAkB;AAAA,MAChB;AAAA,MACA,kBAAkB,gBAAgB;AAAA,MAClC;AAAA,IACF;AAAA,IACA,uBAAuB;AAAA,IACvB,wBAAwB,iBAAiB,SAAS;AAAA,IAClD,aAAa,CAAC,kBAAkB,UAAU,oBAAoB;AAAA,EAChE;AACF;AAEA,SAAS,4BACP,SACA,OACA,SACA,cACA,YACA,cACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,MAAI,WAAW,iBAAiB,UAAU;AACxC,WAAO;AAAA,MACL,kBAAkB;AAAA,QAChB;AAAA,QACA,kBAAkB,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,MACA,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,iBAAiB;AACnB,UAAM,YAAY,UACd,QAAQ,IAAI,YAAY,cAAc,IACtC;AACJ,WAAO;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,EACF;AAEA,MAAI,YAAY,eAAe,mBAAmB;AAChD,UAAM,YACJ,CAAC,WAAW,iBAAiB,WACzB,YAAY,cACZ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,EACF;AAEA,MAAI,YAAY,eAAe,oBAAoB;AACjD,WAAO;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,SAAS,+BAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,QAAM,qBAAqB,aAAa;AACxC,QAAM,YAAY,oBAAoB;AACtC,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,UAAM,mBACJ,WAAW,qCAAqC,kBAAkB,KAAK,IACnE,KACA;AACN,WAAO;AAAA,MACL;AAAA,MACA,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,YAAY,eAAe,SAAS,gCAAgC;AAC1E,QAAM,cAAc,KAAK;AAAA,IACvB,YAAY,mCAAmC;AAAA,IAC/C;AAAA,EACF;AAEA,MAAI,eAAe,OAAO;AACxB,WAAO;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,aAA8B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { checkMarkerFitCentered } from './check-marker-fit-centered.js';\nimport { getDefaultValueMarkerPointerPosition } from './get-default-value-marker-pointer-position.js';\nimport { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../../../../typography/utils.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../../text-ellipsis/truncate-string.js';\nimport { MARKER_CONTENT_TO_BORDER_PADDING } from '../../../constants.js';\nimport type { TextOverflowOptions } from '../../../types/marker.js';\nimport type { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';\n\nconst MIN_TEXT_TO_RENDER = `W${ELLIPSIS_CHARACTER}W`;\nconst RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH = 20;\n\ntype TrackBoundaries = {\n  xPosition: number;\n  trackLeftBoundary: number;\n  trackRightBoundary: number;\n  markerWidth: number;\n  defaultPointer: ValueMarkerPointerPosition;\n};\n\ntype MarkerLayoutInput = {\n  trackWidth: number;\n  trackLeftBoundary: number;\n  content: ReactNode;\n  width: number;\n  x: number;\n  isRange: boolean;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n};\n\ntype MarkerLayout = {\n  sanitizedContent: ReactNode;\n  calculatedMarkerWidth: number;\n  valueMarkerOrientation: ValueMarkerPointerPosition;\n  calculatedX: number;\n};\n\nfunction getAvailableWidth(width: number) {\n  return width - MARKER_CONTENT_TO_BORDER_PADDING * 2;\n}\n\nfunction getSanitizedContent(\n  content: string,\n  availableWidth: number,\n  truncateMode?: TruncationMode,\n) {\n  const minimumContentAllowedWidth = calculateWidth(\n    MIN_TEXT_TO_RENDER,\n    charsFontWidth12pixelsSize500Map,\n  );\n\n  if (minimumContentAllowedWidth > availableWidth) {\n    return '';\n  }\n\n  return truncateString(\n    content,\n    availableWidth,\n    charsFontWidth12pixelsSize500Map,\n    truncateMode,\n  );\n}\n\nfunction resolveConstrainedLayout(\n  content: string,\n  xPosition: number,\n  markerWidth: number,\n  trackLeftBoundary: number,\n  trackRightBoundary: number,\n  isRange: boolean,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const spaceToTheRight = trackRightBoundary - xPosition;\n  const moreSpaceRight = spaceToTheRight > xPosition;\n  const constrainedWidth = moreSpaceRight\n    ? Math.min(spaceToTheRight, markerWidth)\n    : xPosition - trackLeftBoundary;\n  return {\n    sanitizedContent: getSanitizedContent(\n      content,\n      getAvailableWidth(constrainedWidth),\n      truncateMode,\n    ),\n    calculatedMarkerWidth: constrainedWidth,\n    valueMarkerOrientation: moreSpaceRight ? 'left' : 'right',\n    calculatedX: !moreSpaceRight && isRange ? trackLeftBoundary : xPosition,\n  };\n}\n\nfunction resolveExpandedStringLayout(\n  content: string,\n  width: number,\n  isRange: boolean,\n  textOverflow: TextOverflowOptions,\n  boundaries: TrackBoundaries,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  } = boundaries;\n\n  if (isRange && textOverflow !== 'expand') {\n    return {\n      sanitizedContent: getSanitizedContent(\n        content,\n        getAvailableWidth(width),\n        truncateMode,\n      ),\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const canExpandCenter = checkMarkerFitCentered(\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (canExpandCenter) {\n    const adjustedX = isRange\n      ? width / 2 + xPosition - markerWidth / 2\n      : xPosition;\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: adjustedX,\n    };\n  }\n\n  if (xPosition - markerWidth >= trackLeftBoundary) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'right',\n      calculatedX: xPosition,\n    };\n  }\n\n  if (xPosition + markerWidth <= trackRightBoundary) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'left',\n      calculatedX: xPosition,\n    };\n  }\n\n  return resolveConstrainedLayout(\n    content,\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n    isRange,\n    truncateMode,\n  );\n}\n\nexport function calculateMarkerWidthAndContent({\n  trackWidth,\n  trackLeftBoundary,\n  content,\n  width,\n  x,\n  isRange,\n  textOverflow,\n  truncateMode,\n}: MarkerLayoutInput): MarkerLayout {\n  const trackRightBoundary = trackWidth + trackLeftBoundary;\n  const xPosition = trackLeftBoundary + x;\n  const defaultPointer = getDefaultValueMarkerPointerPosition(\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (typeof content !== 'string') {\n    const sanitizedContent =\n      isRange && RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH > getAvailableWidth(width)\n        ? ''\n        : content;\n    return {\n      sanitizedContent,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const textWidth = calculateWidth(content, charsFontWidth12pixelsSize500Map);\n  const markerWidth = Math.max(\n    textWidth + MARKER_CONTENT_TO_BORDER_PADDING * 2,\n    width,\n  );\n\n  if (markerWidth <= width) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const boundaries: TrackBoundaries = {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  };\n\n  return resolveExpandedStringLayout(\n    content,\n    width,\n    isRange,\n    textOverflow,\n    boundaries,\n    truncateMode,\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/utils/render-text-in-canvas.js CHANGED Viewed

@@ -4,20 +4,16 @@ import {
   getColorByContrast,
   getColorTokenDefaultValue
 } from "../../../../../utils/color-contrast.js";
-const renderTextContent = (ctx, content, x, y, orientation = "center", markerFillColor) => {
+const renderTextContent = (ctx, content, x, y, orientation = "center", markerFillColor, symbolColor) => {
   const lightTextColor = getColorTokenDefaultValue(
     Colors.Text.Neutral.OnAccent.Default
   );
   const darkTextColor = getColorTokenDefaultValue(Colors.Text.Neutral.Default);
-  const contrastTextColor = getColorByContrast(
-    markerFillColor,
-    lightTextColor,
-    darkTextColor
-  );
+  const textColor = symbolColor ?? getColorByContrast(markerFillColor, lightTextColor, darkTextColor);
   const { fontFamily, fontWeight, fontSize } = getMarkerFont();
   ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
   ctx.imageSmoothingEnabled = true;
-  ctx.fillStyle = contrastTextColor;
+  ctx.fillStyle = textColor;
   ctx.textAlign = orientation;
   ctx.textBaseline = "middle";
   ctx.fillText(content, x, y);

package/esm/charts/core/components/annotations/components/canvas/utils/render-text-in-canvas.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/utils/render-text-in-canvas.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getMarkerFont } from './get-marker-font.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../../../utils/color-contrast.js';\nimport { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';\n\nexport const renderTextContent = (\n  ctx: CanvasRenderingContext2D,\n  content: string,\n  x: number,\n  y: number,\n  orientation: ValueMarkerPointerPosition = 'center',\n  markerFillColor: string,\n) => {\n  const lightTextColor = getColorTokenDefaultValue(\n    Colors.Text.Neutral.OnAccent.Default,\n  );\n  const darkTextColor = getColorTokenDefaultValue(Colors.Text.Neutral.Default);\n  const contrastTextColor = getColorByContrast(\n    markerFillColor,\n    lightTextColor,\n    darkTextColor,\n  );\n  const { fontFamily, fontWeight, fontSize } = getMarkerFont();\n\n  ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;\n  ctx.imageSmoothingEnabled = true;\n  ctx.fillStyle = contrastTextColor;\n  ctx.textAlign = orientation;\n  ctx.textBaseline = 'middle';\n  ctx.fillText(content, x, y);\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAEnB,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGA,MAAM,oBAAoB,CAC/B,KACA,SACA,GACA,GACA,cAA0C,UAC1C,oBACG;AACH,QAAM,iBAAiB;AAAA,IACrB,OAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AACA,QAAM,gBAAgB,0BAA0B,OAAO,KAAK,QAAQ,OAAO;AAC3E,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,YAAY,YAAY,SAAS,IAAI,cAAc;AAE3D,MAAI,OAAO,GAAG,UAAU,IAAI,QAAQ,IAAI,UAAU;AAClD,MAAI,wBAAwB;AAC5B,MAAI,YAAY;AAChB,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,SAAS,SAAS,GAAG,CAAC;AAC5B;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getMarkerFont } from './get-marker-font.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../../../utils/color-contrast.js';\nimport { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';\n\nexport const renderTextContent = (\n  ctx: CanvasRenderingContext2D,\n  content: string,\n  x: number,\n  y: number,\n  orientation: ValueMarkerPointerPosition = 'center',\n  markerFillColor: string,\n  symbolColor?: string,\n) => {\n  const lightTextColor = getColorTokenDefaultValue(\n    Colors.Text.Neutral.OnAccent.Default,\n  );\n  const darkTextColor = getColorTokenDefaultValue(Colors.Text.Neutral.Default);\n  const textColor =\n    symbolColor ??\n    getColorByContrast(markerFillColor, lightTextColor, darkTextColor);\n  const { fontFamily, fontWeight, fontSize } = getMarkerFont();\n\n  ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;\n  ctx.imageSmoothingEnabled = true;\n  ctx.fillStyle = textColor;\n  ctx.textAlign = orientation;\n  ctx.textBaseline = 'middle';\n  ctx.fillText(content, x, y);\n};\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAEnB,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGA,MAAM,oBAAoB,CAC/B,KACA,SACA,GACA,GACA,cAA0C,UAC1C,iBACA,gBACG;AACH,QAAM,iBAAiB;AAAA,IACrB,OAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AACA,QAAM,gBAAgB,0BAA0B,OAAO,KAAK,QAAQ,OAAO;AAC3E,QAAM,YACJ,eACA,mBAAmB,iBAAiB,gBAAgB,aAAa;AACnE,QAAM,EAAE,YAAY,YAAY,SAAS,IAAI,cAAc;AAE3D,MAAI,OAAO,GAAG,UAAU,IAAI,QAAQ,IAAI,UAAU;AAClD,MAAI,wBAAwB;AAC5B,MAAI,YAAY;AAChB,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,SAAS,SAAS,GAAG,CAAC;AAC5B;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/displays/AnnotationsNumericalDisplay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/displays/AnnotationsNumericalDisplay.tsx"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport { AnnotationsContainer } from './AnnotationsContainer.js';\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { Formatter } from '../../../../types/formatter.js';\nimport { OverlayProvider } from '../../../overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../overlay-tooltip/contexts/TooltipContext.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsOverlayTooltip } from '../tooltip/AnnotationsOverlayTooltip.js';\nimport { AnnotationsTooltipFormatterContext } from '../tooltip/contexts/AnnotationsTooltipFormatter.context.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\ntype AnnotationsNumericalDisplayProps = BehaviorTrackingProps & {\n  tracks: AnnotationsTrackConfig[];\n  scale: ScaleLinear<number, number> | ScaleSymLog<number, number>;\n  showLabels: boolean;\n  labelsOffset: number;\n  width: number;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  maxLines?: number;\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  annotationsActions?: AnnotationsActionsHandler;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsNumericalDisplay = (\n  props: AnnotationsNumericalDisplayProps,\n) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    formatter,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  return (\n    <OverlayProvider>\n      <AnnotationsContainer\n        {...behaviorTrackingProps}\n        data-dt-component={dataDtComponent}\n      >\n        <TooltipProvider persistedStore>\n          <AnnotationsProviders\n            onAnnotationsMarkersInteraction={markerGroupHover}\n            annotationsActions={annotationsActions}\n            tooltipConfig={tooltipConfig}\n          >\n            <AnnotationsTooltipFormatterContext.Provider value={formatter}>\n              <AnnotationsRenderer {...rendererProps} />\n              <AnnotationsOverlayTooltip\n                tooltipType=\"numerical\"\n                truncationMode={rendererProps.truncateMode}\n                maxLines={rendererProps.maxLines}\n              />\n            </AnnotationsTooltipFormatterContext.Provider>\n          </AnnotationsProviders>\n        </TooltipProvider>\n      </AnnotationsContainer>\n    </OverlayProvider>\n  );\n};\n\nAnnotationsNumericalDisplay['displayName'] = 'AnnotationsNumericalDisplay';\n"],
-  "mappings": "AAyEY,SACE,KADF;AAjEZ,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAI3C,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,0CAA0C;AAyB5C,MAAM,8BAA8B,CACzC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,SACE,oBAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,mBAAgB,gBAAc,MAC7B;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,+BAAC,mCAAmC,UAAnC,EAA4C,OAAO,WAClD;AAAA,gCAAC,uBAAqB,GAAG,eAAe;AAAA,YACxC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,gBAAgB,cAAc;AAAA,gBAC9B,UAAU,cAAc;AAAA;AAAA,YAC1B;AAAA,aACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,4BAA4B,aAAa,IAAI;",
+  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport { AnnotationsContainer } from './AnnotationsContainer.js';\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { Formatter } from '../../../../types/formatter.js';\nimport { OverlayProvider } from '../../../overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../overlay-tooltip/contexts/TooltipContext.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsOverlayTooltip } from '../tooltip/AnnotationsOverlayTooltip.js';\nimport { AnnotationsTooltipFormatterContext } from '../tooltip/contexts/AnnotationsTooltipFormatter.context.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\ntype AnnotationsNumericalDisplayProps = BehaviorTrackingProps & {\n  tracks: AnnotationsTrackConfig[];\n  scale: ScaleLinear<number, number> | ScaleSymLog<number, number>;\n  showLabels: boolean;\n  labelsOffset: number;\n  width: number;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  maxLines?: number;\n  outerBottomLine?: boolean;\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  annotationsActions?: AnnotationsActionsHandler;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsNumericalDisplay = (\n  props: AnnotationsNumericalDisplayProps,\n) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    formatter,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  return (\n    <OverlayProvider>\n      <AnnotationsContainer\n        {...behaviorTrackingProps}\n        data-dt-component={dataDtComponent}\n      >\n        <TooltipProvider persistedStore>\n          <AnnotationsProviders\n            onAnnotationsMarkersInteraction={markerGroupHover}\n            annotationsActions={annotationsActions}\n            tooltipConfig={tooltipConfig}\n          >\n            <AnnotationsTooltipFormatterContext.Provider value={formatter}>\n              <AnnotationsRenderer {...rendererProps} />\n              <AnnotationsOverlayTooltip\n                tooltipType=\"numerical\"\n                truncationMode={rendererProps.truncateMode}\n                maxLines={rendererProps.maxLines}\n              />\n            </AnnotationsTooltipFormatterContext.Provider>\n          </AnnotationsProviders>\n        </TooltipProvider>\n      </AnnotationsContainer>\n    </OverlayProvider>\n  );\n};\n\nAnnotationsNumericalDisplay['displayName'] = 'AnnotationsNumericalDisplay';\n"],
+  "mappings": "AA0EY,SACE,KADF;AAlEZ,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAI3C,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,0CAA0C;AA0B5C,MAAM,8BAA8B,CACzC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,SACE,oBAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,mBAAgB,gBAAc,MAC7B;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,+BAAC,mCAAmC,UAAnC,EAA4C,OAAO,WAClD;AAAA,gCAAC,uBAAqB,GAAG,eAAe;AAAA,YACxC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,gBAAgB,cAAc;AAAA,gBAC9B,UAAU,cAAc;AAAA;AAAA,YAC1B;AAAA,aACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,4BAA4B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/displays/AnnotationsTimeDisplay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/displays/AnnotationsTimeDisplay.tsx"],
-  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\n\nimport { AnnotationsContainer } from './AnnotationsContainer.js';\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayProvider } from '../../../overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../overlay-tooltip/contexts/TooltipContext.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsOverlayTooltip } from '../tooltip/AnnotationsOverlayTooltip.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\nexport type AnnotationsTimeDisplayProps = BehaviorTrackingProps & {\n  scale: ScaleTime<number, number>;\n  width: number;\n  tracks: AnnotationsTrackConfig[];\n  labelsOffset: number;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  showLabels: boolean;\n  annotationsActions?: AnnotationsActionsHandler;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  maxLines?: number;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsTimeDisplay = (props: AnnotationsTimeDisplayProps) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  return (\n    <OverlayProvider>\n      <AnnotationsContainer\n        {...behaviorTrackingProps}\n        data-dt-component={dataDtComponent}\n      >\n        <TooltipProvider persistedStore>\n          <AnnotationsProviders\n            onAnnotationsMarkersInteraction={markerGroupHover}\n            annotationsActions={annotationsActions}\n            tooltipConfig={tooltipConfig}\n          >\n            <AnnotationsRenderer {...rendererProps} />\n            <AnnotationsOverlayTooltip\n              tooltipType=\"time\"\n              truncationMode={rendererProps.truncateMode}\n              maxLines={rendererProps.maxLines}\n            />\n          </AnnotationsProviders>\n        </TooltipProvider>\n      </AnnotationsContainer>\n    </OverlayProvider>\n  );\n};\nAnnotationsTimeDisplay['displayName'] = 'AnnotationsTimeDisplay';\n"],
-  "mappings": "AAwDU,SAKE,KALF;AAtDV,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAG3C,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAwBnC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,SACE,oBAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,mBAAgB,gBAAc,MAC7B;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,uBAAqB,GAAG,eAAe;AAAA,YACxC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,gBAAgB,cAAc;AAAA,gBAC9B,UAAU,cAAc;AAAA;AAAA,YAC1B;AAAA;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AACA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import type { ScaleTime } from 'd3-scale';\n\nimport { AnnotationsContainer } from './AnnotationsContainer.js';\nimport { useBehavioralTrackingProps } from '../../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { BehaviorTrackingProps } from '../../../../../../core/types/behavior-tracking-props.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { OverlayProvider } from '../../../overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../overlay-tooltip/contexts/TooltipContext.js';\nimport { AnnotationsProviders } from '../../providers/AnnotationsProviders.js';\nimport type { AnnotationsTrackConfig } from '../../types/annotations-track-props.js';\nimport type { AnnotationsActionsHandler } from '../../types/annotations.js';\nimport type { TextOverflowOptions } from '../../types/marker.js';\nimport type { SelectionState } from '../../types/state.js';\nimport { AnnotationsRenderer } from '../AnnotationsRenderer.js';\nimport { AnnotationsOverlayTooltip } from '../tooltip/AnnotationsOverlayTooltip.js';\nimport type { AnnotationsTooltipConfig } from '../tooltip/types/annotations-tooltip-props.js';\n\n/**\n * @internal\n */\nexport type AnnotationsTimeDisplayProps = BehaviorTrackingProps & {\n  scale: ScaleTime<number, number>;\n  width: number;\n  tracks: AnnotationsTrackConfig[];\n  labelsOffset: number;\n  markerGroupHover?: (event: Partial<SelectionState>) => void;\n  showLabels: boolean;\n  annotationsActions?: AnnotationsActionsHandler;\n  tooltipConfig?: AnnotationsTooltipConfig;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n  maxLines?: number;\n  outerBottomLine?: boolean;\n  /**\n   * Optional data-dt-component attribute for RUM tracking.\n   */\n  'data-dt-component'?: string;\n};\n\nexport const AnnotationsTimeDisplay = (props: AnnotationsTimeDisplayProps) => {\n  const {\n    annotationsActions,\n    markerGroupHover,\n    tooltipConfig,\n    'data-dt-component': dataDtComponent,\n    ...rendererProps\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  return (\n    <OverlayProvider>\n      <AnnotationsContainer\n        {...behaviorTrackingProps}\n        data-dt-component={dataDtComponent}\n      >\n        <TooltipProvider persistedStore>\n          <AnnotationsProviders\n            onAnnotationsMarkersInteraction={markerGroupHover}\n            annotationsActions={annotationsActions}\n            tooltipConfig={tooltipConfig}\n          >\n            <AnnotationsRenderer {...rendererProps} />\n            <AnnotationsOverlayTooltip\n              tooltipType=\"time\"\n              truncationMode={rendererProps.truncateMode}\n              maxLines={rendererProps.maxLines}\n            />\n          </AnnotationsProviders>\n        </TooltipProvider>\n      </AnnotationsContainer>\n    </OverlayProvider>\n  );\n};\nAnnotationsTimeDisplay['displayName'] = 'AnnotationsTimeDisplay';\n"],
+  "mappings": "AAyDU,SAKE,KALF;AAvDV,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAG3C,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAyBnC,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAEhE,SACE,oBAAC,mBACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,8BAAC,mBAAgB,gBAAc,MAC7B;AAAA,QAAC;AAAA;AAAA,UACC,iCAAiC;AAAA,UACjC;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,uBAAqB,GAAG,eAAe;AAAA,YACxC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,gBAAgB,cAAc;AAAA,gBAC9B,UAAU,cAAc;AAAA;AAAA,YAC1B;AAAA;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;AACA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._107efci0-3-7-1 {
+._107efci0-3-9-0 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.js CHANGED Viewed

@@ -6,11 +6,13 @@ import { AnnotationsConfigContext } from "../../contexts/AnnotationsConfig.conte
 import { useOverlayEvents } from "../../hooks/useOverlayEvents.js";
 const AnnotationsOverlays = ({ height }) => {
   const { labelsWidth, trackWidth } = useContext(AnnotationsConfigContext);
-  const { handleMouseMove, handleMouseLeave, handleClick } = useOverlayEvents();
+  const { handleMouseMove, handlePointerLeave, handleTouchEnd, handleClick } = useOverlayEvents();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseLeave: handleMouseLeave,
+      "aria-hidden": "true",
+      onPointerLeave: handlePointerLeave,
+      onTouchEnd: handleTouchEnd,
       onMouseMove: handleMouseMove,
       onClick: handleClick,
       className: annotationsOverlay,

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.tsx"],
-  "sourcesContent": ["import { useContext } from 'react';\n\nimport { annotationsOverlay } from './AnnotationsOverlays.sty.js';\nimport { MARGIN_TOP_STROKE } from '../../constants.js';\nimport { AnnotationsConfigContext } from '../../contexts/AnnotationsConfig.context.js';\nimport { useOverlayEvents } from '../../hooks/useOverlayEvents.js';\n\nexport type AnnotationsOverlaysProps = {\n  height: number;\n};\n\nexport const AnnotationsOverlays = ({ height }: AnnotationsOverlaysProps) => {\n  const { labelsWidth, trackWidth } = useContext(AnnotationsConfigContext);\n\n  const { handleMouseMove, handleMouseLeave, handleClick } = useOverlayEvents();\n\n  return (\n    <div\n      onMouseLeave={handleMouseLeave}\n      onMouseMove={handleMouseMove}\n      onClick={handleClick}\n      className={annotationsOverlay}\n      style={{\n        height,\n        width: trackWidth,\n        left: labelsWidth,\n        top: MARGIN_TOP_STROKE,\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AAiBI;AAjBJ,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAM1B,MAAM,sBAAsB,CAAC,EAAE,OAAO,MAAgC;AAC3E,QAAM,EAAE,aAAa,WAAW,IAAI,WAAW,wBAAwB;AAEvE,QAAM,EAAE,iBAAiB,kBAAkB,YAAY,IAAI,iBAAiB;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { annotationsOverlay } from './AnnotationsOverlays.sty.js';\nimport { MARGIN_TOP_STROKE } from '../../constants.js';\nimport { AnnotationsConfigContext } from '../../contexts/AnnotationsConfig.context.js';\nimport { useOverlayEvents } from '../../hooks/useOverlayEvents.js';\n\nexport type AnnotationsOverlaysProps = {\n  height: number;\n};\n\nexport const AnnotationsOverlays = ({ height }: AnnotationsOverlaysProps) => {\n  const { labelsWidth, trackWidth } = useContext(AnnotationsConfigContext);\n\n  const { handleMouseMove, handlePointerLeave, handleTouchEnd, handleClick } =\n    useOverlayEvents();\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      onPointerLeave={handlePointerLeave}\n      onTouchEnd={handleTouchEnd}\n      onMouseMove={handleMouseMove}\n      onClick={handleClick}\n      className={annotationsOverlay}\n      style={{\n        height,\n        width: trackWidth,\n        left: labelsWidth,\n        top: MARGIN_TOP_STROKE,\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAkBI;AAlBJ,SAAS,kBAAkB;AAE3B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAM1B,MAAM,sBAAsB,CAAC,EAAE,OAAO,MAAgC;AAC3E,QAAM,EAAE,aAAa,WAAW,IAAI,WAAW,wBAAwB;AAEvE,QAAM,EAAE,iBAAiB,oBAAoB,gBAAgB,YAAY,IACvE,iBAAiB;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-7-1";
+var annotationsOverlay = "_107efci0-3-9-0";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-7-1';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._uzgvu30-3-7-1 {
+._uzgvu30-3-9-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-7-1";
+var scrollWrapper = "_uzgvu30-3-9-0";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-7-1';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }