@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useContext, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartVariantContext } from '../../../../core/context/ChartVariantContext.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport {\n  UndefinedContent,\n  type XYChartTooltipMetadata,\n} from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent =\n    (data.metadata as XYChartTooltipMetadata | undefined)?.preferred ??\n    UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair =\n    (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden;\n  const showVerticalCrosshair =\n    (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n    />\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useContext, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartVariantContext } from '../../../../core/context/ChartVariantContext.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartCrosshairHidden } from '../../../hooks/useXYChartCrosshairHidden.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport {\n  UndefinedContent,\n  type XYChartTooltipMetadata,\n} from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n  hideHorizontal: boolean;\n  hideVertical: boolean;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n  hideHorizontal,\n  hideVertical,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent =\n    (data.metadata as XYChartTooltipMetadata | undefined)?.preferred ??\n    UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair =\n    (!isBand || isHorizontal || !pinned) &&\n    !crosshairConfig?.horizontalHidden &&\n    !hideHorizontal;\n  const showVerticalCrosshair =\n    (!isBand || !isHorizontal || !pinned) &&\n    !crosshairConfig?.verticalHidden &&\n    !hideVertical;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { hideHorizontal, hideVertical } = useXYChartCrosshairHidden();\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n      hideHorizontal={hideHorizontal}\n      hideVertical={hideVertical}\n    />\n  );\n}\n"],
+  "mappings": "AA6KI,SAEI,KAFJ;AA7KJ,OAAO,UAAU;AACjB,SAAyB,YAAY,eAAe;AAEpD,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,qCAAqC;AAC9C;AAAA,EACE;AAAA,OAEK;AAsBP,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,cAAY,CAAC,EAAE,WAAAA,YAAW,WAAAC,WAAU,MAAM,GAAGD,UAAS,IAAIC,UAAS,EAAE;AACrE,QAAM,EAAE,WAAW,WAAW,QAAQ,KAAK,IAAI,mBAAmB;AAClE,QAAM,WACJ,cAAc,QAAQ,cAAc,OAChC,EAAE,GAAG,WAAW,GAAG,UAAU,IAC7B;AAEN,QAAM,iBACH,KAAK,UAAiD,aACvD;AAEF,QAAM,EAAE,OAAO,OAAO,SAAS,aAAa,UAAU,IACpD,iBAAiB,IAAI,gBAAgB,MAAM,KAAK,CAAC;AAEnD,QAAM,SAAS,qBAAqB,cAAc;AAClD,QAAM,eAAe,gBAAgB;AAErC,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,UAAM,qCACJ,oBAAoB,cAAc,KAClC,qBAAqB,cAAc,KACnC,qBAAqB,cAAc;AAErC,QACE,CAAC,UACD,CAAC,sCACD,CAAC,eAAe,UAChB,CAAC,eAAe,WAChB;AACA,aAAO;AAAA,IACT;AAEA,UAAM,eAAe,QACjB,YAAY,OAAO,mBAAmB,IACtC;AACJ,UAAM,eAAe,QACjB,YAAY,OAAO,mBAAmB,IACtC;AAEJ,WAAO,8BAA8B;AAAA,MACnC;AAAA,MACA;AAAA,MACA,sBAAsB,eAAe;AAAA,MACrC,WAAW,eAAe;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,WAAW,gBAAgB,IAAI,WAAW,mBAAmB;AAErE,QAAM,cAAc,yBAAyB,YAAY,EAAE,GAAG,GAAG,GAAG,EAAE;AAEtE,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,UAAU,EAAE,UAAU,OAAO,CAAC;AAE7C,QAAM,aACJ,OAAO,QAAQ,gCAAgC,eAAe,IAAI,IAC9D,gBAAgB,OAChB;AACN,QAAM,cACJ,OAAO,SAAS,gCAAgC,eAAe,KAAK,IAChE,gBAAgB,QAChB;AACN,QAAM,kBAAkB,sBAAsB,aAAa;AAE3D,QAAM,SAAS,YAAY;AAC3B,QAAM,2BACH,CAAC,UAAU,gBAAgB,CAAC,WAC7B,CAAC,iBAAiB,oBAClB,CAAC;AACH,QAAM,yBACH,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAC9B,CAAC,iBAAiB,kBAClB,CAAC;AAEH,SACE,qBAAC,SAAI,WAAW,KAAK,YAAY,SAAS,GACvC;AAAA,+BACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC;AAAA,QACT,WAAW,OAAO;AAAA,QAClB,YAAY,OAAO;AAAA,QACnB,GAAG,YAAY;AAAA,QACf,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAED,yBACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC;AAAA,QACT,aAAa,OAAO;AAAA,QACpB,UAAU,OAAO;AAAA,QACjB;AAAA,QACA;AAAA,QACA,GAAG,YAAY;AAAA,QACf;AAAA,QACA,OAAO;AAAA,QACP;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AACF,GAEI;AACF,QAAM,oBAAoB,0BAA0B;AACpD,QAAM,YAAY,qBAAqB;AACvC,QAAM,aAAa,qBAAqB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,QAAQ,iBAAiB,OAAO,eAAe,IAAI,iBAAiB;AAC5E,QAAM,EAAE,qBAAqB,kBAAkB,qBAAqB,IAClE,eAAe;AACjB,QAAM,iBAAiB,iBAAiB;AAExC,QAAM,cAAc,SAAS,SAAS,sBAAsB;AAE5D,QAAM,WAAW,kBAAkB;AACnC,QAAM,SAAS,YAAY,CAAC,EAAE,QAAAC,QAAO,MAAMA,OAAM;AACjD,2BAAyB,QAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAEpE,QAAM,uBACJ,WAAW,QAAQ,GAAG,oBAAoB;AAC5C,QAAM,oBAAoB,WAAW,KAAK,GAAG,oBAAoB;AAEjE,QAAM,EAAE,gBAAgB,aAAa,IAAI,0BAA0B;AAEnE,QAAM,mCAAmC,MAAM;AAC7C,QAAI,CAAC,mBAAmB;AACtB,aAAO,CAAC,aAA0B;AAAA,IACpC;AACA,UAAM,uBAAuB,CAAC,GAAG,iBAAiB,QAAQ,CAAC,EAAE;AAAA,MAC3D,CAAC,CAAC,MAAM,MAAM,kBAAkB,IAAI,OAAO,EAAE;AAAA,IAC/C;AACA,WAAO,CAAC,YAAyB;AAC/B,aAAO,qBAAqB;AAAA,QAAK,CAAC,CAAC,EAAE,MAAM,MACzC,QAAQ,IAAI,OAAO,OAAO,MAAM,EAAE;AAAA,MACpC;AAAA,IACF;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,8BAA8B;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": ["relativeX", "relativeY", "pinned"]
 }

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

@@ -1,5 +1,5 @@
 import "./XYChartCrosshair.css";
-var crosshair = "_1bbe5uo0-3-11-2";
+var crosshair = "_1bbe5uo0-3-12-0";
 export {
   crosshair
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css.ts"],
-  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-11-2';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-11-2 {
+._cd1yys0-3-12-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-11-2 {
+._cd1yys1-3-12-0 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

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

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartExplore.css";
-var datapointIndicatorLayout = "_cd1yys1-3-11-2 _13lzg4k0-3-11-2";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-11-2 _13lzg4k0-3-11-2";
+var datapointIndicatorLayout = "_cd1yys1-3-12-0 _13lzg4k0-3-12-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-12-0 _13lzg4k0-3-12-0";
 export {
   datapointIndicatorLayout,
   datapointIndicatorShiftedLayout

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartExplore.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-11-2 _13lzg4k0-3-11-2';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-11-2 _13lzg4k0-3-11-2';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-12-0 _13lzg4k0-3-12-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-12-0 _13lzg4k0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }

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

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useApplyPanDelta } from "./useApplyPanDelta.js";
 import { useApplyZoomDelta } from "./useApplyZoomDelta.js";
 import { useResetInteractions } from "./useResetInteractions.js";
@@ -7,6 +8,8 @@ import {
   INTERACTION_MODE,
   isSelectCancelled
 } from "../../../../core/components/interactions-overlay/types.js";
+import { useDismissChartTooltipSignal } from "../../../../core/components/overlay-tooltip/pinCoordinationSelectors.js";
+import { usePinCoordinationActions } from "../../../../core/components/overlay-tooltip/usePinCoordinationActions.js";
 import { useTooltipActions } from "../../../../core/components/overlay-tooltip/useTooltipActions.js";
 import { useSynchronizedCrosshair } from "../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js";
 import { useSynchronizedSelection } from "../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js";
@@ -61,6 +64,8 @@ const useOverlayEvents = () => {
   } = useSynchronizedSelection();
   const syncedXScale = useSyncedXScaleByPriority();
   const { hover, pin, unpin, reset, outOfBounds } = useTooltipActions();
+  const { dismissAnnotation } = usePinCoordinationActions();
+  const dismissChartAt = useDismissChartTooltipSignal();
   const {
     updateHoverState: updateSynchronizedCrosshair,
     setDisabled: disableSynchronizedCrosshair
@@ -76,7 +81,15 @@ const useOverlayEvents = () => {
   const resetTooltip = () => {
     setState(reduceExploreCancelHighlight);
     reset();
+    dismissAnnotation();
   };
+  useEffect(() => {
+    if (dismissChartAt === 0) {
+      return;
+    }
+    setState(reduceExploreCancelHighlight);
+    unpin();
+  }, [dismissChartAt]);
   const handleModeChange = (event) => {
     const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;
     const shouldSwitchToPanMode = event.mode === "pan" && canPan;
@@ -123,6 +136,7 @@ const useOverlayEvents = () => {
   const handleUnPin = (position) => {
     setState(reduceExploreUnPin);
     if (position) {
+      dismissAnnotation();
       const metadata = getDatapoints(position);
       unpin();
       if (metadata.preferred) {
@@ -145,6 +159,7 @@ const useOverlayEvents = () => {
       return;
     }
     const metadata = getDatapoints(position);
+    dismissAnnotation();
     if (metadata.preferred) {
       setState(reduceExplorePin(metadata.preferred.series.id));
       pin(

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

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

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdArea.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getBorderThreshold } from "./get-border-threshold.js";
-import { markersReducer } from "./utils.js";
+import { getBorderThresholds } from "./get-border-threshold.js";
+import { markersReducer, xMarkersReducer } from "./utils.js";
 import { ChartGrid } from "../../../core/components/chart-grid/ChartGridRoot.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { ThresholdBar } from "../../../core/components/threshold-bar/ThresholdBar.js";
@@ -13,11 +13,10 @@ import { useSetState } from "../../store/selectors.js";
 import { AREAS } from "../../utils/grid-templates.js";
 const XYChartThresholdArea = () => {
   const { thresholds, none } = useGetThresholds();
-  const { left, right } = useVisibleAxesConfig();
+  const { left, right, top, bottom } = useVisibleAxesConfig();
   const axesIdToScales = useXYChartScales();
   const axesIdToFormatter = useAxesFormatter();
   const { width } = useGridPlotSize();
-  const { left: leftConfig, right: rightConfig } = useVisibleAxesConfig();
   const setState = useSetState();
   const { axes } = useXYChartData();
   if (none) {
@@ -26,7 +25,7 @@ const XYChartThresholdArea = () => {
   const leftMarkers = thresholds.reduce(
     markersReducer({
       axis: "left",
-      axisConfig: leftConfig,
+      axisConfig: left,
       axesIdToScales,
       axesIdToFormatter,
       width,
@@ -37,7 +36,29 @@ const XYChartThresholdArea = () => {
   const rightMarkers = thresholds.reduce(
     markersReducer({
       axis: "right",
-      axisConfig: rightConfig,
+      axisConfig: right,
+      axesIdToScales,
+      axesIdToFormatter,
+      width,
+      axes
+    }),
+    []
+  );
+  const topMarkers = thresholds.reduce(
+    xMarkersReducer({
+      axis: "top",
+      axisConfig: top,
+      axesIdToScales,
+      axesIdToFormatter,
+      width,
+      axes
+    }),
+    []
+  );
+  const bottomMarkers = thresholds.reduce(
+    xMarkersReducer({
+      axis: "bottom",
+      axisConfig: bottom,
       axesIdToScales,
       axesIdToFormatter,
       width,
@@ -54,7 +75,7 @@ const XYChartThresholdArea = () => {
       }
     }));
   };
-  const { leftBorder, rightBorder } = getBorderThreshold(left, right);
+  const { leftBorder, rightBorder, topBorder, bottomBorder } = getBorderThresholds(left, right, top, bottom);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     leftMarkers.length ? /* @__PURE__ */ jsx(
       ChartGrid.GridArea,
@@ -95,6 +116,47 @@ const XYChartThresholdArea = () => {
         }
       },
       "rightThreshold"
+    ) : null,
+    topMarkers.length ? /* @__PURE__ */ jsx(
+      ChartGrid.GridArea,
+      {
+        gridArea: AREAS.topThreshold,
+        "data-testid": "top-threshold-area",
+        children: (args) => {
+          return /* @__PURE__ */ jsx(
+            ThresholdBar,
+            {
+              borderArea: topBorder,
+              markers: topMarkers,
+              length: args.availableWidth,
+              layout: "horizontal",
+              onHover: handleHover
+            }
+          );
+        }
+      },
+      "topThreshold"
+    ) : null,
+    bottomMarkers.length ? /* @__PURE__ */ jsx(
+      ChartGrid.GridArea,
+      {
+        gridArea: AREAS.bottomThreshold,
+        "data-testid": "bottom-threshold-area",
+        children: (args) => {
+          return /* @__PURE__ */ jsx(
+            ThresholdBar,
+            {
+              borderArea: bottomBorder,
+              isFlipped: true,
+              markers: bottomMarkers,
+              length: args.availableWidth,
+              layout: "horizontal",
+              onHover: handleHover
+            }
+          );
+        }
+      },
+      "bottomThreshold"
     ) : null
   ] });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdArea.tsx"],
-  "sourcesContent": ["import { getBorderThreshold } from './get-border-threshold.js';\nimport { markersReducer } from './utils.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartThresholdArea = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { left, right } = useVisibleAxesConfig();\n  const axesIdToScales = useXYChartScales();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width } = useGridPlotSize();\n  const { left: leftConfig, right: rightConfig } = useVisibleAxesConfig();\n  const setState = useSetState();\n  const { axes } = useXYChartData();\n\n  if (none) {\n    return null;\n  }\n\n  const leftMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'left',\n      axisConfig: leftConfig,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const rightMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'right',\n      axisConfig: rightConfig,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      thresholds: {\n        ...prev.thresholds,\n        hoveredThresholdId: id,\n      },\n    }));\n  };\n\n  const { leftBorder, rightBorder } = getBorderThreshold(left, right);\n\n  return (\n    <>\n      {leftMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.leftThreshold}\n          key=\"leftThreshold\"\n          data-testid=\"left-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={leftBorder}\n                markers={leftMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n      {rightMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.rightThreshold}\n          key=\"rightThreshold\"\n          data-testid=\"right-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={rightBorder}\n                markers={rightMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n    </>\n  );\n};\n\nXYChartThresholdArea['displayName'] = 'XYChartThresholdArea';\n"],
-  "mappings": "AAgEI,mBASU,KATV;AAhEJ,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AAEf,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,MAAM,IAAI,qBAAqB;AAC7C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,MAAM,YAAY,OAAO,YAAY,IAAI,qBAAqB;AACtE,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW;AAAA,IAC7B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,WAAW;AAAA,IAC9B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,YAAY;AAAA,QACV,GAAG,KAAK;AAAA,QACR,oBAAoB;AAAA,MACtB;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,QAAM,EAAE,YAAY,YAAY,IAAI,mBAAmB,MAAM,KAAK;AAElE,SACE,iCACG;AAAA,gBAAY,SACX;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,IACH,aAAa,SACZ;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,KACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { getBorderThresholds } from './get-border-threshold.js';\nimport { markersReducer, xMarkersReducer } from './utils.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartThresholdArea = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { left, right, top, bottom } = useVisibleAxesConfig();\n  const axesIdToScales = useXYChartScales();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width } = useGridPlotSize();\n  const setState = useSetState();\n  const { axes } = useXYChartData();\n\n  if (none) {\n    return null;\n  }\n\n  const leftMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'left',\n      axisConfig: left,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const rightMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'right',\n      axisConfig: right,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const topMarkers = thresholds.reduce(\n    xMarkersReducer({\n      axis: 'top',\n      axisConfig: top,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const bottomMarkers = thresholds.reduce(\n    xMarkersReducer({\n      axis: 'bottom',\n      axisConfig: bottom,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      thresholds: {\n        ...prev.thresholds,\n        hoveredThresholdId: id,\n      },\n    }));\n  };\n\n  const { leftBorder, rightBorder, topBorder, bottomBorder } =\n    getBorderThresholds(left, right, top, bottom);\n\n  return (\n    <>\n      {leftMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.leftThreshold}\n          key=\"leftThreshold\"\n          data-testid=\"left-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={leftBorder}\n                markers={leftMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n      {rightMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.rightThreshold}\n          key=\"rightThreshold\"\n          data-testid=\"right-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={rightBorder}\n                markers={rightMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n      {topMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.topThreshold}\n          key=\"topThreshold\"\n          data-testid=\"top-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={topBorder}\n                markers={topMarkers}\n                length={args.availableWidth}\n                layout=\"horizontal\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n      {bottomMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.bottomThreshold}\n          key=\"bottomThreshold\"\n          data-testid=\"bottom-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={bottomBorder}\n                isFlipped={true}\n                markers={bottomMarkers}\n                length={args.availableWidth}\n                layout=\"horizontal\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n    </>\n  );\n};\n\nXYChartThresholdArea['displayName'] = 'XYChartThresholdArea';\n"],
+  "mappings": "AAwFI,mBASU,KATV;AAxFJ,SAAS,2BAA2B;AACpC,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AAEf,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,OAAO,KAAK,OAAO,IAAI,qBAAqB;AAC1D,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW;AAAA,IAC7B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,WAAW;AAAA,IAC9B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,WAAW;AAAA,IAC5B,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,WAAW;AAAA,IAC/B,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,YAAY;AAAA,QACV,GAAG,KAAK;AAAA,QACR,oBAAoB;AAAA,MACtB;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,QAAM,EAAE,YAAY,aAAa,WAAW,aAAa,IACvD,oBAAoB,MAAM,OAAO,KAAK,MAAM;AAE9C,SACE,iCACG;AAAA,gBAAY,SACX;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,IACH,aAAa,SACZ;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,IACH,WAAW,SACV;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,IACH,cAAc,SACb;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,WAAW;AAAA,cACX,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAdI;AAAA,IAeN,IACE;AAAA,KACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

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

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

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

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { isThresholdXStaticInternal } from "./type-guards.js";
 import { mapIndicatorDataFrom } from "./utils.js";
 import { thresholdPlot } from "./XYChartThresholdIndicators.sty.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
@@ -9,7 +10,7 @@ import { useXYChartScales } from "../../hooks/useXYChartScales.js";
 import { useHoveredThresholdState } from "../../store/selectors.js";
 const XYChartThresholdIndicators = () => {
   const { thresholds, none } = useGetThresholds();
-  const { width } = useGridPlotSize();
+  const { width, height } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();
   const hoveredThresholdId = useHoveredThresholdState();
   const { axes } = useXYChartData();
@@ -17,13 +18,15 @@ const XYChartThresholdIndicators = () => {
     return null;
   }
   return /* @__PURE__ */ jsx("svg", { className: thresholdPlot, children: thresholds.map((threshold) => {
-    if (!axes.find((axis) => axis.id === threshold.yAxisId)) {
+    const axisId = isThresholdXStaticInternal(threshold) ? threshold.xAxisId : threshold.yAxisId;
+    if (!axes.find((axis) => axis.id === axisId)) {
       return void 0;
     }
     const data = mapIndicatorDataFrom({
       axisIdToScales,
       threshold,
-      width
+      width,
+      height
     });
     return /* @__PURE__ */ jsx(
       ThresholdIndicator,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.tsx"],
-  "sourcesContent": ["import { mapIndicatorDataFrom } from './utils.js';\nimport { thresholdPlot } from './XYChartThresholdIndicators.sty.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdIndicator } from '../../../core/components/threshold-bar/indicators/ThresholdIndicator.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useHoveredThresholdState } from '../../store/selectors.js';\n\nexport const XYChartThresholdIndicators = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { width } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const hoveredThresholdId = useHoveredThresholdState();\n  const { axes } = useXYChartData();\n\n  if (none) {\n    return null;\n  }\n\n  return (\n    <svg className={thresholdPlot}>\n      {thresholds.map((threshold) => {\n        // TODO: workaround to dont let chart break. follow up APPDEV-16553\n        // workaround applied after adding the new filtering series | toggling visible axis\n        // we should refactor how we manage the threshold instead\n\n        if (!axes.find((axis) => axis.id === threshold.yAxisId)) {\n          return undefined;\n        }\n\n        const data = mapIndicatorDataFrom({\n          axisIdToScales,\n          threshold,\n          width,\n        });\n\n        return (\n          <ThresholdIndicator\n            key={`threshold-indicator-${threshold.id}`}\n            data={data}\n            color={threshold.color}\n            strokeOnly={threshold.strokeOnly}\n            isActive={hoveredThresholdId === threshold.id}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
-  "mappings": "AAsCU;AAtCV,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAElC,MAAM,6BAA6B,MAAM;AAC9C,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,qBAAqB,yBAAyB;AACpD,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,eACb,qBAAW,IAAI,CAAC,cAAc;AAK7B,QAAI,CAAC,KAAK,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,OAAO,GAAG;AACvD,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,qBAAqB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,YAAY,UAAU;AAAA,QACtB,UAAU,uBAAuB,UAAU;AAAA;AAAA,MAJtC,uBAAuB,UAAU,EAAE;AAAA,IAK1C;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import { isThresholdXStaticInternal } from './type-guards.js';\nimport { mapIndicatorDataFrom } from './utils.js';\nimport { thresholdPlot } from './XYChartThresholdIndicators.sty.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdIndicator } from '../../../core/components/threshold-bar/indicators/ThresholdIndicator.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useHoveredThresholdState } from '../../store/selectors.js';\n\nexport const XYChartThresholdIndicators = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const hoveredThresholdId = useHoveredThresholdState();\n  const { axes } = useXYChartData();\n\n  if (none) {\n    return null;\n  }\n\n  return (\n    <svg className={thresholdPlot}>\n      {thresholds.map((threshold) => {\n        // Skip thresholds whose bound axis is not present (e.g. toggled off via\n        // series filtering). The guard covers both the X-bound (xAxisId) and\n        // Y-bound (yAxisId) paths so a stale axis id never breaks the chart.\n        const axisId = isThresholdXStaticInternal(threshold)\n          ? threshold.xAxisId\n          : threshold.yAxisId;\n\n        if (!axes.find((axis) => axis.id === axisId)) {\n          return undefined;\n        }\n\n        const data = mapIndicatorDataFrom({\n          axisIdToScales,\n          threshold,\n          width,\n          height,\n        });\n\n        return (\n          <ThresholdIndicator\n            key={`threshold-indicator-${threshold.id}`}\n            data={data}\n            color={threshold.color}\n            strokeOnly={threshold.strokeOnly}\n            isActive={hoveredThresholdId === threshold.id}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
+  "mappings": "AA2CU;AA3CV,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAElC,MAAM,6BAA6B,MAAM;AAC9C,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,qBAAqB,yBAAyB;AACpD,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,eACb,qBAAW,IAAI,CAAC,cAAc;AAI7B,UAAM,SAAS,2BAA2B,SAAS,IAC/C,UAAU,UACV,UAAU;AAEd,QAAI,CAAC,KAAK,KAAK,CAAC,SAAS,KAAK,OAAO,MAAM,GAAG;AAC5C,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,qBAAqB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,YAAY,UAAU;AAAA,QACtB,UAAU,uBAAuB,UAAU;AAAA;AAAA,MAJtC,uBAAuB,UAAU,EAAE;AAAA,IAK1C;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

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

package/esm/charts/xy-chart/components/thresholds/builder.js

@@ -1,13 +1,15 @@
+import { getXValue } from "./get-x-value.js";
 import { getYValue } from "./get-y-value.js";
-import { isThresholdDynamic } from "./type-guards.js";
-import { axesPositionsIncludes, axisPositionIncludes } from "./utils.js";
+import { isThresholdDynamic, isThresholdXStatic } from "./type-guards.js";
+import { axisPositionIncludes, xAxisPositionIncludes } from "./utils.js";
 import { THRESHOLD_BAR_THICKNESS } from "../../../core/components/threshold-bar/types/constants.js";
 import { isPointThreshold } from "../../../core/types/type-guards.js";
 import { getValidColor } from "../../../core/utils/getValidColor.js";
 import { NoThresholdData } from "../../context/XYChartThresholds.context.js";
 import {
   castDynamicThresholdsDataType,
-  castStaticThresholdsDataType
+  castStaticThresholdsDataType,
+  castStaticXThresholdsDataType
 } from "../../processing-strategies/utils/cast-data/cast-data-types.js";
 import { isAnyNumericalAxis } from "../../types/guards.js";
 function getStrokeOnly(threshold) {
@@ -18,7 +20,17 @@ function getStrokeOnly(threshold) {
   };
   return (isPointThreshold(firstMarkerDomain.y0, firstMarkerDomain.y1) || threshold.strokeOnly) ?? false;
 }
+function getStrokeOnlyX(threshold) {
+  const firstMarkerDomain = {
+    x0: getXValue(threshold.data, "min"),
+    x1: getXValue(threshold.data, "max")
+  };
+  return (isPointThreshold(firstMarkerDomain.x0, firstMarkerDomain.x1) || threshold.strokeOnly) ?? false;
+}
 function hasValidAxes(threshold, yAxisMetadata, xAxisMetadata = void 0) {
+  if (isThresholdXStatic(threshold)) {
+    return !!xAxisMetadata && threshold.xAxisId in xAxisMetadata;
+  }
   let xAxisValid = true;
   if (isThresholdDynamic(threshold) && xAxisMetadata) {
     xAxisValid = threshold.xAxisId !== void 0 && threshold.xAxisId in xAxisMetadata;
@@ -43,9 +55,39 @@ const buildThresholds = (yAxes, xAxes, thresholdSlots) => {
   }, {});
   const leftAxisWithThresholds = /* @__PURE__ */ new Set();
   const rightAxisWithThresholds = /* @__PURE__ */ new Set();
+  const topAxisWithThresholds = /* @__PURE__ */ new Set();
+  const bottomAxisWithThresholds = /* @__PURE__ */ new Set();
   const thresholdsData = thresholdSlots.reduce(
     (acc, threshold) => {
-      if (hasValidAxes(threshold, yAxisMetadata, xAxisMetadata)) {
+      if (!hasValidAxes(threshold, yAxisMetadata, xAxisMetadata)) {
+        return acc;
+      }
+      if (isThresholdXStatic(threshold)) {
+        const xAxis = xAxisMetadata[threshold.xAxisId];
+        const castedData = castStaticXThresholdsDataType(
+          threshold.data,
+          xAxis.type
+        );
+        if (castedData) {
+          if (xAxisPositionIncludes("top")(xAxis.position)) {
+            topAxisWithThresholds.add(threshold.xAxisId);
+          }
+          if (xAxisPositionIncludes("bottom")(xAxis.position)) {
+            bottomAxisWithThresholds.add(threshold.xAxisId);
+          }
+          acc.push({
+            id: crypto.randomUUID(),
+            xAxisId: threshold.xAxisId,
+            color: getValidColor(threshold.color),
+            position: xAxis.position,
+            label: threshold.label,
+            strokeOnly: getStrokeOnlyX(threshold),
+            data: castedData
+          });
+        }
+        return acc;
+      }
+      {
         const yAxis = yAxisMetadata[threshold.yAxisId];
         const baseThresholdData = {
           id: crypto.randomUUID(),
@@ -100,12 +142,18 @@ const buildThresholds = (yAxes, xAxes, thresholdSlots) => {
     thresholds: thresholdsData,
     none: false,
     offset: {
-      left: axesPositionsIncludes("left", thresholdsData) ? THRESHOLD_BAR_THICKNESS : 0,
-      right: axesPositionsIncludes("right", thresholdsData) ? THRESHOLD_BAR_THICKNESS : 0
+      left: leftAxisWithThresholds.size ? THRESHOLD_BAR_THICKNESS : 0,
+      right: rightAxisWithThresholds.size ? THRESHOLD_BAR_THICKNESS : 0,
+      top: topAxisWithThresholds.size ? THRESHOLD_BAR_THICKNESS : 0,
+      bottom: bottomAxisWithThresholds.size ? THRESHOLD_BAR_THICKNESS : 0
     },
     yAxes: {
       left: leftAxisWithThresholds,
       right: rightAxisWithThresholds
+    },
+    xAxes: {
+      top: topAxisWithThresholds,
+      bottom: bottomAxisWithThresholds
     }
   };
   return thresholds;