@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/charts/xy-chart/components/selection/XYChartSelectionArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/selection/XYChartSelectionArea.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { KeyboardEvent } from 'react';\n\nimport { XYChartSelectionAreaTooltip } from './XYChartSelectionAreaTooltip.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { reduceExploreSelect } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { DynamicSelectionArea } from '../../../core/components/selection-area/DynamicSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getSelectionPixels } from '../../../core/utils/get-selection-pixels.js';\nimport { scaleBandInvert } from '../../../core/utils/scale.js';\nimport { useAreaData } from '../../hooks/useAreaData.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../hooks/useBarData.js';\nimport { useDotData } from '../../hooks/useDotData.js';\nimport { useLineData } from '../../hooks/useLineData.js';\nimport { useRectData } from '../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\nimport { isAnyNumericalScale, isCategoricalScale } from '../../types/guards.js';\nimport {\n  AnyXYChartScale,\n  XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\nimport { countDatapointsWithSeriesAndCategories } from '../../utils/count-datapoints-with-series-and-categories.js';\nimport { getSelectedDatapoints } from '../overlay/utils/get-selected-datapoints.js';\nimport { handleFormatter } from '../overlay/utils/handleFormatter.js';\n\nexport const XYChartSelectionArea = () => {\n  const setState = useSetState();\n  const chartRef = useXYChartOverlayRef();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const axesScales = useVisibleAxesScales();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n  const {\n    filteredSeriesWithDatapoints,\n    axes,\n    axesMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n  } = useXYChartData();\n  const axisIdToScales = useXYChartScales();\n  const mode = useInteractionModeState();\n  const { updateSelectionState } = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { seriesToMetadata: dotSeriesToMetadata } = useDotData();\n  const { seriesToMetadata: lineSeriesToMetadata } = useLineData();\n  const { seriesToMetadata: rectSeriesToMetadata } = useRectData();\n  const { seriesToMetadata: barSeriesToMetadata } = useBarData();\n  const { seriesToMetadata: areaSeriesToMetadata } = useAreaData();\n\n  const canZoom = axesMetadata.isZoomEnabled;\n\n  if (isUndefined(selectState) || !chartRef.current) {\n    return null;\n  }\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { start, end, selectionPercentage, finished, accessible, variant } =\n    selectState;\n\n  const handleWrapperKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && canZoom) {\n      chartRef.current?.focus();\n    }\n  };\n\n  const handleSelectionChange = ({\n    selection,\n    accessible,\n  }: {\n    selection: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n    accessible: boolean;\n  }) => {\n    setState(\n      reduceExploreSelect({\n        start: selection[0],\n        end: selection[1],\n        finished: true,\n        accessible,\n        variant,\n        selectionPercentage: getPercentageFromPixel(selection, width),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSelectionState?.({\n        selection,\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const formatterHandler = (\n    config?: XYChartAxisInternal,\n    scale?: AnyXYChartScale,\n  ) => {\n    const axisConfig = {\n      axisType: config?.type,\n      axisScale: scale,\n    };\n    if (config && isAnyNumericalScale(axisConfig)) {\n      return (value: number) =>\n        handleFormatter(\n          config,\n          axesIdToFormatter,\n          axisConfig.axisScale,\n          value,\n          width,\n        );\n    } else if (isCategoricalScale(axisConfig)) {\n      return (value: number) => scaleBandInvert(axisConfig.axisScale)(value);\n    }\n  };\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : end.relative.x;\n\n  const selectedDatapointsPerSeries = getSelectedDatapoints(\n    filteredSeriesWithDatapoints,\n    axisIdToScales,\n    axes,\n    {\n      start: selectionStart,\n      end: selectionEnd,\n    },\n    dotSeriesToMetadata,\n    lineSeriesToMetadata,\n    rectSeriesToMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    barSeriesToMetadata,\n    areaSeriesToMetadata,\n  );\n\n  const selectionPosition: [\n    RelativeAbsolutePosition,\n    RelativeAbsolutePosition,\n  ] = finished\n    ? getSelectionPixels(selectionPercentage, width, [start, end])\n    : [start, end];\n\n  const selectedDatapoints = selectedDatapointsPerSeries.map(\n    (data) => data.datapoints,\n  );\n\n  const datapointCounts = countDatapointsWithSeriesAndCategories(\n    selectedDatapoints,\n    filteredSeriesWithDatapoints,\n    axes,\n  );\n\n  return (\n    <>\n      {variant === 'select' ? (\n        <XYChartSelectionAreaTooltip\n          {...datapointCounts}\n          selectedDatapointsPerSeries={selectedDatapointsPerSeries}\n        />\n      ) : null}\n      <DynamicSelectionArea\n        selection={selectionPosition}\n        chartRef={chartRef}\n        variant={variant}\n        focusable={accessible}\n        interactable={finished}\n        bottomFormatter={formatterHandler(axesConfig.bottom, axesScales.bottom)}\n        topFormatter={formatterHandler(axesConfig.top, axesScales.top)}\n        onKeyDown={handleWrapperKeyDown}\n        onSelectionChange={handleSelectionChange}\n        isBottomLabelRotated={isBottomLabelRotated}\n        isTopLabelRotated={isTopLabelRotated}\n        selectionAreaRef={selectionAreaRef}\n        hasMagnifiers={\n          !isUndefined(axesConfig.bottom) || !isUndefined(axesConfig.top)\n        }\n      />\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { KeyboardEvent } from 'react';\n\nimport { XYChartSelectionAreaTooltip } from './XYChartSelectionAreaTooltip.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { DynamicSelectionArea } from '../../../core/components/selection-area/DynamicSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getSelectionPixels } from '../../../core/utils/get-selection-pixels.js';\nimport { scaleBandInvert } from '../../../core/utils/scale.js';\nimport { useAreaData } from '../../hooks/useAreaData.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../hooks/useBarData.js';\nimport { useDotData } from '../../hooks/useDotData.js';\nimport { useLineData } from '../../hooks/useLineData.js';\nimport { useRectData } from '../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { reduceExploreSelect } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\nimport { isAnyNumericalScale, isCategoricalScale } from '../../types/guards.js';\nimport {\n  AnyXYChartScale,\n  XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\nimport { countDatapointsWithSeriesAndCategories } from '../../utils/count-datapoints-with-series-and-categories.js';\nimport { getSelectedDatapoints } from '../overlay/utils/get-selected-datapoints.js';\nimport { handleFormatter } from '../overlay/utils/handleFormatter.js';\n\nexport const XYChartSelectionArea = () => {\n  const setState = useSetState();\n  const { overlayRef: chartRef } = useOverlay();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const axesScales = useVisibleAxesScales();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n  const {\n    filteredSeriesWithDatapoints,\n    axes,\n    axesMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n  } = useXYChartData();\n  const axisIdToScales = useXYChartScales();\n  const mode = useInteractionModeState();\n  const { updateSelectionState } = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { seriesToMetadata: dotSeriesToMetadata } = useDotData();\n  const { seriesToMetadata: lineSeriesToMetadata } = useLineData();\n  const { seriesToMetadata: rectSeriesToMetadata } = useRectData();\n  const { seriesToMetadata: barSeriesToMetadata } = useBarData();\n  const { seriesToMetadata: areaSeriesToMetadata } = useAreaData();\n\n  const canZoom = axesMetadata.isZoomEnabled;\n\n  if (isUndefined(selectState) || !chartRef.current) {\n    return null;\n  }\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { start, end, selectionPercentage, finished, accessible, variant } =\n    selectState;\n\n  const handleWrapperKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && canZoom) {\n      chartRef.current?.focus();\n    }\n  };\n\n  const handleSelectionChange = ({\n    selection,\n    accessible,\n  }: {\n    selection: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n    accessible: boolean;\n  }) => {\n    setState(\n      reduceExploreSelect({\n        start: selection[0],\n        end: selection[1],\n        finished: true,\n        accessible,\n        variant,\n        selectionPercentage: getPercentageFromPixel(selection, width),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSelectionState?.({\n        selection,\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const formatterHandler = (\n    config?: XYChartAxisInternal,\n    scale?: AnyXYChartScale,\n  ) => {\n    const axisConfig = {\n      axisType: config?.type,\n      axisScale: scale,\n    };\n    if (config && isAnyNumericalScale(axisConfig)) {\n      return (value: number) =>\n        handleFormatter(\n          config,\n          axesIdToFormatter,\n          axisConfig.axisScale,\n          value,\n          width,\n        );\n    } else if (isCategoricalScale(axisConfig)) {\n      return (value: number) => scaleBandInvert(axisConfig.axisScale)(value);\n    }\n  };\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : end.relative.x;\n\n  const selectedDatapointsPerSeries = getSelectedDatapoints(\n    filteredSeriesWithDatapoints,\n    axisIdToScales,\n    axes,\n    {\n      start: selectionStart,\n      end: selectionEnd,\n    },\n    dotSeriesToMetadata,\n    lineSeriesToMetadata,\n    rectSeriesToMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    barSeriesToMetadata,\n    areaSeriesToMetadata,\n  );\n\n  const selectionPosition: [\n    RelativeAbsolutePosition,\n    RelativeAbsolutePosition,\n  ] = finished\n    ? getSelectionPixels(selectionPercentage, width, [start, end])\n    : [start, end];\n\n  const selectedDatapoints = selectedDatapointsPerSeries.map(\n    (data) => data.datapoints,\n  );\n\n  const datapointCounts = countDatapointsWithSeriesAndCategories(\n    selectedDatapoints,\n    filteredSeriesWithDatapoints,\n    axes,\n  );\n\n  return (\n    <>\n      {variant === 'select' ? (\n        <XYChartSelectionAreaTooltip\n          {...datapointCounts}\n          selectedDatapointsPerSeries={selectedDatapointsPerSeries}\n        />\n      ) : null}\n      <DynamicSelectionArea\n        selection={selectionPosition}\n        chartRef={chartRef}\n        variant={variant}\n        focusable={accessible}\n        interactable={finished}\n        bottomFormatter={formatterHandler(axesConfig.bottom, axesScales.bottom)}\n        topFormatter={formatterHandler(axesConfig.top, axesScales.top)}\n        onKeyDown={handleWrapperKeyDown}\n        onSelectionChange={handleSelectionChange}\n        isBottomLabelRotated={isBottomLabelRotated}\n        isTopLabelRotated={isTopLabelRotated}\n        selectionAreaRef={selectionAreaRef}\n        hasMagnifiers={\n          !isUndefined(axesConfig.bottom) || !isUndefined(axesConfig.top)\n        }\n      />\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["accessible"]
 }

package/esm/charts/xy-chart/components/selection/XYChartSelectionAreaTooltip.js

@@ -4,13 +4,13 @@ import { useIntl } from "react-intl";
 import { ZoomToSelectionIcon } from "@dynatrace/strato-icons";
 import { TooltipHeader } from "./TooltipHeader.js";
 import { getCustomContextMenuItems } from "../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js";
+import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import { SelectionTooltipWithAsyncActions } from "../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js";
 import { getSelectionTooltipPosition } from "../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js";
 import { ChartTooltip } from "../../../core/components/tooltip/ChartTooltip/ChartTooltip.js";
 import { useScrollResponsiveChartBounds } from "../../../core/hooks/useScrollResponsiveChartBounds.js";
 import { useSelectConfig } from "../../hooks/useSelectConfig.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
-import { useXYChartOverlayRef } from "../../hooks/useXYChartOverlayRef.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
 import { useSelectState } from "../../store/selectors.js";
 import { getDatapointsMessage } from "../../utils/get-datapoints-message.js";
@@ -74,7 +74,7 @@ const DynamicSelectionAreaTooltip = ({
 }) => {
   const intl = useIntl();
   const zoomToSelection = useZoomToSelection();
-  const chartRef = useXYChartOverlayRef();
+  const { overlayRef: chartRef } = useOverlay();
   const chartBounds = useScrollResponsiveChartBounds(chartRef, true)();
   if (isUndefined(selectState) || !chartBounds) {
     return null;

package/esm/charts/xy-chart/components/selection/XYChartSelectionAreaTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/selection/XYChartSelectionAreaTooltip.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { TooltipHeader } from './TooltipHeader.js';\nimport { getCustomContextMenuItems } from '../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { SelectionTooltipWithAsyncActions } from '../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js';\nimport { getSelectionTooltipPosition } from '../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { useScrollResponsiveChartBounds } from '../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useSelectState } from '../../store/selectors.js';\nimport type {\n  XYChartSelectedDomains,\n  XYChartSelectedSeries,\n} from '../../types/xy-chart.js';\nimport { getDatapointsMessage } from '../../utils/get-datapoints-message.js';\nimport { useZoomToSelection } from '../overlay/hooks/useZoomToSelection.js';\nimport type { XYChartSelectedDatapointsPerSeries } from '../overlay/utils/get-selected-datapoints.js';\n\nexport const XYChartSelectionAreaTooltip = ({\n  selectedDatapoints,\n  totalSeries: seriesCount,\n  totalCategories: categoriesCount,\n  selectedDatapointsPerSeries,\n}: {\n  selectedDatapoints: number;\n  totalSeries: number;\n  totalCategories: number;\n  selectedDatapointsPerSeries: XYChartSelectedDatapointsPerSeries[];\n}) => {\n  const selectState = useSelectState();\n  const { axesMetadata, seriesWithDatapoints } = useXYChartData();\n  const selectConfig = useSelectConfig();\n\n  if (isUndefined(selectState)) {\n    return null;\n  }\n\n  const selectedDatapointsWithData = selectedDatapointsPerSeries.filter(\n    (data) => data.datapoints.length,\n  );\n\n  const selectedSeries = selectedDatapointsWithData.map((data) => {\n    return {\n      [data.seriesName]:\n        data.datapoints as XYChartSelectedSeries[number][string],\n    };\n  });\n\n  const selectionDomain: XYChartSelectedDomains =\n    selectedDatapointsWithData.map((data) => {\n      return {\n        [data.seriesName]: data.domain as [Date, Date] | [number, number],\n      };\n    });\n\n  const datapointsMessage = getDatapointsMessage(\n    selectedDatapoints,\n    seriesCount,\n    seriesWithDatapoints.length,\n    categoriesCount,\n  );\n\n  return (\n    <DynamicSelectionAreaTooltip\n      selectedDatapoints={selectedDatapoints}\n      selectState={selectState}\n      categoriesCount={categoriesCount}\n      seriesCount={seriesCount}\n      axesMetadata={axesMetadata}\n      selectedSeries={selectedSeries}\n      selectionDomain={selectionDomain}\n      selectConfig={selectConfig}\n      datapointsMessage={datapointsMessage}\n    />\n  );\n};\n\nconst DynamicSelectionAreaTooltip = ({\n  selectedDatapoints,\n  selectState,\n  categoriesCount,\n  seriesCount,\n  axesMetadata,\n  selectedSeries,\n  selectionDomain,\n  selectConfig,\n  datapointsMessage,\n}: {\n  selectedDatapoints: number;\n  selectState: ReturnType<typeof useSelectState>;\n  categoriesCount: number;\n  seriesCount: number;\n  axesMetadata: ReturnType<typeof useXYChartData>['axesMetadata'];\n  selectedSeries: XYChartSelectedSeries;\n  selectionDomain: XYChartSelectedDomains;\n  selectConfig: ReturnType<typeof useSelectConfig>;\n  datapointsMessage: ReturnType<typeof getDatapointsMessage>;\n}) => {\n  const intl = useIntl();\n  const zoomToSelection = useZoomToSelection();\n  const chartRef = useXYChartOverlayRef();\n  const chartBounds = useScrollResponsiveChartBounds(chartRef, true)();\n\n  if (isUndefined(selectState) || !chartBounds) {\n    return null;\n  }\n\n  const tooltipPosition = getSelectionTooltipPosition(selectState, chartBounds);\n\n  return (\n    <SelectionTooltipWithAsyncActions\n      actions={() => {\n        const actions = selectConfig?.actions;\n        return (\n          actions &&\n          (async () => actions(selectedSeries, selectionDomain))().then(\n            getCustomContextMenuItems,\n          )\n        );\n      }}\n      selectFinished={selectState.finished}\n      header={<TooltipHeader />}\n      headerSubtext={intl.formatMessage(datapointsMessage, {\n        count: selectedDatapoints,\n        seriesCount: seriesCount + categoriesCount,\n      })}\n      position={tooltipPosition}\n      zoomEnabled={axesMetadata.isZoomEnabled}\n      range={selectState.selectionPercentage || [0, 0]}\n    >\n      {axesMetadata.isZoomEnabled ? (\n        <ChartTooltip.ActionItem\n          text={intl.formatMessage(XYCHART_MESSAGES.zoomToSelection)}\n          icon={<ZoomToSelectionIcon />}\n          onMouseUp={(event) => {\n            event.stopPropagation();\n            zoomToSelection();\n          }}\n          shortcut=\"\u23CE\"\n        />\n      ) : null}\n    </SelectionTooltipWithAsyncActions>\n  );\n};\n"],
-  "mappings": "AAqEI;AArEJ,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAK/B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAG5B,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AACF,MAKM;AACJ,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,qBAAqB,IAAI,eAAe;AAC9D,QAAM,eAAe,gBAAgB;AAErC,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,6BAA6B,4BAA4B;AAAA,IAC7D,CAAC,SAAS,KAAK,WAAW;AAAA,EAC5B;AAEA,QAAM,iBAAiB,2BAA2B,IAAI,CAAC,SAAS;AAC9D,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GACd,KAAK;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,kBACJ,2BAA2B,IAAI,CAAC,SAAS;AACvC,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GAAG,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,WAAW,qBAAqB;AACtC,QAAM,cAAc,+BAA+B,UAAU,IAAI,EAAE;AAEnE,MAAI,YAAY,WAAW,KAAK,CAAC,aAAa;AAC5C,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,4BAA4B,aAAa,WAAW;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,cAAM,UAAU,cAAc;AAC9B,eACE,YACC,YAAY,QAAQ,gBAAgB,eAAe,GAAG,EAAE;AAAA,UACvD;AAAA,QACF;AAAA,MAEJ;AAAA,MACA,gBAAgB,YAAY;AAAA,MAC5B,QAAQ,oBAAC,iBAAc;AAAA,MACvB,eAAe,KAAK,cAAc,mBAAmB;AAAA,QACnD,OAAO;AAAA,QACP,aAAa,cAAc;AAAA,MAC7B,CAAC;AAAA,MACD,UAAU;AAAA,MACV,aAAa,aAAa;AAAA,MAC1B,OAAO,YAAY,uBAAuB,CAAC,GAAG,CAAC;AAAA,MAE9C,uBAAa,gBACZ;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACC,MAAM,KAAK,cAAc,iBAAiB,eAAe;AAAA,UACzD,MAAM,oBAAC,uBAAoB;AAAA,UAC3B,WAAW,CAAC,UAAU;AACpB,kBAAM,gBAAgB;AACtB,4BAAgB;AAAA,UAClB;AAAA,UACA,UAAS;AAAA;AAAA,MACX,IACE;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { TooltipHeader } from './TooltipHeader.js';\nimport { getCustomContextMenuItems } from '../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { SelectionTooltipWithAsyncActions } from '../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js';\nimport { getSelectionTooltipPosition } from '../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { useScrollResponsiveChartBounds } from '../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useSelectState } from '../../store/selectors.js';\nimport type {\n  XYChartSelectedDomains,\n  XYChartSelectedSeries,\n} from '../../types/xy-chart.js';\nimport { getDatapointsMessage } from '../../utils/get-datapoints-message.js';\nimport { useZoomToSelection } from '../overlay/hooks/useZoomToSelection.js';\nimport type { XYChartSelectedDatapointsPerSeries } from '../overlay/utils/get-selected-datapoints.js';\n\nexport const XYChartSelectionAreaTooltip = ({\n  selectedDatapoints,\n  totalSeries: seriesCount,\n  totalCategories: categoriesCount,\n  selectedDatapointsPerSeries,\n}: {\n  selectedDatapoints: number;\n  totalSeries: number;\n  totalCategories: number;\n  selectedDatapointsPerSeries: XYChartSelectedDatapointsPerSeries[];\n}) => {\n  const selectState = useSelectState();\n  const { axesMetadata, seriesWithDatapoints } = useXYChartData();\n  const selectConfig = useSelectConfig();\n\n  if (isUndefined(selectState)) {\n    return null;\n  }\n\n  const selectedDatapointsWithData = selectedDatapointsPerSeries.filter(\n    (data) => data.datapoints.length,\n  );\n\n  const selectedSeries = selectedDatapointsWithData.map((data) => {\n    return {\n      [data.seriesName]:\n        data.datapoints as XYChartSelectedSeries[number][string],\n    };\n  });\n\n  const selectionDomain: XYChartSelectedDomains =\n    selectedDatapointsWithData.map((data) => {\n      return {\n        [data.seriesName]: data.domain as [Date, Date] | [number, number],\n      };\n    });\n\n  const datapointsMessage = getDatapointsMessage(\n    selectedDatapoints,\n    seriesCount,\n    seriesWithDatapoints.length,\n    categoriesCount,\n  );\n\n  return (\n    <DynamicSelectionAreaTooltip\n      selectedDatapoints={selectedDatapoints}\n      selectState={selectState}\n      categoriesCount={categoriesCount}\n      seriesCount={seriesCount}\n      axesMetadata={axesMetadata}\n      selectedSeries={selectedSeries}\n      selectionDomain={selectionDomain}\n      selectConfig={selectConfig}\n      datapointsMessage={datapointsMessage}\n    />\n  );\n};\n\nconst DynamicSelectionAreaTooltip = ({\n  selectedDatapoints,\n  selectState,\n  categoriesCount,\n  seriesCount,\n  axesMetadata,\n  selectedSeries,\n  selectionDomain,\n  selectConfig,\n  datapointsMessage,\n}: {\n  selectedDatapoints: number;\n  selectState: ReturnType<typeof useSelectState>;\n  categoriesCount: number;\n  seriesCount: number;\n  axesMetadata: ReturnType<typeof useXYChartData>['axesMetadata'];\n  selectedSeries: XYChartSelectedSeries;\n  selectionDomain: XYChartSelectedDomains;\n  selectConfig: ReturnType<typeof useSelectConfig>;\n  datapointsMessage: ReturnType<typeof getDatapointsMessage>;\n}) => {\n  const intl = useIntl();\n  const zoomToSelection = useZoomToSelection();\n  const { overlayRef: chartRef } = useOverlay();\n  const chartBounds = useScrollResponsiveChartBounds(chartRef, true)();\n\n  if (isUndefined(selectState) || !chartBounds) {\n    return null;\n  }\n\n  const tooltipPosition = getSelectionTooltipPosition(selectState, chartBounds);\n\n  return (\n    <SelectionTooltipWithAsyncActions\n      actions={() => {\n        const actions = selectConfig?.actions;\n        return (\n          actions &&\n          (async () => actions(selectedSeries, selectionDomain))().then(\n            getCustomContextMenuItems,\n          )\n        );\n      }}\n      selectFinished={selectState.finished}\n      header={<TooltipHeader />}\n      headerSubtext={intl.formatMessage(datapointsMessage, {\n        count: selectedDatapoints,\n        seriesCount: seriesCount + categoriesCount,\n      })}\n      position={tooltipPosition}\n      zoomEnabled={axesMetadata.isZoomEnabled}\n      range={selectState.selectionPercentage || [0, 0]}\n    >\n      {axesMetadata.isZoomEnabled ? (\n        <ChartTooltip.ActionItem\n          text={intl.formatMessage(XYCHART_MESSAGES.zoomToSelection)}\n          icon={<ZoomToSelectionIcon />}\n          onMouseUp={(event) => {\n            event.stopPropagation();\n            zoomToSelection();\n          }}\n          shortcut=\"\u23CE\"\n        />\n      ) : null}\n    </SelectionTooltipWithAsyncActions>\n  );\n};\n"],
+  "mappings": "AAqEI;AArEJ,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAK/B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAG5B,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AACF,MAKM;AACJ,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,qBAAqB,IAAI,eAAe;AAC9D,QAAM,eAAe,gBAAgB;AAErC,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,6BAA6B,4BAA4B;AAAA,IAC7D,CAAC,SAAS,KAAK,WAAW;AAAA,EAC5B;AAEA,QAAM,iBAAiB,2BAA2B,IAAI,CAAC,SAAS;AAC9D,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GACd,KAAK;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,kBACJ,2BAA2B,IAAI,CAAC,SAAS;AACvC,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GAAG,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,EAAE,YAAY,SAAS,IAAI,WAAW;AAC5C,QAAM,cAAc,+BAA+B,UAAU,IAAI,EAAE;AAEnE,MAAI,YAAY,WAAW,KAAK,CAAC,aAAa;AAC5C,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,4BAA4B,aAAa,WAAW;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,cAAM,UAAU,cAAc;AAC9B,eACE,YACC,YAAY,QAAQ,gBAAgB,eAAe,GAAG,EAAE;AAAA,UACvD;AAAA,QACF;AAAA,MAEJ;AAAA,MACA,gBAAgB,YAAY;AAAA,MAC5B,QAAQ,oBAAC,iBAAc;AAAA,MACvB,eAAe,KAAK,cAAc,mBAAmB;AAAA,QACnD,OAAO;AAAA,QACP,aAAa,cAAc;AAAA,MAC7B,CAAC;AAAA,MACD,UAAU;AAAA,MACV,aAAa,aAAa;AAAA,MAC1B,OAAO,YAAY,uBAAuB,CAAC,GAAG,CAAC;AAAA,MAE9C,uBAAa,gBACZ;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACC,MAAM,KAAK,cAAc,iBAAiB,eAAe;AAAA,UACzD,MAAM,oBAAC,uBAAoB;AAAA,UAC3B,WAAW,CAAC,UAAU;AACpB,kBAAM,gBAAgB;AACtB,4BAAgB;AAAA,UAClB;AAAA,UACA,UAAS;AAAA;AAAA,MACX,IACE;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

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

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-2-1 {
+._1mfu0sw0-3-3-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-2-1 _13lzg4k0-3-2-1";
+var thresholdPlot = "_1mfu0sw0-3-3-0 _13lzg4k0-3-3-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-2-1 _13lzg4k0-3-2-1';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-3-0 _13lzg4k0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ExploreButton.js

@@ -8,21 +8,19 @@ import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGr
 import { KeyboardControls } from "../../../core/components/interactions-overlay/constants.js";
 import { INTERACTION_MODE } from "../../../core/components/interactions-overlay/types.js";
 import { calculateInitialSelectionAreaPositions } from "../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js";
-import {
-  reduceExploreCancelAll,
-  reduceExploreSelect
-} from "../../../core/components/interactions-state-helpers/reducers/explore-reducers.js";
-import {
-  reduceInteractionMode,
-  reduceSelectionAreaVariant
-} from "../../../core/components/interactions-state-helpers/reducers/mode-reducers.js";
+import { reduceSelectionAreaVariant } from "../../../core/components/interactions-state-helpers/reducers/mode-reducers.js";
+import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { useToolbarContext } from "../../../core/components/toolbar/hooks/useToolbarContext.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import { getPercentageFromPixel } from "../../../core/utils/get-percentage-from-pixel.js";
-import { useXYChartOverlayRef } from "../../hooks/useXYChartOverlayRef.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
+import { reduceInteractionMode } from "../../store/reduce-interaction-mode.js";
+import {
+  reduceExploreCancelAll,
+  reduceExploreSelect
+} from "../../store/reducer-explorer.js";
 import {
   useInteractionModeState,
   useSelectState,
@@ -34,7 +32,7 @@ const ExploreButton = (props) => {
   const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Explore);
   const intl = useIntl();
   const interactionMode = useInteractionModeState();
-  const chartRef = useXYChartOverlayRef();
+  const { overlayRef: chartRef } = useOverlay();
   const { width } = useGridPlotSize();
   const { resetSelectionState } = useSynchronizedSelection();
   const { updateLastItemSelected } = useToolbarContext();

package/esm/charts/xy-chart/components/toolbar/ExploreButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ExploreButton.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CrosshairIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useToolbarContext } from '../../../core/components/toolbar/hooks/useToolbarContext.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ExploreButton = (props: { placement: 'menu' | 'auto' }) => {\n  const setState = useSetState();\n  const exploreButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Explore);\n  const intl = useIntl();\n  const interactionMode = useInteractionModeState();\n  const chartRef = useXYChartOverlayRef();\n  const { width } = useGridPlotSize();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const { updateLastItemSelected } = useToolbarContext();\n  const selectState = useSelectState();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Explore;\n\n  const createInitialSelectionArea = () => {\n    if (!isNil(chartRef.current)) {\n      const bounds = chartRef.current.getBoundingClientRect();\n\n      const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n      setState(\n        reduceExploreSelect({\n          start,\n          end,\n          finished: true,\n          accessible: true,\n          variant: 'select',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleClick = () => {\n    if (interactionMode !== 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('select');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    updateLastItemSelected(INTERACTION_MODE.Explore);\n  };\n\n  const handleKeyDown = () => {\n    setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    createInitialSelectionArea();\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={exploreButtonRef}\n      prefixIcon={<CrosshairIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)}\n      tooltipKeyShortcut={\n        KeyboardControls.KEYBOARD_EXPLORE_MODE_SHORTCUT_ALTERNATIVE\n      }\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(handleKeyDown)}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      placement={props.placement}\n      data-dt-name=\"ToolbarExploreMode\"\n    />\n  );\n};\n\nExploreButton['displayName'] = 'ExploreButton';\n"],
-  "mappings": "AA2FkB;AA3FlB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,gBAAgB,CAAC,UAA0C;AACtE,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,WAAW,uBAAuB,iBAAiB,OAAO;AAChE,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,qBAAqB;AACtC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AACrD,QAAM,cAAc,eAAe;AAEnC,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,6BAA6B,MAAM;AACvC,QAAI,CAAC,MAAM,SAAS,OAAO,GAAG;AAC5B,YAAM,SAAS,SAAS,QAAQ,sBAAsB;AAEtD,YAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE;AAAA,QACE,oBAAoB;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,QACjE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,oBAAoB,WAAW;AACjC,eAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,IAC1D;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,QAAQ;AAAA,MACrC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,2BAAuB,iBAAiB,OAAO;AAAA,EACjD;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,sBAAsB,iBAAiB,OAAO,CAAC;AACxD,+BAA2B;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,oBACE,iBAAiB;AAAA,MAEnB,UAAU;AAAA,MACV,WAAW,oBAAoB,aAAa;AAAA,MAC5C,SAAS;AAAA,MACT;AAAA,MACA,WAAW,MAAM;AAAA,MACjB,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,cAAc,aAAa,IAAI;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CrosshairIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport { reduceSelectionAreaVariant } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useToolbarContext } from '../../../core/components/toolbar/hooks/useToolbarContext.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ExploreButton = (props: { placement: 'menu' | 'auto' }) => {\n  const setState = useSetState();\n  const exploreButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Explore);\n  const intl = useIntl();\n  const interactionMode = useInteractionModeState();\n  const { overlayRef: chartRef } = useOverlay();\n  const { width } = useGridPlotSize();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const { updateLastItemSelected } = useToolbarContext();\n  const selectState = useSelectState();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Explore;\n\n  const createInitialSelectionArea = () => {\n    if (!isNil(chartRef.current)) {\n      const bounds = chartRef.current.getBoundingClientRect();\n\n      const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n      setState(\n        reduceExploreSelect({\n          start,\n          end,\n          finished: true,\n          accessible: true,\n          variant: 'select',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleClick = () => {\n    if (interactionMode !== 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('select');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    updateLastItemSelected(INTERACTION_MODE.Explore);\n  };\n\n  const handleKeyDown = () => {\n    setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    createInitialSelectionArea();\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={exploreButtonRef}\n      prefixIcon={<CrosshairIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)}\n      tooltipKeyShortcut={\n        KeyboardControls.KEYBOARD_EXPLORE_MODE_SHORTCUT_ALTERNATIVE\n      }\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(handleKeyDown)}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      placement={props.placement}\n      data-dt-name=\"ToolbarExploreMode\"\n    />\n  );\n};\n\nExploreButton['displayName'] = 'ExploreButton';\n"],
+  "mappings": "AAyFkB;AAzFlB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD,SAAS,kCAAkC;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,gBAAgB,CAAC,UAA0C;AACtE,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,WAAW,uBAAuB,iBAAiB,OAAO;AAChE,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,YAAY,SAAS,IAAI,WAAW;AAC5C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AACrD,QAAM,cAAc,eAAe;AAEnC,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,6BAA6B,MAAM;AACvC,QAAI,CAAC,MAAM,SAAS,OAAO,GAAG;AAC5B,YAAM,SAAS,SAAS,QAAQ,sBAAsB;AAEtD,YAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE;AAAA,QACE,oBAAoB;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,QACjE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,oBAAoB,WAAW;AACjC,eAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,IAC1D;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,QAAQ;AAAA,MACrC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,2BAAuB,iBAAiB,OAAO;AAAA,EACjD;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,sBAAsB,iBAAiB,OAAO,CAAC;AACxD,+BAA2B;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,oBACE,iBAAiB;AAAA,MAEnB,UAAU;AAAA,MACV,WAAW,oBAAoB,aAAa;AAAA,MAC5C,SAAS;AAAA,MACT;AAAA,MACA,WAAW,MAAM;AAAA,MACjB,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,cAAc,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/PanButton.js

@@ -5,14 +5,14 @@ import { PanHorizontalIcon } from "@dynatrace/strato-icons";
 import { allowWhenKeyIsEnter } from "./utils.js";
 import { KeyboardControls } from "../../../core/components/interactions-overlay/constants.js";
 import { INTERACTION_MODE } from "../../../core/components/interactions-overlay/types.js";
-import { reduceExploreCancelAll } from "../../../core/components/interactions-state-helpers/reducers/explore-reducers.js";
-import { reduceInteractionMode } from "../../../core/components/interactions-state-helpers/reducers/mode-reducers.js";
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { TOOLBAR_MESSAGES } from "../../../core/components/toolbar/messages.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import { getKeyShortcutByAgent } from "../../../core/utils/get-key-shortcut-by-agent.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
+import { reduceInteractionMode } from "../../store/reduce-interaction-mode.js";
+import { reduceExploreCancelAll } from "../../store/reducer-explorer.js";
 import {
   useInteractionModeState,
   useSetState,

package/esm/charts/xy-chart/components/toolbar/PanButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/PanButton.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { reduceExploreCancelAll } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\n\nexport const PanButton = () => {\n  const setState = useSetState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { zoomOutEnabled } = useZoomState();\n  const interactionMode = useInteractionModeState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const action = () => {\n    resetSelectionState?.();\n    setState(reduceExploreCancelAll);\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'ALT',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      onClick={action}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarPanMode\"\n    />\n  );\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
-  "mappings": "AAgDkB;AAhDlB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,SAAS,MAAM;AACnB,0BAAsB;AACtB,aAAS,sBAAsB;AAC/B,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,sCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,iBAAiB,WAAW;AAAA,MAC5D;AAAA,MACA,UAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,UAAU,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport { reduceExploreCancelAll } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\n\nexport const PanButton = () => {\n  const setState = useSetState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { zoomOutEnabled } = useZoomState();\n  const interactionMode = useInteractionModeState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const action = () => {\n    resetSelectionState?.();\n    setState(reduceExploreCancelAll);\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'ALT',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      onClick={action}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarPanMode\"\n    />\n  );\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
+  "mappings": "AAgDkB;AAhDlB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,SAAS,MAAM;AACnB,0BAAsB;AACtB,aAAS,sBAAsB;AAC/B,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,sCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,iBAAiB,WAAW;AAAA,MAC5D;AAAA,MACA,UAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,UAAU,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ZoomModeButton.js

@@ -6,22 +6,20 @@ import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGr
 import { KeyboardControls } from "../../../core/components/interactions-overlay/constants.js";
 import { INTERACTION_MODE } from "../../../core/components/interactions-overlay/types.js";
 import { calculateInitialSelectionAreaPositions } from "../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js";
-import {
-  reduceExploreCancelAll,
-  reduceExploreSelect
-} from "../../../core/components/interactions-state-helpers/reducers/explore-reducers.js";
-import {
-  reduceInteractionMode,
-  reduceSelectionAreaVariant
-} from "../../../core/components/interactions-state-helpers/reducers/mode-reducers.js";
+import { reduceSelectionAreaVariant } from "../../../core/components/interactions-state-helpers/reducers/mode-reducers.js";
+import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { TOOLBAR_MESSAGES } from "../../../core/components/toolbar/messages.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import { getKeyShortcutByAgent } from "../../../core/utils/get-key-shortcut-by-agent.js";
 import { getPercentageFromPixel } from "../../../core/utils/get-percentage-from-pixel.js";
-import { useXYChartOverlayRef } from "../../hooks/useXYChartOverlayRef.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
+import { reduceInteractionMode } from "../../store/reduce-interaction-mode.js";
+import {
+  reduceExploreCancelAll,
+  reduceExploreSelect
+} from "../../store/reducer-explorer.js";
 import {
   useInteractionModeState,
   useSelectState,
@@ -31,7 +29,7 @@ const ZoomModeButton = () => {
   const setState = useSetState();
   const interactionMode = useInteractionModeState();
   const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);
-  const overlayRef = useXYChartOverlayRef();
+  const { overlayRef } = useOverlay();
   const intl = useIntl();
   const selectState = useSelectState();
   const { width } = useGridPlotSize();

package/esm/charts/xy-chart/components/toolbar/ZoomModeButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ZoomModeButton.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useXYChartOverlayRef();\n  const intl = useIntl();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const handleZoomMode = () => {\n    if (interactionMode !== 'zoom') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('zoom');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      if (!isNil(overlayRef.current)) {\n        const bounds = overlayRef.current.getBoundingClientRect();\n\n        const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n        if (interactionMode !== INTERACTION_MODE.Explore) {\n          setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n        }\n\n        setState(\n          reduceExploreSelect({\n            start,\n            end,\n            finished: true,\n            accessible: true,\n            variant: 'zoom',\n            selectionPercentage: getPercentageFromPixel([start, end], width),\n          }),\n        );\n      }\n    }\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'CONTROL',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeZoom)}\n      onClick={handleZoomMode}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarZoomMode\"\n    />\n  );\n};\n"],
-  "mappings": "AA8FkB;AA9FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,qBAAqB;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,oBAAoB,QAAQ;AAC9B,eAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,IACvD;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,MAAM;AAAA,MACnC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,aAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,UAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,cAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,cAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE,YAAI,oBAAoB,iBAAiB,SAAS;AAChD,mBAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,QAC1D;AAEA;AAAA,UACE,oBAAoB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,uCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport { reduceSelectionAreaVariant } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const { overlayRef } = useOverlay();\n  const intl = useIntl();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const handleZoomMode = () => {\n    if (interactionMode !== 'zoom') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('zoom');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      if (!isNil(overlayRef.current)) {\n        const bounds = overlayRef.current.getBoundingClientRect();\n\n        const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n        if (interactionMode !== INTERACTION_MODE.Explore) {\n          setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n        }\n\n        setState(\n          reduceExploreSelect({\n            start,\n            end,\n            finished: true,\n            accessible: true,\n            variant: 'zoom',\n            selectionPercentage: getPercentageFromPixel([start, end], width),\n          }),\n        );\n      }\n    }\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'CONTROL',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeZoom)}\n      onClick={handleZoomMode}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarZoomMode\"\n    />\n  );\n};\n"],
+  "mappings": "AA4FkB;AA5FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD,SAAS,kCAAkC;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,EAAE,WAAW,IAAI,WAAW;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,oBAAoB,QAAQ;AAC9B,eAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,IACvD;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,MAAM;AAAA,MACnC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,aAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,UAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,cAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,cAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE,YAAI,oBAAoB,iBAAiB,SAAS;AAChD,mBAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,QAC1D;AAEA;AAAA,UACE,oBAAoB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,uCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

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

@@ -1,28 +1,63 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ClosestPointTooltipBody } from "./ClosestPointTooltipBody.js";
-import { ClosestPointTooltipHeader } from "./ClosestPointTooltipHeader.js";
-import { Divider } from "../../../../../layouts/divider/Divider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { buildClosestPointTooltipBodyProps } from "./closestPointTooltipBodyUtils.js";
+import { buildClosestPointTooltipHeaderProps } from "./closestPointTooltipHeaderUtils.js";
+import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { useAreaData } from "../../../hooks/useAreaData.js";
+import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
+import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
 function ClosestPointTooltip({
   datapoint,
   series,
   seriesToMetadata
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const axisIdToFormatter = useAxesFormatter();
+  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();
+  const intl = useIntl();
+  const { filteredSeriesWithDatapoints } = useAreaData();
+  const { truncationMode } = useXYChartTruncationMode();
+  const { name, color, actions, shape } = buildClosestPointTooltipHeaderProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    seriesWithDatapoints: filteredSeriesWithDatapoints,
+    datapointMetadataMap
+  });
+  const { xAxisValue, yAxisValue, xAxisDuration, yAxisDuration } = buildClosestPointTooltipBodyProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    intl
+  });
+  const data = [
+    {
+      name,
+      value: `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ""}`,
+      color,
+      shape
+    }
+  ];
+  const label = datapoint.x0 instanceof Date ? "" : void 0;
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ jsx(
-      ClosestPointTooltipHeader,
+      OverlayTooltip.Header,
       {
-        datapoint,
-        series,
-        seriesToMetadata
+        header1: xAxisValue,
+        duration: xAxisDuration,
+        label
       }
     ),
-    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal" }),
     /* @__PURE__ */ jsx(
-      ClosestPointTooltipBody,
+      OverlayTooltip.Series,
       {
-        datapoint,
-        series,
-        seriesToMetadata
+        data,
+        variant: "shared",
+        activeItem: -1,
+        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...item, actions })
       }
     )
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltip.tsx"],
-  "sourcesContent": ["import { ClosestPointTooltipBody } from './ClosestPointTooltipBody.js';\nimport { ClosestPointTooltipHeader } from './ClosestPointTooltipHeader.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport type {\n  ClosestDatapoint,\n  ClosestSeries,\n  ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function ClosestPointTooltip<T extends ClosestSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: ClosestDatapoint<T>;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}>) {\n  return (\n    <>\n      <ClosestPointTooltipHeader\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n      <Divider orientation=\"horizontal\" />\n      <ClosestPointTooltipBody\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n    </>\n  );\n}\n"],
-  "mappings": "AAmBI,mBACE,KADF;AAnBJ,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,eAAe;AAOjB,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAQ,aAAY,cAAa;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildClosestPointTooltipBodyProps } from './closestPointTooltipBodyUtils.js';\nimport { buildClosestPointTooltipHeaderProps } from './closestPointTooltipHeaderUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type {\n  ClosestDatapoint,\n  ClosestSeries,\n  ClosestSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function ClosestPointTooltip<T extends ClosestSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: ClosestDatapoint<T>;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n}>) {\n  const axisIdToFormatter = useAxesFormatter();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const intl = useIntl();\n  const { filteredSeriesWithDatapoints } = useAreaData();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const { name, color, actions, shape } = buildClosestPointTooltipHeaderProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    seriesWithDatapoints: filteredSeriesWithDatapoints,\n    datapointMetadataMap,\n  });\n  const { xAxisValue, yAxisValue, xAxisDuration, yAxisDuration } =\n    buildClosestPointTooltipBodyProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      axisIdToFormatter,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n      intl,\n    });\n  const data: SeriesItemProps[] = [\n    {\n      name: name,\n      value: `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ''}`,\n      color,\n      shape,\n    },\n  ];\n  const label = datapoint.x0 instanceof Date ? '' : undefined;\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={data}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <OverlayTooltip.SeriesItem {...item} actions={actions} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
+  "mappings": "AA2DI,SACE,KADF;AA3DJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAOlC,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,6BAA6B,IAAI,YAAY;AACrD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM,EAAE,MAAM,OAAO,SAAS,MAAM,IAAI,oCAAoC;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,EACF,CAAC;AACD,QAAM,EAAE,YAAY,YAAY,eAAe,cAAc,IAC3D,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,OAA0B;AAAA,IAC9B;AAAA,MACE;AAAA,MACA,OAAO,GAAG,UAAU,IAAI,gBAAgB,IAAI,aAAa,MAAM,EAAE;AAAA,MACjE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,cAAc,OAAO,KAAK;AAElD,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM,SAAkB;AAAA;AAAA,IAE3D;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,28 +1,67 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { HoveredPointTooltipBody } from "./HoveredPointTooltipBody.js";
-import { HoveredPointTooltipHeader } from "./HoveredPointTooltipHeader.js";
-import { Divider } from "../../../../../layouts/divider/Divider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { buildHoveredPointTooltipBodyProps } from "./hoveredPointTooltipBodyUtils.js";
+import { buildHoveredPointTooltipHeaderProps } from "./hoveredPointTooltipHeaderUtils.js";
+import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
+import { useBarData } from "../../../hooks/useBarData.js";
+import { useXYChartColorScales } from "../../../hooks/useXYChartColorScales.js";
+import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
 function HoveredPointTooltip({
   datapoint,
   series,
   seriesToMetadata
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const { filteredSeriesWithDatapoints } = useBarData();
+  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();
+  const colorScaleMap = useXYChartColorScales();
+  const { truncationMode } = useXYChartTruncationMode();
+  const axisIdToFormatter = useAxesFormatter();
+  const intl = useIntl();
+  const { name, value, color, actions } = buildHoveredPointTooltipHeaderProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    seriesWithDatapoints: filteredSeriesWithDatapoints,
+    datapointMetadataMap,
+    colorScaleMap
+  });
+  const { yAxisValue, xAxisValue, xAxisDuration, yAxisDuration } = buildHoveredPointTooltipBodyProps({
+    datapoint,
+    series,
+    seriesToMetadata,
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    intl
+  });
+  const isRect = series.type === "rect";
+  const yText = `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ""}`;
+  const data = [
+    {
+      name: isRect ? yText : name,
+      value: isRect ? value : yText,
+      color
+    }
+  ];
+  const label = datapoint.x0 instanceof Date ? "" : void 0;
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ jsx(
-      HoveredPointTooltipHeader,
+      OverlayTooltip.Header,
       {
-        datapoint,
-        series,
-        seriesToMetadata
+        header1: xAxisValue,
+        duration: xAxisDuration,
+        label
       }
     ),
-    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal" }),
     /* @__PURE__ */ jsx(
-      HoveredPointTooltipBody,
+      OverlayTooltip.Series,
       {
-        datapoint,
-        series,
-        seriesToMetadata
+        data,
+        variant: "shared",
+        activeItem: -1,
+        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...item, actions })
       }
     )
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltip.tsx"],
-  "sourcesContent": ["import { HoveredPointTooltipBody } from './HoveredPointTooltipBody.js';\nimport { HoveredPointTooltipHeader } from './HoveredPointTooltipHeader.js';\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function HoveredPointTooltip<T extends HoveredSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: HoveredDatapoint<T>;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n}>) {\n  return (\n    <>\n      <HoveredPointTooltipHeader\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n      <Divider orientation=\"horizontal\" />\n      <HoveredPointTooltipBody\n        datapoint={datapoint}\n        series={series}\n        seriesToMetadata={seriesToMetadata}\n      />\n    </>\n  );\n}\n"],
-  "mappings": "AAmBI,mBACE,KADF;AAnBJ,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,eAAe;AAOjB,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,WAAQ,aAAY,cAAa;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { buildHoveredPointTooltipBodyProps } from './hoveredPointTooltipBodyUtils.js';\nimport { buildHoveredPointTooltipHeaderProps } from './hoveredPointTooltipHeaderUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type {\n  HoveredDatapoint,\n  HoveredSeries,\n  HoveredSeriesToMetadata,\n} from '../../../utils/type-guards.js';\n\nexport function HoveredPointTooltip<T extends HoveredSeries>({\n  datapoint,\n  series,\n  seriesToMetadata,\n}: Readonly<{\n  datapoint: HoveredDatapoint<T>;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n}>) {\n  const { filteredSeriesWithDatapoints } = useBarData();\n  const { axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();\n  const colorScaleMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n\n  const { name, value, color, actions } = buildHoveredPointTooltipHeaderProps({\n    datapoint,\n    series,\n    seriesToMetadata,\n    seriesWithDatapoints: filteredSeriesWithDatapoints,\n    datapointMetadataMap,\n    colorScaleMap,\n  });\n\n  const { yAxisValue, xAxisValue, xAxisDuration, yAxisDuration } =\n    buildHoveredPointTooltipBodyProps({\n      datapoint,\n      series,\n      seriesToMetadata,\n      axisIdToFormatter,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n      intl,\n    });\n  const isRect = series.type === 'rect';\n\n  const yText = `${yAxisValue} ${yAxisDuration ? `(${yAxisDuration})` : ''}`;\n  const data: SeriesItemProps[] = [\n    {\n      name: isRect ? yText : name,\n      value: isRect ? (value as string) : yText,\n      color,\n    },\n  ];\n  const label = datapoint.x0 instanceof Date ? '' : undefined;\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={data}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => (\n          <OverlayTooltip.SeriesItem {...item} actions={actions} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
+  "mappings": "AAiEI,SACE,KADF;AAjEJ,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2CAA2C;AACpD,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAOlC,SAAS,oBAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AACF,GAII;AACF,QAAM,EAAE,6BAA6B,IAAI,WAAW;AACpD,QAAM,EAAE,qBAAqB,qBAAqB,IAAI,eAAe;AACrE,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI,oCAAoC;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,YAAY,YAAY,eAAe,cAAc,IAC3D,kCAAkC;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,SAAS,OAAO,SAAS;AAE/B,QAAM,QAAQ,GAAG,UAAU,IAAI,gBAAgB,IAAI,aAAa,MAAM,EAAE;AACxE,QAAM,OAA0B;AAAA,IAC9B;AAAA,MACE,MAAM,SAAS,QAAQ;AAAA,MACvB,OAAO,SAAU,QAAmB;AAAA,MACpC;AAAA,IACF;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,cAAc,OAAO,KAAK;AAElD,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SACnB,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM,SAAkB;AAAA;AAAA,IAE3D;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { XYChartTooltipContent } from "./XYChartTooltipContent.js";
+import {
+  useSelector,
+  useTooltipSnapshot
+} from "../../../core/components/overlay-tooltip/selectors.js";
+import { isTooltipDataEmpty } from "../../../core/components/overlay-tooltip/utils.js";
+const XYChartOverlayTooltip = () => {
+  useSelector(
+    ({ pinned, relativeX, relativeY }) => `${pinned}-${relativeX}-${relativeY}`
+  );
+  const { data } = useTooltipSnapshot();
+  if (isTooltipDataEmpty(data)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(XYChartTooltipContent, { content: data.metadata });
+};
+XYChartOverlayTooltip["displayName"] = "XYChartOverlayTooltip";
+export {
+  XYChartOverlayTooltip
+};
+//# sourceMappingURL=XYChartOverlayTooltip.js.map