@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/charts/timeseries/components/overlays/TimeseriesChartOverlays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/overlays/TimeseriesChartOverlays.tsx"],
-  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { useApplyPanDelta } from './hooks/useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './hooks/useApplyZoomDelta.js';\nimport { useResetInteractions } from './hooks/useResetInteractions.js';\nimport { useResetOnResize } from './hooks/useResetOnResize.js';\nimport { TimeseriesCrosshair } from './TimeseriesExplore/TimeseriesCrosshair.js';\nimport { TimeseriesInspect } from './TimeseriesExplore/TimeseriesInspect.js';\nimport { TimeseriesSelectionArea } from './TimeseriesSelection/TimeseriesSelectionArea.js';\nimport { getPointsParsed } from './utils/get-points-parsed.js';\nimport { EMPTY_DATAPOINT } from './utils/tooltip/constants.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.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 { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelSelect,\n  reduceExploreCancelTooltip,\n  reduceExploreEnd,\n  reduceExplorePin,\n  reduceExplorePosition,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { VerticalSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/components/VerticalSynchronizedCrosshair.js';\nimport { useSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport {\n  TIMESERIES_INTERACTIONS_ARIA_LABEL,\n  zIndicesTimeseriesAreas,\n} from '../../constants.js';\nimport { TimeseriesChartOverlayRefContext } from '../../context/TimeseriesChartOverlayRefContext.js';\nimport { TimeseriesChartSelectionAreaRef } from '../../context/TimeseriesChartSelectionAreaRef.context.js';\nimport {\n  useExploreState,\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useZoomToSelection } from '../../hooks/store/state-setters.js';\nimport { useChartInteractions } from '../../hooks/useChartInteractions.js';\nimport { useChartToolbar } from '../../hooks/useChartToolbar.js';\nimport { useTimeseriesChartId } from '../../hooks/useTimeseriesChartId.js';\nimport { useTimeseriesFilteredData } from '../../hooks/useTimeseriesFilteredData.js';\nimport { useXScales } from '../../hooks/useXScale.js';\nimport { useYScales } from '../../hooks/useYScales.js';\nimport { TimeseriesChartToolbar } from '../toolbar/TimeseriesChartToolbar.js';\n\nexport const TimeseriesChartOverlays = () => {\n  const handlerRef = useToolbarHandlerRef();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX, pan, zoom } = useChartInteractions();\n  const selectionRef = useRef<_SelectionRef>(null);\n\n  const { width, height } = useGridPlotSize();\n\n  const toolbar = useChartToolbar();\n\n  const exploreState = useExploreState();\n  const selectState = useSelectState();\n  const mode = useInteractionModeState();\n  const zoomState = useZoomState();\n\n  const setState = useSetState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyZoomDelta = useApplyZoomDelta();\n  const resetInteractions = useResetInteractions();\n\n  useResetOnResize();\n\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useTimeseriesChartId();\n\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    hoveredChartId,\n    disabled: synchronizedCrosshairDisabled,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n    selectedChartId,\n    disabled: synchronizedSelectionDisabled,\n  } = 'selectedChartId' in synchronizedSelection\n    ? synchronizedSelection\n    : { disabled: true };\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelectionDisabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n  }, [!!selectState]);\n\n  const showVerticalCrosshair =\n    hoveredChartId !== chartId && !synchronizedCrosshairDisabled;\n  const showSynchronizedSelection =\n    selectedChartId !== chartId && !synchronizedSelectionDisabled;\n\n  const { currentScale: xScale } = useXScales();\n  const { datapointsMap, allDatapoints } = useTimeseriesFilteredData();\n  const yScale = useYScales();\n  const { position } = useExploreState();\n  const zoomToSelection = useZoomToSelection();\n\n  const { closestPoint, filteredPoints, groupedPoints } = getPointsParsed(\n    position?.relative,\n    allDatapoints,\n    xScale,\n    yScale,\n    datapointsMap,\n    width,\n    height,\n  );\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode =\n      event.mode === 'pan' && pan?.enabled && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && (zoomX?.enabled || zoom?.enabled);\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n      resetSynchronizedSelection?.();\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = (payload: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      setState(reduceExplorePosition(payload.position));\n    }\n\n    const hoveredDate = xScale.invert(payload.position.relative.x);\n    disableSynchronizedCrosshair?.(false);\n    updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    if (mode === 'explore') {\n      setState(reduceExploreEnd);\n    }\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    if (pan?.enabled) {\n      applyPanDelta(event.delta);\n    }\n  };\n\n  const handleTogglePin = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => {\n    const highlightedSeriesId =\n      closestPoint?.id && closestPoint.id !== EMPTY_DATAPOINT.id\n        ? closestPoint?.id\n        : undefined;\n\n    setState(\n      event.pin\n        ? reduceExplorePin(event.position, highlightedSeriesId)\n        : reduceExploreUnPin(event.position),\n    );\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n    resetInteractions(event.mousePosition);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      updateSynchronizedSelection?.();\n    } else if (!zoomX?.enabled) {\n      handleTogglePin({\n        triggeredBy: event.triggeredBy,\n        position: event.position,\n        pin: !exploreState.pinned,\n      });\n    }\n\n    disableSynchronizedCrosshair?.(true);\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }): void => {\n    if (zoomX?.enabled || mode === 'explore') {\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\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\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          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      selectionRef.current?.focus();\n\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    } else if (zoomX?.enabled) {\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    setState(reduceExploreCancelAll);\n\n    applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n  };\n\n  const handleToolbarMouseEnter = () => {\n    setState(reduceExploreCancelTooltip);\n  };\n\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n\n  return (\n    <InteractionsOverlay\n      aria-label={TIMESERIES_INTERACTIONS_ARIA_LABEL}\n      style={{\n        zIndex: zIndicesTimeseriesAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={overlayRef}\n      mode={mode}\n      pinned={exploreState.pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      isZoomDisabled={!zoom?.enabled}\n      isZoomXDisabled={!zoomX?.enabled}\n      isPanDisabled={!(pan?.enabled && zoomState.zoomOutEnabled)}\n      onModeChange={handleModeChange}\n      onFocus={handleFocus}\n      onHover={handleHover}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onTogglePin={handleTogglePin}\n      onReset={handleReset}\n      onSelectStart={handleSelectStart}\n      onZoomChange={handleZoomChange}\n      onSelectEnd={handleSelectEnd}\n      onSelectChange={handleSelectChange}\n    >\n      <TimeseriesChartOverlayRefContext.Provider value={overlayRef}>\n        {exploreState.visible ? (\n          <>\n            <TimeseriesInspect\n              filteredPoints={filteredPoints}\n              closestPoint={closestPoint}\n              groupedPoints={groupedPoints}\n            />\n            <TimeseriesCrosshair closestPoint={closestPoint} />\n          </>\n        ) : null}\n        {showVerticalCrosshair && (\n          <VerticalSynchronizedCrosshair scale={xScale} />\n        )}\n\n        <TimeseriesChartSelectionAreaRef.Provider value={selectionRef}>\n          {toolbar?.enabled ? (\n            <TimeseriesChartToolbar\n              onMouseEnter={handleToolbarMouseEnter}\n              handlerRef={handlerRef}\n            />\n          ) : null}\n          <TimeseriesSelectionArea />\n        </TimeseriesChartSelectionAreaRef.Provider>\n        {showSynchronizedSelection && (\n          <SynchronizedSelectionArea scale={xScale} />\n        )}\n      </TimeseriesChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n\nTimeseriesChartOverlays['displayName'] = 'TimeseriesChartOverlays';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { every } from 'lodash-es';\nimport { useEffect, useRef, type FocusEvent } from 'react';\n\nimport { useApplyPanDelta } from './hooks/useApplyPanDelta.js';\nimport { useApplyZoomDelta } from './hooks/useApplyZoomDelta.js';\nimport { useResetInteractions } from './hooks/useResetInteractions.js';\nimport { useResetOnResize } from './hooks/useResetOnResize.js';\nimport { TimeseriesCrosshair } from './TimeseriesExplore/TimeseriesCrosshair.js';\nimport { TimeseriesInspect } from './TimeseriesExplore/TimeseriesInspect.js';\nimport { TimeseriesSelectionArea } from './TimeseriesSelection/TimeseriesSelectionArea.js';\nimport { getPointsParsed } from './utils/get-points-parsed.js';\nimport { EMPTY_DATAPOINT } from './utils/tooltip/constants.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { InteractionsOverlay } from '../../../core/components/interactions-overlay/InteractionsOverlay.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 { isOwnEvent } from '../../../core/components/interactions-overlay/utils/is-own-event.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreCancelSelect,\n  reduceExploreCancelTooltip,\n  reduceExploreEnd,\n  reduceExplorePin,\n  reduceExplorePosition,\n  reduceExploreReset,\n  reduceExploreSelect,\n  reduceExploreUnPin,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport type {\n  _SelectionRef,\n  SelectionAreaVariant,\n} from '../../../core/components/selection-area/types.js';\nimport { SynchronizedSelectionArea } from '../../../core/components/shared-chart-interactions/components/SynchronizedSelectionArea.js';\nimport { VerticalSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/components/VerticalSynchronizedCrosshair.js';\nimport { useSynchronizedCrosshair } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { useToolbarHandlerRef } from '../../../core/components/toolbar/hooks/useToolbarHandlerRef.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { zIndicesTimeseriesAreas } from '../../constants.js';\nimport { TimeseriesChartOverlayRefContext } from '../../context/TimeseriesChartOverlayRefContext.js';\nimport { TimeseriesChartSelectionAreaRef } from '../../context/TimeseriesChartSelectionAreaRef.context.js';\nimport {\n  useExploreState,\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useZoomToSelection } from '../../hooks/store/state-setters.js';\nimport { useChartInteractions } from '../../hooks/useChartInteractions.js';\nimport { useChartToolbar } from '../../hooks/useChartToolbar.js';\nimport { useTimeseriesChartId } from '../../hooks/useTimeseriesChartId.js';\nimport { useTimeseriesFilteredData } from '../../hooks/useTimeseriesFilteredData.js';\nimport { useXScales } from '../../hooks/useXScale.js';\nimport { useYScales } from '../../hooks/useYScales.js';\nimport { TimeseriesChartToolbar } from '../toolbar/TimeseriesChartToolbar.js';\n\nexport const TimeseriesChartOverlays = () => {\n  const handlerRef = useToolbarHandlerRef();\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  const { zoomX, pan, zoom } = useChartInteractions();\n  const selectionRef = useRef<_SelectionRef>(null);\n\n  const { width, height } = useGridPlotSize();\n\n  const toolbar = useChartToolbar();\n\n  const exploreState = useExploreState();\n  const selectState = useSelectState();\n  const mode = useInteractionModeState();\n  const zoomState = useZoomState();\n\n  const setState = useSetState();\n  const applyPanDelta = useApplyPanDelta();\n  const applyZoomDelta = useApplyZoomDelta();\n  const resetInteractions = useResetInteractions();\n\n  useResetOnResize();\n\n  const synchronizedCrosshair = useSynchronizedCrosshair();\n  const synchronizedSelection = useSynchronizedSelection();\n  const chartId = useTimeseriesChartId();\n\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const {\n    updateHoverState: updateSynchronizedCrosshair,\n    hoveredChartId,\n    disabled: synchronizedCrosshairDisabled,\n    setDisabled: disableSynchronizedCrosshair,\n  } = synchronizedCrosshair ?? {};\n\n  const {\n    updateSelectionState: updateSynchronizedSelection,\n    resetSelectionState: resetSynchronizedSelection,\n    selectedChartId,\n    disabled: synchronizedSelectionDisabled,\n  } = 'selectedChartId' in synchronizedSelection\n    ? synchronizedSelection\n    : { disabled: true };\n\n  useEffect(() => {\n    if (\n      every([\n        selectState,\n        !synchronizedSelection.selectedChartId,\n        !synchronizedSelectionDisabled,\n      ])\n    ) {\n      // clear current chart selection if the shared selection was removed\n      setState((s) => ({ ...s, select: undefined }));\n    }\n  }, [synchronizedSelection.selectedChartId]);\n\n  useEffect(() => {\n    if (synchronizedSelection.selectedChartId === chartId && !selectState) {\n      // clear shared chart selection if the current selection was removed\n      synchronizedSelection.resetSelectionState?.();\n    }\n  }, [!!selectState]);\n\n  const showVerticalCrosshair =\n    hoveredChartId !== chartId && !synchronizedCrosshairDisabled;\n  const showSynchronizedSelection =\n    selectedChartId !== chartId && !synchronizedSelectionDisabled;\n\n  const { currentScale: xScale } = useXScales();\n  const { datapointsMap, allDatapoints } = useTimeseriesFilteredData();\n  const yScale = useYScales();\n  const { position } = useExploreState();\n  const zoomToSelection = useZoomToSelection();\n\n  const { closestPoint, filteredPoints, groupedPoints } = getPointsParsed(\n    position?.relative,\n    allDatapoints,\n    xScale,\n    yScale,\n    datapointsMap,\n    width,\n    height,\n  );\n\n  const handleModeChange = (event: {\n    mode: InteractionMode;\n    keyboard: boolean;\n  }) => {\n    const canPan = zoomState.zoomOutEnabled;\n    const shouldSwitchToPanMode =\n      event.mode === 'pan' && pan?.enabled && canPan;\n    const shouldSwitchToZoomMode =\n      event.mode === 'zoom' && (zoomX?.enabled || zoom?.enabled);\n\n    if (shouldSwitchToPanMode || shouldSwitchToZoomMode) {\n      setState(reduceInteractionMode(event.mode));\n      setState(reduceExploreReset);\n      resetSynchronizedSelection?.();\n    } else if (event.mode === 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n  };\n\n  const handleHover = (payload: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      setState(reduceExplorePosition(payload.position));\n    }\n\n    const hoveredDate = xScale.invert(payload.position.relative.x);\n    disableSynchronizedCrosshair?.(false);\n    updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());\n  };\n\n  const handleLeave = (_: { triggeredBy: InteractionTriggers }) => {\n    if (mode === 'explore') {\n      setState(reduceExploreEnd);\n    }\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handlePanChange = (event: {\n    triggeredBy: InteractionTriggers;\n    delta: number;\n  }) => {\n    if (pan?.enabled) {\n      applyPanDelta(event.delta);\n    }\n  };\n\n  const handleTogglePin = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition | undefined;\n    pin: boolean;\n  }) => {\n    const highlightedSeriesId =\n      closestPoint?.id && closestPoint.id !== EMPTY_DATAPOINT.id\n        ? closestPoint?.id\n        : undefined;\n\n    setState(\n      event.pin\n        ? reduceExplorePin(event.position, highlightedSeriesId)\n        : reduceExploreUnPin(event.position),\n    );\n\n    updateSynchronizedCrosshair?.(undefined);\n  };\n\n  const handleReset = (event: {\n    triggeredBy: InteractionTriggers;\n    mousePosition?: RelativeAbsolutePosition;\n  }) => {\n    disableSynchronizedCrosshair?.(false);\n    resetSynchronizedSelection?.();\n    resetInteractions(event.mousePosition);\n  };\n\n  const handleSelectStart = (event: {\n    triggeredBy: InteractionTriggers;\n    position: RelativeAbsolutePosition;\n  }) => {\n    if (mode === 'explore') {\n      updateSynchronizedSelection?.();\n    } else if (!zoomX?.enabled) {\n      handleTogglePin({\n        triggeredBy: event.triggeredBy,\n        position: event.position,\n        pin: !exploreState.pinned,\n      });\n    }\n\n    disableSynchronizedCrosshair?.(true);\n  };\n\n  const handleSelectChange = (event: {\n    triggeredBy: InteractionTriggers;\n    start: RelativeAbsolutePosition;\n    end: RelativeAbsolutePosition;\n    mode: 'zoom' | 'explore';\n  }): void => {\n    if (zoomX?.enabled || mode === 'explore') {\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\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    }\n  };\n\n  const handleSelectEnd = (\n    event:\n      | {\n          triggeredBy: InteractionTriggers;\n          start: RelativeAbsolutePosition;\n          end: RelativeAbsolutePosition;\n        }\n      | { cancelled: true },\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          selectionPercentage: getPercentageFromPixel(\n            [event.start, event.end],\n            width,\n          ),\n        }),\n      );\n      selectionRef.current?.focus();\n\n      updateSynchronizedSelection?.({\n        selection: [event.start, event.end],\n        chartId,\n        scale: xScale,\n      });\n    } else if (zoomX?.enabled) {\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    setState(reduceExploreCancelAll);\n\n    applyZoomDelta(event.deltaStart, event.deltaEnd, event.behavior);\n  };\n\n  const handleToolbarMouseEnter = () => {\n    setState(reduceExploreCancelTooltip);\n  };\n\n  const handleFocus = (event?: FocusEvent) => {\n    if (!event || event.cancelable) {\n      return;\n    }\n    if (isOwnEvent(event)) {\n      handlerRef.current.handleFocus();\n    }\n  };\n\n  return (\n    <InteractionsOverlay\n      style={{\n        zIndex: zIndicesTimeseriesAreas.overlays,\n        userSelect: selectState?.finished === false ? 'none' : 'auto',\n      }}\n      ref={overlayRef}\n      mode={mode}\n      pinned={exploreState.pinned}\n      selectionArea={\n        selectState ? [selectState?.start, selectState?.end] : undefined\n      }\n      width={width}\n      height={height}\n      isZoomDisabled={!zoom?.enabled}\n      isZoomXDisabled={!zoomX?.enabled}\n      isPanDisabled={!(pan?.enabled && zoomState.zoomOutEnabled)}\n      onModeChange={handleModeChange}\n      onFocus={handleFocus}\n      onHover={handleHover}\n      onLeave={handleLeave}\n      onPanChange={handlePanChange}\n      onTogglePin={handleTogglePin}\n      onReset={handleReset}\n      onSelectStart={handleSelectStart}\n      onZoomChange={handleZoomChange}\n      onSelectEnd={handleSelectEnd}\n      onSelectChange={handleSelectChange}\n    >\n      <TimeseriesChartOverlayRefContext.Provider value={overlayRef}>\n        {exploreState.visible ? (\n          <>\n            <TimeseriesInspect\n              filteredPoints={filteredPoints}\n              closestPoint={closestPoint}\n              groupedPoints={groupedPoints}\n            />\n            <TimeseriesCrosshair closestPoint={closestPoint} />\n          </>\n        ) : null}\n        {showVerticalCrosshair && (\n          <VerticalSynchronizedCrosshair scale={xScale} />\n        )}\n\n        <TimeseriesChartSelectionAreaRef.Provider value={selectionRef}>\n          {toolbar?.enabled ? (\n            <TimeseriesChartToolbar\n              onMouseEnter={handleToolbarMouseEnter}\n              handlerRef={handlerRef}\n            />\n          ) : null}\n          <TimeseriesSelectionArea />\n        </TimeseriesChartSelectionAreaRef.Provider>\n        {showSynchronizedSelection && (\n          <SynchronizedSelectionArea scale={xScale} />\n        )}\n      </TimeseriesChartOverlayRefContext.Provider>\n    </InteractionsOverlay>\n  );\n};\n\nTimeseriesChartOverlays['displayName'] = 'TimeseriesChartOverlays';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.css

@@ -1,8 +1,8 @@
-._17fdb110-3-10-4 {
+._17fdb110-3-11-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-10-4 {
+._17fdb111-3-11-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-10-4 {
+._17fdb112-3-11-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-10-4 {
+._17fdb113-3-11-0 {
   cursor: crosshair;
   overflow: visible;
   pointer-events: none;

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js

@@ -1,9 +1,9 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./TimeseriesOverlays.css";
-var canvasPlot = "_17fdb110-3-10-4 _13lzg4k0-3-10-4";
-var crosshairLayout = "_17fdb113-3-10-4 _13lzg4k0-3-10-4";
-var datapointCanvasPlot = "_17fdb111-3-10-4 _13lzg4k0-3-10-4";
-var datapointIndicatorLayout = "_17fdb112-3-10-4 _13lzg4k0-3-10-4";
+var canvasPlot = "_17fdb110-3-11-0 _13lzg4k0-3-11-0";
+var crosshairLayout = "_17fdb113-3-11-0 _13lzg4k0-3-11-0";
+var datapointCanvasPlot = "_17fdb111-3-11-0 _13lzg4k0-3-11-0";
+var datapointIndicatorLayout = "_17fdb112-3-11-0 _13lzg4k0-3-11-0";
 export {
   canvasPlot,
   crosshairLayout,

package/esm/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/overlays/TimeseriesOverlays.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-10-4 _13lzg4k0-3-10-4';\nexport var crosshairLayout = '_17fdb113-3-10-4 _13lzg4k0-3-10-4';\nexport var datapointCanvasPlot = '_17fdb111-3-10-4 _13lzg4k0-3-10-4';\nexport var datapointIndicatorLayout = '_17fdb112-3-10-4 _13lzg4k0-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './TimeseriesOverlays.css';\nexport var canvasPlot = '_17fdb110-3-11-0 _13lzg4k0-3-11-0';\nexport var crosshairLayout = '_17fdb113-3-11-0 _13lzg4k0-3-11-0';\nexport var datapointCanvasPlot = '_17fdb111-3-11-0 _13lzg4k0-3-11-0';\nexport var datapointIndicatorLayout = '_17fdb112-3-11-0 _13lzg4k0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.css

@@ -1,6 +1,6 @@
-._9p8qi20-3-10-4 {
+._9p8qi20-3-11-0 {
   z-index: 2;
 }
-._9p8qi21-3-10-4 {
+._9p8qi21-3-11-0 {
   z-index: 0;
 }

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js

@@ -1,7 +1,7 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./ThresholdIndicators.css";
-var thresholdPlotLine = "_9p8qi20-3-10-4 _13lzg4k0-3-10-4";
-var thresholdPlotRange = "_9p8qi21-3-10-4 _13lzg4k0-3-10-4";
+var thresholdPlotLine = "_9p8qi20-3-11-0 _13lzg4k0-3-11-0";
+var thresholdPlotRange = "_9p8qi21-3-11-0 _13lzg4k0-3-11-0";
 export {
   thresholdPlotLine,
   thresholdPlotRange

package/esm/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/thresholds/ThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-10-4 _13lzg4k0-3-10-4';\nexport var thresholdPlotRange = '_9p8qi21-3-10-4 _13lzg4k0-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './ThresholdIndicators.css';\nexport var thresholdPlotLine = '_9p8qi20-3-11-0 _13lzg4k0-3-11-0';\nexport var thresholdPlotRange = '_9p8qi21-3-11-0 _13lzg4k0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/timeseries/components/toolbar/PanButton.js

@@ -1,13 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useIntl } from "react-intl";
 import { PanHorizontalIcon } from "@dynatrace/strato-icons";
+import { KeyboardShortcut } from "../../../../content/keyboard-shortcut/KeyboardShortcut.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 { styledOrText } from "../../../core/components/toolbar/styles.sty.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import {
   useInteractionModeState,
@@ -43,7 +46,25 @@ const PanButton = () => {
       ref: panButtonRef,
       prefixIcon: /* @__PURE__ */ jsx(PanHorizontalIcon, {}),
       tooltipText: intl.formatMessage(TIMESERIES_MESSAGES.zoomModePan),
-      tooltipKeyShortcut: KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
+      menuShortcut: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          KeyboardShortcut,
+          {
+            keys: "alt",
+            variant: "minimal",
+            disabled: !zoomOutEnabled
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styledOrText, children: ` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ` }),
+        /* @__PURE__ */ jsx(
+          KeyboardShortcut,
+          {
+            keys: KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
+            variant: "minimal",
+            disabled: !zoomOutEnabled
+          }
+        )
+      ] }),
       selected: isSelected,
       onKeyDown: handleKeyDown,
       onClick: handleClick,

package/esm/charts/timeseries/components/toolbar/PanButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/toolbar/PanButton.tsx"],
-  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\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 { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useChartInteractions } from '../../hooks/useChartInteractions.js';\nimport { TIMESERIES_MESSAGES } from '../../messages/tooltips-text.js';\n\nexport const PanButton = () => {\n  const { zoomOutEnabled } = useZoomState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { resetSelectionState } = useSynchronizedSelection();\n  const { pan } = useChartInteractions();\n  const setState = useSetState();\n  const intl = useIntl();\n\n  const isPanEnabled = pan?.enabled;\n  const interactionMode = useInteractionModeState();\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const handleClick = () => {\n    setState(reduceExploreCancelAll);\n    resetSelectionState?.();\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      handleClick();\n    }\n  };\n\n  return isPanEnabled ? (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={\n        KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n      }\n      selected={isSelected}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n    />\n  ) : null;\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
-  "mappings": "AAgDkB;AAhDlB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAE7B,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,EAAE,IAAI,IAAI,qBAAqB;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,QAAM,eAAe,KAAK;AAC1B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,cAAc,MAAM;AACxB,aAAS,sBAAsB;AAC/B,0BAAsB;AACtB,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,eACL;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,oBAAoB,WAAW;AAAA,MAC/D,oBACE,iBAAiB;AAAA,MAEnB,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA;AAAA,EACZ,IACE;AACN;AAEA,UAAU,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { KeyboardShortcut } from '../../../../content/keyboard-shortcut/KeyboardShortcut.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 { styledOrText } from '../../../core/components/toolbar/styles.sty.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useChartInteractions } from '../../hooks/useChartInteractions.js';\nimport { TIMESERIES_MESSAGES } from '../../messages/tooltips-text.js';\n\nexport const PanButton = () => {\n  const { zoomOutEnabled } = useZoomState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { resetSelectionState } = useSynchronizedSelection();\n  const { pan } = useChartInteractions();\n  const setState = useSetState();\n  const intl = useIntl();\n\n  const isPanEnabled = pan?.enabled;\n  const interactionMode = useInteractionModeState();\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const handleClick = () => {\n    setState(reduceExploreCancelAll);\n    resetSelectionState?.();\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      handleClick();\n    }\n  };\n\n  return isPanEnabled ? (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomModePan)}\n      menuShortcut={\n        <>\n          <KeyboardShortcut\n            keys=\"alt\"\n            variant=\"minimal\"\n            disabled={!zoomOutEnabled}\n          />\n          <span className={styledOrText}>\n            {` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} `}\n          </span>\n          <KeyboardShortcut\n            keys={KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE}\n            variant=\"minimal\"\n            disabled={!zoomOutEnabled}\n          />\n        </>\n      }\n      selected={isSelected}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n    />\n  ) : null;\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
+  "mappings": "AAmDkB,SAGV,UAHU,KAGV,YAHU;AAnDlB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAE7B,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,EAAE,IAAI,IAAI,qBAAqB;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,QAAM,eAAe,KAAK;AAC1B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,cAAc,MAAM;AACxB,aAAS,sBAAsB;AAC/B,0BAAsB;AACtB,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,eACL;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,oBAAoB,WAAW;AAAA,MAC/D,cACE,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,UAAU,CAAC;AAAA;AAAA,QACb;AAAA,QACA,oBAAC,UAAK,WAAW,cACd,cAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,KAC9C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,iBAAiB;AAAA,YACvB,SAAQ;AAAA,YACR,UAAU,CAAC;AAAA;AAAA,QACb;AAAA,SACF;AAAA,MAEF,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA;AAAA,EACZ,IACE;AACN;AAEA,UAAU,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/toolbar/ZoomInOutButtons.js

@@ -9,7 +9,7 @@ import { useTriggerZoom } from "../../../core/components/zoom/hooks/useTriggerZo
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import { usePreventScrollOnWheel } from "../../../core/hooks/usePreventScrollOnWheel.js";
 import { ZOOM_ACTIONS } from "../../../core/types/zoom.js";
-import { getKeyShortcutByAgent } from "../../../core/utils/get-key-shortcut-by-agent.js";
+import { getPrimaryModifierKey } from "../../../core/utils/get-primary-modifier-key.js";
 import { useZoomState } from "../../hooks/store/selectors.js";
 import { useTimeseriesOverlayRef } from "../../hooks/useTimeseriesOverlayRef.js";
 import { TIMESERIES_MESSAGES } from "../../messages/tooltips-text.js";
@@ -26,8 +26,12 @@ const ZoomInOutButtons = () => {
   const { width } = useGridPlotSize();
   const applyZoom = useApplyZoomDelta();
   const triggerZoom = useTriggerZoom(width, applyZoom);
-  const zoomInShortcut = getKeyShortcutByAgent("CONTROL") + `+${intl.formatMessage(TIMESERIES_MESSAGES.zoomActionArrowUp)}`;
-  const zoomOutShortcut = getKeyShortcutByAgent("CONTROL") + `+${intl.formatMessage(TIMESERIES_MESSAGES.zoomActionArrowDown)}`;
+  const zoomInShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(
+    TIMESERIES_MESSAGES.zoomActionArrowUp
+  )}`;
+  const zoomOutShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(
+    TIMESERIES_MESSAGES.zoomActionArrowDown
+  )}`;
   usePreventScrollOnWheel(overlayRef);
   const handleZoomKeyboardMode = (event, zoomBehavior) => {
     if (event.code === "Enter") {

package/esm/charts/timeseries/components/toolbar/ZoomInOutButtons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/components/toolbar/ZoomInOutButtons.tsx"],
-  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useTriggerZoom } from '../../../core/components/zoom/hooks/useTriggerZoom.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { usePreventScrollOnWheel } from '../../../core/hooks/usePreventScrollOnWheel.js';\nimport { ZOOM_ACTIONS, ZoomInZoomOut } from '../../../core/types/zoom.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { useZoomState } from '../../hooks/store/selectors.js';\nimport { useTimeseriesOverlayRef } from '../../hooks/useTimeseriesOverlayRef.js';\nimport { TIMESERIES_MESSAGES } from '../../messages/tooltips-text.js';\nimport { useApplyZoomDelta } from '../overlays/hooks/useApplyZoomDelta.js';\n\nconst controlStyle = { marginRight: Spacings.Size2 };\n\nexport const ZoomInOutButtons = () => {\n  const { zoomInEnabled, zoomOutEnabled } = useZoomState();\n  const zoomInButtonRef = useRef<HTMLButtonElement>(null);\n  const zoomOutButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const overlayRef = useTimeseriesOverlayRef();\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const zoomInShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(TIMESERIES_MESSAGES.zoomActionArrowUp)}`;\n  const zoomOutShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(TIMESERIES_MESSAGES.zoomActionArrowDown)}`;\n\n  usePreventScrollOnWheel(overlayRef);\n\n  /** Handles the zoom when a 'enter' keyboard event happens.\n   * @param event - A keyboard event param.\n   * @param zoomBehavior - zoom-in or zoom-out interaction.\n   */\n  const handleZoomKeyboardMode = (\n    event: ReactKeyboardEvent,\n    zoomBehavior: ZoomInZoomOut,\n  ) => {\n    if (event.code === 'Enter') {\n      triggerZoom(zoomBehavior);\n    }\n  };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        ref={zoomInButtonRef}\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomActionZoomIn)}\n        tooltipKeyShortcut={zoomInShortcut}\n        testId=\"chart-toolbar-zoom-in\"\n        onKeyDown={(event) =>\n          handleZoomKeyboardMode(event, ZOOM_ACTIONS.ZoomIn)\n        }\n        onClick={() => triggerZoom(ZOOM_ACTIONS.ZoomIn)}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n      />\n      <ChartToolbarRenderer.Control\n        ref={zoomOutButtonRef}\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomActionZoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        testId=\"chart-toolbar-zoom-out\"\n        onKeyDown={(event) =>\n          handleZoomKeyboardMode(event, ZOOM_ACTIONS.ZoomOut)\n        }\n        onClick={() => triggerZoom(ZOOM_ACTIONS.ZoomOut)}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
-  "mappings": "AAwDI,mBAGgB,KAHhB;AAxDJ,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,oBAAmC;AAC5C,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,MAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAE5C,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,eAAe,eAAe,IAAI,aAAa;AACvD,QAAM,kBAAkB,OAA0B,IAAI;AACtD,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,aAAa,wBAAwB;AAC3C,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,iBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,oBAAoB,iBAAiB,CAAC;AAC/D,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,oBAAoB,mBAAmB,CAAC;AAEjE,0BAAwB,UAAU;AAMlC,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,oBAAoB,gBAAgB;AAAA,QACpE,oBAAoB;AAAA,QACpB,QAAO;AAAA,QACP,WAAW,CAAC,UACV,uBAAuB,OAAO,aAAa,MAAM;AAAA,QAEnD,SAAS,MAAM,YAAY,aAAa,MAAM;AAAA,QAC9C,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,oBAAoB,iBAAiB;AAAA,QACrE,oBAAoB;AAAA,QACpB,QAAO;AAAA,QACP,WAAW,CAAC,UACV,uBAAuB,OAAO,aAAa,OAAO;AAAA,QAEpD,SAAS,MAAM,YAAY,aAAa,OAAO;AAAA,QAC/C,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useTriggerZoom } from '../../../core/components/zoom/hooks/useTriggerZoom.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { usePreventScrollOnWheel } from '../../../core/hooks/usePreventScrollOnWheel.js';\nimport { ZOOM_ACTIONS, ZoomInZoomOut } from '../../../core/types/zoom.js';\nimport { getPrimaryModifierKey } from '../../../core/utils/get-primary-modifier-key.js';\nimport { useZoomState } from '../../hooks/store/selectors.js';\nimport { useTimeseriesOverlayRef } from '../../hooks/useTimeseriesOverlayRef.js';\nimport { TIMESERIES_MESSAGES } from '../../messages/tooltips-text.js';\nimport { useApplyZoomDelta } from '../overlays/hooks/useApplyZoomDelta.js';\n\nconst controlStyle = { marginRight: Spacings.Size2 };\n\nexport const ZoomInOutButtons = () => {\n  const { zoomInEnabled, zoomOutEnabled } = useZoomState();\n  const zoomInButtonRef = useRef<HTMLButtonElement>(null);\n  const zoomOutButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const overlayRef = useTimeseriesOverlayRef();\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const zoomInShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(\n    TIMESERIES_MESSAGES.zoomActionArrowUp,\n  )}`;\n  const zoomOutShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(\n    TIMESERIES_MESSAGES.zoomActionArrowDown,\n  )}`;\n\n  usePreventScrollOnWheel(overlayRef);\n\n  /** Handles the zoom when a 'enter' keyboard event happens.\n   * @param event - A keyboard event param.\n   * @param zoomBehavior - zoom-in or zoom-out interaction.\n   */\n  const handleZoomKeyboardMode = (\n    event: ReactKeyboardEvent,\n    zoomBehavior: ZoomInZoomOut,\n  ) => {\n    if (event.code === 'Enter') {\n      triggerZoom(zoomBehavior);\n    }\n  };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        ref={zoomInButtonRef}\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomActionZoomIn)}\n        tooltipKeyShortcut={zoomInShortcut}\n        testId=\"chart-toolbar-zoom-in\"\n        onKeyDown={(event) =>\n          handleZoomKeyboardMode(event, ZOOM_ACTIONS.ZoomIn)\n        }\n        onClick={() => triggerZoom(ZOOM_ACTIONS.ZoomIn)}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n      />\n      <ChartToolbarRenderer.Control\n        ref={zoomOutButtonRef}\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomActionZoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        testId=\"chart-toolbar-zoom-out\"\n        onKeyDown={(event) =>\n          handleZoomKeyboardMode(event, ZOOM_ACTIONS.ZoomOut)\n        }\n        onClick={() => triggerZoom(ZOOM_ACTIONS.ZoomOut)}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
+  "mappings": "AAwDI,mBAGgB,KAHhB;AAxDJ,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,oBAAmC;AAC5C,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,MAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAE5C,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,eAAe,eAAe,IAAI,aAAa;AACvD,QAAM,kBAAkB,OAA0B,IAAI;AACtD,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,aAAa,wBAAwB;AAC3C,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,iBAAiB,GAAG,sBAAsB,CAAC,IAAI,KAAK;AAAA,IACxD,oBAAoB;AAAA,EACtB,CAAC;AACD,QAAM,kBAAkB,GAAG,sBAAsB,CAAC,IAAI,KAAK;AAAA,IACzD,oBAAoB;AAAA,EACtB,CAAC;AAED,0BAAwB,UAAU;AAMlC,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,oBAAoB,gBAAgB;AAAA,QACpE,oBAAoB;AAAA,QACpB,QAAO;AAAA,QACP,WAAW,CAAC,UACV,uBAAuB,OAAO,aAAa,MAAM;AAAA,QAEnD,SAAS,MAAM,YAAY,aAAa,MAAM;AAAA,QAC9C,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,oBAAoB,iBAAiB;AAAA,QACrE,oBAAoB;AAAA,QACpB,QAAO;AAAA,QACP,WAAW,CAAC,UACV,uBAAuB,OAAO,aAAa,OAAO;AAAA,QAEpD,SAAS,MAAM,YAAY,aAAa,OAAO;AAAA,QAC/C,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/toolbar/ZoomModeButton.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { useIntl } from "react-intl";
 import { ZoomToSelectionIcon } from "@dynatrace/strato-icons";
+import { KeyboardShortcut } from "../../../../content/keyboard-shortcut/KeyboardShortcut.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.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";
@@ -17,9 +18,10 @@ import { useSynchronizedSelection } from "../../../core/components/shared-chart-
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { useToolbarContext } from "../../../core/components/toolbar/hooks/useToolbarContext.js";
 import { TOOLBAR_MESSAGES } from "../../../core/components/toolbar/messages.js";
+import { styledOrText } from "../../../core/components/toolbar/styles.sty.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 { getPrimaryModifierKey } from "../../../core/utils/get-primary-modifier-key.js";
 import {
   useInteractionModeState,
   useSelectState,
@@ -34,7 +36,6 @@ const ZoomModeButton = () => {
   const overlayRef = useTimeseriesOverlayRef();
   const { resetSelectionState } = useSynchronizedSelection();
   const intl = useIntl();
-  const tooltipShortcut = getKeyShortcutByAgent("CONTROL") + " " + intl.formatMessage(TOOLBAR_MESSAGES.or) + " Z";
   const { updateLastItemSelected } = useToolbarContext();
   const isSelected = interactionMode === INTERACTION_MODE.Zoom;
   const selectState = useSelectState();
@@ -84,7 +85,11 @@ const ZoomModeButton = () => {
       onKeyDown: handleKeyDown,
       onClick: handleClick,
       tabIndex,
-      tooltipKeyShortcut: tooltipShortcut,
+      menuShortcut: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(KeyboardShortcut, { keys: getPrimaryModifierKey(), variant: "minimal" }),
+        /* @__PURE__ */ jsx("span", { className: styledOrText, children: ` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ` }),
+        /* @__PURE__ */ jsx(KeyboardShortcut, { keys: "Z", variant: "minimal" })
+      ] }),
       placement: "menu"
     }
   );

package/esm/charts/timeseries/components/toolbar/ZoomModeButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/timeseries/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 { 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 { 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 {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../hooks/store/selectors.js';\nimport { useTimeseriesOverlayRef } from '../../hooks/useTimeseriesOverlayRef.js';\nimport { TIMESERIES_MESSAGES } from '../../messages/tooltips-text.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useTimeseriesOverlayRef();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const intl = useIntl();\n  const tooltipShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    ' ' +\n    intl.formatMessage(TOOLBAR_MESSAGES.or) +\n    ' Z';\n  const { updateLastItemSelected } = useToolbarContext();\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const createInitialZoomArea = () => {\n    if (!isNil(overlayRef.current)) {\n      const bounds = overlayRef.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: 'zoom',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      createInitialZoomArea();\n    }\n  };\n\n  const handleClick = () => {\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        setState(reduceExploreCancelAll);\n      }\n    }\n\n    resetSelectionState?.();\n    updateLastItemSelected(INTERACTION_MODE.Zoom);\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomModeZoom)}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipShortcut}\n      placement=\"menu\"\n    />\n  );\n};\n"],
-  "mappings": "AA8FkB;AA9FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,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,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAE7B,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,wBAAwB;AAC3C,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,OAAO,QAAQ;AACrB,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,MACA,KAAK,cAAc,iBAAiB,EAAE,IACtC;AACF,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AACrD,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,wBAAwB,MAAM;AAClC,QAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,YAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,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,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,4BAAsB;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,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,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,0BAAsB;AACtB,2BAAuB,iBAAiB,IAAI;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,oBAAoB,YAAY;AAAA,MAChE,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAU;AAAA;AAAA,EACZ;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 { KeyboardShortcut } from '../../../../content/keyboard-shortcut/KeyboardShortcut.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.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 { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { styledOrText } from '../../../core/components/toolbar/styles.sty.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getPrimaryModifierKey } from '../../../core/utils/get-primary-modifier-key.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../hooks/store/selectors.js';\nimport { useTimeseriesOverlayRef } from '../../hooks/useTimeseriesOverlayRef.js';\nimport { TIMESERIES_MESSAGES } from '../../messages/tooltips-text.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useTimeseriesOverlayRef();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const intl = useIntl();\n  const { updateLastItemSelected } = useToolbarContext();\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const createInitialZoomArea = () => {\n    if (!isNil(overlayRef.current)) {\n      const bounds = overlayRef.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: 'zoom',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      createInitialZoomArea();\n    }\n  };\n\n  const handleClick = () => {\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        setState(reduceExploreCancelAll);\n      }\n    }\n\n    resetSelectionState?.();\n    updateLastItemSelected(INTERACTION_MODE.Zoom);\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(TIMESERIES_MESSAGES.zoomModeZoom)}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      menuShortcut={\n        <>\n          <KeyboardShortcut keys={getPrimaryModifierKey()} variant=\"minimal\" />\n          <span className={styledOrText}>\n            {` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} `}\n          </span>\n          <KeyboardShortcut keys=\"Z\" variant=\"minimal\" />\n        </>\n      }\n      placement=\"menu\"\n    />\n  );\n};\n"],
+  "mappings": "AA2FkB,SAOV,UAPU,KAOV,YAPU;AA3FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,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,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAE7B,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,wBAAwB;AAC3C,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AACrD,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,wBAAwB,MAAM;AAClC,QAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,YAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,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,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,4BAAsB;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,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,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,0BAAsB;AACtB,2BAAuB,iBAAiB,IAAI;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,oBAAoB,YAAY;AAAA,MAChE,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,cACE,iCACE;AAAA,4BAAC,oBAAiB,MAAM,sBAAsB,GAAG,SAAQ,WAAU;AAAA,QACnE,oBAAC,UAAK,WAAW,cACd,cAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,KAC9C;AAAA,QACA,oBAAC,oBAAiB,MAAK,KAAI,SAAQ,WAAU;AAAA,SAC/C;AAAA,MAEF,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

package/esm/charts/timeseries/constants.js

@@ -82,7 +82,6 @@ const initialState = {
   thresholds: { hoveredThresholdId: void 0 }
 };
 const TIMESERIES_ARIA_LABEL = "Timeseries Chart";
-const TIMESERIES_INTERACTIONS_ARIA_LABEL = "Timeseries Chart interactions";
 const TIMESERIES_TIME_AXIS_ARIA_LABEL = "timeseries-time-axis";
 const AREA_CHART_DISPLAY_ARIA_LABEL = "area-chart-display";
 const LINE_CHART_DISPLAY_ARIA_LABEL = "line-chart-display";
@@ -95,7 +94,6 @@ export {
   LINE_CHART_DISPLAY_ARIA_LABEL,
   TIMESERIES_ARIA_LABEL,
   TIMESERIES_CHART_DEFAULT_VARIANT,
-  TIMESERIES_INTERACTIONS_ARIA_LABEL,
   TIMESERIES_TIME_AXIS_ARIA_LABEL,
   defaultColorPalette,
   defaultGapPolicy,

package/esm/charts/timeseries/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/timeseries/constants.ts"],
-  "sourcesContent": ["import type { TimeseriesChartState } from './types/state.js';\nimport {\n  TimeseriesChartConfigProperties,\n  TimeseriesChartLegendConfig,\n  TimeseriesChartThresholdsConfig,\n  TimeseriesChartYAxisConfig,\n} from './types/timeseries-config.js';\nimport { TimeseriesToolbarInternalProps } from './types/toolbar.js';\nimport { initialSelectionState } from '../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../core/components/canvas/types/canvas-shape.js';\nimport { defaultRatio, SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport {\n  GAP_POLICY_GAP,\n  type TimeGapPolicy,\n} from '../core/types/gap-policy.js';\nimport { ChartInteractionsConfig } from '../core/types/interactions.js';\nimport { ValueRepresentation } from '../core/types/scales.js';\nimport { SeriesCurve } from '../core/types/timeseries.js';\nimport { ToolbarPlacement } from '../core/types/toolbar.js';\nimport { TooltipVariant } from '../core/types/tooltip.js';\n\nexport const DISPLAY_NAME = 'TimeseriesChart';\n\nexport const defaultTooltipVariant: TooltipVariant = 'single';\nexport const defaultSeriesDisplayMode = 'multi-line';\n\nexport const defaultYAxis: TimeseriesChartYAxisConfig = {};\n\nexport const defaultGapPolicy: TimeGapPolicy = GAP_POLICY_GAP;\nexport const defaultSeriesCurve: SeriesCurve = 'linear';\nexport const defaultPointsDisplay: PointsDisplay = 'auto';\nexport const defaultValueRepresentation: ValueRepresentation = 'absolute';\nexport const defaultInfiniteZoom = false;\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const defaultLegend: TimeseriesChartLegendConfig = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n};\n\nexport const defaultToolbar: TimeseriesToolbarInternalProps = {\n  placement: 'top-right' as ToolbarPlacement,\n  enabled: true,\n};\n\nexport const defaultInteractions: ChartInteractionsConfig = {\n  onZoomChange: undefined,\n  pan: {\n    enabled: true,\n  },\n  zoom: {\n    enabled: true,\n  },\n};\n\nexport const defaultColorPalette = 'categorical';\n\nexport const defaultTimeseriesChartConfig: TimeseriesChartConfigProperties = {\n  legend: defaultLegend,\n  colorPalette: defaultColorPalette,\n  gapPolicy: defaultGapPolicy,\n  pointsDisplay: defaultPointsDisplay,\n  valueRepresentation: defaultValueRepresentation,\n  tooltip: {\n    variant: defaultTooltipVariant,\n    seriesDisplayMode: defaultSeriesDisplayMode,\n  },\n  toolbar: defaultToolbar,\n  interactions: defaultInteractions,\n};\n\nexport const defaultTimeseriesPerVariant = {\n  line: [],\n  area: [],\n  bar: [],\n  band: [],\n  shapePriority: [],\n};\n\nexport const defaultThreshold: TimeseriesChartThresholdsConfig = {\n  left: [],\n  right: [],\n};\n\nexport const TIMESERIES_CHART_DEFAULT_VARIANT = 'line';\n\nexport const zIndicesTimeseriesAreas = {\n  thresholdRange: 0,\n  plot: 1,\n  thresholdLine: 2,\n  overlays: 3,\n};\n\nexport const initialState: TimeseriesChartState = {\n  filteredSeriesIds: new Set(),\n  highlightedSeriesId: undefined,\n  annotations: initialSelectionState,\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  explore: {\n    visible: false,\n    pinned: false,\n    position: undefined,\n  },\n  thresholds: { hoveredThresholdId: undefined },\n};\n\nexport const TIMESERIES_ARIA_LABEL = 'Timeseries Chart';\nexport const TIMESERIES_INTERACTIONS_ARIA_LABEL =\n  'Timeseries Chart interactions';\n\nexport const TIMESERIES_TIME_AXIS_ARIA_LABEL = 'timeseries-time-axis';\nexport const AREA_CHART_DISPLAY_ARIA_LABEL = 'area-chart-display';\nexport const LINE_CHART_DISPLAY_ARIA_LABEL = 'line-chart-display';\nexport const BAR_CHART_DISPLAY_ARIA_LABEL = 'bar-chart-display';\n"],
-  "mappings": "AAQA,SAAS,6BAA6B;AAEtC,SAAS,cAAc,4BAA4B;AACnD;AAAA,EACE;AAAA,OAEK;AAOA,MAAM,eAAe;AAErB,MAAM,wBAAwC;AAC9C,MAAM,2BAA2B;AAEjC,MAAM,eAA2C,CAAC;AAElD,MAAM,mBAAkC;AACxC,MAAM,qBAAkC;AACxC,MAAM,uBAAsC;AAC5C,MAAM,6BAAkD;AACxD,MAAM,sBAAsB;AAE5B,MAAM,+BAA+B;AAErC,MAAM,gBAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,sBAA+C;AAAA,EAC1D,cAAc;AAAA,EACd,KAAK;AAAA,IACH,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,sBAAsB;AAE5B,MAAM,+BAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,mBAAmB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAChB;AAEO,MAAM,8BAA8B;AAAA,EACzC,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,KAAK,CAAC;AAAA,EACN,MAAM,CAAC;AAAA,EACP,eAAe,CAAC;AAClB;AAEO,MAAM,mBAAoD;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AACV;AAEO,MAAM,mCAAmC;AAEzC,MAAM,0BAA0B;AAAA,EACrC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,eAAe;AAAA,EACf,UAAU;AACZ;AAEO,MAAM,eAAqC;AAAA,EAChD,mBAAmB,oBAAI,IAAI;AAAA,EAC3B,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,YAAY,EAAE,oBAAoB,OAAU;AAC9C;AAEO,MAAM,wBAAwB;AAC9B,MAAM,qCACX;AAEK,MAAM,kCAAkC;AACxC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;",
+  "sourcesContent": ["import type { TimeseriesChartState } from './types/state.js';\nimport {\n  TimeseriesChartConfigProperties,\n  TimeseriesChartLegendConfig,\n  TimeseriesChartThresholdsConfig,\n  TimeseriesChartYAxisConfig,\n} from './types/timeseries-config.js';\nimport { TimeseriesToolbarInternalProps } from './types/toolbar.js';\nimport { initialSelectionState } from '../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../core/components/canvas/types/canvas-shape.js';\nimport { defaultRatio, SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport {\n  GAP_POLICY_GAP,\n  type TimeGapPolicy,\n} from '../core/types/gap-policy.js';\nimport { ChartInteractionsConfig } from '../core/types/interactions.js';\nimport { ValueRepresentation } from '../core/types/scales.js';\nimport { SeriesCurve } from '../core/types/timeseries.js';\nimport { ToolbarPlacement } from '../core/types/toolbar.js';\nimport { TooltipVariant } from '../core/types/tooltip.js';\n\nexport const DISPLAY_NAME = 'TimeseriesChart';\n\nexport const defaultTooltipVariant: TooltipVariant = 'single';\nexport const defaultSeriesDisplayMode = 'multi-line';\n\nexport const defaultYAxis: TimeseriesChartYAxisConfig = {};\n\nexport const defaultGapPolicy: TimeGapPolicy = GAP_POLICY_GAP;\nexport const defaultSeriesCurve: SeriesCurve = 'linear';\nexport const defaultPointsDisplay: PointsDisplay = 'auto';\nexport const defaultValueRepresentation: ValueRepresentation = 'absolute';\nexport const defaultInfiniteZoom = false;\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const defaultLegend: TimeseriesChartLegendConfig = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n};\n\nexport const defaultToolbar: TimeseriesToolbarInternalProps = {\n  placement: 'top-right' as ToolbarPlacement,\n  enabled: true,\n};\n\nexport const defaultInteractions: ChartInteractionsConfig = {\n  onZoomChange: undefined,\n  pan: {\n    enabled: true,\n  },\n  zoom: {\n    enabled: true,\n  },\n};\n\nexport const defaultColorPalette = 'categorical';\n\nexport const defaultTimeseriesChartConfig: TimeseriesChartConfigProperties = {\n  legend: defaultLegend,\n  colorPalette: defaultColorPalette,\n  gapPolicy: defaultGapPolicy,\n  pointsDisplay: defaultPointsDisplay,\n  valueRepresentation: defaultValueRepresentation,\n  tooltip: {\n    variant: defaultTooltipVariant,\n    seriesDisplayMode: defaultSeriesDisplayMode,\n  },\n  toolbar: defaultToolbar,\n  interactions: defaultInteractions,\n};\n\nexport const defaultTimeseriesPerVariant = {\n  line: [],\n  area: [],\n  bar: [],\n  band: [],\n  shapePriority: [],\n};\n\nexport const defaultThreshold: TimeseriesChartThresholdsConfig = {\n  left: [],\n  right: [],\n};\n\nexport const TIMESERIES_CHART_DEFAULT_VARIANT = 'line';\n\nexport const zIndicesTimeseriesAreas = {\n  thresholdRange: 0,\n  plot: 1,\n  thresholdLine: 2,\n  overlays: 3,\n};\n\nexport const initialState: TimeseriesChartState = {\n  filteredSeriesIds: new Set(),\n  highlightedSeriesId: undefined,\n  annotations: initialSelectionState,\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  explore: {\n    visible: false,\n    pinned: false,\n    position: undefined,\n  },\n  thresholds: { hoveredThresholdId: undefined },\n};\n\nexport const TIMESERIES_ARIA_LABEL = 'Timeseries Chart';\n\nexport const TIMESERIES_TIME_AXIS_ARIA_LABEL = 'timeseries-time-axis';\nexport const AREA_CHART_DISPLAY_ARIA_LABEL = 'area-chart-display';\nexport const LINE_CHART_DISPLAY_ARIA_LABEL = 'line-chart-display';\nexport const BAR_CHART_DISPLAY_ARIA_LABEL = 'bar-chart-display';\n"],
+  "mappings": "AAQA,SAAS,6BAA6B;AAEtC,SAAS,cAAc,4BAA4B;AACnD;AAAA,EACE;AAAA,OAEK;AAOA,MAAM,eAAe;AAErB,MAAM,wBAAwC;AAC9C,MAAM,2BAA2B;AAEjC,MAAM,eAA2C,CAAC;AAElD,MAAM,mBAAkC;AACxC,MAAM,qBAAkC;AACxC,MAAM,uBAAsC;AAC5C,MAAM,6BAAkD;AACxD,MAAM,sBAAsB;AAE5B,MAAM,+BAA+B;AAErC,MAAM,gBAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,SAAS;AACX;AAEO,MAAM,sBAA+C;AAAA,EAC1D,cAAc;AAAA,EACd,KAAK;AAAA,IACH,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,sBAAsB;AAE5B,MAAM,+BAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,mBAAmB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAChB;AAEO,MAAM,8BAA8B;AAAA,EACzC,MAAM,CAAC;AAAA,EACP,MAAM,CAAC;AAAA,EACP,KAAK,CAAC;AAAA,EACN,MAAM,CAAC;AAAA,EACP,eAAe,CAAC;AAClB;AAEO,MAAM,mBAAoD;AAAA,EAC/D,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AACV;AAEO,MAAM,mCAAmC;AAEzC,MAAM,0BAA0B;AAAA,EACrC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,eAAe;AAAA,EACf,UAAU;AACZ;AAEO,MAAM,eAAqC;AAAA,EAChD,mBAAmB,oBAAI,IAAI;AAAA,EAC3B,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,YAAY,EAAE,oBAAoB,OAAU;AAC9C;AAEO,MAAM,wBAAwB;AAE9B,MAAM,kCAAkC;AACxC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AACtC,MAAM,+BAA+B;",
   "names": []
 }

package/esm/charts/top-list/TopList.css

@@ -1,4 +1,4 @@
-._jwlby60-3-10-4 {
+._jwlby60-3-11-0 {
   width: 100%;
   overflow-y: auto;
 }