@dynatrace/strato-components 3.6.0 → 3.7.1

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.tsx"],
-  "sourcesContent": ["import { Fragment } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { isXBaselineAccessor, isYBaselineAccessor } from './BarDisplay.js';\nimport { overlayContainer } from './BarLabelOverlay.sty.js';\nimport { HorizontalBarLabel } from './HorizontalBarLabel.js';\nimport { VerticalBarLabel } from './VerticalBarLabel.js';\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { getColorByContrast } from '../../../../core/utils/color-contrast.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { XYAxisTypeCategorical } from '../../../types/axis.js';\nimport type {\n  BarMetadata,\n  BarSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { type BarDatapoint } from '../../../types/xy-chart.js';\nimport {\n  getCurrentScale,\n  getDimensionScale,\n} from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport {\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from '../bar-accessors.js';\n\ninterface BarLabelOverlayProps {\n  axisIdToScales: AxisIdToScales;\n  series: BarSeriesWithDatapoints;\n  metadata: BarMetadata;\n}\n\nfunction filterToScaleDomain(\n  data: BarDatapoint[],\n  scale: unknown,\n  isVertical: boolean,\n): BarDatapoint[] {\n  const domainFn = (scale as { domain?: () => unknown[] } | undefined)?.domain;\n  if (typeof domainFn !== 'function') {\n    return data;\n  }\n  const domain = domainFn.call(scale);\n  if (!Array.isArray(domain)) {\n    return data;\n  }\n  const allowed = new Set(domain as string[]);\n  return data.filter((d) => {\n    const key = isVertical ? d.x0 : d.y0;\n    return typeof key === 'string' ? allowed.has(key) : true;\n  });\n}\n\n/**\n * Renders the HTML bar labels for a single bar series. Each datapoint produces\n * a `HorizontalBarLabel` or `VerticalBarLabel` depending on the chart's\n * categorical-axis orientation; both use the split-clip pattern to paint the\n * portion inside the bar with a contrasting color and the portion overflowing\n * to the chart edge with the neutral text color.\n *\n * Rendered as a sibling of the `<Canvas>` element (not inside `BarDisplay`)\n * because HTML children of `<canvas>` are fallback content, not visible DOM.\n * See `BarLabelLayout.tsx` for the chart-level wrapper that iterates over\n * labeled bar series and mounts this component.\n */\nexport function BarLabelOverlay({\n  axisIdToScales,\n  series,\n  metadata,\n}: Readonly<BarLabelOverlayProps>) {\n  const { width: canvasWidth, height: canvasHeight } = useGridPlotSize();\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n  const { seriesToMetadata } = useBarData();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  if (!series.hasLabels) {\n    return null;\n  }\n\n  // Resolve scales the same way BarDisplay does \u2014 for the categorical axis\n  // side (the one with a baseline accessor) we pass series.type so the bar's\n  // categoricalBarScale is preferred over currentScale. Without this the label\n  // can land on a different sub-band than the bar it belongs to.\n  const xScale = getCurrentScale(\n    axisIdToScales,\n    series.xAxisId,\n    isXBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionXScale = getDimensionScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    series.yAxisId,\n    isYBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionYScale = getDimensionScale(axisIdToScales, series.yAxisId);\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n  const isVertical = xAxis.type === XYAxisTypeCategorical;\n\n  const isRTL = !isVertical && Boolean(xAxis.reversed);\n  const isTTB = isVertical && Boolean(yAxis.reversed);\n\n  const xFn = xAccessor(\n    xScale,\n    datapointMetadataMap,\n    dimensionXScale,\n    series.id,\n    relAccessor(xAxis, axisIdToScaleDomain),\n  );\n  const yFn = yAccessor(\n    yScale,\n    datapointMetadataMap,\n    dimensionYScale,\n    series.id,\n    relAccessor(yAxis, axisIdToScaleDomain),\n  );\n  const wFn = widthAccessor(\n    xScale,\n    datapointMetadataMap,\n    dimensionXScale,\n    relAccessor(xAxis, axisIdToScaleDomain),\n  );\n  const hFn = heightAccessor(\n    yScale,\n    datapointMetadataMap,\n    dimensionYScale,\n    relAccessor(yAxis, axisIdToScaleDomain),\n  );\n\n  const fillHex = getCanvasColor(metadata.color.Default);\n  // Inside the bar: contrast against the bar fill \u2014 uses theme-aware on-accent\n  // tokens so the chosen color matches the active theme's palette.\n  const insideColor = getColorByContrast(fillHex);\n  // Outside the bar: contrast against the chart background \u2014 theme-aware via\n  // the design token CSS variable.\n  const outsideColor = Colors.Text.Neutral.Default;\n\n  const data = filterToScaleDomain(\n    series.data,\n    isVertical ? xScale : yScale,\n    isVertical,\n  );\n\n  return (\n    <div className={overlayContainer}>\n      {data.map((datum, index) => {\n        const text = datum.label;\n        if (!text) {\n          return null;\n        }\n\n        const x = xFn(datum);\n        const y = yFn(datum);\n        const w = wFn(datum);\n        const h = hFn(datum);\n        const barWidth = Math.abs(w);\n        const barHeight = Math.abs(h);\n\n        return (\n          <Fragment key={index}>\n            {isVertical ? (\n              <VerticalBarLabel\n                x={x}\n                y={y}\n                barWidth={barWidth}\n                barHeight={barHeight}\n                canvasHeight={canvasHeight}\n                isReversed={isTTB}\n                text={text}\n                insideColor={insideColor}\n                outsideColor={outsideColor}\n                truncationMode={truncationMode}\n              />\n            ) : (\n              <HorizontalBarLabel\n                x={x}\n                y={y}\n                barWidth={barWidth}\n                barHeight={barHeight}\n                canvasWidth={canvasWidth}\n                isReversed={isRTL}\n                text={text}\n                insideColor={insideColor}\n                outsideColor={outsideColor}\n                truncationMode={truncationMode}\n              />\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\nBarLabelOverlay['displayName'] = 'BarLabelOverlay';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Fragment } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { isXBaselineAccessor, isYBaselineAccessor } from './BarDisplay.js';\nimport { overlayContainer } from './BarLabelOverlay.sty.js';\nimport { HorizontalBarLabel } from './HorizontalBarLabel.js';\nimport { VerticalBarLabel } from './VerticalBarLabel.js';\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { getColorByContrast } from '../../../../core/utils/color-contrast.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport { XYAxisTypeCategorical } from '../../../types/axis.js';\nimport type {\n  BarMetadata,\n  BarSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { type BarDatapoint } from '../../../types/xy-chart.js';\nimport {\n  getCurrentScale,\n  getDimensionScale,\n} from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport {\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from '../bar-accessors.js';\n\ninterface BarLabelOverlayProps {\n  axisIdToScales: AxisIdToScales;\n  series: BarSeriesWithDatapoints;\n  metadata: BarMetadata;\n  opacity?: number;\n}\n\nfunction filterToScaleDomain(\n  data: BarDatapoint[],\n  scale: unknown,\n  isVertical: boolean,\n): BarDatapoint[] {\n  const domainFn = (scale as { domain?: () => unknown[] } | undefined)?.domain;\n  if (typeof domainFn !== 'function') {\n    return data;\n  }\n  const domain = domainFn.call(scale);\n  if (!Array.isArray(domain)) {\n    return data;\n  }\n  const allowed = new Set(domain as string[]);\n  return data.filter((d) => {\n    const key = isVertical ? d.x0 : d.y0;\n    return typeof key === 'string' ? allowed.has(key) : true;\n  });\n}\n\n/**\n * Renders the HTML bar labels for a single bar series. Each datapoint produces\n * a `HorizontalBarLabel` or `VerticalBarLabel` depending on the chart's\n * categorical-axis orientation; both use the split-clip pattern to paint the\n * portion inside the bar with a contrasting color and the portion overflowing\n * to the chart edge with the neutral text color.\n *\n * Rendered as a sibling of the `<Canvas>` element (not inside `BarDisplay`)\n * because HTML children of `<canvas>` are fallback content, not visible DOM.\n * See `BarLabelLayout.tsx` for the chart-level wrapper that iterates over\n * labeled bar series and mounts this component.\n */\nexport function BarLabelOverlay({\n  axisIdToScales,\n  series,\n  metadata,\n  opacity,\n}: Readonly<BarLabelOverlayProps>) {\n  const { width: canvasWidth, height: canvasHeight } = useGridPlotSize();\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n  const { seriesToMetadata } = useBarData();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  if (!series.hasLabels) {\n    return null;\n  }\n\n  // Resolve scales the same way BarDisplay does \u2014 for the categorical axis\n  // side (the one with a baseline accessor) we pass series.type so the bar's\n  // categoricalBarScale is preferred over currentScale. Without this the label\n  // can land on a different sub-band than the bar it belongs to.\n  const xScale = getCurrentScale(\n    axisIdToScales,\n    series.xAxisId,\n    isXBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionXScale = getDimensionScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    series.yAxisId,\n    isYBaselineAccessor(series.data[0]) ? series.type : undefined,\n  );\n  const dimensionYScale = getDimensionScale(axisIdToScales, series.yAxisId);\n\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n  const isVertical = xAxis.type === XYAxisTypeCategorical;\n\n  const isRTL = !isVertical && Boolean(xAxis.reversed);\n  const isTTB = isVertical && Boolean(yAxis.reversed);\n\n  const xFn = xAccessor(\n    xScale,\n    datapointMetadataMap,\n    dimensionXScale,\n    series.id,\n    relAccessor(xAxis, axisIdToScaleDomain),\n  );\n  const yFn = yAccessor(\n    yScale,\n    datapointMetadataMap,\n    dimensionYScale,\n    series.id,\n    relAccessor(yAxis, axisIdToScaleDomain),\n  );\n  const wFn = widthAccessor(\n    xScale,\n    datapointMetadataMap,\n    dimensionXScale,\n    relAccessor(xAxis, axisIdToScaleDomain),\n  );\n  const hFn = heightAccessor(\n    yScale,\n    datapointMetadataMap,\n    dimensionYScale,\n    relAccessor(yAxis, axisIdToScaleDomain),\n  );\n\n  const fillHex = getCanvasColor(metadata.color.Default);\n  // Inside the bar: contrast against the bar fill \u2014 uses theme-aware on-accent\n  // tokens so the chosen color matches the active theme's palette.\n  const insideColor = getColorByContrast(fillHex);\n  // Outside the bar: contrast against the chart background \u2014 theme-aware via\n  // the design token CSS variable.\n  const outsideColor = Colors.Text.Neutral.Default;\n\n  const data = filterToScaleDomain(\n    series.data,\n    isVertical ? xScale : yScale,\n    isVertical,\n  );\n\n  const dimStyle = opacity !== undefined ? { opacity } : undefined;\n\n  return (\n    <div className={overlayContainer} style={dimStyle}>\n      {data.map((datum, index) => {\n        const text = datum.label;\n        if (!text) {\n          return null;\n        }\n\n        const x = xFn(datum);\n        const y = yFn(datum);\n        const w = wFn(datum);\n        const h = hFn(datum);\n        const barWidth = Math.abs(w);\n        const barHeight = Math.abs(h);\n\n        return (\n          <Fragment key={index}>\n            {isVertical ? (\n              <VerticalBarLabel\n                x={x}\n                y={y}\n                barWidth={barWidth}\n                barHeight={barHeight}\n                canvasHeight={canvasHeight}\n                isReversed={isTTB}\n                text={text}\n                insideColor={insideColor}\n                outsideColor={outsideColor}\n                truncationMode={truncationMode}\n              />\n            ) : (\n              <HorizontalBarLabel\n                x={x}\n                y={y}\n                barWidth={barWidth}\n                barHeight={barHeight}\n                canvasWidth={canvasWidth}\n                isReversed={isRTL}\n                text={text}\n                insideColor={insideColor}\n                outsideColor={outsideColor}\n                truncationMode={truncationMode}\n              />\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\nBarLabelOverlay['displayName'] = 'BarLabelOverlay';\n"],
+  "mappings": "AA4Kc;AA5Kd,SAAS,gBAAgB;AAEzB,OAAO,YAAY;AAEnB,SAAS,qBAAqB,2BAA2B;AACzD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AAMtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,SAAS,oBACP,MACA,OACA,YACgB;AAChB,QAAM,WAAY,OAAoD;AACtE,MAAI,OAAO,aAAa,YAAY;AAClC,WAAO;AAAA,EACT;AACA,QAAM,SAAS,SAAS,KAAK,KAAK;AAClC,MAAI,CAAC,MAAM,QAAQ,MAAM,GAAG;AAC1B,WAAO;AAAA,EACT;AACA,QAAM,UAAU,IAAI,IAAI,MAAkB;AAC1C,SAAO,KAAK,OAAO,CAAC,MAAM;AACxB,UAAM,MAAM,aAAa,EAAE,KAAK,EAAE;AAClC,WAAO,OAAO,QAAQ,WAAW,QAAQ,IAAI,GAAG,IAAI;AAAA,EACtD,CAAC;AACH;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAAI,gBAAgB;AACrE,QAAM,EAAE,sBAAsB,oBAAoB,IAAI,eAAe;AACrE,QAAM,EAAE,iBAAiB,IAAI,WAAW;AACxC,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,MAAI,CAAC,OAAO,WAAW;AACrB,WAAO;AAAA,EACT;AAMA,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AACxE,QAAM,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,OAAO;AAAA,EACtD;AACA,QAAM,kBAAkB,kBAAkB,gBAAgB,OAAO,OAAO;AAExE,QAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkB,MAAM;AACzD,QAAM,aAAa,MAAM,SAAS;AAElC,QAAM,QAAQ,CAAC,cAAc,QAAQ,MAAM,QAAQ;AACnD,QAAM,QAAQ,cAAc,QAAQ,MAAM,QAAQ;AAElD,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY,OAAO,mBAAmB;AAAA,EACxC;AACA,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY,OAAO,mBAAmB;AAAA,EACxC;AACA,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,OAAO,mBAAmB;AAAA,EACxC;AACA,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,OAAO,mBAAmB;AAAA,EACxC;AAEA,QAAM,UAAU,eAAe,SAAS,MAAM,OAAO;AAGrD,QAAM,cAAc,mBAAmB,OAAO;AAG9C,QAAM,eAAe,OAAO,KAAK,QAAQ;AAEzC,QAAM,OAAO;AAAA,IACX,OAAO;AAAA,IACP,aAAa,SAAS;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,WAAW,YAAY,SAAY,EAAE,QAAQ,IAAI;AAEvD,SACE,oBAAC,SAAI,WAAW,kBAAkB,OAAO,UACtC,eAAK,IAAI,CAAC,OAAO,UAAU;AAC1B,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAEA,UAAM,IAAI,IAAI,KAAK;AACnB,UAAM,IAAI,IAAI,KAAK;AACnB,UAAM,IAAI,IAAI,KAAK;AACnB,UAAM,IAAI,IAAI,KAAK;AACnB,UAAM,WAAW,KAAK,IAAI,CAAC;AAC3B,UAAM,YAAY,KAAK,IAAI,CAAC;AAE5B,WACE,oBAAC,YACE,uBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,KA1BW,KA4Bf;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./BarLabelOverlay.css";
-var labelClipWrapper = "_b76tm82-3-6-0";
-var labelSpan = "_b76tm81-3-6-0";
-var overlayContainer = "_b76tm80-3-6-0";
+var labelClipWrapper = "_b76tm82-3-7-1";
+var labelSpan = "_b76tm81-3-7-1";
+var overlayContainer = "_b76tm80-3-7-1";
 export {
   labelClipWrapper,
   labelSpan,

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css.ts"],
-  "sourcesContent": ["import './BarLabelOverlay.css';\nexport var labelClipWrapper = '_b76tm82-3-6-0';\nexport var labelSpan = '_b76tm81-3-6-0';\nexport var overlayContainer = '_b76tm80-3-6-0';"],
+  "sourcesContent": ["import './BarLabelOverlay.css';\nexport var labelClipWrapper = '_b76tm82-3-7-1';\nexport var labelSpan = '_b76tm81-3-7-1';\nexport var overlayContainer = '_b76tm80-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,YAAY;AAChB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/bar-accessors.js

@@ -1,4 +1,5 @@
 import { isNil } from "lodash-es";
+import { BAR_STROKE_WIDTH } from "../../constants/defaults.js";
 import {
   isCategoricalBarScale,
   isNumericalBarScale,
@@ -115,7 +116,7 @@ const calculateBarDimension = (args) => {
     return Math.abs(zero - scale(v1));
   }
   if (!isNil(v0)) {
-    return scale(v0);
+    return BAR_STROKE_WIDTH;
   }
   return void 0;
 };

package/esm/charts/xy-chart/components/displays/bar-accessors.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/bar-accessors.ts"],
-  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\nimport { isNil } from 'lodash-es';\n\nimport type { BarScaleLinear, BarScaleTime } from '../../types/guards.js';\nimport type {\n  AnyXYChartScale,\n  MapDatapoints,\n  XYChartAxisDirection,\n} from '../../types/xy-chart-internals.js';\nimport type { BarDatapoint } from '../../types/xy-chart.js';\nimport {\n  isCategoricalBarScale,\n  isNumericalBarScale,\n  isTimeBarScale,\n} from '../../utils/type-guards.js';\n\nexport const applyNumericalBarScaleTransformations = (\n  args: BarScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n) => {\n  const isNotBaseline = baseline !== undefined && accessorCoord !== baseline;\n  let { v0, v1 } = args;\n\n  if (isNotBaseline && accumulator !== undefined) {\n    v0 = !isNil(v0) ? v0 + accumulator : accumulator;\n    v1 = !isNil(v1) ? v1 + accumulator : accumulator;\n  }\n\n  if (relAccessor && isNotBaseline && !isNil(binDomain)) {\n    return {\n      v0: !isNil(v0) ? (v0 / binDomain) * 100 : v0,\n      v1: !isNil(v1) ? (v1 / binDomain) * 100 : v1,\n      scale: args.scale,\n    };\n  }\n\n  if (relAccessor) {\n    return {\n      v0: !isNil(v0) ? relAccessor(v0) : v0,\n      v1: !isNil(v1) ? relAccessor(v1) : v1,\n      scale: args.scale,\n    };\n  }\n\n  return { v0, v1, scale: args.scale };\n};\n\nfunction calculateBarOrigin(\n  args: BarScaleLinear | BarScaleTime,\n  accessorCoord: Exclude<XYChartAxisDirection, undefined>,\n) {\n  const { scale, v0, v1 } = args;\n  if (!isNil(v0) && !isNil(v1)) {\n    return Math.min(scale(v0), scale(v1));\n  }\n  if (!isNil(v0)) {\n    return scale(v0);\n  }\n  if (isNil(v1)) {\n    return undefined;\n  }\n  if (typeof v1 === 'number' && v1 < 0) {\n    return accessorCoord === 'x' ? scale(v1) : scale(0);\n  }\n  // Use Math.min so that reversed axes (RTL/TTB) produce the correct leading\n  // edge: whichever of the baseline pixel and scale(v1) is smaller is the\n  // bar's origin in canvas coordinates.\n  return typeof v1 === 'number'\n    ? Math.min(scale(0), scale(v1))\n    : Math.min(scale(scale.invert(scale.range()[0])), scale(v1));\n}\n\nfunction genericAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  accessorCoord: Exclude<XYChartAxisDirection, undefined>,\n  dimensionScale?: ScaleBand<string>,\n  seriesId?: string,\n  relAccessor?: (value: number) => number,\n) {\n  return (datapoint: BarDatapoint) => {\n    const v0 = accessorCoord === 'x' ? datapoint.x0 : datapoint.y0;\n    const v1 = accessorCoord === 'x' ? datapoint.x1 : datapoint.y1;\n    let args = { scale, v0, v1 };\n    const { baseline, accumulator, binDomain } =\n      datapointsMetadata.get(datapoint) ?? {};\n\n    if (isCategoricalBarScale(args)) {\n      if (!isNil(args.v0)) {\n        if (dimensionScale && seriesId) {\n          return (args.scale(args.v0) ?? 0) + (dimensionScale(seriesId) ?? 0);\n        }\n        return args.scale(args.v0) ?? 0;\n      }\n      if (!isNil(args.v1)) {\n        if (accessorCoord === 'x') {\n          const [min] = args.scale.range();\n          return min;\n        } else {\n          const catWidth = Math.floor(args.scale.bandwidth() / 2);\n          return (args.scale(args.v1) ?? 0) + catWidth;\n        }\n      }\n    }\n\n    if (isNumericalBarScale(args)) {\n      args = applyNumericalBarScaleTransformations(\n        args,\n        accessorCoord,\n        baseline,\n        relAccessor,\n        accumulator,\n        binDomain,\n      );\n    }\n\n    if (isNumericalBarScale(args) || isTimeBarScale(args)) {\n      const barOrigin = calculateBarOrigin(args, accessorCoord);\n      if (!isNil(barOrigin)) {\n        return barOrigin;\n      }\n    }\n\n    throw Error(`unknown ${accessorCoord}Accessor value for Bar`);\n  };\n}\n\nexport function xAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  seriesId?: string,\n  relAccessor?: (value: number) => number,\n) {\n  return genericAccessor(\n    scale,\n    datapointsMetadata,\n    'x',\n    dimensionScale,\n    seriesId,\n    relAccessor,\n  );\n}\n\nexport function yAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  seriesId?: string,\n  relAccessor?: (value: number) => number,\n) {\n  return genericAccessor(\n    scale,\n    datapointsMetadata,\n    'y',\n    dimensionScale,\n    seriesId,\n    relAccessor,\n  );\n}\n\n// Just for Numerical and Time scales\nconst calculateBarDimension = (args: BarScaleLinear | BarScaleTime) => {\n  const { scale, v0, v1 } = args;\n  if (!isNil(v0) && !isNil(v1)) {\n    return Math.abs(scale(v1) - scale(v0));\n  }\n  if (!isNil(v1)) {\n    const zero =\n      typeof v1 === 'number' ? scale(0) : scale(scale.invert(scale.range()[0]));\n\n    return Math.abs(zero - scale(v1));\n  }\n  if (!isNil(v0)) {\n    return scale(v0);\n  }\n  return undefined;\n};\n\nfunction spanAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  accessorCoord: Exclude<XYChartAxisDirection, undefined>,\n  dimensionScale?: ScaleBand<string>,\n  relAccessor?: (value: number) => number,\n) {\n  return (datapoint: BarDatapoint) => {\n    const v0 = accessorCoord === 'x' ? datapoint.x0 : datapoint.y0;\n    const v1 = accessorCoord === 'x' ? datapoint.x1 : datapoint.y1;\n    let args = { scale, v0, v1 };\n    const { baseline, accumulator, binDomain } =\n      datapointsMetadata.get(datapoint) ?? {};\n\n    if (isCategoricalBarScale(args)) {\n      if (!isNil(args.v0)) {\n        if (dimensionScale) {\n          return dimensionScale.bandwidth();\n        }\n        return args.scale.bandwidth();\n      }\n      if (!isNil(args.v1)) {\n        if (accessorCoord === 'x') {\n          const catWidth = Math.floor(args.scale.bandwidth() / 2);\n          return (args.scale(args.v1) ?? 0) + catWidth;\n        } else {\n          const [, min] = scale.range();\n          const catWidth = Math.floor(args.scale.bandwidth() / 2);\n          const barY = (args.scale(args.v1) ?? 0) + catWidth;\n          return min - barY;\n        }\n      }\n    }\n\n    if (isNumericalBarScale(args)) {\n      args = applyNumericalBarScaleTransformations(\n        args,\n        accessorCoord,\n        baseline,\n        relAccessor,\n        accumulator,\n        binDomain,\n      );\n    }\n\n    if (isNumericalBarScale(args) || isTimeBarScale(args)) {\n      const span = calculateBarDimension(args);\n      if (!isNil(span)) {\n        return span;\n      }\n    }\n\n    throw Error(\n      `unknown ${\n        accessorCoord === 'x' ? 'width' : 'height'\n      }Accessor value for Bar`,\n    );\n  };\n}\n\nexport function widthAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  relAccessor?: (value: number) => number,\n) {\n  return spanAccessor(\n    scale,\n    datapointsMetadata,\n    'x',\n    dimensionScale,\n    relAccessor,\n  );\n}\n\nexport function heightAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  relAccessor?: (value: number) => number,\n) {\n  return spanAccessor(\n    scale,\n    datapointsMetadata,\n    'y',\n    dimensionScale,\n    relAccessor,\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\nimport { isNil } from 'lodash-es';\n\nimport { BAR_STROKE_WIDTH } from '../../constants/defaults.js';\nimport type { BarScaleLinear, BarScaleTime } from '../../types/guards.js';\nimport type {\n  AnyXYChartScale,\n  MapDatapoints,\n  XYChartAxisDirection,\n} from '../../types/xy-chart-internals.js';\nimport type { BarDatapoint } from '../../types/xy-chart.js';\nimport {\n  isCategoricalBarScale,\n  isNumericalBarScale,\n  isTimeBarScale,\n} from '../../utils/type-guards.js';\n\nexport const applyNumericalBarScaleTransformations = (\n  args: BarScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n) => {\n  const isNotBaseline = baseline !== undefined && accessorCoord !== baseline;\n  let { v0, v1 } = args;\n\n  if (isNotBaseline && accumulator !== undefined) {\n    v0 = !isNil(v0) ? v0 + accumulator : accumulator;\n    v1 = !isNil(v1) ? v1 + accumulator : accumulator;\n  }\n\n  if (relAccessor && isNotBaseline && !isNil(binDomain)) {\n    return {\n      v0: !isNil(v0) ? (v0 / binDomain) * 100 : v0,\n      v1: !isNil(v1) ? (v1 / binDomain) * 100 : v1,\n      scale: args.scale,\n    };\n  }\n\n  if (relAccessor) {\n    return {\n      v0: !isNil(v0) ? relAccessor(v0) : v0,\n      v1: !isNil(v1) ? relAccessor(v1) : v1,\n      scale: args.scale,\n    };\n  }\n\n  return { v0, v1, scale: args.scale };\n};\n\nfunction calculateBarOrigin(\n  args: BarScaleLinear | BarScaleTime,\n  accessorCoord: Exclude<XYChartAxisDirection, undefined>,\n) {\n  const { scale, v0, v1 } = args;\n  if (!isNil(v0) && !isNil(v1)) {\n    return Math.min(scale(v0), scale(v1));\n  }\n  if (!isNil(v0)) {\n    return scale(v0);\n  }\n  if (isNil(v1)) {\n    return undefined;\n  }\n  if (typeof v1 === 'number' && v1 < 0) {\n    return accessorCoord === 'x' ? scale(v1) : scale(0);\n  }\n  // Use Math.min so that reversed axes (RTL/TTB) produce the correct leading\n  // edge: whichever of the baseline pixel and scale(v1) is smaller is the\n  // bar's origin in canvas coordinates.\n  return typeof v1 === 'number'\n    ? Math.min(scale(0), scale(v1))\n    : Math.min(scale(scale.invert(scale.range()[0])), scale(v1));\n}\n\nfunction genericAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  accessorCoord: Exclude<XYChartAxisDirection, undefined>,\n  dimensionScale?: ScaleBand<string>,\n  seriesId?: string,\n  relAccessor?: (value: number) => number,\n) {\n  return (datapoint: BarDatapoint) => {\n    const v0 = accessorCoord === 'x' ? datapoint.x0 : datapoint.y0;\n    const v1 = accessorCoord === 'x' ? datapoint.x1 : datapoint.y1;\n    let args = { scale, v0, v1 };\n    const { baseline, accumulator, binDomain } =\n      datapointsMetadata.get(datapoint) ?? {};\n\n    if (isCategoricalBarScale(args)) {\n      if (!isNil(args.v0)) {\n        if (dimensionScale && seriesId) {\n          return (args.scale(args.v0) ?? 0) + (dimensionScale(seriesId) ?? 0);\n        }\n        return args.scale(args.v0) ?? 0;\n      }\n      if (!isNil(args.v1)) {\n        if (accessorCoord === 'x') {\n          const [min] = args.scale.range();\n          return min;\n        } else {\n          const catWidth = Math.floor(args.scale.bandwidth() / 2);\n          return (args.scale(args.v1) ?? 0) + catWidth;\n        }\n      }\n    }\n\n    if (isNumericalBarScale(args)) {\n      args = applyNumericalBarScaleTransformations(\n        args,\n        accessorCoord,\n        baseline,\n        relAccessor,\n        accumulator,\n        binDomain,\n      );\n    }\n\n    if (isNumericalBarScale(args) || isTimeBarScale(args)) {\n      const barOrigin = calculateBarOrigin(args, accessorCoord);\n      if (!isNil(barOrigin)) {\n        return barOrigin;\n      }\n    }\n\n    throw Error(`unknown ${accessorCoord}Accessor value for Bar`);\n  };\n}\n\nexport function xAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  seriesId?: string,\n  relAccessor?: (value: number) => number,\n) {\n  return genericAccessor(\n    scale,\n    datapointsMetadata,\n    'x',\n    dimensionScale,\n    seriesId,\n    relAccessor,\n  );\n}\n\nexport function yAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  seriesId?: string,\n  relAccessor?: (value: number) => number,\n) {\n  return genericAccessor(\n    scale,\n    datapointsMetadata,\n    'y',\n    dimensionScale,\n    seriesId,\n    relAccessor,\n  );\n}\n\n// Just for Numerical and Time scales\nconst calculateBarDimension = (args: BarScaleLinear | BarScaleTime) => {\n  const { scale, v0, v1 } = args;\n  if (!isNil(v0) && !isNil(v1)) {\n    return Math.abs(scale(v1) - scale(v0));\n  }\n  if (!isNil(v1)) {\n    const zero =\n      typeof v1 === 'number' ? scale(0) : scale(scale.invert(scale.range()[0]));\n\n    return Math.abs(zero - scale(v1));\n  }\n  if (!isNil(v0)) {\n    return BAR_STROKE_WIDTH;\n  }\n  return undefined;\n};\n\nfunction spanAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  accessorCoord: Exclude<XYChartAxisDirection, undefined>,\n  dimensionScale?: ScaleBand<string>,\n  relAccessor?: (value: number) => number,\n) {\n  return (datapoint: BarDatapoint) => {\n    const v0 = accessorCoord === 'x' ? datapoint.x0 : datapoint.y0;\n    const v1 = accessorCoord === 'x' ? datapoint.x1 : datapoint.y1;\n    let args = { scale, v0, v1 };\n    const { baseline, accumulator, binDomain } =\n      datapointsMetadata.get(datapoint) ?? {};\n\n    if (isCategoricalBarScale(args)) {\n      if (!isNil(args.v0)) {\n        if (dimensionScale) {\n          return dimensionScale.bandwidth();\n        }\n        return args.scale.bandwidth();\n      }\n      if (!isNil(args.v1)) {\n        if (accessorCoord === 'x') {\n          const catWidth = Math.floor(args.scale.bandwidth() / 2);\n          return (args.scale(args.v1) ?? 0) + catWidth;\n        } else {\n          const [, min] = scale.range();\n          const catWidth = Math.floor(args.scale.bandwidth() / 2);\n          const barY = (args.scale(args.v1) ?? 0) + catWidth;\n          return min - barY;\n        }\n      }\n    }\n\n    if (isNumericalBarScale(args)) {\n      args = applyNumericalBarScaleTransformations(\n        args,\n        accessorCoord,\n        baseline,\n        relAccessor,\n        accumulator,\n        binDomain,\n      );\n    }\n\n    if (isNumericalBarScale(args) || isTimeBarScale(args)) {\n      const span = calculateBarDimension(args);\n      if (!isNil(span)) {\n        return span;\n      }\n    }\n\n    throw Error(\n      `unknown ${\n        accessorCoord === 'x' ? 'width' : 'height'\n      }Accessor value for Bar`,\n    );\n  };\n}\n\nexport function widthAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  relAccessor?: (value: number) => number,\n) {\n  return spanAccessor(\n    scale,\n    datapointsMetadata,\n    'x',\n    dimensionScale,\n    relAccessor,\n  );\n}\n\nexport function heightAccessor(\n  scale: AnyXYChartScale,\n  datapointsMetadata: MapDatapoints,\n  dimensionScale?: ScaleBand<string>,\n  relAccessor?: (value: number) => number,\n) {\n  return spanAccessor(\n    scale,\n    datapointsMetadata,\n    'y',\n    dimensionScale,\n    relAccessor,\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-6-0 {
+._1lwufqz0-3-7-1 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -1,5 +1,5 @@
 import "./xy-legend.css";
-var shapeIconWrapper = "_1lwufqz0-3-6-0";
+var shapeIconWrapper = "_1lwufqz0-3-7-1";
 export {
   shapeIconWrapper
 };

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-6-0';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-6-0 {
+._1bbe5uo0-3-7-1 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

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

@@ -20,7 +20,9 @@ import { useVisibleAxesScales } from "../../../hooks/useVisibleAxesScales.js";
 import { useXYChartData } from "../../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
 import { useFilteredSeriesIdsState } from "../../../store/selectors.js";
-import { UndefinedContent } from "../../../types/state.js";
+import {
+  UndefinedContent
+} from "../../../types/state.js";
 import {
   isAreaTooltipContent,
   isDotTooltipContent,
@@ -49,7 +51,7 @@ function XYChartCrosshairLines({
   useSelector(({ relativeX: relativeX2, relativeY: relativeY2 }) => `${relativeX2}-${relativeY2}`);
   const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();
   const position = relativeX !== null && relativeY !== null ? { x: relativeX, y: relativeY } : void 0;
-  const tooltipContent = data.metadata || UndefinedContent;
+  const tooltipContent = data.metadata?.preferred ?? UndefinedContent;
   const { xAxis, yAxis, variant, orientation, isStacked } = seriesToMetadata.get(tooltipContent?.series) ?? {};
   const isArea = isAreaTooltipContent(tooltipContent);
   const isHorizontal = orientation === "horizontal";

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, 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 { 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 { type TooltipContent, UndefinedContent } 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 = (data.metadata as TooltipContent) || 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 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 = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\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, 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 { 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 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 = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\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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",
   "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-6-0";
+var crosshair = "_1bbe5uo0-3-7-1";
 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-6-0';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._cd1yys0-3-6-0 {
+._cd1yys0-3-7-1 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-6-0 {
+._cd1yys1-3-7-1 {
   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-6-0 _13lzg4k0-3-6-0";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-6-0 _13lzg4k0-3-6-0";
+var datapointIndicatorLayout = "_cd1yys1-3-7-1 _13lzg4k0-3-7-1";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-7-1 _13lzg4k0-3-7-1";
 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-6-0 _13lzg4k0-3-6-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-6-0 _13lzg4k0-3-6-0';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-7-1 _13lzg4k0-3-7-1';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-7-1 _13lzg4k0-3-7-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }

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

@@ -16,11 +16,10 @@ import { useSelectState } from "../../../store/selectors.js";
 import { useTooltipMetadata } from "../hooks/useTooltipMetadata.js";
 import {
   buildContentHighlightedPoint,
-  buildSelectionHighlightedPoints,
-  hasLinearContentPoint
+  buildSelectionHighlightedPoints
 } from "../utils/get-selected-datapoints.js";
 const XYChartLinearPoint = memo(() => {
-  const contentState = useTooltipMetadata("linear");
+  const allLinearDatapoints = useTooltipMetadata("linear");
   const selectState = useSelectState();
   const { width, height } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();
@@ -39,7 +38,7 @@ const XYChartLinearPoint = memo(() => {
     seriesToMetadata: areaSeriesMeta,
     filteredSeriesWithDatapoints: areaSeriesWithDatapoints
   } = useAreaData();
-  const showContentPoint = hasLinearContentPoint(contentState);
+  const showContentPoint = allLinearDatapoints.length > 0;
   const showPoint = !showContentPoint && (!selectState || linearSelection.selectionConfigByAxisId.size === 0);
   if (showPoint) {
     return null;
@@ -59,15 +58,17 @@ const XYChartLinearPoint = memo(() => {
     axes,
     datapointMetadataMap
   });
-  const contentPoints = showContentPoint ? buildContentHighlightedPoint({
-    contentState,
-    axisIdToScales,
-    dotSeriesMeta,
-    lineSeriesMeta,
-    areaSeriesMeta,
-    axisIdToScaleDomain,
-    datapointMetadataMap
-  }) : [];
+  const contentPoints = allLinearDatapoints.flatMap(
+    (contentState) => buildContentHighlightedPoint({
+      contentState,
+      axisIdToScales,
+      dotSeriesMeta,
+      lineSeriesMeta,
+      areaSeriesMeta,
+      axisIdToScaleDomain,
+      datapointMetadataMap
+    })
+  );
   const highlightedPoints = [
     ...selectionPoints,
     ...contentPoints

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.tsx"],
-  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedPointCanvas } from './HighlightedPointCanvas.js';\nimport { datapointIndicatorShiftedLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartLinearSelection } from '../../../hooks/useXYChartLinearSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { type HighlightedLinearPoint } from '../../../types/xy-chart-internals.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport {\n  buildContentHighlightedPoint,\n  buildSelectionHighlightedPoints,\n  hasLinearContentPoint,\n} from '../utils/get-selected-datapoints.js';\n\nexport const XYChartLinearPoint = memo(() => {\n  const contentState = useTooltipMetadata('linear');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const linearSelection = useXYChartLinearSelection();\n  const { axisIdToScaleDomain } = useXYChartData();\n  const { axes, datapointMetadataMap } = useXYChartData();\n\n  const {\n    seriesToMetadata: dotSeriesMeta,\n    filteredSeriesWithDatapoints: dotSeriesWithDatapoints,\n  } = useDotData();\n  const {\n    seriesToMetadata: lineSeriesMeta,\n    filteredSeriesWithDatapoints: lineSeriesWithDatapoints,\n  } = useLineData();\n  const {\n    seriesToMetadata: areaSeriesMeta,\n    filteredSeriesWithDatapoints: areaSeriesWithDatapoints,\n  } = useAreaData();\n\n  const showContentPoint = hasLinearContentPoint(contentState);\n\n  const showPoint =\n    !showContentPoint &&\n    (!selectState || linearSelection.selectionConfigByAxisId.size === 0);\n\n  if (showPoint) {\n    return null;\n  }\n\n  const selectionPoints = buildSelectionHighlightedPoints({\n    selectState,\n    linearSelection,\n    width,\n    axisIdToScales,\n    dotSeriesWithDatapoints,\n    lineSeriesWithDatapoints,\n    areaSeriesWithDatapoints,\n    dotSeriesMeta,\n    lineSeriesMeta,\n    areaSeriesMeta,\n    axisIdToScaleDomain,\n    axes,\n    datapointMetadataMap,\n  });\n\n  const contentPoints = showContentPoint\n    ? buildContentHighlightedPoint({\n        contentState,\n        axisIdToScales,\n        dotSeriesMeta,\n        lineSeriesMeta,\n        areaSeriesMeta,\n        axisIdToScaleDomain,\n        datapointMetadataMap,\n      })\n    : [];\n\n  const highlightedPoints: HighlightedLinearPoint[] = [\n    ...selectionPoints,\n    ...contentPoints,\n  ];\n\n  if (!highlightedPoints.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorShiftedLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + 2 * POINT_OVERLAY_PADDING}\n          height={height + 2 * POINT_OVERLAY_PADDING}\n        >\n          <HighlightedPointCanvas points={highlightedPoints} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartLinearPoint['displayName'] = 'XYChartLinearPoint';\n"],
-  "mappings": "AAwGU;AAxGV,SAAS,YAAmC;AAE5C,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,KAAK,MAAM;AAC3C,QAAM,eAAe,mBAAmB,QAAQ;AAChD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,EAAE,oBAAoB,IAAI,eAAe;AAC/C,QAAM,EAAE,MAAM,qBAAqB,IAAI,eAAe;AAEtD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAChB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,sBAAsB,YAAY;AAE3D,QAAM,YACJ,CAAC,qBACA,CAAC,eAAe,gBAAgB,wBAAwB,SAAS;AAEpE,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,gCAAgC;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,mBAClB,6BAA6B;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,IACD,CAAC;AAEL,QAAM,oBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,CAAC,kBAAkB,QAAQ;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,iCACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,SAAS,IAAI;AAAA,UAErB,8BAAC,0BAAuB,QAAQ,mBAAmB;AAAA;AAAA,MACrD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedPointCanvas } from './HighlightedPointCanvas.js';\nimport { datapointIndicatorShiftedLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport { useAreaData } from '../../../hooks/useAreaData.js';\nimport { useDotData } from '../../../hooks/useDotData.js';\nimport { useLineData } from '../../../hooks/useLineData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartLinearSelection } from '../../../hooks/useXYChartLinearSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { type HighlightedLinearPoint } from '../../../types/xy-chart-internals.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport {\n  buildContentHighlightedPoint,\n  buildSelectionHighlightedPoints,\n} from '../utils/get-selected-datapoints.js';\n\nexport const XYChartLinearPoint = memo(() => {\n  const allLinearDatapoints = useTooltipMetadata('linear');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const linearSelection = useXYChartLinearSelection();\n  const { axisIdToScaleDomain } = useXYChartData();\n  const { axes, datapointMetadataMap } = useXYChartData();\n\n  const {\n    seriesToMetadata: dotSeriesMeta,\n    filteredSeriesWithDatapoints: dotSeriesWithDatapoints,\n  } = useDotData();\n  const {\n    seriesToMetadata: lineSeriesMeta,\n    filteredSeriesWithDatapoints: lineSeriesWithDatapoints,\n  } = useLineData();\n  const {\n    seriesToMetadata: areaSeriesMeta,\n    filteredSeriesWithDatapoints: areaSeriesWithDatapoints,\n  } = useAreaData();\n\n  const showContentPoint = allLinearDatapoints.length > 0;\n\n  const showPoint =\n    !showContentPoint &&\n    (!selectState || linearSelection.selectionConfigByAxisId.size === 0);\n\n  if (showPoint) {\n    return null;\n  }\n\n  const selectionPoints = buildSelectionHighlightedPoints({\n    selectState,\n    linearSelection,\n    width,\n    axisIdToScales,\n    dotSeriesWithDatapoints,\n    lineSeriesWithDatapoints,\n    areaSeriesWithDatapoints,\n    dotSeriesMeta,\n    lineSeriesMeta,\n    areaSeriesMeta,\n    axisIdToScaleDomain,\n    axes,\n    datapointMetadataMap,\n  });\n\n  const contentPoints = allLinearDatapoints.flatMap((contentState) =>\n    buildContentHighlightedPoint({\n      contentState,\n      axisIdToScales,\n      dotSeriesMeta,\n      lineSeriesMeta,\n      areaSeriesMeta,\n      axisIdToScaleDomain,\n      datapointMetadataMap,\n    }),\n  );\n\n  const highlightedPoints: HighlightedLinearPoint[] = [\n    ...selectionPoints,\n    ...contentPoints,\n  ];\n\n  if (!highlightedPoints.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorShiftedLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + 2 * POINT_OVERLAY_PADDING}\n          height={height + 2 * POINT_OVERLAY_PADDING}\n        >\n          <HighlightedPointCanvas points={highlightedPoints} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartLinearPoint['displayName'] = 'XYChartLinearPoint';\n"],
+  "mappings": "AAuGU;AAvGV,SAAS,YAAmC;AAE5C,SAAS,8BAA8B;AACvC,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB,KAAK,MAAM;AAC3C,QAAM,sBAAsB,mBAAmB,QAAQ;AACvD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,EAAE,oBAAoB,IAAI,eAAe;AAC/C,QAAM,EAAE,MAAM,qBAAqB,IAAI,eAAe;AAEtD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAChB,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,oBAAoB,SAAS;AAEtD,QAAM,YACJ,CAAC,qBACA,CAAC,eAAe,gBAAgB,wBAAwB,SAAS;AAEpE,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,gCAAgC;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,oBAAoB;AAAA,IAAQ,CAAC,iBACjD,6BAA6B;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,oBAA8C;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,MAAI,CAAC,kBAAkB,QAAQ;AAC7B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,iCACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,SAAS,IAAI;AAAA,UAErB,8BAAC,0BAAuB,QAAQ,mBAAmB;AAAA;AAAA,MACrD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,mBAAmB,aAAa,IAAI;",
   "names": []
 }

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

@@ -15,7 +15,7 @@ import { useSelectState } from "../../../store/selectors.js";
 import { useTooltipMetadata } from "../hooks/useTooltipMetadata.js";
 import { buildRectangleHighlightedPoints } from "../utils/get-selected-datapoints.js";
 const XYChartRectanglePoint = memo(() => {
-  const contentState = useTooltipMetadata("rectangle");
+  const allRectangleDatapoints = useTooltipMetadata("rectangle");
   const selectState = useSelectState();
   const { width, height } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();
@@ -31,7 +31,7 @@ const XYChartRectanglePoint = memo(() => {
     filteredSeriesWithDatapoints: rectSeriesWithDatapoints
   } = useRectData();
   const highlightedRects = buildRectangleHighlightedPoints({
-    contentState,
+    allRectangleDatapoints,
     selectState,
     rectSelection,
     width,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartRectanglePoint.tsx"],
-  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedRectangleCanvas } from './HighlightedRectangleCanvas.js';\nimport { datapointIndicatorLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { RECT_STROKE_WIDTH } from '../../../constants/defaults.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartRectSelection } from '../../../hooks/useXYChartRectSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport { buildRectangleHighlightedPoints } from '../utils/get-selected-datapoints.js';\n\nexport const XYChartRectanglePoint = memo(() => {\n  const contentState = useTooltipMetadata('rectangle');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const rectSelection = useXYChartRectSelection();\n  const { datapointMetadataMap } = useXYChartData();\n  const { axisIdToScaleDomain, axes } = useXYChartData();\n\n  const {\n    seriesToMetadata: barSeriesMeta,\n    filteredSeriesWithDatapoints: barSeriesWithDatapoints,\n  } = useBarData();\n  const {\n    seriesToMetadata: rectSeriesMeta,\n    filteredSeriesWithDatapoints: rectSeriesWithDatapoints,\n  } = useRectData();\n\n  const highlightedRects = buildRectangleHighlightedPoints({\n    contentState,\n    selectState,\n    rectSelection,\n    width,\n    rectSeriesWithDatapoints,\n    barSeriesWithDatapoints,\n    axisIdToScales,\n    barSeriesMeta,\n    rectSeriesMeta,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    axes,\n  });\n\n  if (!highlightedRects.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + RECT_STROKE_WIDTH}\n          height={height + RECT_STROKE_WIDTH}\n        >\n          <HighlightedRectangleCanvas points={highlightedRects} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartRectanglePoint.displayName = 'XYChartRectanglePoint';\n"],
-  "mappings": "AAkEU;AAlEV,SAAS,YAAmC;AAE5C,SAAS,kCAAkC;AAC3C,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uCAAuC;AAEzC,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,eAAe,mBAAmB,WAAW;AACnD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAChD,QAAM,EAAE,qBAAqB,KAAK,IAAI,eAAe;AAErD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,gCAAgC;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,iBAAiB,QAAQ;AAC5B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UAEjB,8BAAC,8BAA2B,QAAQ,kBAAkB;AAAA;AAAA,MACxD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;",
+  "sourcesContent": ["import { memo, type MutableRefObject } from 'react';\n\nimport { HighlightedRectangleCanvas } from './HighlightedRectangleCanvas.js';\nimport { datapointIndicatorLayout } from './XYChartExplore.sty.js';\nimport { Canvas } from '../../../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../../../core/components/canvas/CanvasContext.js';\nimport type { CanvasShape } from '../../../../core/components/canvas/types/canvas-shape.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { RECT_STROKE_WIDTH } from '../../../constants/defaults.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useRectData } from '../../../hooks/useRectData.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartRectSelection } from '../../../hooks/useXYChartRectSelection.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useSelectState } from '../../../store/selectors.js';\nimport { useTooltipMetadata } from '../hooks/useTooltipMetadata.js';\nimport { buildRectangleHighlightedPoints } from '../utils/get-selected-datapoints.js';\n\nexport const XYChartRectanglePoint = memo(() => {\n  const allRectangleDatapoints = useTooltipMetadata('rectangle');\n  const selectState = useSelectState();\n  const { width, height } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const rectSelection = useXYChartRectSelection();\n  const { datapointMetadataMap } = useXYChartData();\n  const { axisIdToScaleDomain, axes } = useXYChartData();\n\n  const {\n    seriesToMetadata: barSeriesMeta,\n    filteredSeriesWithDatapoints: barSeriesWithDatapoints,\n  } = useBarData();\n  const {\n    seriesToMetadata: rectSeriesMeta,\n    filteredSeriesWithDatapoints: rectSeriesWithDatapoints,\n  } = useRectData();\n\n  const highlightedRects = buildRectangleHighlightedPoints({\n    allRectangleDatapoints,\n    selectState,\n    rectSelection,\n    width,\n    rectSeriesWithDatapoints,\n    barSeriesWithDatapoints,\n    axisIdToScales,\n    barSeriesMeta,\n    rectSeriesMeta,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    axes,\n  });\n\n  if (!highlightedRects.length) {\n    return null;\n  }\n\n  return (\n    <div className={datapointIndicatorLayout}>\n      <CanvasContext.Provider\n        value={{\n          shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n        }}\n      >\n        <Canvas\n          width={width + RECT_STROKE_WIDTH}\n          height={height + RECT_STROKE_WIDTH}\n        >\n          <HighlightedRectangleCanvas points={highlightedRects} />\n        </Canvas>\n      </CanvasContext.Provider>\n    </div>\n  );\n});\n\nXYChartRectanglePoint.displayName = 'XYChartRectanglePoint';\n"],
+  "mappings": "AAkEU;AAlEV,SAAS,YAAmC;AAE5C,SAAS,kCAAkC;AAC3C,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uCAAuC;AAEzC,MAAM,wBAAwB,KAAK,MAAM;AAC9C,QAAM,yBAAyB,mBAAmB,WAAW;AAC7D,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAChD,QAAM,EAAE,qBAAqB,KAAK,IAAI,eAAe;AAErD,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,WAAW;AACf,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,8BAA8B;AAAA,EAChC,IAAI,YAAY;AAEhB,QAAM,mBAAmB,gCAAgC;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,iBAAiB,QAAQ;AAC5B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,0BACd;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,WAAW,oBAAI,IAA2C;AAAA,MAC5D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ;AAAA,UACf,QAAQ,SAAS;AAAA,UAEjB,8BAAC,8BAA2B,QAAQ,kBAAkB;AAAA;AAAA,MACxD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;",
   "names": []
 }