@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.js

@@ -6,12 +6,14 @@ import { Canvas } from "../../../../core/components/canvas/Canvas.js";
 import { CanvasContext } from "../../../../core/components/canvas/CanvasContext.js";
 import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { POINT_OVERLAY_PADDING } from "../../../../core/components/data-point/constants.js";
+import { getGroupedDataPointsByCoordinate } from "../../../../core/utils/group-by-threshold.js";
 import { useAreaData } from "../../../hooks/useAreaData.js";
 import { useDotData } from "../../../hooks/useDotData.js";
 import { useLineData } from "../../../hooks/useLineData.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartLinearSelection } from "../../../hooks/useXYChartLinearSelection.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
+import { useXYChartTooltip } from "../../../hooks/useXYChartTooltip.js";
 import { useSelectState } from "../../../store/selectors.js";
 import { useTooltipMetadata } from "../hooks/useTooltipMetadata.js";
 import {
@@ -20,6 +22,7 @@ import {
 } from "../utils/get-selected-datapoints.js";
 const XYChartLinearPoint = memo(() => {
   const allLinearDatapoints = useTooltipMetadata("linear");
+  const { variant } = useXYChartTooltip();
   const selectState = useSelectState();
   const { width, height } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();
@@ -69,11 +72,8 @@ const XYChartLinearPoint = memo(() => {
       datapointMetadataMap
     })
   );
-  const highlightedPoints = [
-    ...selectionPoints,
-    ...contentPoints
-  ];
-  if (!highlightedPoints.length) {
+  const hoverGroups = variant === "shared" ? getGroupedDataPointsByCoordinate(contentPoints, "y") : contentPoints.map((point) => [point]);
+  if (selectionPoints.length === 0 && hoverGroups.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: datapointIndicatorShiftedLayout, children: /* @__PURE__ */ jsx(
@@ -87,7 +87,13 @@ const XYChartLinearPoint = memo(() => {
         {
           width: width + 2 * POINT_OVERLAY_PADDING,
           height: height + 2 * POINT_OVERLAY_PADDING,
-          children: /* @__PURE__ */ jsx(HighlightedPointCanvas, { points: highlightedPoints })
+          children: /* @__PURE__ */ jsx(
+            HighlightedPointCanvas,
+            {
+              selectionPoints,
+              hoverGroups
+            }
+          )
         }
       )
     }

package/esm/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.tsx"],
-  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedPointCanvas } from './HighlightedPointCanvas.js';\nimport { datapointIndicatorShiftedLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartLinearSelection } from '../../../hooks/useXYChartLinearSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { type HighlightedLinearPoint } from '../../../types/xy-chart-internals.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport {\n  buildContentHighlightedPoint,\n  buildSelectionHighlightedPoints,\n} from '../utils/get-selected-datapoints.js';\n\nexport const XYChartLinearPoint = memo(() => {\n  const allLinearDatapoints = useTooltipMetadata('linear');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const linearSelection = useXYChartLinearSelection();\n  const { axisIdToScaleDomain } = useXYChartData();\n  const { axes, datapointMetadataMap } = useXYChartData();\n\n  const {\n    seriesToMetadata: dotSeriesMeta,\n    filteredSeriesWithDatapoints: dotSeriesWithDatapoints,\n  } = useDotData();\n  const {\n    seriesToMetadata: lineSeriesMeta,\n    filteredSeriesWithDatapoints: lineSeriesWithDatapoints,\n  } = useLineData();\n  const {\n    seriesToMetadata: areaSeriesMeta,\n    filteredSeriesWithDatapoints: areaSeriesWithDatapoints,\n  } = useAreaData();\n\n  const showContentPoint = allLinearDatapoints.length > 0;\n\n  const showPoint =\n    !showContentPoint &&\n    (!selectState || linearSelection.selectionConfigByAxisId.size === 0);\n\n  if (showPoint) {\n    return null;\n  }\n\n  const selectionPoints = buildSelectionHighlightedPoints({\n    selectState,\n    linearSelection,\n    width,\n    axisIdToScales,\n    dotSeriesWithDatapoints,\n    lineSeriesWithDatapoints,\n    areaSeriesWithDatapoints,\n    dotSeriesMeta,\n    lineSeriesMeta,\n    areaSeriesMeta,\n    axisIdToScaleDomain,\n    axes,\n    datapointMetadataMap,\n  });\n\n  const contentPoints = allLinearDatapoints.flatMap((contentState) =>\n    buildContentHighlightedPoint({\n      contentState,\n      axisIdToScales,\n      dotSeriesMeta,\n      lineSeriesMeta,\n      areaSeriesMeta,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n    }),\n  );\n\n  const highlightedPoints: HighlightedLinearPoint[] = [\n    ...selectionPoints,\n    ...contentPoints,\n  ];\n\n  if (!highlightedPoints.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorShiftedLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + 2 * POINT_OVERLAY_PADDING}\n          height={height + 2 * POINT_OVERLAY_PADDING}\n        >\n          <HighlightedPointCanvas points={highlightedPoints} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartLinearPoint['displayName'] = 'XYChartLinearPoint';\n"],
-  "mappings": "AAuGU;AAvGV,SAAS,YAAmC;AAE5C,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,KAAK,MAAM;AAC3C,QAAM,sBAAsB,mBAAmB,QAAQ;AACvD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,EAAE,oBAAoB,IAAI,eAAe;AAC/C,QAAM,EAAE,MAAM,qBAAqB,IAAI,eAAe;AAEtD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAChB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,oBAAoB,SAAS;AAEtD,QAAM,YACJ,CAAC,qBACA,CAAC,eAAe,gBAAgB,wBAAwB,SAAS;AAEpE,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,gCAAgC;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,oBAAoB;AAAA,IAAQ,CAAC,iBACjD,6BAA6B;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,oBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,CAAC,kBAAkB,QAAQ;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,iCACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,SAAS,IAAI;AAAA,UAErB,8BAAC,0BAAuB,QAAQ,mBAAmB;AAAA;AAAA,MACrD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedPointCanvas } from './HighlightedPointCanvas.js';\nimport { datapointIndicatorShiftedLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { getGroupedDataPointsByCoordinate } from '../../../../core/utils/group-by-threshold.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartLinearSelection } from '../../../hooks/useXYChartLinearSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useXYChartTooltip } from '../../../hooks/useXYChartTooltip.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport {\n  buildContentHighlightedPoint,\n  buildSelectionHighlightedPoints,\n} from '../utils/get-selected-datapoints.js';\n\nexport const XYChartLinearPoint = memo(() => {\n  const allLinearDatapoints = useTooltipMetadata('linear');\n  const { variant } = useXYChartTooltip();\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const linearSelection = useXYChartLinearSelection();\n  const { axisIdToScaleDomain } = useXYChartData();\n  const { axes, datapointMetadataMap } = useXYChartData();\n\n  const {\n    seriesToMetadata: dotSeriesMeta,\n    filteredSeriesWithDatapoints: dotSeriesWithDatapoints,\n  } = useDotData();\n  const {\n    seriesToMetadata: lineSeriesMeta,\n    filteredSeriesWithDatapoints: lineSeriesWithDatapoints,\n  } = useLineData();\n  const {\n    seriesToMetadata: areaSeriesMeta,\n    filteredSeriesWithDatapoints: areaSeriesWithDatapoints,\n  } = useAreaData();\n\n  const showContentPoint = allLinearDatapoints.length > 0;\n\n  const showPoint =\n    !showContentPoint &&\n    (!selectState || linearSelection.selectionConfigByAxisId.size === 0);\n\n  if (showPoint) {\n    return null;\n  }\n\n  const selectionPoints = buildSelectionHighlightedPoints({\n    selectState,\n    linearSelection,\n    width,\n    axisIdToScales,\n    dotSeriesWithDatapoints,\n    lineSeriesWithDatapoints,\n    areaSeriesWithDatapoints,\n    dotSeriesMeta,\n    lineSeriesMeta,\n    areaSeriesMeta,\n    axisIdToScaleDomain,\n    axes,\n    datapointMetadataMap,\n  });\n\n  const contentPoints = allLinearDatapoints.flatMap((contentState) =>\n    buildContentHighlightedPoint({\n      contentState,\n      axisIdToScales,\n      dotSeriesMeta,\n      lineSeriesMeta,\n      areaSeriesMeta,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n    }),\n  );\n\n  // The lollipop pill (grouping close hover points) is a shared-tooltip\n  // feature only. In the default variant each hover point keeps its own\n  // single-circle highlight, so it is wrapped as a singleton group.\n  const hoverGroups =\n    variant === 'shared'\n      ? getGroupedDataPointsByCoordinate(contentPoints, 'y')\n      : contentPoints.map((point) => [point]);\n\n  if (selectionPoints.length === 0 && hoverGroups.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorShiftedLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + 2 * POINT_OVERLAY_PADDING}\n          height={height + 2 * POINT_OVERLAY_PADDING}\n        >\n          <HighlightedPointCanvas\n            selectionPoints={selectionPoints}\n            hoverGroups={hoverGroups}\n          />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartLinearPoint['displayName'] = 'XYChartLinearPoint';\n"],
+  "mappings": "AA4GU;AA5GV,SAAS,YAAmC;AAE5C,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wCAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,KAAK,MAAM;AAC3C,QAAM,sBAAsB,mBAAmB,QAAQ;AACvD,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,EAAE,oBAAoB,IAAI,eAAe;AAC/C,QAAM,EAAE,MAAM,qBAAqB,IAAI,eAAe;AAEtD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAChB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,oBAAoB,SAAS;AAEtD,QAAM,YACJ,CAAC,qBACA,CAAC,eAAe,gBAAgB,wBAAwB,SAAS;AAEpE,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,gCAAgC;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,oBAAoB;AAAA,IAAQ,CAAC,iBACjD,6BAA6B;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAKA,QAAM,cACJ,YAAY,WACR,iCAAiC,eAAe,GAAG,IACnD,cAAc,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AAE1C,MAAI,gBAAgB,WAAW,KAAK,YAAY,WAAW,GAAG;AAC5D,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,iCACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,SAAS,IAAI;AAAA,UAErB;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/hooks/useOverlayEvents.js

@@ -12,6 +12,7 @@ import { useSynchronizedCrosshair } from "../../../../core/components/shared-cha
 import { useSynchronizedSelection } from "../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { ZOOM_CHANGE_TYPE } from "../../../../core/types/zoom.js";
 import { getPercentageFromPixel } from "../../../../core/utils/get-percentage-from-pixel.js";
+import { isTouchableDevice } from "../../../../core/utils/is-touchable-device.js";
 import { useAreaData } from "../../../hooks/useAreaData.js";
 import { useBarData } from "../../../hooks/useBarData.js";
 import { useDotData } from "../../../hooks/useDotData.js";
@@ -91,6 +92,9 @@ const useOverlayEvents = () => {
   const handleHover = ({
     position
   }) => {
+    if (isTouchableDevice()) {
+      return;
+    }
     if (syncedXScale) {
       const hoveredDate = syncedXScale.invert(position.relative.x);
       disableSynchronizedCrosshair?.(false);

package/esm/charts/xy-chart/components/overlay/hooks/useOverlayEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/hooks/useOverlayEvents.ts"],
-  "sourcesContent": ["import type { RefObject } from 'react';\n\nimport { useApplyPanDelta } from './useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './useApplyZoomDelta.js';\nimport { useResetInteractions } from './useResetInteractions.js';\nimport { useZoomToSelection } from './useZoomToSelection.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport {\n  INTERACTION_MODE,\n  type InteractionMode,\n  type InteractionTriggers,\n  isSelectCancelled,\n  type ZoomBehavior,\n} from '../../../../core/components/interactions-overlay/types.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../../core/components/selection-area/types.js';\nimport { useSynchronizedCrosshair } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { getPercentageFromPixel } from '../../../../core/utils/get-percentage-from-pixel.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useOverlayPerformance } from '../../../hooks/useOverlayPerformance.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../../hooks/useXYChartId.js';\nimport { reduceInteractionMode } from '../../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelHighlight,\n  reduceExploreCancelSelect,\n  reduceExplorePin,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../../store/selectors.js';\n\nexport const useOverlayEvents = () => {\n  const { filteredSeriesWithDatapoints: rectSeriesData } = useRectData();\n  const { filteredSeriesWithDatapoints: barSeriesData } = useBarData();\n  const { filteredSeriesWithDatapoints: dotSeriesData } = useDotData();\n  const { filteredSeriesWithDatapoints: lineSeriesData } = useLineData();\n  const { filteredSeriesWithDatapoints: areaSeriesData } = useAreaData();\n  const zoomToSelection = useZoomToSelection();\n  const setState = useSetState();\n  const mode = useInteractionModeState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyReset = useResetInteractions();\n  const applyZoomDelta = useApplyZoomDelta();\n  const zoomState = useZoomState();\n  const { query } = useOverlayPerformance();\n  const { axesMetadata } = useXYChartData();\n  const chartId = useXYChartId();\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const { width } = useGridPlotSize();\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n  } = useSynchronizedSelection();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { hover, pin, unpin, reset, outOfBounds } = useTooltipActions();\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const getDatapoints = (position: RelativeAbsolutePosition) =>\n    query({\n      position,\n      dotSeriesData,\n      lineSeriesData,\n      areaSeriesData,\n      rectSeriesData,\n      barSeriesData,\n    });\n\n  const resetTooltip = () => {\n    setState(reduceExploreCancelHighlight);\n    reset();\n  };\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode = event.mode === 'pan' && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && axesMetadata.isZoomEnabled;\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      resetSynchronizedSelection?.();\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = ({\n    position,\n  }: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (syncedXScale) {\n      const hoveredDate = syncedXScale.invert(position.relative.x);\n      disableSynchronizedCrosshair?.(false);\n      updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n    }\n\n    const metadata = getDatapoints(position);\n\n    const payload = metadata.preferred\n      ? {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        }\n      : undefined;\n\n    hover(\n      { clientX: position.absolute.x, clientY: position.absolute.y },\n      payload,\n    );\n  };\n\n  const handleTogglePin = (\n    shouldPin: boolean,\n    position: RelativeAbsolutePosition | undefined,\n  ) => {\n    if (shouldPin) {\n      handlePin(position);\n      updateSynchronizedCrosshair?.(undefined);\n    } else {\n      handleUnPin(position);\n    }\n  };\n\n  const handleUnPin = (position: RelativeAbsolutePosition | undefined) => {\n    setState(reduceExploreUnPin);\n\n    if (position) {\n      const metadata = getDatapoints(position);\n\n      unpin();\n\n      if (metadata.preferred) {\n        hover(\n          { clientX: position.absolute.x, clientY: position.absolute.y },\n          {\n            geometry: metadata.preferred.type,\n            header1: undefined,\n            series: [],\n            metadata,\n          },\n        );\n      }\n    } else {\n      resetTooltip();\n    }\n  };\n\n  const handlePin = (position: RelativeAbsolutePosition | undefined) => {\n    if (!position) {\n      return;\n    }\n\n    const metadata = getDatapoints(position);\n\n    if (metadata.preferred) {\n      setState(reduceExplorePin(metadata.preferred.series.id));\n      pin(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    }\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    const { mousePosition: position } = event;\n    applyReset({ position });\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n\n    if (!position) {\n      setState(reduceExploreCancelAll);\n\n      return;\n    }\n\n    setState(reduceExploreCancelAll);\n\n    const metadata = getDatapoints(position);\n\n    if (metadata.preferred) {\n      hover(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    } else {\n      outOfBounds();\n    }\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    updateSynchronizedCrosshair?.(undefined);\n    outOfBounds();\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    applyPanDelta(event.delta);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      disableSynchronizedCrosshair?.(true);\n      updateSynchronizedSelection?.();\n    }\n    resetTooltip();\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'explore' | 'zoom';\n  }): void => {\n    const variant: SelectionAreaVariant =\n      event.mode === 'explore' ? 'select' : 'zoom';\n\n    setState(\n      reduceExploreSelect({\n        start: event.start,\n        end: event.end,\n        finished: false,\n        accessible: false,\n        variant,\n        selectionPercentage: getPercentageFromPixel(\n          [event.start, event.end],\n          width,\n        ),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n    ref: RefObject<_SelectionRef>,\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n      resetSynchronizedSelection?.();\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          variant: 'select',\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      ref.current?.focus();\n      if (syncedXScale) {\n        updateSynchronizedSelection?.({\n          selection: [event.start, event.end],\n          chartId,\n          scale: syncedXScale,\n        });\n      }\n    } else {\n      // in case select is disabled and zoomX is enabled, only zoom to selection interaction is possible\n      zoomToSelection();\n    }\n  };\n\n  const handleZoomChange = (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => {\n    const canZoomIn =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomIn && zoomState?.zoomInEnabled;\n    const canZoomOut =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomOut && zoomState.zoomOutEnabled;\n    const canZoomX = event.behavior === ZOOM_CHANGE_TYPE.ZoomX;\n\n    const canZoom = canZoomIn || canZoomOut || canZoomX;\n\n    if (canZoom && axesMetadata.isZoomEnabled) {\n      setState(reduceExploreCancelAll);\n\n      applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n    }\n  };\n\n  return {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { RefObject } from 'react';\n\nimport { useApplyPanDelta } from './useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './useApplyZoomDelta.js';\nimport { useResetInteractions } from './useResetInteractions.js';\nimport { useZoomToSelection } from './useZoomToSelection.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport {\n  INTERACTION_MODE,\n  type InteractionMode,\n  type InteractionTriggers,\n  isSelectCancelled,\n  type ZoomBehavior,\n} from '../../../../core/components/interactions-overlay/types.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../../core/components/selection-area/types.js';\nimport { useSynchronizedCrosshair } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../../core/types/zoom.js';\nimport { getPercentageFromPixel } from '../../../../core/utils/get-percentage-from-pixel.js';\nimport { isTouchableDevice } from '../../../../core/utils/is-touchable-device.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useOverlayPerformance } from '../../../hooks/useOverlayPerformance.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../../hooks/useSyncedXScaleByPriority.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../../hooks/useXYChartId.js';\nimport { reduceInteractionMode } from '../../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelHighlight,\n  reduceExploreCancelSelect,\n  reduceExplorePin,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../../store/selectors.js';\n\nexport const useOverlayEvents = () => {\n  const { filteredSeriesWithDatapoints: rectSeriesData } = useRectData();\n  const { filteredSeriesWithDatapoints: barSeriesData } = useBarData();\n  const { filteredSeriesWithDatapoints: dotSeriesData } = useDotData();\n  const { filteredSeriesWithDatapoints: lineSeriesData } = useLineData();\n  const { filteredSeriesWithDatapoints: areaSeriesData } = useAreaData();\n  const zoomToSelection = useZoomToSelection();\n  const setState = useSetState();\n  const mode = useInteractionModeState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyReset = useResetInteractions();\n  const applyZoomDelta = useApplyZoomDelta();\n  const zoomState = useZoomState();\n  const { query } = useOverlayPerformance();\n  const { axesMetadata } = useXYChartData();\n  const chartId = useXYChartId();\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const { width } = useGridPlotSize();\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n  } = useSynchronizedSelection();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { hover, pin, unpin, reset, outOfBounds } = useTooltipActions();\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const getDatapoints = (position: RelativeAbsolutePosition) =>\n    query({\n      position,\n      dotSeriesData,\n      lineSeriesData,\n      areaSeriesData,\n      rectSeriesData,\n      barSeriesData,\n    });\n\n  const resetTooltip = () => {\n    setState(reduceExploreCancelHighlight);\n    reset();\n  };\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode = event.mode === 'pan' && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && axesMetadata.isZoomEnabled;\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      resetSynchronizedSelection?.();\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = ({\n    position,\n  }: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (isTouchableDevice()) {\n      return;\n    }\n\n    if (syncedXScale) {\n      const hoveredDate = syncedXScale.invert(position.relative.x);\n      disableSynchronizedCrosshair?.(false);\n      updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n    }\n\n    const metadata = getDatapoints(position);\n\n    const payload = metadata.preferred\n      ? {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        }\n      : undefined;\n\n    hover(\n      { clientX: position.absolute.x, clientY: position.absolute.y },\n      payload,\n    );\n  };\n\n  const handleTogglePin = (\n    shouldPin: boolean,\n    position: RelativeAbsolutePosition | undefined,\n  ) => {\n    if (shouldPin) {\n      handlePin(position);\n      updateSynchronizedCrosshair?.(undefined);\n    } else {\n      handleUnPin(position);\n    }\n  };\n\n  const handleUnPin = (position: RelativeAbsolutePosition | undefined) => {\n    setState(reduceExploreUnPin);\n\n    if (position) {\n      const metadata = getDatapoints(position);\n\n      unpin();\n\n      if (metadata.preferred) {\n        hover(\n          { clientX: position.absolute.x, clientY: position.absolute.y },\n          {\n            geometry: metadata.preferred.type,\n            header1: undefined,\n            series: [],\n            metadata,\n          },\n        );\n      }\n    } else {\n      resetTooltip();\n    }\n  };\n\n  const handlePin = (position: RelativeAbsolutePosition | undefined) => {\n    if (!position) {\n      return;\n    }\n\n    const metadata = getDatapoints(position);\n\n    if (metadata.preferred) {\n      setState(reduceExplorePin(metadata.preferred.series.id));\n      pin(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    }\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    const { mousePosition: position } = event;\n    applyReset({ position });\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n\n    if (!position) {\n      setState(reduceExploreCancelAll);\n\n      return;\n    }\n\n    setState(reduceExploreCancelAll);\n\n    const metadata = getDatapoints(position);\n\n    if (metadata.preferred) {\n      hover(\n        { clientX: position.absolute.x, clientY: position.absolute.y },\n        {\n          geometry: metadata.preferred.type,\n          header1: undefined,\n          series: [],\n          metadata,\n        },\n      );\n    } else {\n      outOfBounds();\n    }\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    updateSynchronizedCrosshair?.(undefined);\n    outOfBounds();\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    applyPanDelta(event.delta);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      disableSynchronizedCrosshair?.(true);\n      updateSynchronizedSelection?.();\n    }\n    resetTooltip();\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'explore' | 'zoom';\n  }): void => {\n    const variant: SelectionAreaVariant =\n      event.mode === 'explore' ? 'select' : 'zoom';\n\n    setState(\n      reduceExploreSelect({\n        start: event.start,\n        end: event.end,\n        finished: false,\n        accessible: false,\n        variant,\n        selectionPercentage: getPercentageFromPixel(\n          [event.start, event.end],\n          width,\n        ),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\n    ref: RefObject<_SelectionRef>,\n  ): void => {\n    if (isSelectCancelled(event)) {\n      setState(reduceExploreCancelSelect);\n      resetSynchronizedSelection?.();\n    } else if (mode === 'explore') {\n      setState(\n        reduceExploreSelect({\n          start: event.start,\n          end: event.end,\n          finished: true,\n          accessible: false,\n          variant: 'select',\n          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      ref.current?.focus();\n      if (syncedXScale) {\n        updateSynchronizedSelection?.({\n          selection: [event.start, event.end],\n          chartId,\n          scale: syncedXScale,\n        });\n      }\n    } else {\n      // in case select is disabled and zoomX is enabled, only zoom to selection interaction is possible\n      zoomToSelection();\n    }\n  };\n\n  const handleZoomChange = (event: {\n    triggeredBy: InteractionTriggers;\n    deltaStart: number;\n    deltaEnd: number;\n    behavior: ZoomBehavior;\n  }) => {\n    const canZoomIn =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomIn && zoomState?.zoomInEnabled;\n    const canZoomOut =\n      event.behavior === ZOOM_CHANGE_TYPE.ZoomOut && zoomState.zoomOutEnabled;\n    const canZoomX = event.behavior === ZOOM_CHANGE_TYPE.ZoomX;\n\n    const canZoom = canZoomIn || canZoomOut || canZoomX;\n\n    if (canZoom && axesMetadata.isZoomEnabled) {\n      setState(reduceExploreCancelAll);\n\n      applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n    }\n  };\n\n  return {\n    handleModeChange,\n    handleHover,\n    handleTogglePin,\n    handleReset,\n    handleLeave,\n    handlePanChange,\n    handleSelectChange,\n    handleSelectEnd,\n    handleZoomChange,\n    handleSelectStart,\n    resetTooltip,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/utils/draw-shape.js

@@ -1,6 +1,24 @@
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { getCanvasColor } from "../../../../core/components/canvas/utils/canvas-color.js";
+import { drawRoundRect } from "../../../../core/components/canvas/utils/drawRoundRect.js";
+import { getOuterCircleSize } from "../../../../core/components/data-point/utils/data-point.js";
+import { DEFAULT_HIGHLIGHTED_OPACITY } from "../../../../core/constants.js";
 const TRIANGLE_RADIUS_ADJUSTMENT = 1;
+const PILL_BORDER_RADIUS = 7;
+const PILL_BORDER_WIDTH = 1;
+const drawPill = (ctx, points, strokeColor) => {
+  const { x, y, width, height } = getOuterCircleSize(points, "y");
+  ctx.beginPath();
+  drawRoundRect(ctx, x, y, width, height, PILL_BORDER_RADIUS);
+  ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;
+  ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+  ctx.lineWidth = PILL_BORDER_WIDTH;
+  ctx.strokeStyle = getCanvasColor(strokeColor);
+  ctx.stroke();
+  ctx.closePath();
+};
 const drawShapeFill = (ctx, point, radius) => {
   drawShape(ctx, point, radius, true, false);
 };
@@ -70,6 +88,7 @@ const drawShape = (ctx, point, radius, fillShape, strokeShape, strokeColor) => {
   ctx.closePath();
 };
 export {
+  drawPill,
   drawShapeFill,
   drawShapeStroke
 };

package/esm/charts/xy-chart/components/overlay/utils/draw-shape.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/utils/draw-shape.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { PointShapeType } from '../../../../core/components/shape/type.js';\nimport { DataPoint } from '../../../../core/types/data-point.js';\n\nconst TRIANGLE_RADIUS_ADJUSTMENT = 1;\n\nexport const drawShapeFill = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  drawShape(ctx, point, radius, true, false);\n};\n\nexport const drawShapeStroke = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  strokeColor?: string,\n) => {\n  drawShape(ctx, point, radius, false, true, strokeColor);\n};\n\nconst createPathCircle = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);\n};\n\nconst createPathSquare = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius;\n  ctx.rect(point.x - s, point.y - s, 2 * s, 2 * s);\n};\n\nconst createPathTriangle = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const r = radius - TRIANGLE_RADIUS_ADJUSTMENT;\n  const R = 2 * r;\n  const side = r * 2 * Math.sqrt(3);\n\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - R);\n  ctx.lineTo(point.x + side / 2, point.y + r);\n  ctx.lineTo(point.x - side / 2, point.y + r);\n  ctx.closePath();\n};\n\nconst createPathDiamond = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius * Math.sqrt(2);\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - s);\n  ctx.lineTo(point.x + s, point.y);\n  ctx.lineTo(point.x, point.y + s);\n  ctx.lineTo(point.x - s, point.y);\n  ctx.closePath();\n};\n\nconst drawShape = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  fillShape?: boolean,\n  strokeShape?: boolean,\n  strokeColor?: string,\n) => {\n  ctx.beginPath();\n  switch (point.shape) {\n    case 'circle':\n      createPathCircle(ctx, point, radius);\n      break;\n    case 'square': {\n      createPathSquare(radius, ctx, point);\n      break;\n    }\n    case 'triangle': {\n      createPathTriangle(radius, ctx, point);\n      break;\n    }\n    case 'diamond': {\n      createPathDiamond(radius, ctx, point);\n      break;\n    }\n    default:\n      createPathCircle(ctx, point, radius);\n  }\n  if (fillShape) {\n    ctx.fillStyle = getCanvasColor(point.color.Default);\n    ctx.fill();\n  }\n  if (strokeShape) {\n    ctx.globalAlpha = 0.7;\n    ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);\n    ctx.fill();\n\n    ctx.globalAlpha = 1;\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = getCanvasColor(strokeColor);\n    ctx.stroke();\n  }\n  ctx.closePath();\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAEnB,SAAS,sBAAsB;AAI/B,MAAM,6BAA6B;AAE5B,MAAM,gBAAgB,CAC3B,KACA,OACA,WACG;AACH,YAAU,KAAK,OAAO,QAAQ,MAAM,KAAK;AAC3C;AAEO,MAAM,kBAAkB,CAC7B,KACA,OACA,QACA,gBACG;AACH,YAAU,KAAK,OAAO,QAAQ,OAAO,MAAM,WAAW;AACxD;AAEA,MAAM,mBAAmB,CACvB,KACA,OACA,WACG;AACH,MAAI,IAAI,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,KAAK,EAAE;AAClD;AAEA,MAAM,mBAAmB,CACvB,QACA,KACA,UACG;AACH,QAAM,IAAI;AACV,MAAI,KAAK,MAAM,IAAI,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD;AAEA,MAAM,qBAAqB,CACzB,QACA,KACA,UACG;AACH,QAAM,IAAI,SAAS;AACnB,QAAM,IAAI,IAAI;AACd,QAAM,OAAO,IAAI,IAAI,KAAK,KAAK,CAAC;AAEhC,MAAI,UAAU;AACd,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAI,OAAO,MAAM,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC;AAC1C,MAAI,UAAU;AAChB;AAEA,MAAM,oBAAoB,CACxB,QACA,KACA,UACG;AACH,QAAM,IAAI,SAAS,KAAK,KAAK,CAAC;AAC9B,MAAI,UAAU;AACd,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,GAAG,MAAM,CAAC;AAC/B,MAAI,OAAO,MAAM,GAAG,MAAM,IAAI,CAAC;AAC/B,MAAI,OAAO,MAAM,IAAI,GAAG,MAAM,CAAC;AAC/B,MAAI,UAAU;AAChB;AAEA,MAAM,YAAY,CAChB,KACA,OACA,QACA,WACA,aACA,gBACG;AACH,MAAI,UAAU;AACd,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK;AACH,uBAAiB,KAAK,OAAO,MAAM;AACnC;AAAA,IACF,KAAK,UAAU;AACb,uBAAiB,QAAQ,KAAK,KAAK;AACnC;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,yBAAmB,QAAQ,KAAK,KAAK;AACrC;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,wBAAkB,QAAQ,KAAK,KAAK;AACpC;AAAA,IACF;AAAA,IACA;AACE,uBAAiB,KAAK,OAAO,MAAM;AAAA,EACvC;AACA,MAAI,WAAW;AACb,QAAI,YAAY,eAAe,MAAM,MAAM,OAAO;AAClD,QAAI,KAAK;AAAA,EACX;AACA,MAAI,aAAa;AACf,QAAI,cAAc;AAClB,QAAI,YAAY,eAAe,OAAO,WAAW,KAAK,OAAO;AAC7D,QAAI,KAAK;AAET,QAAI,cAAc;AAClB,QAAI,YAAY;AAChB,QAAI,cAAc,eAAe,WAAW;AAC5C,QAAI,OAAO;AAAA,EACb;AACA,MAAI,UAAU;AAChB;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { drawRoundRect } from '../../../../core/components/canvas/utils/drawRoundRect.js';\nimport { getOuterCircleSize } from '../../../../core/components/data-point/utils/data-point.js';\nimport { PointShapeType } from '../../../../core/components/shape/type.js';\nimport { DEFAULT_HIGHLIGHTED_OPACITY } from '../../../../core/constants.js';\nimport { DataPoint } from '../../../../core/types/data-point.js';\n\nconst TRIANGLE_RADIUS_ADJUSTMENT = 1;\nconst PILL_BORDER_RADIUS = 7;\nconst PILL_BORDER_WIDTH = 1;\n\nexport const drawPill = (\n  ctx: CanvasRenderingContext2D,\n  points: DataPoint[],\n  strokeColor: string,\n) => {\n  const { x, y, width, height } = getOuterCircleSize(points, 'y');\n  ctx.beginPath();\n  drawRoundRect(ctx, x, y, width, height, PILL_BORDER_RADIUS);\n  ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;\n  ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);\n  ctx.fill();\n  ctx.globalAlpha = 1;\n  ctx.lineWidth = PILL_BORDER_WIDTH;\n  ctx.strokeStyle = getCanvasColor(strokeColor);\n  ctx.stroke();\n  ctx.closePath();\n};\n\nexport const drawShapeFill = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  drawShape(ctx, point, radius, true, false);\n};\n\nexport const drawShapeStroke = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  strokeColor?: string,\n) => {\n  drawShape(ctx, point, radius, false, true, strokeColor);\n};\n\nconst createPathCircle = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n) => {\n  ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);\n};\n\nconst createPathSquare = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius;\n  ctx.rect(point.x - s, point.y - s, 2 * s, 2 * s);\n};\n\nconst createPathTriangle = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const r = radius - TRIANGLE_RADIUS_ADJUSTMENT;\n  const R = 2 * r;\n  const side = r * 2 * Math.sqrt(3);\n\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - R);\n  ctx.lineTo(point.x + side / 2, point.y + r);\n  ctx.lineTo(point.x - side / 2, point.y + r);\n  ctx.closePath();\n};\n\nconst createPathDiamond = (\n  radius: number,\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n) => {\n  const s = radius * Math.sqrt(2);\n  ctx.beginPath();\n  ctx.moveTo(point.x, point.y - s);\n  ctx.lineTo(point.x + s, point.y);\n  ctx.lineTo(point.x, point.y + s);\n  ctx.lineTo(point.x - s, point.y);\n  ctx.closePath();\n};\n\nconst drawShape = (\n  ctx: CanvasRenderingContext2D,\n  point: DataPoint & { shape?: PointShapeType },\n  radius: number,\n  fillShape?: boolean,\n  strokeShape?: boolean,\n  strokeColor?: string,\n) => {\n  ctx.beginPath();\n  switch (point.shape) {\n    case 'circle':\n      createPathCircle(ctx, point, radius);\n      break;\n    case 'square': {\n      createPathSquare(radius, ctx, point);\n      break;\n    }\n    case 'triangle': {\n      createPathTriangle(radius, ctx, point);\n      break;\n    }\n    case 'diamond': {\n      createPathDiamond(radius, ctx, point);\n      break;\n    }\n    default:\n      createPathCircle(ctx, point, radius);\n  }\n  if (fillShape) {\n    ctx.fillStyle = getCanvasColor(point.color.Default);\n    ctx.fill();\n  }\n  if (strokeShape) {\n    ctx.globalAlpha = 0.7;\n    ctx.fillStyle = getCanvasColor(Colors.Background.Base.Default);\n    ctx.fill();\n\n    ctx.globalAlpha = 1;\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = getCanvasColor(strokeColor);\n    ctx.stroke();\n  }\n  ctx.closePath();\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-7-1 {
+._1mfu0sw0-3-8-0 {
   z-index: 2;
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js

@@ -1,6 +1,6 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartThresholdIndicators.css";
-var thresholdPlot = "_1mfu0sw0-3-7-1 _13lzg4k0-3-7-1";
+var thresholdPlot = "_1mfu0sw0-3-8-0 _13lzg4k0-3-8-0";
 export {
   thresholdPlot
 };

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-7-1 _13lzg4k0-3-7-1';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-8-0 _13lzg4k0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js

@@ -1,12 +1,12 @@
 import { formatResolution } from "../../../../../core/components/tooltip/utils/resolution-formatter.js";
-import { XYCHART_MESSAGES } from "../../../../messages/messages.js";
 import {
   isCategoricalTooltip,
   isNumericalToolTip,
   isTimeTooltip
 } from "../../../../utils/type-guards.js";
+import { getCachedSeparator } from "../../utils/get-cached-separator.js";
 function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage) {
-  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);
+  const separator = getCachedSeparator(intl);
   let duration;
   let text = "";
   const primaryValue = v0 ?? v1;

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.ts"],
-  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport type {\n  FormatterWithPrecision,\n  StringFormatter,\n  TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport { XYCHART_MESSAGES } from '../../../../messages/messages.js';\nimport type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\n\n/**\n * Pure function that formats tooltip body content.\n * This can be called from non-React contexts (like utility functions).\n *\n * `formatter` is discriminated by the value type: a `StringFormatter` for\n * categorical axes, a `FormatterWithPrecision` for numerical axes, and a\n * `TimeFrameFormatter` for time axes.\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);\n\n  let duration: string | undefined;\n  let text = '';\n\n  const primaryValue = v0 ?? v1;\n  const secondaryValue = v0 !== undefined && v1 !== undefined ? v1 : undefined;\n\n  if (primaryValue === undefined) {\n    return { duration, text };\n  }\n\n  const args = {\n    formatter,\n    v0: primaryValue,\n    v1: secondaryValue,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    const format = formatter as StringFormatter | undefined;\n    const formatValue = (v: string) => (format ? format(v) : v);\n    const startText = formatValue(String(args.v0));\n    const endText =\n      args.v1 === undefined ? startText : formatValue(String(args.v1));\n\n    text =\n      args.v1 === undefined\n        ? startText\n        : `${startText} ${separator} ${endText}`;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const percentageSuffix = (v: number) =>\n      toPercentage ? ` (${toPercentage(v)}%)` : '';\n    const formattedStart = `${format(args.v0 as number)}${percentageSuffix(\n      args.v0,\n    )}`;\n    const formattedEnd =\n      args.v1 === undefined\n        ? formattedStart\n        : `${format(args.v1 as number)}${percentageSuffix(args.v1)}`;\n\n    text =\n      args.v1 === undefined\n        ? formattedStart\n        : `${formattedStart} ${separator} ${formattedEnd}`;\n\n    if (args.v1 !== undefined) {\n      duration = format(Math.abs((args.v1 as number) - (args.v0 as number)));\n    }\n\n    return { duration, text };\n  }\n\n  if (isTimeTooltip(args) && formatter) {\n    const format = formatter as TimeFrameFormatter;\n\n    if (args.v0 instanceof Date) {\n      text = format(args.v0, args.v1 instanceof Date ? args.v1 : undefined);\n\n      if (args.v1 instanceof Date) {\n        duration = formatResolution(args.v0, args.v1);\n      }\n    }\n  }\n\n  return { duration, text };\n}\n"],
-  "mappings": "AAEA,SAAS,wBAAwB;AAMjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUA,SAAS,kCACd,MACA,IACA,IACA,WACA,cACA;AACA,QAAM,YAAY,KAAK,cAAc,iBAAiB,aAAa;AAEnE,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,eAAe,MAAM;AAC3B,QAAM,iBAAiB,OAAO,UAAa,OAAO,SAAY,KAAK;AAEnE,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,UAAM,SAAS;AACf,UAAM,cAAc,CAAC,MAAe,SAAS,OAAO,CAAC,IAAI;AACzD,UAAM,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAC7C,UAAM,UACJ,KAAK,OAAO,SAAY,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAEjE,WACE,KAAK,OAAO,SACR,YACA,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO;AAE1C,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,mBAAmB,CAAC,MACxB,eAAe,KAAK,aAAa,CAAC,CAAC,OAAO;AAC5C,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG;AAAA,MACpD,KAAK;AAAA,IACP,CAAC;AACD,UAAM,eACJ,KAAK,OAAO,SACR,iBACA,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG,iBAAiB,KAAK,EAAE,CAAC;AAE9D,WACE,KAAK,OAAO,SACR,iBACA,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY;AAEpD,QAAI,KAAK,OAAO,QAAW;AACzB,iBAAW,OAAO,KAAK,IAAK,KAAK,KAAiB,KAAK,EAAa,CAAC;AAAA,IACvE;AAEA,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,cAAc,IAAI,KAAK,WAAW;AACpC,UAAM,SAAS;AAEf,QAAI,KAAK,cAAc,MAAM;AAC3B,aAAO,OAAO,KAAK,IAAI,KAAK,cAAc,OAAO,KAAK,KAAK,MAAS;AAEpE,UAAI,KAAK,cAAc,MAAM;AAC3B,mBAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,MAC9C;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport type {\n  FormatterWithPrecision,\n  StringFormatter,\n  TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\nimport { getCachedSeparator } from '../../utils/get-cached-separator.js';\n\n/**\n * Pure function that formats tooltip body content.\n * This can be called from non-React contexts (like utility functions).\n *\n * `formatter` is discriminated by the value type: a `StringFormatter` for\n * categorical axes, a `FormatterWithPrecision` for numerical axes, and a\n * `TimeFrameFormatter` for time axes.\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  const separator = getCachedSeparator(intl);\n\n  let duration: string | undefined;\n  let text = '';\n\n  const primaryValue = v0 ?? v1;\n  const secondaryValue = v0 !== undefined && v1 !== undefined ? v1 : undefined;\n\n  if (primaryValue === undefined) {\n    return { duration, text };\n  }\n\n  const args = {\n    formatter,\n    v0: primaryValue,\n    v1: secondaryValue,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    const format = formatter as StringFormatter | undefined;\n    const formatValue = (v: string) => (format ? format(v) : v);\n    const startText = formatValue(String(args.v0));\n    const endText =\n      args.v1 === undefined ? startText : formatValue(String(args.v1));\n\n    text =\n      args.v1 === undefined\n        ? startText\n        : `${startText} ${separator} ${endText}`;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const percentageSuffix = (v: number) =>\n      toPercentage ? ` (${toPercentage(v)}%)` : '';\n    const formattedStart = `${format(args.v0 as number)}${percentageSuffix(\n      args.v0,\n    )}`;\n    const formattedEnd =\n      args.v1 === undefined\n        ? formattedStart\n        : `${format(args.v1 as number)}${percentageSuffix(args.v1)}`;\n\n    text =\n      args.v1 === undefined\n        ? formattedStart\n        : `${formattedStart} ${separator} ${formattedEnd}`;\n\n    if (args.v1 !== undefined) {\n      duration = format(Math.abs((args.v1 as number) - (args.v0 as number)));\n    }\n\n    return { duration, text };\n  }\n\n  if (isTimeTooltip(args) && formatter) {\n    const format = formatter as TimeFrameFormatter;\n\n    if (args.v0 instanceof Date) {\n      text = format(args.v0, args.v1 instanceof Date ? args.v1 : undefined);\n\n      if (args.v1 instanceof Date) {\n        duration = formatResolution(args.v0, args.v1);\n      }\n    }\n  }\n\n  return { duration, text };\n}\n"],
+  "mappings": "AAEA,SAAS,wBAAwB;AAOjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAU5B,SAAS,kCACd,MACA,IACA,IACA,WACA,cACA;AACA,QAAM,YAAY,mBAAmB,IAAI;AAEzC,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,eAAe,MAAM;AAC3B,QAAM,iBAAiB,OAAO,UAAa,OAAO,SAAY,KAAK;AAEnE,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,UAAM,SAAS;AACf,UAAM,cAAc,CAAC,MAAe,SAAS,OAAO,CAAC,IAAI;AACzD,UAAM,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAC7C,UAAM,UACJ,KAAK,OAAO,SAAY,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAEjE,WACE,KAAK,OAAO,SACR,YACA,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO;AAE1C,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,mBAAmB,CAAC,MACxB,eAAe,KAAK,aAAa,CAAC,CAAC,OAAO;AAC5C,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG;AAAA,MACpD,KAAK;AAAA,IACP,CAAC;AACD,UAAM,eACJ,KAAK,OAAO,SACR,iBACA,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG,iBAAiB,KAAK,EAAE,CAAC;AAE9D,WACE,KAAK,OAAO,SACR,iBACA,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY;AAEpD,QAAI,KAAK,OAAO,QAAW;AACzB,iBAAW,OAAO,KAAK,IAAK,KAAK,KAAiB,KAAK,EAAa,CAAC;AAAA,IACvE;AAEA,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,cAAc,IAAI,KAAK,WAAW;AACpC,UAAM,SAAS;AAEf,QAAI,KAAK,cAAc,MAAM;AAC3B,aAAO,OAAO,KAAK,IAAI,KAAK,cAAc,OAAO,KAAK,KAAK,MAAS;AAEpE,UAAI,KAAK,cAAc,MAAM;AAC3B,mBAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,MAC9C;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.js

@@ -1,17 +1,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
 import { useIntl } from "react-intl";
 import {
   buildSharedTooltipHeader,
   buildSharedTooltipRow
 } from "./sharedXYChartTooltipUtils.js";
 import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { safeGet } from "../../../../core/utils/safe-get.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useBarData } from "../../../hooks/useBarData.js";
 import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
 import { useXYChartColorScales } from "../../../hooks/useXYChartColorScales.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
+function LazySharedTooltipRow({
+  raw,
+  ctx
+}) {
+  const row = buildSharedTooltipRow(raw.result, ctx);
+  const value = row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue;
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip.SeriesItem,
+    {
+      name: row.name,
+      value,
+      color: row.color,
+      actions: row.actions
+    }
+  );
+}
 function SharedXYChartTooltip({
   preferred,
   datapoints
@@ -37,25 +53,10 @@ function SharedXYChartTooltip({
     preferred,
     ctx
   );
-  const ctxRef = useRef(ctx);
-  ctxRef.current = ctx;
-  const prevDatapointsRef = useRef([]);
-  const seriesItemsRef = useRef([]);
-  if (datapoints.length !== prevDatapointsRef.current.length || datapoints.some((d, i) => d !== prevDatapointsRef.current[i])) {
-    prevDatapointsRef.current = datapoints;
-    seriesItemsRef.current = datapoints.map((result) => {
-      const row = buildSharedTooltipRow(
-        result,
-        ctxRef.current
-      );
-      return {
-        name: row.name,
-        value: row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue,
-        color: row.color,
-        actions: row.actions
-      };
-    });
-  }
+  const rows = datapoints.map((result) => ({
+    name: safeGet(seriesToMetadata, result.series).name,
+    result
+  }));
   return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ jsx(
       OverlayTooltip.Header,
@@ -68,10 +69,10 @@ function SharedXYChartTooltip({
     /* @__PURE__ */ jsx(
       OverlayTooltip.Series,
       {
-        data: seriesItemsRef.current,
+        data: rows,
         variant: "shared",
         activeItem: -1,
-        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...item })
+        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(LazySharedTooltipRow, { raw: item, ctx })
       }
     )
   ] });

package/esm/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  buildSharedTooltipHeader,\n  buildSharedTooltipRow,\n} from './sharedXYChartTooltipUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport type { SeriesQueryResult } from '../../../context/XYChartOverlayPerformance.context.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type { TooltipContent } from '../../../types/state.js';\n\nexport function SharedXYChartTooltip({\n  preferred,\n  datapoints,\n}: Readonly<{\n  preferred: TooltipContent;\n  datapoints: SeriesQueryResult[];\n}>) {\n  const { seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n  const formatCategory = useFormatCategory();\n  const { filteredSeriesWithDatapoints } = useBarData();\n\n  const ctx = {\n    seriesToMetadata,\n    axisIdToFormatter,\n    axisIdToScaleDomain,\n    datapointMetadataMap,\n    formatCategory,\n    intl,\n    colorScaleMap,\n    allBarSeries: filteredSeriesWithDatapoints,\n  };\n\n  const { xAxisValue, xAxisDuration, label } = buildSharedTooltipHeader(\n    preferred,\n    ctx,\n  );\n\n  const ctxRef = useRef(ctx);\n  ctxRef.current = ctx;\n\n  const prevDatapointsRef = useRef<SeriesQueryResult[]>([]);\n  const seriesItemsRef = useRef<SeriesItemProps[]>([]);\n\n  if (\n    datapoints.length !== prevDatapointsRef.current.length ||\n    datapoints.some((d, i) => d !== prevDatapointsRef.current[i])\n  ) {\n    prevDatapointsRef.current = datapoints;\n    seriesItemsRef.current = datapoints.map((result) => {\n      const row = buildSharedTooltipRow(\n        result as TooltipContent,\n        ctxRef.current,\n      );\n      return {\n        name: row.name,\n        value: row.yAxisDuration\n          ? `${row.yAxisValue} (${row.yAxisDuration})`\n          : row.yAxisValue,\n        color: row.color,\n        actions: row.actions,\n      };\n    });\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={seriesItemsRef.current}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => <OverlayTooltip.SeriesItem {...item} />}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
-  "mappings": "AA8EI,SACE,KADF;AA9EJ,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAG/B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAGlC,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAGI;AACF,QAAM,EAAE,kBAAkB,qBAAqB,qBAAqB,IAClE,eAAe;AACjB,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,EAAE,6BAA6B,IAAI,WAAW;AAEpD,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB;AAEA,QAAM,EAAE,YAAY,eAAe,MAAM,IAAI;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,QAAM,SAAS,OAAO,GAAG;AACzB,SAAO,UAAU;AAEjB,QAAM,oBAAoB,OAA4B,CAAC,CAAC;AACxD,QAAM,iBAAiB,OAA0B,CAAC,CAAC;AAEnD,MACE,WAAW,WAAW,kBAAkB,QAAQ,UAChD,WAAW,KAAK,CAAC,GAAG,MAAM,MAAM,kBAAkB,QAAQ,CAAC,CAAC,GAC5D;AACA,sBAAkB,UAAU;AAC5B,mBAAe,UAAU,WAAW,IAAI,CAAC,WAAW;AAClD,YAAM,MAAM;AAAA,QACV;AAAA,QACA,OAAO;AAAA,MACT;AACA,aAAO;AAAA,QACL,MAAM,IAAI;AAAA,QACV,OAAO,IAAI,gBACP,GAAG,IAAI,UAAU,KAAK,IAAI,aAAa,MACvC,IAAI;AAAA,QACR,OAAO,IAAI;AAAA,QACX,SAAS,IAAI;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,eAAe;AAAA,QACrB,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SAAS,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM;AAAA;AAAA,IACrE;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport {\n  buildSharedTooltipHeader,\n  buildSharedTooltipRow,\n} from './sharedXYChartTooltipUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesQueryResult } from '../../../context/XYChartOverlayPerformance.context.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type { TooltipContent } from '../../../types/state.js';\n\ntype SharedTooltipCtx = Parameters<typeof buildSharedTooltipRow>[1];\n\ntype LazySharedRow = {\n  name: string;\n  result: SeriesQueryResult;\n};\n\nfunction LazySharedTooltipRow({\n  raw,\n  ctx,\n}: {\n  raw: LazySharedRow;\n  ctx: SharedTooltipCtx;\n}) {\n  const row = buildSharedTooltipRow(raw.result as TooltipContent, ctx);\n  const value = row.yAxisDuration\n    ? `${row.yAxisValue} (${row.yAxisDuration})`\n    : row.yAxisValue;\n\n  return (\n    <OverlayTooltip.SeriesItem\n      name={row.name}\n      value={value}\n      color={row.color}\n      actions={row.actions}\n    />\n  );\n}\n\nexport function SharedXYChartTooltip({\n  preferred,\n  datapoints,\n}: Readonly<{\n  preferred: TooltipContent;\n  datapoints: SeriesQueryResult[];\n}>) {\n  const { seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n  const formatCategory = useFormatCategory();\n  const { filteredSeriesWithDatapoints } = useBarData();\n\n  const ctx = {\n    seriesToMetadata,\n    axisIdToFormatter,\n    axisIdToScaleDomain,\n    datapointMetadataMap,\n    formatCategory,\n    intl,\n    colorScaleMap,\n    allBarSeries: filteredSeriesWithDatapoints,\n  };\n\n  const { xAxisValue, xAxisDuration, label } = buildSharedTooltipHeader(\n    preferred,\n    ctx,\n  );\n\n  const rows: LazySharedRow[] = datapoints.map((result) => ({\n    name: safeGet(seriesToMetadata, result.series).name,\n    result,\n  }));\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={rows}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <LazySharedTooltipRow raw={item} ctx={ctx} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
+  "mappings": "AAqCI,cA+CA,YA/CA;AArCJ,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAExB,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAUzC,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,QAAM,MAAM,sBAAsB,IAAI,QAA0B,GAAG;AACnE,QAAM,QAAQ,IAAI,gBACd,GAAG,IAAI,UAAU,KAAK,IAAI,aAAa,MACvC,IAAI;AAER,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM,IAAI;AAAA,MACV;AAAA,MACA,OAAO,IAAI;AAAA,MACX,SAAS,IAAI;AAAA;AAAA,EACf;AAEJ;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAGI;AACF,QAAM,EAAE,kBAAkB,qBAAqB,qBAAqB,IAClE,eAAe;AACjB,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,EAAE,6BAA6B,IAAI,WAAW;AAEpD,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB;AAEA,QAAM,EAAE,YAAY,eAAe,MAAM,IAAI;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,QAAM,OAAwB,WAAW,IAAI,CAAC,YAAY;AAAA,IACxD,MAAM,QAAQ,kBAAkB,OAAO,MAAM,EAAE;AAAA,IAC/C;AAAA,EACF,EAAE;AAEF,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM;AAAA,QACN,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,wBAAqB,KAAK,MAAM,KAAU;AAAA;AAAA,IAE/C;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/utils/get-cached-separator.js

@@ -0,0 +1,15 @@
+import { XYCHART_MESSAGES } from "../../../messages/messages.js";
+const separatorCache = /* @__PURE__ */ new WeakMap();
+function getCachedSeparator(intl) {
+  const cached = separatorCache.get(intl);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const resolved = intl.formatMessage(XYCHART_MESSAGES.separatorDash);
+  separatorCache.set(intl, resolved);
+  return resolved;
+}
+export {
+  getCachedSeparator
+};
+//# sourceMappingURL=get-cached-separator.js.map

package/esm/charts/xy-chart/components/tooltip/utils/get-cached-separator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/utils/get-cached-separator.ts"],
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { XYCHART_MESSAGES } from '../../../messages/messages.js';\n\nconst separatorCache = new WeakMap<IntlShape, string>();\n\n/**\n * Resolves the static `separatorDash` message via `intl.formatMessage`\n * the first time it is requested for a given `intl` instance, and\n * returns the cached string on every subsequent call.\n *\n * In shared-tooltip mode this helper is hit O(rows) times per\n * mouse-move render; the underlying `formatMessage` call walks\n * formatjs's `deepMergeFormatsAndSetTimeZone` path, which dominated\n * the recorded profile when invoked uncached.\n */\nexport function getCachedSeparator(intl: IntlShape): string {\n  const cached = separatorCache.get(intl);\n  if (cached !== undefined) {\n    return cached;\n  }\n  const resolved = intl.formatMessage(XYCHART_MESSAGES.separatorDash);\n  separatorCache.set(intl, resolved);\n  return resolved;\n}\n"],
+  "mappings": "AAEA,SAAS,wBAAwB;AAEjC,MAAM,iBAAiB,oBAAI,QAA2B;AAY/C,SAAS,mBAAmB,MAAyB;AAC1D,QAAM,SAAS,eAAe,IAAI,IAAI;AACtC,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,EACT;AACA,QAAM,WAAW,KAAK,cAAc,iBAAiB,aAAa;AAClE,iBAAe,IAAI,MAAM,QAAQ;AACjC,SAAO;AACT;",
+  "names": []
+}

package/esm/charts/xy-chart/components/tooltip/utils/get-tooltip-formatter.js

@@ -1,9 +1,9 @@
 import { formatTimeframeToParts } from "@dynatrace-sdk/units";
+import { getCachedSeparator } from "./get-cached-separator.js";
 import { safeGet } from "../../../../core/utils/safe-get.js";
 import { XYCHART_MESSAGES } from "../../../messages/messages.js";
 import { TIME_SCALE_TYPE } from "../../../types/xy-chart.js";
 function getTooltipFormatter(axisConfig, axisIdToFormatter, intl) {
-  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);
   const getFormatter = () => safeGet(axisIdToFormatter, axisConfig.id);
   const formatTimeValue = (from, to) => {
     if (to) {
@@ -25,7 +25,9 @@ function getTooltipFormatter(axisConfig, axisIdToFormatter, intl) {
     return (from, to) => {
       const formatter = getFormatter();
       if (to) {
-        return `${formatter(from)} ${separator} ${formatter(to)}`;
+        return `${formatter(from)} ${getCachedSeparator(intl)} ${formatter(
+          to
+        )}`;
       }
       return formatter(from);
     };

package/esm/charts/xy-chart/components/tooltip/utils/get-tooltip-formatter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/utils/get-tooltip-formatter.ts"],
-  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatTimeframeToParts } from '@dynatrace-sdk/units';\n\nimport type {\n  DateTimeFormatter,\n  FormatterWithPrecision,\n  TimeFrameFormatter,\n} from '../../../../core/types/formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { XYCHART_MESSAGES } from '../../../messages/messages.js';\nimport type {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n} from '../../../types/xy-chart-internals.js';\nimport { TIME_SCALE_TYPE } from '../../../types/xy-chart.js';\n\nexport type TooltipFormatter = FormatterWithPrecision | TimeFrameFormatter;\n\nexport function getTooltipFormatter(\n  axisConfig: Pick<XYChartAxisInternal, 'id' | 'type' | 'formatter'>,\n  axisIdToFormatter: AxisIdToFormatter,\n  intl: IntlShape,\n): TooltipFormatter {\n  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);\n  const getFormatter = () => safeGet(axisIdToFormatter, axisConfig.id);\n\n  const formatTimeValue = (from: Date, to?: Date) => {\n    if (to) {\n      const timeframeParts = formatTimeframeToParts(\n        from,\n        to,\n        intl,\n        true,\n        XYCHART_MESSAGES.separatorDash,\n      );\n      return typeof timeframeParts === 'string'\n        ? timeframeParts\n        : timeframeParts.join(' ');\n    }\n    return formatTimeframeToParts(from, from, intl)[0];\n  };\n\n  if (axisConfig.type === TIME_SCALE_TYPE) {\n    //Default Formatter\n    if (!axisConfig.formatter) {\n      return formatTimeValue;\n    }\n    //Custom Formatter\n    return (from: Date, to?: Date) => {\n      const formatter = getFormatter() as DateTimeFormatter;\n      if (to) {\n        return `${formatter(from)} ${separator} ${formatter(to)}`;\n      }\n      return formatter(from);\n    };\n  }\n  //Any non-time formatter\n  return getFormatter();\n}\n"],
-  "mappings": "AAEA,SAAS,8BAA8B;AAOvC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAKjC,SAAS,uBAAuB;AAIzB,SAAS,oBACd,YACA,mBACA,MACkB;AAClB,QAAM,YAAY,KAAK,cAAc,iBAAiB,aAAa;AACnE,QAAM,eAAe,MAAM,QAAQ,mBAAmB,WAAW,EAAE;AAEnE,QAAM,kBAAkB,CAAC,MAAY,OAAc;AACjD,QAAI,IAAI;AACN,YAAM,iBAAiB;AAAA,QACrB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,MACnB;AACA,aAAO,OAAO,mBAAmB,WAC7B,iBACA,eAAe,KAAK,GAAG;AAAA,IAC7B;AACA,WAAO,uBAAuB,MAAM,MAAM,IAAI,EAAE,CAAC;AAAA,EACnD;AAEA,MAAI,WAAW,SAAS,iBAAiB;AAEvC,QAAI,CAAC,WAAW,WAAW;AACzB,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,MAAY,OAAc;AAChC,YAAM,YAAY,aAAa;AAC/B,UAAI,IAAI;AACN,eAAO,GAAG,UAAU,IAAI,CAAC,IAAI,SAAS,IAAI,UAAU,EAAE,CAAC;AAAA,MACzD;AACA,aAAO,UAAU,IAAI;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,aAAa;AACtB;",
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatTimeframeToParts } from '@dynatrace-sdk/units';\n\nimport { getCachedSeparator } from './get-cached-separator.js';\nimport type {\n  DateTimeFormatter,\n  FormatterWithPrecision,\n  TimeFrameFormatter,\n} from '../../../../core/types/formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { XYCHART_MESSAGES } from '../../../messages/messages.js';\nimport type {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n} from '../../../types/xy-chart-internals.js';\nimport { TIME_SCALE_TYPE } from '../../../types/xy-chart.js';\n\nexport type TooltipFormatter = FormatterWithPrecision | TimeFrameFormatter;\n\nexport function getTooltipFormatter(\n  axisConfig: Pick<XYChartAxisInternal, 'id' | 'type' | 'formatter'>,\n  axisIdToFormatter: AxisIdToFormatter,\n  intl: IntlShape,\n): TooltipFormatter {\n  const getFormatter = () => safeGet(axisIdToFormatter, axisConfig.id);\n\n  const formatTimeValue = (from: Date, to?: Date) => {\n    if (to) {\n      const timeframeParts = formatTimeframeToParts(\n        from,\n        to,\n        intl,\n        true,\n        XYCHART_MESSAGES.separatorDash,\n      );\n      return typeof timeframeParts === 'string'\n        ? timeframeParts\n        : timeframeParts.join(' ');\n    }\n    return formatTimeframeToParts(from, from, intl)[0];\n  };\n\n  if (axisConfig.type === TIME_SCALE_TYPE) {\n    //Default Formatter\n    if (!axisConfig.formatter) {\n      return formatTimeValue;\n    }\n    //Custom Formatter\n    return (from: Date, to?: Date) => {\n      const formatter = getFormatter() as DateTimeFormatter;\n      if (to) {\n        return `${formatter(from)} ${getCachedSeparator(intl)} ${formatter(\n          to,\n        )}`;\n      }\n      return formatter(from);\n    };\n  }\n  //Any non-time formatter\n  return getFormatter();\n}\n"],
+  "mappings": "AAEA,SAAS,8BAA8B;AAEvC,SAAS,0BAA0B;AAMnC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAKjC,SAAS,uBAAuB;AAIzB,SAAS,oBACd,YACA,mBACA,MACkB;AAClB,QAAM,eAAe,MAAM,QAAQ,mBAAmB,WAAW,EAAE;AAEnE,QAAM,kBAAkB,CAAC,MAAY,OAAc;AACjD,QAAI,IAAI;AACN,YAAM,iBAAiB;AAAA,QACrB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,MACnB;AACA,aAAO,OAAO,mBAAmB,WAC7B,iBACA,eAAe,KAAK,GAAG;AAAA,IAC7B;AACA,WAAO,uBAAuB,MAAM,MAAM,IAAI,EAAE,CAAC;AAAA,EACnD;AAEA,MAAI,WAAW,SAAS,iBAAiB;AAEvC,QAAI,CAAC,WAAW,WAAW;AACzB,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,MAAY,OAAc;AAChC,YAAM,YAAY,aAAa;AAC/B,UAAI,IAAI;AACN,eAAO,GAAG,UAAU,IAAI,CAAC,IAAI,mBAAmB,IAAI,CAAC,IAAI;AAAA,UACvD;AAAA,QACF,CAAC;AAAA,MACH;AACA,aAAO,UAAU,IAAI;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,aAAa;AACtB;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-7-1 {
+._1u58xor0-3-8-0 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-7-1 {
+._1u58xor1-3-8-0 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-7-1::after {
+._1u58xor1-3-8-0::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-7-1 {
+._1u58xor2-3-8-0 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-7-1 {
+._1u58xor3-3-8-0 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -1,8 +1,8 @@
 import "./tooltip-styles.css";
-var axisName = "_1u58xor1-3-7-1";
-var axisValue = "_1u58xor2-3-7-1";
-var duration = "_1u58xor3-3-7-1";
-var wrapper = "_1u58xor0-3-7-1";
+var axisName = "_1u58xor1-3-8-0";
+var axisValue = "_1u58xor2-3-8-0";
+var duration = "_1u58xor3-3-8-0";
+var wrapper = "_1u58xor0-3-8-0";
 export {
   axisName,
   axisValue,

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/utils/tooltip-styles.css.ts"],
-  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-7-1';\nexport var axisValue = '_1u58xor2-3-7-1';\nexport var duration = '_1u58xor3-3-7-1';\nexport var wrapper = '_1u58xor0-3-7-1';"],
+  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-8-0';\nexport var axisValue = '_1u58xor2-3-8-0';\nexport var duration = '_1u58xor3-3-8-0';\nexport var wrapper = '_1u58xor0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/xy-chart/constants/defaults.js

@@ -57,6 +57,7 @@ const BAR_STROKE_WIDTH = 5;
 const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 const DISPLAY_NAME = "XYChart";
+const MIN_LABELED_BAR_SIZE = 25;
 export {
   ANNOTATIONS_PADDING_BOTTOM,
   BAR_STROKE_WIDTH,
@@ -69,6 +70,7 @@ export {
   DEFAULT_POINTS_DISPLAY,
   DISPLAY_NAME,
   DISPLAY_UNITS_LIMIT,
+  MIN_LABELED_BAR_SIZE,
   RECT_STROKE_WIDTH,
   XY_CHART_ARIA_LABEL,
   XY_CHART_BOTTOM_AXIS_LABEL,