@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/charts/xy-chart/XYChartRoot.js

@@ -18,16 +18,21 @@ import { XYChartAnnotationsShownIndicatorsProvider } from "./providers/XYChartAn
 import { XYChartColorScalesProvider } from "./providers/XYChartColorScalesProvider.js";
 import { XYChartChartDataProvider } from "./providers/XYChartDataProvider.js";
 import { XYChartIdProvider } from "./providers/XYChartIdProvider.js";
+import { XYChartStoreDomainSync } from "./providers/XYChartStoreDomainSync.js";
 import { XYChartStoreProvider } from "./providers/XYChartStoreProvider.js";
 import { XYChartVisibleAxesProvider } from "./providers/XYChartVisibleAxesProvider.js";
+import { Annotations } from "./slots/Annotations/Annotations.js";
+import { Marker } from "./slots/Annotations/Marker.js";
 import { AnnotationsTooltip } from "./slots/Annotations/Tooltip.js";
-import { _AreaSeries } from "./slots/AreaSeries.js";
+import { Track } from "./slots/Annotations/Track.js";
+import { AreaSeries } from "./slots/AreaSeries.js";
 import { BarSeries } from "./slots/BarSeries.js";
 import { CustomTooltip } from "./slots/CustomTooltip.js";
 import { DotSeries } from "./slots/DotSeries.js";
 import { Legend } from "./slots/Legend.js";
 import { LineSeries } from "./slots/LineSeries.js";
 import { RectSeries } from "./slots/RectSeries.js";
+import { Select } from "./slots/Select.js";
 import { ThresholdIndicator } from "./slots/ThresholdIndicator.js";
 import { Toolbar } from "./slots/Toolbar.js";
 import { XAxis } from "./slots/XAxis.js";
@@ -41,15 +46,11 @@ import { Intent } from "../../core/slots/Intent/Intent.js";
 import { ChartLayout } from "../core/components/chart-layout/ChartLayout.js";
 import { useAutoLegendRefresh } from "../core/components/chart-layout/hooks/useAutoLegendRefresh.js";
 import { getChartStatesTemplates } from "../core/components/chart-states/utils/get-chart-states-template.js";
+import { ColorRuleContext } from "../core/context/ColorRuleContext.js";
 import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
 import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
 import { coerceSizeValue } from "../core/utils/coerceSizeValue.js";
-import { Annotations } from "./slots/Annotations/Annotations.js";
-import { Marker } from "./slots/Annotations/Marker.js";
-import { Track } from "./slots/Annotations/Track.js";
-import { Select } from "./slots/Select.js";
-import { ColorRuleContext } from "../core/context/ColorRuleContext.js";
 const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "XYChart";
 const XYChartRoot = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
@@ -87,12 +88,12 @@ const XYChartRoot = /* @__PURE__ */ forwardRef((props, ref) => {
     XYChartTruncationModeContext.Provider,
     {
       value: { truncationMode: config.truncationMode },
-      children: /* @__PURE__ */ jsx(XYChartAnnotationsConfig.Provider, { value: config.annotations, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(XYChartAnnotationsConfig.Provider, { value: config.annotations, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ jsx(XYChartStoreProvider, { children: /* @__PURE__ */ jsx(
         XYChartChartDataProvider,
         {
           data,
           seriesVariantsProps: internalConfig.series,
-          children: /* @__PURE__ */ jsx(XYChartAnnotationsDataProvider, { children: /* @__PURE__ */ jsx(XYChartVisibleAxesProvider, { children: /* @__PURE__ */ jsx(XYChartColorScalesProvider, { children: /* @__PURE__ */ jsx(XYChartStoreProvider, { children: /* @__PURE__ */ jsx(XYChartAnnotationsShownIndicatorsProvider, { children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsx(XYChartStoreDomainSync, { children: /* @__PURE__ */ jsx(XYChartAnnotationsDataProvider, { children: /* @__PURE__ */ jsx(XYChartVisibleAxesProvider, { children: /* @__PURE__ */ jsx(XYChartColorScalesProvider, { children: /* @__PURE__ */ jsx(XYChartAnnotationsShownIndicatorsProvider, { children: /* @__PURE__ */ jsxs(
             ChartLayout,
             {
               ref: chartLayoutRef,
@@ -128,7 +129,7 @@ const XYChartRoot = /* @__PURE__ */ forwardRef((props, ref) => {
             }
           ) }) }) }) }) })
         }
-      ) }) })
+      ) }) }) })
     }
   ) }) }) }) }) }) });
 });
@@ -138,7 +139,7 @@ const XYChart = Object.assign(XYChartRoot, {
   DotSeries,
   LineSeries,
   BarSeries,
-  _AreaSeries,
+  AreaSeries,
   XAxis,
   YAxis,
   Legend,

package/esm/charts/xy-chart/XYChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/xy-chart/XYChartRoot.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartLegend } from './components/legend/XYChartLegend.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_LOADING_STATE,\n} from './constants/defaults.js';\nimport { XYChartAxesConfigContext } from './context/axes/XYChartAxesConfig.context.js';\nimport { XYChartAnnotationsConfig } from './context/XYChartAnnotationsConfig.context.js';\nimport { XYChartColorPaletteContext } from './context/XYChartColorPalette.context.js';\nimport { XYChartLoadingContext } from './context/XYChartLoading.context.js';\nimport { XYChartThresholdsContext } from './context/XYChartThresholds.context.js';\nimport { XYChartToolbarContext } from './context/XYChartToolbar.context.js';\nimport { XYChartTruncationModeContext } from './context/XYChartTruncationMode.context.js';\nimport { useXYChartConfig } from './hooks/useXYChartConfig.js';\nimport { XYChartAnnotationsDataProvider } from './providers/XYChartAnnotationsDataProvider.js';\nimport { XYChartAnnotationsShownIndicatorsProvider } from './providers/XYChartAnnotationsShownIndicatorsProvider.js';\nimport { XYChartColorScalesProvider } from './providers/XYChartColorScalesProvider.js';\nimport { XYChartChartDataProvider } from './providers/XYChartDataProvider.js';\nimport { XYChartIdProvider } from './providers/XYChartIdProvider.js';\nimport { XYChartStoreProvider } from './providers/XYChartStoreProvider.js';\nimport { XYChartVisibleAxesProvider } from './providers/XYChartVisibleAxesProvider.js';\nimport { AnnotationsTooltip } from './slots/Annotations/Tooltip.js';\nimport { _AreaSeries } from './slots/AreaSeries.js';\nimport { BarSeries } from './slots/BarSeries.js';\nimport { CustomTooltip } from './slots/CustomTooltip.js';\nimport { DotSeries } from './slots/DotSeries.js';\nimport { Legend } from './slots/Legend.js';\nimport { LineSeries } from './slots/LineSeries.js';\nimport { RectSeries } from './slots/RectSeries.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport type { XYChartProps } from './types/xy-chart-props.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { isEmptyData } from './utils/is-empty-data.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildInternalConfig } from './utils/xy-chart-configuration.js';\nimport { XYChart as XYChartInternal } from './XYChart.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { Annotations } from './slots/Annotations/Annotations.js';\nimport { Marker } from './slots/Annotations/Marker.js';\nimport { Track } from './slots/Annotations/Track.js';\nimport { Select } from './slots/Select.js';\nimport { ColorRuleContext } from '../core/context/ColorRuleContext.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'XYChart';\n\n/**\n * @internal\n */\nexport const XYChartRoot = /* @__PURE__ */ forwardRef<\n  XYChartRef,\n  PropsWithChildren<XYChartProps>\n>((props, ref) => {\n  const {\n    data,\n    children,\n    height,\n    width,\n    loading = DEFAULT_LOADING_STATE,\n    style,\n    className,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const slots = iterateSlots(props.children);\n  const config = useXYChartConfig(props, slots);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n    ref,\n    containerRef,\n  ]);\n\n  const {\n    hidden: legendHidden,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n    position: legendPosition,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n\n  const internalConfig = buildInternalConfig(config, slots);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <XYChartIdProvider>\n      <XYChartLoadingContext.Provider value={loading}>\n        <XYChartThresholdsContext.Provider value={internalConfig.thresholds}>\n          <XYChartAxesConfigContext.Provider value={internalConfig.axes}>\n            <XYChartColorPaletteContext.Provider value={config.colorPalette}>\n              <XYChartToolbarContext.Provider value={config.toolbar}>\n                <XYChartTruncationModeContext.Provider\n                  value={{ truncationMode: config.truncationMode }}\n                >\n                  <XYChartAnnotationsConfig.Provider value={config.annotations}>\n                    <ColorRuleContext.Provider value={config.colorRules}>\n                      <XYChartChartDataProvider\n                        data={data}\n                        seriesVariantsProps={internalConfig.series}\n                      >\n                        <XYChartAnnotationsDataProvider>\n                          <XYChartVisibleAxesProvider>\n                            <XYChartColorScalesProvider>\n                              <XYChartStoreProvider>\n                                <XYChartAnnotationsShownIndicatorsProvider>\n                                  <ChartLayout\n                                    ref={chartLayoutRef}\n                                    chartHeight={chartHeight}\n                                    chartWidth={width}\n                                    className={className}\n                                    emptyState={emptyState}\n                                    errorState={errorState}\n                                    isEmpty={isEmptyData(children, data)}\n                                    showLoader={loading}\n                                    style={style}\n                                    data-dtrum-mask={dataDtrumMask}\n                                    data-dtrum-allow={dataDtrumAllow}\n                                    data-dt-component={\n                                      COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                                    }\n                                  >\n                                    <ChartLayout.Graph>\n                                      <XYChartInternal\n                                        config={config}\n                                        ref={rootRef}\n                                      />\n                                    </ChartLayout.Graph>\n                                    {!legendHidden && (\n                                      <ChartLayout.Legend\n                                        position={legendPosition}\n                                        initialRatio={legendRatio}\n                                        onResize={onRatioChange}\n                                      >\n                                        <XYChartLegend />\n                                      </ChartLayout.Legend>\n                                    )}\n                                  </ChartLayout>\n                                </XYChartAnnotationsShownIndicatorsProvider>\n                              </XYChartStoreProvider>\n                            </XYChartColorScalesProvider>\n                          </XYChartVisibleAxesProvider>\n                        </XYChartAnnotationsDataProvider>\n                      </XYChartChartDataProvider>\n                    </ColorRuleContext.Provider>\n                  </XYChartAnnotationsConfig.Provider>\n                </XYChartTruncationModeContext.Provider>\n              </XYChartToolbarContext.Provider>\n            </XYChartColorPaletteContext.Provider>\n          </XYChartAxesConfigContext.Provider>\n        </XYChartThresholdsContext.Provider>\n      </XYChartLoadingContext.Provider>\n    </XYChartIdProvider>\n  );\n});\n\n/**\n * The `XYChart` encompasses various types of charts that utilize both x-axis and\n * y-axis for data representation, designed to visually display and analyze data\n * that involve two numerical variables.\n * @public\n */\nexport const XYChart = Object.assign(XYChartRoot, {\n  Annotations,\n  RectSeries,\n  DotSeries,\n  LineSeries,\n  BarSeries,\n  _AreaSeries,\n  XAxis,\n  YAxis,\n  Legend,\n  Toolbar,\n  CustomTooltip,\n  Intent,\n  Select,\n  ThresholdIndicator,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n\n/**\n * XYAnnotations Slots\n * @public\n */\nexport const XYChartAnnotations = {\n  Marker,\n  Track,\n  Tooltip: AnnotationsTooltip,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartLegend } from './components/legend/XYChartLegend.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_LOADING_STATE,\n} from './constants/defaults.js';\nimport { XYChartAxesConfigContext } from './context/axes/XYChartAxesConfig.context.js';\nimport { XYChartAnnotationsConfig } from './context/XYChartAnnotationsConfig.context.js';\nimport { XYChartColorPaletteContext } from './context/XYChartColorPalette.context.js';\nimport { XYChartLoadingContext } from './context/XYChartLoading.context.js';\nimport { XYChartThresholdsContext } from './context/XYChartThresholds.context.js';\nimport { XYChartToolbarContext } from './context/XYChartToolbar.context.js';\nimport { XYChartTruncationModeContext } from './context/XYChartTruncationMode.context.js';\nimport { useXYChartConfig } from './hooks/useXYChartConfig.js';\nimport { XYChartAnnotationsDataProvider } from './providers/XYChartAnnotationsDataProvider.js';\nimport { XYChartAnnotationsShownIndicatorsProvider } from './providers/XYChartAnnotationsShownIndicatorsProvider.js';\nimport { XYChartColorScalesProvider } from './providers/XYChartColorScalesProvider.js';\nimport { XYChartChartDataProvider } from './providers/XYChartDataProvider.js';\nimport { XYChartIdProvider } from './providers/XYChartIdProvider.js';\nimport { XYChartStoreDomainSync } from './providers/XYChartStoreDomainSync.js';\nimport { XYChartStoreProvider } from './providers/XYChartStoreProvider.js';\nimport { XYChartVisibleAxesProvider } from './providers/XYChartVisibleAxesProvider.js';\nimport { Annotations } from './slots/Annotations/Annotations.js';\nimport { Marker } from './slots/Annotations/Marker.js';\nimport { AnnotationsTooltip } from './slots/Annotations/Tooltip.js';\nimport { Track } from './slots/Annotations/Track.js';\nimport { AreaSeries } from './slots/AreaSeries.js';\nimport { BarSeries } from './slots/BarSeries.js';\nimport { CustomTooltip } from './slots/CustomTooltip.js';\nimport { DotSeries } from './slots/DotSeries.js';\nimport { Legend } from './slots/Legend.js';\nimport { LineSeries } from './slots/LineSeries.js';\nimport { RectSeries } from './slots/RectSeries.js';\nimport { Select } from './slots/Select.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport type { XYChartProps } from './types/xy-chart-props.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { isEmptyData } from './utils/is-empty-data.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildInternalConfig } from './utils/xy-chart-configuration.js';\nimport { XYChart as XYChartInternal } from './XYChart.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'XYChart';\n\n/**\n * @internal\n */\nexport const XYChartRoot = /* @__PURE__ */ forwardRef<\n  XYChartRef,\n  PropsWithChildren<XYChartProps>\n>((props, ref) => {\n  const {\n    data,\n    children,\n    height,\n    width,\n    loading = DEFAULT_LOADING_STATE,\n    style,\n    className,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const slots = iterateSlots(props.children);\n  const config = useXYChartConfig(props, slots);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n    ref,\n    containerRef,\n  ]);\n\n  const {\n    hidden: legendHidden,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n    position: legendPosition,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n\n  const internalConfig = buildInternalConfig(config, slots);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <XYChartIdProvider>\n      <XYChartLoadingContext.Provider value={loading}>\n        <XYChartThresholdsContext.Provider value={internalConfig.thresholds}>\n          <XYChartAxesConfigContext.Provider value={internalConfig.axes}>\n            <XYChartColorPaletteContext.Provider value={config.colorPalette}>\n              <XYChartToolbarContext.Provider value={config.toolbar}>\n                <XYChartTruncationModeContext.Provider\n                  value={{ truncationMode: config.truncationMode }}\n                >\n                  <XYChartAnnotationsConfig.Provider value={config.annotations}>\n                    <ColorRuleContext.Provider value={config.colorRules}>\n                      <XYChartStoreProvider>\n                        <XYChartChartDataProvider\n                          data={data}\n                          seriesVariantsProps={internalConfig.series}\n                        >\n                          <XYChartStoreDomainSync>\n                            <XYChartAnnotationsDataProvider>\n                              <XYChartVisibleAxesProvider>\n                                <XYChartColorScalesProvider>\n                                  <XYChartAnnotationsShownIndicatorsProvider>\n                                    <ChartLayout\n                                      ref={chartLayoutRef}\n                                      chartHeight={chartHeight}\n                                      chartWidth={width}\n                                      className={className}\n                                      emptyState={emptyState}\n                                      errorState={errorState}\n                                      isEmpty={isEmptyData(children, data)}\n                                      showLoader={loading}\n                                      style={style}\n                                      data-dtrum-mask={dataDtrumMask}\n                                      data-dtrum-allow={dataDtrumAllow}\n                                      data-dt-component={\n                                        COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                                      }\n                                    >\n                                      <ChartLayout.Graph>\n                                        <XYChartInternal\n                                          config={config}\n                                          ref={rootRef}\n                                        />\n                                      </ChartLayout.Graph>\n                                      {!legendHidden && (\n                                        <ChartLayout.Legend\n                                          position={legendPosition}\n                                          initialRatio={legendRatio}\n                                          onResize={onRatioChange}\n                                        >\n                                          <XYChartLegend />\n                                        </ChartLayout.Legend>\n                                      )}\n                                    </ChartLayout>\n                                  </XYChartAnnotationsShownIndicatorsProvider>\n                                </XYChartColorScalesProvider>\n                              </XYChartVisibleAxesProvider>\n                            </XYChartAnnotationsDataProvider>\n                          </XYChartStoreDomainSync>\n                        </XYChartChartDataProvider>\n                      </XYChartStoreProvider>\n                    </ColorRuleContext.Provider>\n                  </XYChartAnnotationsConfig.Provider>\n                </XYChartTruncationModeContext.Provider>\n              </XYChartToolbarContext.Provider>\n            </XYChartColorPaletteContext.Provider>\n          </XYChartAxesConfigContext.Provider>\n        </XYChartThresholdsContext.Provider>\n      </XYChartLoadingContext.Provider>\n    </XYChartIdProvider>\n  );\n});\n\n/**\n * The `XYChart` encompasses various types of charts that utilize both x-axis and\n * y-axis for data representation, designed to visually display and analyze data\n * that involve two numerical variables.\n * @public\n */\nexport const XYChart = Object.assign(XYChartRoot, {\n  Annotations,\n  RectSeries,\n  DotSeries,\n  LineSeries,\n  BarSeries,\n  AreaSeries,\n  XAxis,\n  YAxis,\n  Legend,\n  Toolbar,\n  CustomTooltip,\n  Intent,\n  Select,\n  ThresholdIndicator,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n\n/**\n * XYAnnotations Slots\n * @public\n */\nexport const XYChartAnnotations = {\n  Marker,\n  Track,\n  Tooltip: AnnotationsTooltip,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js

@@ -8,9 +8,9 @@ import { SCROLLBAR_THRESHOLD } from "../../../core/components/annotations/consta
 import { ChartGrid } from "../../../core/components/chart-grid/ChartGridRoot.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { ANNOTATIONS_PADDING_BOTTOM } from "../../constants/defaults.js";
-import { useAxesConfig } from "../../hooks/useAxesConfig.js";
 import { useXYChartAnnotationsConfig } from "../../hooks/useXYChartAnnotationsConfig.js";
 import { useXYChartAnnotationsData } from "../../hooks/useXYChartAnnotationsData.js";
+import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../hooks/useXYChartScales.js";
 import { useSetState } from "../../store/selectors.js";
 import { isTimeScale } from "../../types/guards.js";
@@ -22,7 +22,7 @@ const XYChartAnnotationsArea = () => {
   const annotationsData = useXYChartAnnotationsData();
   const setState = useSetState();
   const { width } = useGridPlotSize();
-  const axes = useAxesConfig();
+  const { axes } = useXYChartData();
   const [behaviorTrackingProps] = useBehavioralTrackingProps(
     annotationsConfig ?? {}
   );

package/esm/charts/xy-chart/components/annotations/XYChartAnnotationsArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/annotations/XYChartAnnotationsArea.tsx"],
-  "sourcesContent": ["import { ScaleLinear } from 'd3-scale';\nimport { isUndefined } from 'lodash-es';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AnnotationsNumericalDisplay } from '../../../core/components/annotations/components/displays/AnnotationsNumericalDisplay.js';\nimport { AnnotationsTimeDisplay } from '../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js';\nimport { AnnotationsScrollWrapper } from '../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport { SCROLLBAR_THRESHOLD } from '../../../core/components/annotations/constants.js';\nimport { AnnotationsActionsPayload } from '../../../core/components/annotations/types/annotations.js';\nimport type { SelectionState } from '../../../core/components/annotations/types/state.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport type { DateScales } from '../../../core/types/scales.js';\nimport { ANNOTATIONS_PADDING_BOTTOM } from '../../constants/defaults.js';\nimport { useAxesConfig } from '../../hooks/useAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from '../../hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from '../../hooks/useXYChartAnnotationsData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { isTimeScale } from '../../types/guards.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartAnnotationsArea = () => {\n  const scales = useXYChartScales();\n  const annotationsConfig = useXYChartAnnotationsConfig();\n  const annotationsData = useXYChartAnnotationsData();\n  const setState = useSetState();\n  const { width } = useGridPlotSize();\n  const axes = useAxesConfig();\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(\n    annotationsConfig ?? {},\n  );\n\n  const handleUpdateIndicators = (event: Partial<SelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      annotations: {\n        ...prev.annotations,\n        ...event,\n      },\n    }));\n  };\n\n  if (isUndefined(annotationsConfig) || isUndefined(annotationsData)) {\n    return null;\n  }\n\n  const { xAxisId, showLabels = false, annotationsActions } = annotationsConfig;\n  const axis = axes.find(({ id }) => id === xAxisId);\n\n  if (axis === undefined) {\n    return null;\n  }\n\n  const scale = getCurrentScale(scales, xAxisId) as ScaleLinear<\n    number,\n    number\n  > &\n    DateScales;\n\n  const trackNames = Array.from(annotationsData.keys());\n\n  const serializedAnnotationsData = trackNames\n    .map((name) => annotationsData.get(name))\n    .filter((track) => !isUndefined(track));\n\n  const DisplayComponent = isTimeScale({\n    axisType: axis.type,\n    axisScale: scale,\n  })\n    ? AnnotationsTimeDisplay\n    : AnnotationsNumericalDisplay;\n\n  return (\n    <ChartGrid.GridArea\n      paddingBottom={ANNOTATIONS_PADDING_BOTTOM}\n      gridArea={AREAS.annotations}\n    >\n      {({ availableWidth, availableHeight }) => {\n        const labelsOffset = availableWidth - width;\n        const annotationsCommonConfig = {\n          tracks: serializedAnnotationsData,\n          showLabels,\n          labelsOffset,\n          width: availableWidth,\n          markerGroupHover: handleUpdateIndicators,\n          textOverflow: 'truncate' as const,\n          truncateMode: 'middle' as const,\n          tooltipConfig: annotationsConfig.tooltip,\n          ...behaviorTrackingProps,\n        };\n\n        return (\n          <AnnotationsScrollWrapper\n            height={availableHeight}\n            width={availableWidth + SCROLLBAR_THRESHOLD}\n          >\n            <DisplayComponent\n              scale={scale}\n              annotationsActions={(\n                annotation: AnnotationsActionsPayload | undefined,\n              ) => annotation && annotationsActions?.(annotation)}\n              {...annotationsCommonConfig}\n            />\n          </AnnotationsScrollWrapper>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n};\n"],
-  "mappings": "AAkGY;AAjGZ,SAAS,mBAAmB;AAE5B,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AAGpC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEf,MAAM,yBAAyB,MAAM;AAC1C,QAAM,SAAS,iBAAiB;AAChC,QAAM,oBAAoB,4BAA4B;AACtD,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,OAAO,cAAc;AAC3B,QAAM,CAAC,qBAAqB,IAAI;AAAA,IAC9B,qBAAqB,CAAC;AAAA,EACxB;AAEA,QAAM,yBAAyB,CAAC,UAAmC;AACjE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,MAAI,YAAY,iBAAiB,KAAK,YAAY,eAAe,GAAG;AAClE,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,aAAa,OAAO,mBAAmB,IAAI;AAC5D,QAAM,OAAO,KAAK,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,OAAO;AAEjD,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,gBAAgB,QAAQ,OAAO;AAM7C,QAAM,aAAa,MAAM,KAAK,gBAAgB,KAAK,CAAC;AAEpD,QAAM,4BAA4B,WAC/B,IAAI,CAAC,SAAS,gBAAgB,IAAI,IAAI,CAAC,EACvC,OAAO,CAAC,UAAU,CAAC,YAAY,KAAK,CAAC;AAExC,QAAM,mBAAmB,YAAY;AAAA,IACnC,UAAU,KAAK;AAAA,IACf,WAAW;AAAA,EACb,CAAC,IACG,yBACA;AAEJ,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC,eAAe;AAAA,MACf,UAAU,MAAM;AAAA,MAEf,WAAC,EAAE,gBAAgB,gBAAgB,MAAM;AACxC,cAAM,eAAe,iBAAiB;AACtC,cAAM,0BAA0B;AAAA,UAC9B,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,cAAc;AAAA,UACd,cAAc;AAAA,UACd,eAAe,kBAAkB;AAAA,UACjC,GAAG;AAAA,QACL;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR,OAAO,iBAAiB;AAAA,YAExB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,oBAAoB,CAClB,eACG,cAAc,qBAAqB,UAAU;AAAA,gBACjD,GAAG;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { ScaleLinear } from 'd3-scale';\nimport { isUndefined } from 'lodash-es';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AnnotationsNumericalDisplay } from '../../../core/components/annotations/components/displays/AnnotationsNumericalDisplay.js';\nimport { AnnotationsTimeDisplay } from '../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js';\nimport { AnnotationsScrollWrapper } from '../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport { SCROLLBAR_THRESHOLD } from '../../../core/components/annotations/constants.js';\nimport { AnnotationsActionsPayload } from '../../../core/components/annotations/types/annotations.js';\nimport type { SelectionState } from '../../../core/components/annotations/types/state.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport type { DateScales } from '../../../core/types/scales.js';\nimport { ANNOTATIONS_PADDING_BOTTOM } from '../../constants/defaults.js';\nimport { useXYChartAnnotationsConfig } from '../../hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from '../../hooks/useXYChartAnnotationsData.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { isTimeScale } from '../../types/guards.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartAnnotationsArea = () => {\n  const scales = useXYChartScales();\n  const annotationsConfig = useXYChartAnnotationsConfig();\n  const annotationsData = useXYChartAnnotationsData();\n  const setState = useSetState();\n  const { width } = useGridPlotSize();\n  /* Using axes from data provider instead of config ones as some axes might disappear when filtering\n   * This could leave the annotations space empty and this expected to avoid suddenly moving areas around.\n   */\n  const { axes } = useXYChartData();\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(\n    annotationsConfig ?? {},\n  );\n\n  const handleUpdateIndicators = (event: Partial<SelectionState>) => {\n    setState((prev) => ({\n      ...prev,\n      annotations: {\n        ...prev.annotations,\n        ...event,\n      },\n    }));\n  };\n\n  if (isUndefined(annotationsConfig) || isUndefined(annotationsData)) {\n    return null;\n  }\n\n  const { xAxisId, showLabels = false, annotationsActions } = annotationsConfig;\n  const axis = axes.find(({ id }) => id === xAxisId);\n\n  if (axis === undefined) {\n    return null;\n  }\n\n  const scale = getCurrentScale(scales, xAxisId) as ScaleLinear<\n    number,\n    number\n  > &\n    DateScales;\n\n  const trackNames = Array.from(annotationsData.keys());\n\n  const serializedAnnotationsData = trackNames\n    .map((name) => annotationsData.get(name))\n    .filter((track) => !isUndefined(track));\n\n  const DisplayComponent = isTimeScale({\n    axisType: axis.type,\n    axisScale: scale,\n  })\n    ? AnnotationsTimeDisplay\n    : AnnotationsNumericalDisplay;\n\n  return (\n    <ChartGrid.GridArea\n      paddingBottom={ANNOTATIONS_PADDING_BOTTOM}\n      gridArea={AREAS.annotations}\n    >\n      {({ availableWidth, availableHeight }) => {\n        const labelsOffset = availableWidth - width;\n        const annotationsCommonConfig = {\n          tracks: serializedAnnotationsData,\n          showLabels,\n          labelsOffset,\n          width: availableWidth,\n          markerGroupHover: handleUpdateIndicators,\n          textOverflow: 'truncate' as const,\n          truncateMode: 'middle' as const,\n          tooltipConfig: annotationsConfig.tooltip,\n          ...behaviorTrackingProps,\n        };\n\n        return (\n          <AnnotationsScrollWrapper\n            height={availableHeight}\n            width={availableWidth + SCROLLBAR_THRESHOLD}\n          >\n            <DisplayComponent\n              scale={scale}\n              annotationsActions={(\n                annotation: AnnotationsActionsPayload | undefined,\n              ) => annotation && annotationsActions?.(annotation)}\n              {...annotationsCommonConfig}\n            />\n          </AnnotationsScrollWrapper>\n        );\n      }}\n    </ChartGrid.GridArea>\n  );\n};\n"],
+  "mappings": "AAqGY;AApGZ,SAAS,mBAAmB;AAE5B,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AAGpC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,kCAAkC;AAC3C,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEf,MAAM,yBAAyB,MAAM;AAC1C,QAAM,SAAS,iBAAiB;AAChC,QAAM,oBAAoB,4BAA4B;AACtD,QAAM,kBAAkB,0BAA0B;AAClD,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAIlC,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,CAAC,qBAAqB,IAAI;AAAA,IAC9B,qBAAqB,CAAC;AAAA,EACxB;AAEA,QAAM,yBAAyB,CAAC,UAAmC;AACjE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,aAAa;AAAA,QACX,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MACL;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,MAAI,YAAY,iBAAiB,KAAK,YAAY,eAAe,GAAG;AAClE,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,SAAS,aAAa,OAAO,mBAAmB,IAAI;AAC5D,QAAM,OAAO,KAAK,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,OAAO;AAEjD,MAAI,SAAS,QAAW;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,gBAAgB,QAAQ,OAAO;AAM7C,QAAM,aAAa,MAAM,KAAK,gBAAgB,KAAK,CAAC;AAEpD,QAAM,4BAA4B,WAC/B,IAAI,CAAC,SAAS,gBAAgB,IAAI,IAAI,CAAC,EACvC,OAAO,CAAC,UAAU,CAAC,YAAY,KAAK,CAAC;AAExC,QAAM,mBAAmB,YAAY;AAAA,IACnC,UAAU,KAAK;AAAA,IACf,WAAW;AAAA,EACb,CAAC,IACG,yBACA;AAEJ,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC,eAAe;AAAA,MACf,UAAU,MAAM;AAAA,MAEf,WAAC,EAAE,gBAAgB,gBAAgB,MAAM;AACxC,cAAM,eAAe,iBAAiB;AACtC,cAAM,0BAA0B;AAAA,UAC9B,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,cAAc;AAAA,UACd,cAAc;AAAA,UACd,eAAe,kBAAkB;AAAA,UACjC,GAAG;AAAA,QACL;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR,OAAO,iBAAiB;AAAA,YAExB;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,oBAAoB,CAClB,eACG,cAAc,qBAAqB,UAAU;AAAA,gBACjD,GAAG;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/annotations/XYChartAnnotationsIndicators.js

@@ -4,9 +4,9 @@ import { IndicatorsRenderer } from "../../../core/components/annotations/compone
 import { getUniqueIndicatorsByPriority } from "../../../core/components/annotations/components/indicators/utils/get-unique-indicators-by-priority.js";
 import { getMinMaxAsNumber } from "../../../core/components/annotations/utils/get-min-max-as-number.js";
 import { plotLayout } from "../../../core/components/chart-grid/ChartGrid.sty.js";
-import { useAxesConfig } from "../../hooks/useAxesConfig.js";
 import { useXYChartAnnotationsConfig } from "../../hooks/useXYChartAnnotationsConfig.js";
 import { useXYChartAnnotationsShownIndicators } from "../../hooks/useXYChartAnnotationsShownIndicators.js";
+import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../hooks/useXYChartScales.js";
 import { isAnyNumericalScale } from "../../types/guards.js";
 import { getCurrentScale } from "../../utils/get-scale.js";
@@ -14,7 +14,7 @@ const XYChartAnnotationsIndicators = () => {
   const indicators = useXYChartAnnotationsShownIndicators();
   const annotationsConfig = useXYChartAnnotationsConfig();
   const scales = useXYChartScales();
-  const axes = useAxesConfig();
+  const { axes } = useXYChartData();
   const axisConfig = axes.find(
     (axis) => axis.id === annotationsConfig?.xAxisId
   );

package/esm/charts/xy-chart/components/annotations/XYChartAnnotationsIndicators.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/annotations/XYChartAnnotationsIndicators.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { IndicatorsRenderer } from '../../../core/components/annotations/components/indicators/IndicatorsRenderer.js';\nimport { getUniqueIndicatorsByPriority } from '../../../core/components/annotations/components/indicators/utils/get-unique-indicators-by-priority.js';\nimport { getMinMaxAsNumber } from '../../../core/components/annotations/utils/get-min-max-as-number.js';\nimport { plotLayout } from '../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useAxesConfig } from '../../hooks/useAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from '../../hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsShownIndicators } from '../../hooks/useXYChartAnnotationsShownIndicators.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { isAnyNumericalScale } from '../../types/guards.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\n\nexport const XYChartAnnotationsIndicators = () => {\n  const indicators = useXYChartAnnotationsShownIndicators();\n  const annotationsConfig = useXYChartAnnotationsConfig();\n  const scales = useXYChartScales();\n  const axes = useAxesConfig();\n  const axisConfig = axes.find(\n    (axis) => axis.id === annotationsConfig?.xAxisId,\n  );\n\n  if (isUndefined(annotationsConfig) || isUndefined(axisConfig)) {\n    return;\n  }\n\n  const xScale = getCurrentScale(scales, axisConfig.id);\n  const annotationsScale = {\n    axisType: axisConfig.type,\n    axisScale: xScale,\n  };\n\n  if (!isAnyNumericalScale(annotationsScale)) {\n    return;\n  }\n\n  const [domainStart, domainEnd] = annotationsScale.axisScale.domain();\n  const isInverted = domainStart > domainEnd;\n  const { min: domainMin, max: domainMax } = getMinMaxAsNumber(\n    domainStart,\n    domainEnd,\n  );\n\n  const uniqueIndicators = getUniqueIndicatorsByPriority(\n    [indicators],\n    [domainMin, domainMax],\n  );\n\n  return (\n    <svg className={plotLayout}>\n      {uniqueIndicators.map((track, index) =>\n        track.map(([key, indicator]) => (\n          <IndicatorsRenderer\n            key={key}\n            {...indicator}\n            trackIndex={index}\n            scale={annotationsScale.axisScale}\n            isInverted={isInverted}\n          />\n        )),\n      )}\n    </svg>\n  );\n};\n\nXYChartAnnotationsIndicators['displayName'] = 'XyChartAnnotationsIndicators';\n"],
-  "mappings": "AAoDU;AApDV,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,qCAAqC;AAC9C,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,mCAAmC;AAC5C,SAAS,4CAA4C;AACrD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,+BAA+B,MAAM;AAChD,QAAM,aAAa,qCAAqC;AACxD,QAAM,oBAAoB,4BAA4B;AACtD,QAAM,SAAS,iBAAiB;AAChC,QAAM,OAAO,cAAc;AAC3B,QAAM,aAAa,KAAK;AAAA,IACtB,CAAC,SAAS,KAAK,OAAO,mBAAmB;AAAA,EAC3C;AAEA,MAAI,YAAY,iBAAiB,KAAK,YAAY,UAAU,GAAG;AAC7D;AAAA,EACF;AAEA,QAAM,SAAS,gBAAgB,QAAQ,WAAW,EAAE;AACpD,QAAM,mBAAmB;AAAA,IACvB,UAAU,WAAW;AAAA,IACrB,WAAW;AAAA,EACb;AAEA,MAAI,CAAC,oBAAoB,gBAAgB,GAAG;AAC1C;AAAA,EACF;AAEA,QAAM,CAAC,aAAa,SAAS,IAAI,iBAAiB,UAAU,OAAO;AACnE,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,KAAK,WAAW,KAAK,UAAU,IAAI;AAAA,IACzC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAU;AAAA,IACX,CAAC,WAAW,SAAS;AAAA,EACvB;AAEA,SACE,oBAAC,SAAI,WAAW,YACb,2BAAiB;AAAA,IAAI,CAAC,OAAO,UAC5B,MAAM,IAAI,CAAC,CAAC,KAAK,SAAS,MACxB;AAAA,MAAC;AAAA;AAAA,QAEE,GAAG;AAAA,QACJ,YAAY;AAAA,QACZ,OAAO,iBAAiB;AAAA,QACxB;AAAA;AAAA,MAJK;AAAA,IAKP,CACD;AAAA,EACH,GACF;AAEJ;AAEA,6BAA6B,aAAa,IAAI;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { IndicatorsRenderer } from '../../../core/components/annotations/components/indicators/IndicatorsRenderer.js';\nimport { getUniqueIndicatorsByPriority } from '../../../core/components/annotations/components/indicators/utils/get-unique-indicators-by-priority.js';\nimport { getMinMaxAsNumber } from '../../../core/components/annotations/utils/get-min-max-as-number.js';\nimport { plotLayout } from '../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useXYChartAnnotationsConfig } from '../../hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsShownIndicators } from '../../hooks/useXYChartAnnotationsShownIndicators.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { isAnyNumericalScale } from '../../types/guards.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\n\nexport const XYChartAnnotationsIndicators = () => {\n  const indicators = useXYChartAnnotationsShownIndicators();\n  const annotationsConfig = useXYChartAnnotationsConfig();\n  const scales = useXYChartScales();\n  /* Using axes from data provider instead of config ones as some axes might disappear when filtering\n   * This could leave the annotations space empty and this expected to avoid suddenly moving areas around.\n   */\n  const { axes } = useXYChartData();\n\n  const axisConfig = axes.find(\n    (axis) => axis.id === annotationsConfig?.xAxisId,\n  );\n\n  if (isUndefined(annotationsConfig) || isUndefined(axisConfig)) {\n    return;\n  }\n\n  const xScale = getCurrentScale(scales, axisConfig.id);\n  const annotationsScale = {\n    axisType: axisConfig.type,\n    axisScale: xScale,\n  };\n\n  if (!isAnyNumericalScale(annotationsScale)) {\n    return;\n  }\n\n  const [domainStart, domainEnd] = annotationsScale.axisScale.domain();\n  const isInverted = domainStart > domainEnd;\n  const { min: domainMin, max: domainMax } = getMinMaxAsNumber(\n    domainStart,\n    domainEnd,\n  );\n\n  const uniqueIndicators = getUniqueIndicatorsByPriority(\n    [indicators],\n    [domainMin, domainMax],\n  );\n\n  return (\n    <svg className={plotLayout}>\n      {uniqueIndicators.map((track, index) =>\n        track.map(([key, indicator]) => (\n          <IndicatorsRenderer\n            key={key}\n            {...indicator}\n            trackIndex={index}\n            scale={annotationsScale.axisScale}\n            isInverted={isInverted}\n          />\n        )),\n      )}\n    </svg>\n  );\n};\n\nXYChartAnnotationsIndicators['displayName'] = 'XyChartAnnotationsIndicators';\n"],
+  "mappings": "AAwDU;AAxDV,SAAS,mBAAmB;AAE5B,SAAS,0BAA0B;AACnC,SAAS,qCAAqC;AAC9C,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,mCAAmC;AAC5C,SAAS,4CAA4C;AACrD,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,+BAA+B,MAAM;AAChD,QAAM,aAAa,qCAAqC;AACxD,QAAM,oBAAoB,4BAA4B;AACtD,QAAM,SAAS,iBAAiB;AAIhC,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,QAAM,aAAa,KAAK;AAAA,IACtB,CAAC,SAAS,KAAK,OAAO,mBAAmB;AAAA,EAC3C;AAEA,MAAI,YAAY,iBAAiB,KAAK,YAAY,UAAU,GAAG;AAC7D;AAAA,EACF;AAEA,QAAM,SAAS,gBAAgB,QAAQ,WAAW,EAAE;AACpD,QAAM,mBAAmB;AAAA,IACvB,UAAU,WAAW;AAAA,IACrB,WAAW;AAAA,EACb;AAEA,MAAI,CAAC,oBAAoB,gBAAgB,GAAG;AAC1C;AAAA,EACF;AAEA,QAAM,CAAC,aAAa,SAAS,IAAI,iBAAiB,UAAU,OAAO;AACnE,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,KAAK,WAAW,KAAK,UAAU,IAAI;AAAA,IACzC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAU;AAAA,IACX,CAAC,WAAW,SAAS;AAAA,EACvB;AAEA,SACE,oBAAC,SAAI,WAAW,YACb,2BAAiB;AAAA,IAAI,CAAC,OAAO,UAC5B,MAAM,IAAI,CAAC,CAAC,KAAK,SAAS,MACxB;AAAA,MAAC;AAAA;AAAA,QAEE,GAAG;AAAA,QACJ,YAAY;AAAA,QACZ,OAAO,iBAAiB;AAAA,QACxB;AAAA;AAAA,MAJK;AAAA,IAKP,CACD;AAAA,EACH,GACF;AAEJ;AAEA,6BAA6B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-0-1 {
+._bidc430-3-1-0 {
   position: relative;
 }

package/esm/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -1,5 +1,5 @@
 import "./AxisArea.css";
-var axisContainerStyle = "_bidc430-3-0-1";
+var axisContainerStyle = "_bidc430-3-1-0";
 export {
   axisContainerStyle
 };

package/esm/charts/xy-chart/components/axes/AxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisArea.css.ts"],
-  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-0-1';"],
+  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-0-1 {
-  direction: var(--_z2zz8y0-3-0-1);
+._z2zz8y2-3-1-0 {
+  direction: var(--_z2zz8y0-3-1-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-0-1);
+  width: var(--_z2zz8y1-3-1-0);
 }

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -1,7 +1,7 @@
 import "./AxisTickWithTruncation.css";
-var directionValue = "var(--_z2zz8y0-3-0-1)";
-var tickStyle = "_z2zz8y2-3-0-1";
-var widthContainer = "var(--_z2zz8y1-3-0-1)";
+var directionValue = "var(--_z2zz8y0-3-1-0)";
+var tickStyle = "_z2zz8y2-3-1-0";
+var widthContainer = "var(--_z2zz8y1-3-1-0)";
 export {
   directionValue,
   tickStyle,

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisTickWithTruncation.css.ts"],
-  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-0-1)';\nexport var tickStyle = '_z2zz8y2-3-0-1';\nexport var widthContainer = 'var(--_z2zz8y1-3-0-1)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-1-0)';\nexport var tickStyle = '_z2zz8y2-3-1-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-1-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,YAAY;AAChB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/AreaDisplay.js

@@ -33,7 +33,16 @@ function AreaDisplay({
   const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();
   const xScale = getCurrentScale(axisIdToScales, series.xAxisId);
   const yScale = getCurrentScale(axisIdToScales, series.yAxisId);
-  const { curve, color, orientation, variant, pointsDisplay, xAxis, yAxis } = metadata;
+  const {
+    curve,
+    color,
+    orientation,
+    variant,
+    pointsDisplay,
+    xAxis,
+    yAxis,
+    isStacked
+  } = metadata;
   const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);
   const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);
   const showBandedArea = variant === "band";
@@ -58,8 +67,8 @@ function AreaDisplay({
     endpointAccessor = isHorizontal ? bandX1Accessor(xScale, xRelAccessor) : bandY1Accessor(yScale, yRelAccessor);
   } else {
     primaryAxisAccessor = isHorizontal ? yAccessor(yScale, yRelAccessor) : xAccessor(xScale, xRelAccessor);
-    baselineAccessor = isHorizontal ? x0Accessor(xScale, datapointMetadataMap, xRelAccessor) : y0Accessor(yScale, datapointMetadataMap, yRelAccessor);
-    endpointAccessor = isHorizontal ? x1Accessor(xScale, datapointMetadataMap, xRelAccessor) : y1Accessor(yScale, datapointMetadataMap, yRelAccessor);
+    baselineAccessor = isHorizontal ? x0Accessor(xScale, datapointMetadataMap, xRelAccessor, isStacked) : y0Accessor(yScale, datapointMetadataMap, yRelAccessor, isStacked);
+    endpointAccessor = isHorizontal ? x1Accessor(xScale, datapointMetadataMap, xRelAccessor, isStacked) : y1Accessor(yScale, datapointMetadataMap, yRelAccessor, isStacked);
   }
   return /* @__PURE__ */ jsx(
     AreaCanvas,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/AreaDisplay.tsx"],
-  "sourcesContent": ["import {\n  x0Accessor,\n  x1Accessor,\n  xAccessor,\n  y0Accessor,\n  y1Accessor,\n  yAccessor,\n} from './area-accessors.js';\nimport {\n  bandX0Accessor,\n  bandX1Accessor,\n  bandY0Accessor,\n  bandY1Accessor,\n} from './band-accessors.js';\nimport { AreaCanvas } from '../../../core/components/canvas/components/AreaCanvas.js';\nimport { shouldDisplayPoints } from '../../../core/components/canvas/utils/display-points.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../core/components/data-point/constants.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../core/constants.js';\nimport { isIsolatedPoint } from '../../../core/utils/is-isolated-point.js';\nimport { DEFAULT_POINTS_DISPLAY } from '../../constants/defaults.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type {\n  AreaMetadata,\n  AreaSeriesWithDatapoints,\n} from '../../types/xy-chart-internals.js';\nimport type { AreaDatapoint } from '../../types/xy-chart.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { isGapDatapointForDisplay } from '../../utils/validation-datapoint.js';\nimport { relAccessor } from '../../utils/value-representation.js';\n\ninterface AreaDisplayProps {\n  axisIdToScales: AxisIdToScales;\n  series: AreaSeriesWithDatapoints;\n  metadata: AreaMetadata;\n}\n\nexport function AreaDisplay({\n  axisIdToScales,\n  series,\n  metadata,\n}: Readonly<AreaDisplayProps>) {\n  const { height, width } = useGridPlotSize();\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n\n  const xScale = getCurrentScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(axisIdToScales, series.yAxisId);\n  const { curve, color, orientation, variant, pointsDisplay, xAxis, yAxis } =\n    metadata;\n\n  const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n  const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n\n  const showBandedArea = variant === 'band';\n\n  const definedAccessor = isGapDatapointForDisplay(datapointMetadataMap);\n\n  const showDataPoints =\n    variant === 'band'\n      ? pointsDisplay === 'always'\n      : shouldDisplayPoints(\n          pointsDisplay ?? DEFAULT_POINTS_DISPLAY,\n          width,\n          series.data.length,\n        );\n\n  const isolatedAccessor = (datapoints: AreaDatapoint[], index: number) =>\n    showDataPoints ||\n    isIsolatedPoint(datapoints, index, (point) =>\n      isGapDatapointForDisplay(datapointMetadataMap)(point),\n    );\n\n  const isHorizontal = orientation === 'horizontal';\n\n  let primaryAxisAccessor;\n  let baselineAccessor;\n  let endpointAccessor;\n\n  if (variant === 'band') {\n    primaryAxisAccessor = isHorizontal\n      ? bandY0Accessor(yScale, yRelAccessor)\n      : bandX0Accessor(xScale, xRelAccessor);\n    baselineAccessor = isHorizontal\n      ? bandX0Accessor(xScale, xRelAccessor)\n      : bandY0Accessor(yScale, yRelAccessor);\n    endpointAccessor = isHorizontal\n      ? bandX1Accessor(xScale, xRelAccessor)\n      : bandY1Accessor(yScale, yRelAccessor);\n  } else {\n    primaryAxisAccessor = isHorizontal\n      ? yAccessor(yScale, yRelAccessor)\n      : xAccessor(xScale, xRelAccessor);\n    baselineAccessor = isHorizontal\n      ? x0Accessor(xScale, datapointMetadataMap, xRelAccessor)\n      : y0Accessor(yScale, datapointMetadataMap, yRelAccessor);\n    endpointAccessor = isHorizontal\n      ? x1Accessor(xScale, datapointMetadataMap, xRelAccessor)\n      : y1Accessor(yScale, datapointMetadataMap, yRelAccessor);\n  }\n\n  return (\n    <AreaCanvas<AreaDatapoint>\n      key={series.id}\n      data={series.data}\n      canvasWidth={width}\n      canvasHeight={height}\n      opacity={DEFAULT_FILL_OPACITY}\n      color={() => color.Default}\n      x={primaryAxisAccessor}\n      y0={baselineAccessor}\n      y1={endpointAccessor}\n      defined={definedAccessor}\n      displayScatterPlot={isolatedAccessor}\n      enableDotOverflow\n      overlayPadding={POINT_OVERLAY_PADDING}\n      orientation={orientation}\n      curve={curve}\n      showBandedArea={showBandedArea}\n    />\n  );\n}\n\nAreaDisplay['displayName'] = 'AreaDisplay';\n"],
-  "mappings": "AAsGI;AAtGJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAEvC,SAAS,sBAAsB;AAM/B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAQrB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,EAAE,sBAAsB,oBAAoB,IAAI,eAAe;AAErE,QAAM,SAAS,gBAAgB,gBAAgB,OAAO,OAAO;AAC7D,QAAM,SAAS,gBAAgB,gBAAgB,OAAO,OAAO;AAC7D,QAAM,EAAE,OAAO,OAAO,aAAa,SAAS,eAAe,OAAO,MAAM,IACtE;AAEF,QAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,QAAM,eAAe,YAAY,OAAO,mBAAmB;AAE3D,QAAM,iBAAiB,YAAY;AAEnC,QAAM,kBAAkB,yBAAyB,oBAAoB;AAErE,QAAM,iBACJ,YAAY,SACR,kBAAkB,WAClB;AAAA,IACE,iBAAiB;AAAA,IACjB;AAAA,IACA,OAAO,KAAK;AAAA,EACd;AAEN,QAAM,mBAAmB,CAAC,YAA6B,UACrD,kBACA;AAAA,IAAgB;AAAA,IAAY;AAAA,IAAO,CAAC,UAClC,yBAAyB,oBAAoB,EAAE,KAAK;AAAA,EACtD;AAEF,QAAM,eAAe,gBAAgB;AAErC,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,YAAY,QAAQ;AACtB,0BAAsB,eAClB,eAAe,QAAQ,YAAY,IACnC,eAAe,QAAQ,YAAY;AACvC,uBAAmB,eACf,eAAe,QAAQ,YAAY,IACnC,eAAe,QAAQ,YAAY;AACvC,uBAAmB,eACf,eAAe,QAAQ,YAAY,IACnC,eAAe,QAAQ,YAAY;AAAA,EACzC,OAAO;AACL,0BAAsB,eAClB,UAAU,QAAQ,YAAY,IAC9B,UAAU,QAAQ,YAAY;AAClC,uBAAmB,eACf,WAAW,QAAQ,sBAAsB,YAAY,IACrD,WAAW,QAAQ,sBAAsB,YAAY;AACzD,uBAAmB,eACf,WAAW,QAAQ,sBAAsB,YAAY,IACrD,WAAW,QAAQ,sBAAsB,YAAY;AAAA,EAC3D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,OAAO;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,OAAO,MAAM,MAAM;AAAA,MACnB,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,mBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAfK,OAAO;AAAA,EAgBd;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  x0Accessor,\n  x1Accessor,\n  xAccessor,\n  y0Accessor,\n  y1Accessor,\n  yAccessor,\n} from './area-accessors.js';\nimport {\n  bandX0Accessor,\n  bandX1Accessor,\n  bandY0Accessor,\n  bandY1Accessor,\n} from './band-accessors.js';\nimport { AreaCanvas } from '../../../core/components/canvas/components/AreaCanvas.js';\nimport { shouldDisplayPoints } from '../../../core/components/canvas/utils/display-points.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { POINT_OVERLAY_PADDING } from '../../../core/components/data-point/constants.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../core/constants.js';\nimport { isIsolatedPoint } from '../../../core/utils/is-isolated-point.js';\nimport { DEFAULT_POINTS_DISPLAY } from '../../constants/defaults.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type {\n  AreaMetadata,\n  AreaSeriesWithDatapoints,\n} from '../../types/xy-chart-internals.js';\nimport type { AreaDatapoint } from '../../types/xy-chart.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { isGapDatapointForDisplay } from '../../utils/validation-datapoint.js';\nimport { relAccessor } from '../../utils/value-representation.js';\n\ninterface AreaDisplayProps {\n  axisIdToScales: AxisIdToScales;\n  series: AreaSeriesWithDatapoints;\n  metadata: AreaMetadata;\n}\n\nexport function AreaDisplay({\n  axisIdToScales,\n  series,\n  metadata,\n}: Readonly<AreaDisplayProps>) {\n  const { height, width } = useGridPlotSize();\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n\n  const xScale = getCurrentScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(axisIdToScales, series.yAxisId);\n  const {\n    curve,\n    color,\n    orientation,\n    variant,\n    pointsDisplay,\n    xAxis,\n    yAxis,\n    isStacked,\n  } = metadata;\n\n  const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n  const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n\n  const showBandedArea = variant === 'band';\n\n  const definedAccessor = isGapDatapointForDisplay(datapointMetadataMap);\n\n  const showDataPoints =\n    variant === 'band'\n      ? pointsDisplay === 'always'\n      : shouldDisplayPoints(\n          pointsDisplay ?? DEFAULT_POINTS_DISPLAY,\n          width,\n          series.data.length,\n        );\n\n  const isolatedAccessor = (datapoints: AreaDatapoint[], index: number) =>\n    showDataPoints ||\n    isIsolatedPoint(datapoints, index, (point) =>\n      isGapDatapointForDisplay(datapointMetadataMap)(point),\n    );\n\n  const isHorizontal = orientation === 'horizontal';\n\n  let primaryAxisAccessor;\n  let baselineAccessor;\n  let endpointAccessor;\n\n  if (variant === 'band') {\n    primaryAxisAccessor = isHorizontal\n      ? bandY0Accessor(yScale, yRelAccessor)\n      : bandX0Accessor(xScale, xRelAccessor);\n    baselineAccessor = isHorizontal\n      ? bandX0Accessor(xScale, xRelAccessor)\n      : bandY0Accessor(yScale, yRelAccessor);\n    endpointAccessor = isHorizontal\n      ? bandX1Accessor(xScale, xRelAccessor)\n      : bandY1Accessor(yScale, yRelAccessor);\n  } else {\n    primaryAxisAccessor = isHorizontal\n      ? yAccessor(yScale, yRelAccessor)\n      : xAccessor(xScale, xRelAccessor);\n    baselineAccessor = isHorizontal\n      ? x0Accessor(xScale, datapointMetadataMap, xRelAccessor, isStacked)\n      : y0Accessor(yScale, datapointMetadataMap, yRelAccessor, isStacked);\n    endpointAccessor = isHorizontal\n      ? x1Accessor(xScale, datapointMetadataMap, xRelAccessor, isStacked)\n      : y1Accessor(yScale, datapointMetadataMap, yRelAccessor, isStacked);\n  }\n\n  return (\n    <AreaCanvas<AreaDatapoint>\n      key={series.id}\n      data={series.data}\n      canvasWidth={width}\n      canvasHeight={height}\n      opacity={DEFAULT_FILL_OPACITY}\n      color={() => color.Default}\n      x={primaryAxisAccessor}\n      y0={baselineAccessor}\n      y1={endpointAccessor}\n      defined={definedAccessor}\n      displayScatterPlot={isolatedAccessor}\n      enableDotOverflow\n      overlayPadding={POINT_OVERLAY_PADDING}\n      orientation={orientation}\n      curve={curve}\n      showBandedArea={showBandedArea}\n    />\n  );\n}\n\nAreaDisplay['displayName'] = 'AreaDisplay';\n"],
+  "mappings": "AA8GI;AA9GJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAEvC,SAAS,sBAAsB;AAM/B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAQrB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,EAAE,sBAAsB,oBAAoB,IAAI,eAAe;AAErE,QAAM,SAAS,gBAAgB,gBAAgB,OAAO,OAAO;AAC7D,QAAM,SAAS,gBAAgB,gBAAgB,OAAO,OAAO;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,QAAM,eAAe,YAAY,OAAO,mBAAmB;AAE3D,QAAM,iBAAiB,YAAY;AAEnC,QAAM,kBAAkB,yBAAyB,oBAAoB;AAErE,QAAM,iBACJ,YAAY,SACR,kBAAkB,WAClB;AAAA,IACE,iBAAiB;AAAA,IACjB;AAAA,IACA,OAAO,KAAK;AAAA,EACd;AAEN,QAAM,mBAAmB,CAAC,YAA6B,UACrD,kBACA;AAAA,IAAgB;AAAA,IAAY;AAAA,IAAO,CAAC,UAClC,yBAAyB,oBAAoB,EAAE,KAAK;AAAA,EACtD;AAEF,QAAM,eAAe,gBAAgB;AAErC,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,YAAY,QAAQ;AACtB,0BAAsB,eAClB,eAAe,QAAQ,YAAY,IACnC,eAAe,QAAQ,YAAY;AACvC,uBAAmB,eACf,eAAe,QAAQ,YAAY,IACnC,eAAe,QAAQ,YAAY;AACvC,uBAAmB,eACf,eAAe,QAAQ,YAAY,IACnC,eAAe,QAAQ,YAAY;AAAA,EACzC,OAAO;AACL,0BAAsB,eAClB,UAAU,QAAQ,YAAY,IAC9B,UAAU,QAAQ,YAAY;AAClC,uBAAmB,eACf,WAAW,QAAQ,sBAAsB,cAAc,SAAS,IAChE,WAAW,QAAQ,sBAAsB,cAAc,SAAS;AACpE,uBAAmB,eACf,WAAW,QAAQ,sBAAsB,cAAc,SAAS,IAChE,WAAW,QAAQ,sBAAsB,cAAc,SAAS;AAAA,EACtE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,OAAO;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,OAAO,MAAM,MAAM;AAAA,MACnB,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,mBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAfK,OAAO;AAAA,EAgBd;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/RectDisplay.js

@@ -31,7 +31,7 @@ function RectDisplay(props) {
     return colorScale ? /* @__PURE__ */ jsx(
       BarCanvas,
       {
-        data: rectFilterCallback ? series2.data.filter(rectFilterCallback) : series2.data,
+        data: rectFilterCallback ? series2.filteredData.filter(rectFilterCallback) : series2.filteredData,
         canvasHeight: height,
         canvasWidth: width,
         color: colorAccessor(colorScale, datapointMetadataMap),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/RectDisplay.tsx"],
-  "sourcesContent": ["import {\n  colorAccessor,\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from './rect-accessors.js';\nimport { BarCanvas } from '../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../core/constants.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { RECT_STROKE_WIDTH } from '../../constants/defaults.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type {\n  RectDatapointInternal,\n  RectSeriesWithDatapoints,\n} from '../../types/xy-chart-internals.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { isGapDatapointForDisplay } from '../../utils/validation-datapoint.js';\nimport { relAccessor } from '../../utils/value-representation.js';\n\nexport function RectDisplay(props: {\n  axisIdToScales: AxisIdToScales;\n  series: RectSeriesWithDatapoints[];\n  rectFilterCallback?: (d: RectDatapointInternal) => boolean;\n}) {\n  const { axisIdToScales, series, rectFilterCallback } = props;\n  const { height, width } = useGridPlotSize();\n  const colorScalesMap = useXYChartColorScales();\n\n  const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } =\n    useXYChartData();\n\n  return series.map((series) => {\n    const xScale = getCurrentScale(axisIdToScales, series.xAxisId);\n    const yScale = getCurrentScale(axisIdToScales, series.yAxisId);\n    const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n    const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n    const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n    const colorScale = colorScalesMap.get(series.id);\n\n    return colorScale ? (\n      <BarCanvas\n        key={series.id}\n        data={\n          rectFilterCallback\n            ? series.data.filter(rectFilterCallback)\n            : series.data\n        }\n        canvasHeight={height}\n        canvasWidth={width}\n        color={colorAccessor(colorScale, datapointMetadataMap)}\n        x={xAccessor(xScale, xRelAccessor)}\n        width={widthAccessor(xScale, xRelAccessor)}\n        y={yAccessor(yScale, yRelAccessor)}\n        height={heightAccessor(yScale, yRelAccessor)}\n        opacity={() => DEFAULT_FILL_OPACITY}\n        strokeWidth={RECT_STROKE_WIDTH}\n        defined={isGapDatapointForDisplay(datapointMetadataMap)}\n      />\n    ) : null;\n  });\n}\n\nRectDisplay['displayName'] = 'RectDisplay';\n"],
-  "mappings": "AA4CM;AA5CN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAElC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAK/B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAErB,SAAS,YAAY,OAIzB;AACD,QAAM,EAAE,gBAAgB,QAAQ,mBAAmB,IAAI;AACvD,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,sBAAsB;AAE7C,QAAM,EAAE,sBAAsB,qBAAqB,iBAAiB,IAClE,eAAe;AAEjB,SAAO,OAAO,IAAI,CAACA,YAAW;AAC5B,UAAM,SAAS,gBAAgB,gBAAgBA,QAAO,OAAO;AAC7D,UAAM,SAAS,gBAAgB,gBAAgBA,QAAO,OAAO;AAC7D,UAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkBA,OAAM;AACzD,UAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,UAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,UAAM,aAAa,eAAe,IAAIA,QAAO,EAAE;AAE/C,WAAO,aACL;AAAA,MAAC;AAAA;AAAA,QAEC,MACE,qBACIA,QAAO,KAAK,OAAO,kBAAkB,IACrCA,QAAO;AAAA,QAEb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,OAAO,cAAc,YAAY,oBAAoB;AAAA,QACrD,GAAG,UAAU,QAAQ,YAAY;AAAA,QACjC,OAAO,cAAc,QAAQ,YAAY;AAAA,QACzC,GAAG,UAAU,QAAQ,YAAY;AAAA,QACjC,QAAQ,eAAe,QAAQ,YAAY;AAAA,QAC3C,SAAS,MAAM;AAAA,QACf,aAAa;AAAA,QACb,SAAS,yBAAyB,oBAAoB;AAAA;AAAA,MAfjDA,QAAO;AAAA,IAgBd,IACE;AAAA,EACN,CAAC;AACH;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  colorAccessor,\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from './rect-accessors.js';\nimport { BarCanvas } from '../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../core/constants.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { RECT_STROKE_WIDTH } from '../../constants/defaults.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type {\n  RectDatapointInternal,\n  RectSeriesWithDatapoints,\n} from '../../types/xy-chart-internals.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { isGapDatapointForDisplay } from '../../utils/validation-datapoint.js';\nimport { relAccessor } from '../../utils/value-representation.js';\n\nexport function RectDisplay(props: {\n  axisIdToScales: AxisIdToScales;\n  series: RectSeriesWithDatapoints[];\n  rectFilterCallback?: (d: RectDatapointInternal) => boolean;\n}) {\n  const { axisIdToScales, series, rectFilterCallback } = props;\n  const { height, width } = useGridPlotSize();\n  const colorScalesMap = useXYChartColorScales();\n\n  const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } =\n    useXYChartData();\n\n  return series.map((series) => {\n    const xScale = getCurrentScale(axisIdToScales, series.xAxisId);\n    const yScale = getCurrentScale(axisIdToScales, series.yAxisId);\n    const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n    const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n    const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n    const colorScale = colorScalesMap.get(series.id);\n\n    return colorScale ? (\n      <BarCanvas\n        key={series.id}\n        data={\n          rectFilterCallback\n            ? series.filteredData.filter(rectFilterCallback)\n            : series.filteredData\n        }\n        canvasHeight={height}\n        canvasWidth={width}\n        color={colorAccessor(colorScale, datapointMetadataMap)}\n        x={xAccessor(xScale, xRelAccessor)}\n        width={widthAccessor(xScale, xRelAccessor)}\n        y={yAccessor(yScale, yRelAccessor)}\n        height={heightAccessor(yScale, yRelAccessor)}\n        opacity={() => DEFAULT_FILL_OPACITY}\n        strokeWidth={RECT_STROKE_WIDTH}\n        defined={isGapDatapointForDisplay(datapointMetadataMap)}\n      />\n    ) : null;\n  });\n}\n\nRectDisplay['displayName'] = 'RectDisplay';\n"],
+  "mappings": "AA4CM;AA5CN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAElC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAK/B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,mBAAmB;AAErB,SAAS,YAAY,OAIzB;AACD,QAAM,EAAE,gBAAgB,QAAQ,mBAAmB,IAAI;AACvD,QAAM,EAAE,QAAQ,MAAM,IAAI,gBAAgB;AAC1C,QAAM,iBAAiB,sBAAsB;AAE7C,QAAM,EAAE,sBAAsB,qBAAqB,iBAAiB,IAClE,eAAe;AAEjB,SAAO,OAAO,IAAI,CAACA,YAAW;AAC5B,UAAM,SAAS,gBAAgB,gBAAgBA,QAAO,OAAO;AAC7D,UAAM,SAAS,gBAAgB,gBAAgBA,QAAO,OAAO;AAC7D,UAAM,EAAE,OAAO,MAAM,IAAI,QAAQ,kBAAkBA,OAAM;AACzD,UAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,UAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,UAAM,aAAa,eAAe,IAAIA,QAAO,EAAE;AAE/C,WAAO,aACL;AAAA,MAAC;AAAA;AAAA,QAEC,MACE,qBACIA,QAAO,aAAa,OAAO,kBAAkB,IAC7CA,QAAO;AAAA,QAEb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,OAAO,cAAc,YAAY,oBAAoB;AAAA,QACrD,GAAG,UAAU,QAAQ,YAAY;AAAA,QACjC,OAAO,cAAc,QAAQ,YAAY;AAAA,QACzC,GAAG,UAAU,QAAQ,YAAY;AAAA,QACjC,QAAQ,eAAe,QAAQ,YAAY;AAAA,QAC3C,SAAS,MAAM;AAAA,QACf,aAAa;AAAA,QACb,SAAS,yBAAyB,oBAAoB;AAAA;AAAA,MAfjDA,QAAO;AAAA,IAgBd,IACE;AAAA,EACN,CAAC;AACH;AAEA,YAAY,aAAa,IAAI;",
   "names": ["series"]
 }

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

@@ -6,15 +6,14 @@ import {
   isNumericalAreaScale,
   isTimeAreaScale
 } from "../../utils/type-guards.js";
-function applyNumericalBarScaleTransformations(args, accessorCoord, baseline, relAccessor, accumulator, binDomain) {
+function applyNumericalBarScaleTransformations(args, accessorCoord, baseline, relAccessor, accumulator, binDomain, isSeriesStacked) {
   const isNotBaseline = baseline !== void 0 && accessorCoord !== baseline;
   let { v0, v1 } = args;
-  const isDatapointAlone = binDomain === v1;
   if (isNotBaseline && accumulator !== void 0) {
     v0 = !isNil(v0) ? v0 + accumulator : accumulator;
     v1 = !isNil(v1) ? v1 + accumulator : accumulator;
   }
-  if (relAccessor && isNotBaseline && !isNil(binDomain) && !isDatapointAlone) {
+  if (relAccessor && isNotBaseline && !isNil(binDomain) && isSeriesStacked) {
     return {
       v0: !isNil(v0) ? v0 / binDomain * 100 : v0,
       v1: !isNil(v1) ? v1 / binDomain * 100 : v1,
@@ -54,7 +53,7 @@ const getPrimaryAxisAccessor = (accessorKeys) => {
   };
 };
 const getGrowingAccessors = (accessorKeys, baselineCoord) => {
-  const baselineAccessor = (scale, datapointsMetadata, relAccessor) => {
+  const baselineAccessor = (scale, datapointsMetadata, relAccessor, isSeriesStacked) => {
     return (datapoint) => {
       const v0 = datapoint[accessorKeys[0]];
       const v1 = datapoint[accessorKeys[1]];
@@ -67,7 +66,8 @@ const getGrowingAccessors = (accessorKeys, baselineCoord) => {
           baseline,
           relAccessor,
           accumulator,
-          binDomain
+          binDomain,
+          isSeriesStacked
         );
       }
       if (isNumericalAreaScale(args)) {
@@ -83,7 +83,7 @@ const getGrowingAccessors = (accessorKeys, baselineCoord) => {
       throw Error("unknown baseline accessor for Area series");
     };
   };
-  const endpointAccessor = (scale, datapointsMetadata, relAccessor) => {
+  const endpointAccessor = (scale, datapointsMetadata, relAccessor, isSeriesStacked) => {
     return (datapoint) => {
       const v0 = datapoint[accessorKeys[0]];
       const v1 = datapoint[accessorKeys[1]];
@@ -101,7 +101,8 @@ const getGrowingAccessors = (accessorKeys, baselineCoord) => {
           baseline,
           relAccessor,
           accumulator,
-          binDomain
+          binDomain,
+          isSeriesStacked
         );
       }
       if (isTimeAreaScale(args) || isNumericalAreaScale(args)) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/area-accessors.ts"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { AreaScaleLinear } from '../../types/guards.js';\nimport type {\n  AnyXYChartScale,\n  MapDatapoints,\n  XYChartAxisDirection,\n} from '../../types/xy-chart-internals.js';\nimport type { AreaDatapoint } from '../../types/xy-chart.js';\nimport { getBandCenteredPoint } from '../../utils/get-band-centered-point.js';\nimport { getCenterDate } from '../../utils/get-center-date.js';\nimport {\n  isCategoricalAreaScale,\n  isNumericalAreaScale,\n  isTimeAreaScale,\n} from '../../utils/type-guards.js';\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear & { v1: number },\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n): AreaScaleLinear & { v1: number };\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n): AreaScaleLinear;\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n): AreaScaleLinear {\n  const isNotBaseline = baseline !== undefined && accessorCoord !== baseline;\n  let { v0, v1 } = args;\n\n  const isDatapointAlone = binDomain === v1;\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) && !isDatapointAlone) {\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\n/**\n * Creates an accessor function for the primary (non-stacking) axis.\n * For vertical areas, this is the X axis; for horizontal areas, this is the Y axis.\n *\n * - Numerical: returns scaled v0 value\n * - Time: returns scaled center of v0-v1 range\n * - Categorical: returns band-centered position\n */\nconst getPrimaryAxisAccessor = (accessorKeys: ['x0', 'x1'] | ['y0', 'y1']) => {\n  return (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]] as Date | undefined;\n\n      if (v0 === undefined) {\n        throw Error('unknown Accessor value for Area series');\n      }\n\n      const args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        return args.scale(relAccessor ? relAccessor(args.v0) : args.v0);\n      }\n\n      if (isTimeAreaScale(args)) {\n        const value = getCenterDate(args.v0, args.v1);\n        return args.scale(value);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return getBandCenteredPoint(args.scale, args.v0);\n      }\n\n      throw Error('unknown Accessor value for Area series');\n    };\n  };\n};\n\n/**\n * Creates accessors for the stacking axis (the value axis).\n * For vertical areas, this is the Y axis (y0 to baseline, y1 to top).\n * For horizontal areas, this is the X axis (x0 to baseline, x1 to right edge).\n *\n * The baseline (v0Accessor) considers stacking accumulation.\n * The endpoint (v1Accessor) returns the cumulative value.\n *\n * @param accessorKeys - The keys to use for accessing datapoint values\n * @param baselineCoord - The coordinate that represents the baseline ('x' for vertical, 'y' for horizontal)\n */\nconst getGrowingAccessors = (\n  accessorKeys: ['x0', 'x1'] | ['y0', 'y1'],\n  baselineCoord: 'x' | 'y',\n) => {\n  const baselineAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n        );\n      }\n\n      if (isNumericalAreaScale(args)) {\n        const value = args.v0 ?? 0;\n        return args.scale(value);\n      }\n\n      if (isTimeAreaScale(args)) {\n        return args.scale(args.scale.invert(0));\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return args.scale.range()[1];\n      }\n\n      throw Error('unknown baseline accessor for Area series');\n    };\n  };\n\n  const endpointAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      if (v1 === undefined) {\n        throw Error(\n          `${accessorKeys[1]} cannot be undefined for the growing accessor in the AreaSeries`,\n        );\n      }\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n        );\n      }\n\n      if (isTimeAreaScale(args) || isNumericalAreaScale(args)) {\n        return args.scale(args.v1);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        const catWidth = Math.floor(args.scale.bandwidth() / 2);\n        return (args.scale(args.v1) ?? 0) + catWidth;\n      }\n\n      throw Error('unknown value accessor for Area series');\n    };\n  };\n\n  return { baselineAccessor, endpointAccessor };\n};\n\n// ============================================================================\n// VERTICAL AREA ACCESSORS\n// Primary axis: X (x0/x1), Growing/Stacking axis: Y (y0/y1)\n// ============================================================================\n\n/**\n * X accessor for the primary (category/time) axis in vertical area charts.\n * Used when x0/x1 define the categorical or time dimension.\n */\nexport const xAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['x0', 'x1'])(scale, relAccessor);\n\n/**\n * Vertical area stacking accessors (y0 = baseline, y1 = top)\n * baselineCoord is 'x' because vertical areas stack along the Y axis\n * while the X axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: y0Accessor, endpointAccessor: y1Accessor } =\n  getGrowingAccessors(['y0', 'y1'], 'x');\n\n// ============================================================================\n// HORIZONTAL AREA ACCESSORS\n// Primary axis: Y (y0/y1), Growing/Stacking axis: X (x0/x1)\n// ============================================================================\n\n/**\n * Y accessor for the primary (category/time) axis in horizontal area charts.\n * Used when y0/y1 define the categorical or time dimension.\n */\nexport const yAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['y0', 'y1'])(scale, relAccessor);\n\n/**\n * Horizontal area stacking accessors (x0 = baseline, x1 = right edge)\n * baselineCoord is 'y' because horizontal areas stack along the X axis\n * while the Y axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: x0Accessor, endpointAccessor: x1Accessor } =\n  getGrowingAccessors(['x0', 'x1'], 'y');\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { AreaScaleLinear } from '../../types/guards.js';\nimport type {\n  AnyXYChartScale,\n  MapDatapoints,\n  XYChartAxisDirection,\n} from '../../types/xy-chart-internals.js';\nimport type { AreaDatapoint } from '../../types/xy-chart.js';\nimport { getBandCenteredPoint } from '../../utils/get-band-centered-point.js';\nimport { getCenterDate } from '../../utils/get-center-date.js';\nimport {\n  isCategoricalAreaScale,\n  isNumericalAreaScale,\n  isTimeAreaScale,\n} from '../../utils/type-guards.js';\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear & { v1: number },\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear & { v1: number };\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear;\n\nexport function applyNumericalBarScaleTransformations(\n  args: AreaScaleLinear,\n  accessorCoord: 'x' | 'y',\n  baseline: XYChartAxisDirection,\n  relAccessor?: ((value: number) => number) | undefined,\n  accumulator?: number,\n  binDomain?: number,\n  isSeriesStacked?: boolean,\n): AreaScaleLinear {\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) && isSeriesStacked) {\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\n/**\n * Creates an accessor function for the primary (non-stacking) axis.\n * For vertical areas, this is the X axis; for horizontal areas, this is the Y axis.\n *\n * - Numerical: returns scaled v0 value\n * - Time: returns scaled center of v0-v1 range\n * - Categorical: returns band-centered position\n */\nconst getPrimaryAxisAccessor = (accessorKeys: ['x0', 'x1'] | ['y0', 'y1']) => {\n  return (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]] as Date | undefined;\n\n      if (v0 === undefined) {\n        throw Error('unknown Accessor value for Area series');\n      }\n\n      const args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        return args.scale(relAccessor ? relAccessor(args.v0) : args.v0);\n      }\n\n      if (isTimeAreaScale(args)) {\n        const value = getCenterDate(args.v0, args.v1);\n        return args.scale(value);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return getBandCenteredPoint(args.scale, args.v0);\n      }\n\n      throw Error('unknown Accessor value for Area series');\n    };\n  };\n};\n\n/**\n * Creates accessors for the stacking axis (the value axis).\n * For vertical areas, this is the Y axis (y0 to baseline, y1 to top).\n * For horizontal areas, this is the X axis (x0 to baseline, x1 to right edge).\n *\n * The baseline (v0Accessor) considers stacking accumulation.\n * The endpoint (v1Accessor) returns the cumulative value.\n *\n * @param accessorKeys - The keys to use for accessing datapoint values\n * @param baselineCoord - The coordinate that represents the baseline ('x' for vertical, 'y' for horizontal)\n */\nconst getGrowingAccessors = (\n  accessorKeys: ['x0', 'x1'] | ['y0', 'y1'],\n  baselineCoord: 'x' | 'y',\n) => {\n  const baselineAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n    isSeriesStacked?: boolean,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n          isSeriesStacked,\n        );\n      }\n\n      if (isNumericalAreaScale(args)) {\n        const value = args.v0 ?? 0;\n        return args.scale(value);\n      }\n\n      if (isTimeAreaScale(args)) {\n        return args.scale(args.scale.invert(0));\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        return args.scale.range()[1];\n      }\n\n      throw Error('unknown baseline accessor for Area series');\n    };\n  };\n\n  const endpointAccessor = (\n    scale: AnyXYChartScale,\n    datapointsMetadata: MapDatapoints,\n    relAccessor?: (value: number) => number,\n    isSeriesStacked?: boolean,\n  ) => {\n    return (datapoint: AreaDatapoint) => {\n      const v0 = datapoint[accessorKeys[0]];\n      const v1 = datapoint[accessorKeys[1]];\n      const { accumulator, baseline, binDomain } =\n        datapointsMetadata.get(datapoint) ?? {};\n\n      if (v1 === undefined) {\n        throw Error(\n          `${accessorKeys[1]} cannot be undefined for the growing accessor in the AreaSeries`,\n        );\n      }\n\n      let args = { scale, v0, v1 };\n\n      if (isNumericalAreaScale(args)) {\n        args = applyNumericalBarScaleTransformations(\n          args,\n          baselineCoord === 'x' ? 'y' : 'x',\n          baseline,\n          relAccessor,\n          accumulator,\n          binDomain,\n          isSeriesStacked,\n        );\n      }\n\n      if (isTimeAreaScale(args) || isNumericalAreaScale(args)) {\n        return args.scale(args.v1);\n      }\n\n      if (isCategoricalAreaScale(args)) {\n        const catWidth = Math.floor(args.scale.bandwidth() / 2);\n        return (args.scale(args.v1) ?? 0) + catWidth;\n      }\n\n      throw Error('unknown value accessor for Area series');\n    };\n  };\n\n  return { baselineAccessor, endpointAccessor };\n};\n\n// ============================================================================\n// VERTICAL AREA ACCESSORS\n// Primary axis: X (x0/x1), Growing/Stacking axis: Y (y0/y1)\n// ============================================================================\n\n/**\n * X accessor for the primary (category/time) axis in vertical area charts.\n * Used when x0/x1 define the categorical or time dimension.\n */\nexport const xAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['x0', 'x1'])(scale, relAccessor);\n\n/**\n * Vertical area stacking accessors (y0 = baseline, y1 = top)\n * baselineCoord is 'x' because vertical areas stack along the Y axis\n * while the X axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: y0Accessor, endpointAccessor: y1Accessor } =\n  getGrowingAccessors(['y0', 'y1'], 'x');\n\n// ============================================================================\n// HORIZONTAL AREA ACCESSORS\n// Primary axis: Y (y0/y1), Growing/Stacking axis: X (x0/x1)\n// ============================================================================\n\n/**\n * Y accessor for the primary (category/time) axis in horizontal area charts.\n * Used when y0/y1 define the categorical or time dimension.\n */\nexport const yAccessor = (\n  scale: AnyXYChartScale,\n  relAccessor?: (value: number) => number,\n) => getPrimaryAxisAccessor(['y0', 'y1'])(scale, relAccessor);\n\n/**\n * Horizontal area stacking accessors (x0 = baseline, x1 = right edge)\n * baselineCoord is 'y' because horizontal areas stack along the X axis\n * while the Y axis is the primary/categorical axis.\n */\nexport const { baselineAccessor: x0Accessor, endpointAccessor: x1Accessor } =\n  getGrowingAccessors(['x0', 'x1'], 'y');\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/displays/index.ts"],
-  "sourcesContent": ["import {\n  xAccessor as xDotAccessor,\n  yAccessor as yDotAccessor,\n} from './dot-accessors.js';\nimport {\n  xAccessor as xLineAccessor,\n  yAccessor as yLineAccessor,\n} from './line-accessors.js';\nimport type { AnyScale } from '../../../core/types/scales.js';\nimport { DOT_VARIANT, LINE_VARIANT } from '../../types/xy-chart-internals.js';\nimport type { LinearDatapoint } from '../../types/xy-chart-selection.js';\n\ntype AccessorFactory = (\n  scale: AnyScale,\n  relAccessor?: (value: number) => number,\n) => (d: LinearDatapoint) => number;\n\ninterface LinearAccessors {\n  x: AccessorFactory;\n  y: AccessorFactory;\n}\n\nexport const LINEAR_ACCESSORS: Record<string, LinearAccessors> = {\n  [DOT_VARIANT]: {\n    x: xDotAccessor,\n    y: yDotAccessor,\n  },\n  [LINE_VARIANT]: {\n    x: xLineAccessor,\n    y: yLineAccessor,\n  },\n} as const;\n"],
-  "mappings": "AAAA;AAAA,EACE,aAAa;AAAA,EACb,aAAa;AAAA,OACR;AACP;AAAA,EACE,aAAa;AAAA,EACb,aAAa;AAAA,OACR;AAEP,SAAS,aAAa,oBAAoB;AAanC,MAAM,mBAAoD;AAAA,EAC/D,CAAC,WAAW,GAAG;AAAA,IACb,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EACA,CAAC,YAAY,GAAG;AAAA,IACd,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;",
+  "sourcesContent": ["import {\n  xAccessor as xDotAccessor,\n  yAccessor as yDotAccessor,\n} from './dot-accessors.js';\nimport {\n  xAccessor as xLineAccessor,\n  yAccessor as yLineAccessor,\n} from './line-accessors.js';\nimport { DOT_VARIANT, LINE_VARIANT } from '../../types/xy-chart-internals.js';\n\ntype LinearAccessors = {\n  [DOT_VARIANT]: {\n    x: typeof xDotAccessor;\n    y: typeof yDotAccessor;\n  };\n  [LINE_VARIANT]: {\n    x: typeof xLineAccessor;\n    y: typeof yLineAccessor;\n  };\n};\n\nexport const LINEAR_ACCESSORS: LinearAccessors = {\n  [DOT_VARIANT]: {\n    x: xDotAccessor,\n    y: yDotAccessor,\n  },\n  [LINE_VARIANT]: {\n    x: xLineAccessor,\n    y: yLineAccessor,\n  },\n} as const;\n"],
+  "mappings": "AAAA;AAAA,EACE,aAAa;AAAA,EACb,aAAa;AAAA,OACR;AACP;AAAA,EACE,aAAa;AAAA,EACb,aAAa;AAAA,OACR;AACP,SAAS,aAAa,oBAAoB;AAanC,MAAM,mBAAoC;AAAA,EAC/C,CAAC,WAAW,GAAG;AAAA,IACb,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EACA,CAAC,YAAY,GAAG;AAAA,IACd,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;",
   "names": []
 }