@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/xy-chart/processing-strategies/strategies/bar-series.js

@@ -83,7 +83,7 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       chartOrientation: (0, import_get_datapoints.getChartOrientation)(seriesProps)
     };
   }
-  handleStackingAndGrouping(datapoint, seriesProps, xAxis, yAxis, chartOrientation, seriesId) {
+  handleStackingAndGrouping(datapoint, seriesProps, xAxis, yAxis, chartOrientation, seriesId, isSeriesVisible) {
     let shouldContinue = false;
     let datapointMetadata = {
       isGap: false,
@@ -102,6 +102,14 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       yAxis
     );
     let calcDatapoint;
+    if (!isSeriesVisible) {
+      return {
+        calcDatapoint: calcDatapoint ?? datapoint,
+        datapointMetadata,
+        shouldContinue,
+        variant: (0, import_get_variant.getBarSeriesVariant)(canStack, canGroup)
+      };
+    }
     if (canStack) {
       ({ calcDatapoint, datapointMetadata, shouldContinue } = this.stackHelper.processStackedDatapoint(
         datapoint,
@@ -128,7 +136,7 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       variant: (0, import_get_variant.getBarSeriesVariant)(canStack, canGroup)
     };
   }
-  preprocessImpl(data, seriesProps, xAxis, yAxis) {
+  preprocessImpl(data, seriesProps, xAxis, yAxis, context) {
     const chartOrientation = (0, import_get_datapoints.getChartOrientation)(seriesProps);
     if (chartOrientation === void 0 || chartOrientation === "both") {
       return;
@@ -148,9 +156,15 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     if (!canStack && !canGroup) {
       return;
     }
+    const filteredSeriesIds = context?.filteredSeriesIds;
     for (const datum of data) {
       const datapoint = this.getDatapoint(datum, seriesProps, xAxis, yAxis);
       if (datapoint) {
+        const seriesId = this.getSeriesId(datum, seriesProps);
+        const isSeriesVisible = filteredSeriesIds === void 0 || filteredSeriesIds.has(seriesId);
+        if (!isSeriesVisible) {
+          continue;
+        }
         if (canStack) {
           this.stackHelper.processStackDomain(
             datapoint,
@@ -177,13 +191,15 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     if (chartOrientation === void 0) {
       return "continue";
     }
+    const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
     const { calcDatapoint, datapointMetadata, shouldContinue, variant } = this.handleStackingAndGrouping(
       datapoint,
       seriesProps,
       xAxis,
       yAxis,
       chartOrientation,
-      seriesId
+      seriesId,
+      isSeriesVisible
     );
     if (shouldContinue) {
       return "continue";
@@ -201,7 +217,10 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
         context,
         variant
       );
-      seriesToMetadata.set(currentSeries, metadata);
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: isSeriesVisible
+      });
     }
     this.registerDatapoint(
       datapoint,
@@ -209,16 +228,18 @@ class BarSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
-    this.addValue({
-      series: currentSeries,
-      datapoint
-    });
-    this.updateAxisDomains(
-      calcDatapoint,
-      xAxis,
-      yAxis,
-      context.axisIdToScaleDomain
-    );
+    if (isSeriesVisible) {
+      this.addValue({
+        series: currentSeries,
+        datapoint
+      });
+      this.updateAxisDomains(
+        calcDatapoint,
+        xAxis,
+        yAxis,
+        context.axisIdToScaleDomain
+      );
+    }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {
     return (0, import_get_linear_color_palette.getLinearColor)(

package/charts/xy-chart/processing-strategies/strategies/base-series.d.ts

@@ -8,9 +8,9 @@ export declare abstract class SeriesBaseStrategy<T extends XYChartSelectionLinea
     protected readonly addValue: (point: T) => void;
     constructor(initializer: SeriesConstructor<T>);
     abstract canHandle(seriesProps: XYChartVariantsInternal): boolean;
-    preprocess(data: XYChartData[], seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): ControlFlowCommand;
+    preprocess(data: XYChartData[], seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     process(datum: XYChartData, seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
-    protected preprocessImpl(data: XYChartData[], seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): ControlFlowCommand;
+    protected preprocessImpl(data: XYChartData[], seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     protected abstract processImpl(datum: XYChartData, seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: AnyDatapoint, context: MutableProcessingContext): ControlFlowCommand;
     /**
      * Gets the series ID for this datum. Override in subclasses for custom ID logic.

package/charts/xy-chart/processing-strategies/strategies/base-series.js

@@ -29,11 +29,11 @@ class SeriesBaseStrategy {
   constructor(initializer) {
     this.addValue = initializer.addValue;
   }
-  preprocess(data, seriesProps, xAxis, yAxis) {
+  preprocess(data, seriesProps, xAxis, yAxis, context) {
     if (!this.canHandle(seriesProps)) {
       return;
     }
-    return this.preprocessImpl(data, seriesProps, xAxis, yAxis);
+    return this.preprocessImpl(data, seriesProps, xAxis, yAxis, context);
   }
   process(datum, seriesProps, xAxis, yAxis, context) {
     if (!this.canHandle(seriesProps)) {
@@ -52,7 +52,7 @@ class SeriesBaseStrategy {
       context
     );
   }
-  preprocessImpl(data, seriesProps, xAxis, yAxis) {
+  preprocessImpl(data, seriesProps, xAxis, yAxis, context) {
     return;
   }
   /**

package/charts/xy-chart/processing-strategies/strategies/dot-series.d.ts

@@ -14,7 +14,7 @@ export declare class DotSeriesStrategy extends SeriesBaseStrategy<XYChartSelecti
         colorIsFromSlot: boolean;
         xAxis: XYChartAxisInternal;
         yAxis: XYChartAxisInternal;
-        actions: ((datapoint: import("../../types/xy-chart.js").XYChartDotSeriesActionItem, _series?: import("../../types/xy-chart.js")._XYChartDotSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
+        actions: ((datapoint: import("../../types/xy-chart.js").XYChartDotSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartDotSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
     };
     protected getCalculationPoint(datapoint: DotDatapoint, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): {
         x0: import("../../types/xy-chart.js").XYAccessorDataTypes;

package/charts/xy-chart/processing-strategies/strategies/dot-series.js

@@ -76,6 +76,7 @@ class DotSeriesStrategy extends import_base_series.SeriesBaseStrategy {
   processImpl(datum, seriesProps, xAxis, yAxis, datapoint, context) {
     const { seriesMap, seriesToMetadata } = context;
     const seriesId = this.getSeriesId(datum, seriesProps);
+    const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
     let currentSeries = seriesMap.get(seriesId);
     if (!currentSeries) {
       currentSeries = this.createSeries(
@@ -93,14 +94,11 @@ class DotSeriesStrategy extends import_base_series.SeriesBaseStrategy {
         seriesId,
         context
       );
-      seriesToMetadata.set(currentSeries, metadata);
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: isSeriesVisible
+      });
     }
-    const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
-    this.addValue({
-      series: currentSeries,
-      datapoint,
-      color: currentSeriesMetadata?.color
-    });
     const datapointMetadata = { isGap: false };
     this.registerDatapoint(
       datapoint,
@@ -108,13 +106,21 @@ class DotSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
-    const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
-    this.updateAxisDomains(
-      calcPoint,
-      xAxis,
-      yAxis,
-      context.axisIdToScaleDomain
-    );
+    if (isSeriesVisible) {
+      const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+      this.addValue({
+        series: currentSeries,
+        datapoint,
+        color: currentSeriesMetadata?.color
+      });
+      const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
+      this.updateAxisDomains(
+        calcPoint,
+        xAxis,
+        yAxis,
+        context.axisIdToScaleDomain
+      );
+    }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {
     return (0, import_get_linear_color_palette.getLinearColor)(

package/charts/xy-chart/processing-strategies/strategies/line-series.d.ts

@@ -16,7 +16,7 @@ export declare class LineSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
         xAxis: XYChartAxisInternal;
         yAxis: XYChartAxisInternal;
         curve: import("../../types/xy-chart.js").SeriesCurve | undefined;
-        actions: ((datapoint: import("../../types/xy-chart.js").XYChartLineSeriesActionItem, _series?: import("../../types/xy-chart.js")._XYChartLineSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
+        actions: ((datapoint: import("../../types/xy-chart.js").XYChartLineSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartLineSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
         pointsDisplay: "auto" | "always" | "never";
     };
     protected getCalculationPoint(datapoint: LineDatapoint, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): {

package/charts/xy-chart/processing-strategies/strategies/line-series.js

@@ -73,6 +73,7 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
   processImpl(datum, seriesProps, xAxis, yAxis, datapoint, context) {
     const { seriesMap, seriesToMetadata } = context;
     const seriesId = this.getSeriesId(datum, seriesProps);
+    const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
     let currentSeries = seriesMap.get(seriesId);
     if (!currentSeries) {
       currentSeries = this.createSeries(
@@ -90,42 +91,49 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
         seriesId,
         context
       );
-      seriesToMetadata.set(currentSeries, metadata);
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: isSeriesVisible
+      });
     }
-    const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
-    this.addValue({
-      series: currentSeries,
-      datapoint,
-      color: currentSeriesMetadata?.color
-    });
-    const gappedDatapoint = this.gapHelper.handleGapDetection(
-      datapoint,
-      currentSeries,
-      xAxis,
-      yAxis
-    );
-    if (gappedDatapoint) {
-      this.registerDatapoint(
-        gappedDatapoint,
-        { isGap: true },
+    const datapointMetadata = { isGap: false };
+    if (isSeriesVisible) {
+      const gappedDatapoint = this.gapHelper.handleGapDetection(
+        datapoint,
         currentSeries,
-        context
+        xAxis,
+        yAxis
       );
+      if (gappedDatapoint) {
+        this.registerDatapoint(
+          gappedDatapoint,
+          { isGap: true },
+          currentSeries,
+          context
+        );
+      }
     }
-    const datapointMetadata = { isGap: false };
     this.registerDatapoint(
       datapoint,
       datapointMetadata,
       currentSeries,
       context
     );
-    const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
-    this.updateAxisDomains(
-      calcPoint,
-      xAxis,
-      yAxis,
-      context.axisIdToScaleDomain
-    );
+    if (isSeriesVisible) {
+      const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+      this.addValue({
+        series: currentSeries,
+        datapoint,
+        color: currentSeriesMetadata?.color
+      });
+      const calcPoint = this.getCalculationPoint(datapoint, xAxis, yAxis);
+      this.updateAxisDomains(
+        calcPoint,
+        xAxis,
+        yAxis,
+        context.axisIdToScaleDomain
+      );
+    }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {
     return (0, import_get_linear_color_palette.getLinearColor)(

package/charts/xy-chart/processing-strategies/strategies/rect-series.d.ts

@@ -1,6 +1,6 @@
 import { SeriesBaseStrategy } from './base-series.js';
 import type { XYChartSelectionRectangleMetadata } from '../../hooks/useSortRectangleDatapoints.js';
-import type { RectDatapointInternal, RectSeriesIdToValueScaleDomain, XYChartAxisInternal, XYChartRectSeriesInternal, XYChartVariantsInternal } from '../../types/xy-chart-internals.js';
+import { type RectDatapointInternal, type RectSeriesIdToValueScaleDomain, type XYChartAxisInternal, type XYChartRectSeriesInternal, type XYChartVariantsInternal } from '../../types/xy-chart-internals.js';
 import type { XYChartColorPalette, XYChartData } from '../../types/xy-chart.js';
 import type { MutableProcessingContext, RectSeriesConstructor } from '../types/processing-types.js';
 export declare class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelectionRectangleMetadata> {
@@ -8,11 +8,19 @@ export declare class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
     constructor(initializer: RectSeriesConstructor);
     canHandle(seriesProps: XYChartVariantsInternal): seriesProps is XYChartRectSeriesInternal;
     protected getSeriesId(_datum: XYChartData, seriesProps: XYChartRectSeriesInternal): string;
+    protected createSeries(seriesId: string, seriesProps: XYChartRectSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): {
+        id: string;
+        type: "rect";
+        data: never[];
+        filteredData: never[];
+        xAxisId: string;
+        yAxisId: string;
+    };
     protected createSeriesMetadata(_datum: XYChartData, seriesProps: XYChartRectSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;
         xAxis: XYChartAxisInternal;
         yAxis: XYChartAxisInternal;
-        actions: ((datapoint: import("../../types/xy-chart.js").XYChartRectSeriesActionItem, _series?: import("../../types/xy-chart.js")._XYChartRectSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
+        actions: ((datapoint: import("../../types/xy-chart.js").XYChartRectSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartRectSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
         valueFormatter: import("../../../index.js").Formatter | import("@dynatrace-sdk/units").FormatOptions<import("@dynatrace-sdk/units").Unit, import("@dynatrace-sdk/units").ConvertibleUnit> | undefined;
         valueUnit: import("../../../index.js").ChartUnit;
         colorPalette: XYChartColorPalette;

package/charts/xy-chart/processing-strategies/strategies/rect-series.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(rect_series_exports);
 var import_base_series = require("./base-series.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
 var import_defaults = require("../../constants/defaults.js");
+var import_xy_chart_internals = require("../../types/xy-chart-internals.js");
 var import_type_guards = require("../../utils/type-guards.js");
 var import_get_datapoints = require("../utils/access-datapoint/get-datapoints.js");
 var import_get_legend_type = require("../utils/cast-data/get-legend-type.js");
@@ -41,6 +42,16 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
   getSeriesId(_datum, seriesProps) {
     return seriesProps.id;
   }
+  createSeries(seriesId, seriesProps, xAxis, yAxis) {
+    return {
+      id: seriesId,
+      type: seriesProps.type,
+      data: [],
+      filteredData: [],
+      xAxisId: xAxis.id,
+      yAxisId: yAxis.id
+    };
+  }
   createSeriesMetadata(_datum, seriesProps, xAxis, yAxis, seriesId, context) {
     const { intl, seriesIndexes } = context;
     const color = this.getColor(seriesProps.colorPalette, context.colorPalette);
@@ -67,12 +78,7 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     const seriesId = this.getSeriesId(datum, seriesProps);
     let currentSeries = seriesMap.get(seriesId);
     if (!currentSeries) {
-      currentSeries = this.createSeries(
-        seriesId,
-        seriesProps,
-        xAxis,
-        yAxis
-      );
+      currentSeries = this.createSeries(seriesId, seriesProps, xAxis, yAxis);
       this.registerSeries(currentSeries, seriesId, context);
       const metadata = this.createSeriesMetadata(
         datum,
@@ -82,7 +88,10 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
         seriesId,
         context
       );
-      seriesToMetadata.set(currentSeries, metadata);
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: context.filteredSeriesIds !== void 0 ? false : void 0
+      });
     }
     const datapointMetadata = { isGap: true };
     if ((0, import_type_guards.isStringOrValidNumber)(datapoint.value)) {
@@ -93,11 +102,11 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       );
       this.seriesIdToValueScaleDomain.set(seriesProps.id, valueDomain);
       datapointMetadata.isGap = false;
-      const tempMetadata = (0, import_safe_get.safeGet)(
-        seriesToMetadata,
-        currentSeries
-      );
-      tempMetadata.valueType ??= (0, import_get_legend_type.getLegendType)(datapoint.value);
+      const tempSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+      tempSeriesMetadata.valueType ??= (0, import_get_legend_type.getLegendType)(datapoint.value);
+      const isDatapointVisible = tempSeriesMetadata.valueType === import_xy_chart_internals.RANGE_LEGEND_TYPE || context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(`${seriesId}--${datapoint.value}`);
+      datapointMetadata.isVisible = isDatapointVisible;
+      tempSeriesMetadata.isVisible ||= isDatapointVisible;
     }
     this.registerDatapoint(
       datapoint,
@@ -105,16 +114,21 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
-    datapointMetadata.isGap || this.addValue({
-      series: currentSeries,
-      datapoint
-    });
-    this.updateAxisDomains(
-      datapoint,
-      xAxis,
-      yAxis,
-      context.axisIdToScaleDomain
-    );
+    const datapointIsVisible = datapointMetadata.isVisible === void 0 || datapointMetadata.isVisible === true;
+    if (!datapointMetadata.isGap && datapointIsVisible) {
+      this.addValue({
+        series: currentSeries,
+        datapoint
+      });
+    }
+    if (datapointIsVisible) {
+      this.updateAxisDomains(
+        datapoint,
+        xAxis,
+        yAxis,
+        context.axisIdToScaleDomain
+      );
+    }
   }
   getColor(colorPalette, fallbackColorPalette) {
     const validColorPalette = (0, import_get_valid_color_palette.getValidColorPalette)(

package/charts/xy-chart/processing-strategies/types/processing-types.d.ts

@@ -6,7 +6,7 @@ import type { XYChartColorPalette, XYChartData } from '../../types/xy-chart.js';
 export type ControlFlowCommand = 'continue' | void;
 export interface SeriesProcessingStrategy {
     canHandle(seriesProps: XYChartVariantsInternal): boolean;
-    preprocess?(data: XYChartData[], seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): void;
+    preprocess?(data: XYChartData[], seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context?: MutableProcessingContext): void;
     process(datum: XYChartData, seriesProps: XYChartVariantsInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
 }
 export interface MutableProcessingContext {
@@ -18,6 +18,7 @@ export interface MutableProcessingContext {
     intl: IntlShape;
     colorPalette?: XYChartColorPalette;
     datapointMetadataMap: MapDatapoints;
+    filteredSeriesIds?: Set<string>;
 }
 export interface SeriesConstructor<T> {
     addValue: (point: T) => void;

package/charts/xy-chart/processing-strategies/utils/stacking/is-area-series-stacked.d.ts

@@ -0,0 +1,2 @@
+import type { AreaMetadata } from '../../../types/xy-chart-internals.js';
+export declare function isAreaSeriesStacked(axisId: string, combinedAxesOrientationKeyToSeriesCount: Map<string, number>, variant: AreaMetadata['variant']): boolean;

package/charts/xy-chart/processing-strategies/utils/stacking/is-area-series-stacked.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var is_area_series_stacked_exports = {};
+__export(is_area_series_stacked_exports, {
+  isAreaSeriesStacked: () => isAreaSeriesStacked
+});
+module.exports = __toCommonJS(is_area_series_stacked_exports);
+function isAreaSeriesStacked(axisId, combinedAxesOrientationKeyToSeriesCount, variant) {
+  const axisSeriesCount = combinedAxesOrientationKeyToSeriesCount.get(axisId) ?? 0;
+  const isMultipleSeriesOnSameAxis = axisSeriesCount > 1;
+  return isMultipleSeriesOnSameAxis && variant !== "band";
+}

package/charts/xy-chart/processing-strategies/utils/stacking/stack-datapoints.d.ts

@@ -1,5 +1,6 @@
 import { type XYChartAxisDirection, XYChartAxisInternal, type XYChartOrientation, type XYChartStackingValueBoundaries } from '../../../types/xy-chart-internals.js';
 import { type BarDatapoint, type BarSeriesVariant } from '../../../types/xy-chart.js';
+export declare const getCombinedAxesOrientationKey: (xAxisId: string, yAxisId: string, chartOrientation: "vertical" | "horizontal") => string;
 export declare const getStackingData: (chartOrientation: "vertical" | "horizontal", datapoint: BarDatapoint, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal) => {
     stackKey: string;
     value: import("../../../types/xy-chart.js").XYAccessorDataTypes | undefined;

package/charts/xy-chart/processing-strategies/utils/stacking/stack-datapoints.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var stack_datapoints_exports = {};
 __export(stack_datapoints_exports, {
   getBaselineCoordinate: () => getBaselineCoordinate,
+  getCombinedAxesOrientationKey: () => getCombinedAxesOrientationKey,
   getStackedValue: () => getStackedValue,
   getStackingData: () => getStackingData,
   isStackable: () => isStackable
@@ -30,9 +31,10 @@ const orientationToBaselineAxis = {
   vertical: "x",
   horizontal: "y"
 };
+const getCombinedAxesOrientationKey = (xAxisId, yAxisId, chartOrientation) => `${xAxisId}-${yAxisId}-${chartOrientation}`;
 const getStackingData = (chartOrientation, datapoint, xAxis, yAxis) => {
   const [start, end] = chartOrientation === "vertical" ? [datapoint.x0, datapoint.x1] : [datapoint.y0, datapoint.y1];
-  const stackKey = (end ? `${start}-${end}` : `${start}`) + `-${xAxis.id}-${yAxis.id}-${chartOrientation}`;
+  const stackKey = (end ? `${start}-${end}` : `${start}`) + `-${getCombinedAxesOrientationKey(xAxis.id, yAxis.id, chartOrientation)}`;
   const value = chartOrientation === "vertical" ? datapoint.y1 : datapoint.x1;
   return { stackKey, value };
 };

package/charts/xy-chart/providers/XYChartDataProvider.js

@@ -43,7 +43,8 @@ const XYChartChartDataProvider = ({
     rectSelectionContextValue,
     seriesWithDatapoints,
     seriesToMetadata: metadataWithoutColorRules,
-    axisIdToDimension
+    axisIdToDimension,
+    filteredSeriesWithDatapoints
   } = (0, import_useXYChartDataProvider.useXYChartDataProvider)(seriesVariantsProps, data);
   const seriesToMetadata = (0, import_useColorRule.useColorRule)({
     seriesWithDatapoints,
@@ -57,6 +58,7 @@ const XYChartChartDataProvider = ({
         axesMetadata,
         axes,
         seriesWithDatapoints,
+        filteredSeriesWithDatapoints,
         seriesToMetadata,
         axisIdToScaleDomain,
         datapointMetadataMap,

package/charts/xy-chart/providers/XYChartStoreDomainSync.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+/**
+ * Syncs domain-dependent state (currentDomain, zoomOutEnabled) into the store
+ * after the data provider has computed axes and scale domains.
+ *
+ * This component exists because the store is placed above the data provider
+ * in the provider tree (to allow legend filtering), but domain/zoom state
+ * depends on processed data.
+ */
+export declare const XYChartStoreDomainSync: ({ children }: PropsWithChildren) => import("react").ReactNode;

package/charts/xy-chart/providers/XYChartStoreDomainSync.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var XYChartStoreDomainSync_exports = {};
+__export(XYChartStoreDomainSync_exports, {
+  XYChartStoreDomainSync: () => XYChartStoreDomainSync
+});
+module.exports = __toCommonJS(XYChartStoreDomainSync_exports);
+var import_react = require("react");
+var import_useXYChartData = require("../hooks/useXYChartData.js");
+var import_selectors = require("../store/selectors.js");
+var import_get_current_domain_axis = require("../utils/get-current-domain-axis.js");
+var import_is_zoom_out_allowed = require("../utils/is-zoom-out-allowed.js");
+const XYChartStoreDomainSync = ({ children }) => {
+  const { axes, axisIdToScaleDomain } = (0, import_useXYChartData.useXYChartData)();
+  const setState = (0, import_selectors.useSetState)();
+  (0, import_react.useEffect)(() => {
+    const currentDomainMap = (0, import_get_current_domain_axis.getCurrentDomainMap)(axes);
+    const zoomOutAllowed = (0, import_is_zoom_out_allowed.isZoomOutAllowed)(axes, axisIdToScaleDomain);
+    setState((prev) => ({
+      ...prev,
+      zoom: {
+        ...prev.zoom,
+        zoomOutEnabled: zoomOutAllowed
+      },
+      currentDomain: currentDomainMap
+    }));
+  }, [axes, axisIdToScaleDomain, setState]);
+  return children;
+};

package/charts/xy-chart/providers/XYChartStoreProvider.js

@@ -26,23 +26,12 @@ var import_react = require("react");
 var import_store = require("../../../core/store/store.js");
 var import_defaults = require("../constants/defaults.js");
 var import_XYChartStore_context = require("../context/XYChartStore.context.js");
-var import_useXYChartData = require("../hooks/useXYChartData.js");
-var import_get_current_domain_axis = require("../utils/get-current-domain-axis.js");
-var import_is_zoom_out_allowed = require("../utils/is-zoom-out-allowed.js");
 const XYChartStoreProvider = ({ children }) => {
   const storeRef = (0, import_react.useRef)(void 0);
-  const { axes, axisIdToScaleDomain } = (0, import_useXYChartData.useXYChartData)();
-  const currentDomainMap = (0, import_get_current_domain_axis.getCurrentDomainMap)(axes);
-  const zoomOutAllowed = (0, import_is_zoom_out_allowed.isZoomOutAllowed)(axes, axisIdToScaleDomain);
   const lastInteraction = storeRef?.current?.getState().interactionMode;
   storeRef.current = (0, import_store.createStore)({
     ...import_defaults.initialState,
-    interactionMode: lastInteraction || "explore",
-    zoom: {
-      ...import_defaults.initialState.zoom,
-      zoomOutEnabled: zoomOutAllowed
-    },
-    currentDomain: currentDomainMap
+    interactionMode: lastInteraction || "explore"
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartStore_context.XYChartStoreContext.Provider, { value: storeRef.current, children });
 };

package/charts/xy-chart/slots/AreaSeries.d.ts

@@ -1,9 +1,9 @@
-import type { _XYChartAreaSeriesProps } from '../types/xy-chart-props.js';
+import type { XYChartAreaSeriesProps } from '../types/xy-chart-props.js';
 /**
  * Area series slot component.
  * @public
  */
-export declare const _AreaSeries: {
-    (_props: _XYChartAreaSeriesProps): null;
+export declare const AreaSeries: {
+    (props: XYChartAreaSeriesProps): null;
     displayName: string;
 };

package/charts/xy-chart/slots/AreaSeries.js

@@ -18,8 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AreaSeries_exports = {};
 __export(AreaSeries_exports, {
-  _AreaSeries: () => _AreaSeries
+  AreaSeries: () => AreaSeries
 });
 module.exports = __toCommonJS(AreaSeries_exports);
-const _AreaSeries = (_props) => null;
-_AreaSeries["displayName"] = "XYChart.AreaSeries";
+const AreaSeries = (props) => null;
+AreaSeries["displayName"] = "XYChart.AreaSeries";

package/charts/xy-chart/store/reducer-filter-series.d.ts

@@ -0,0 +1,2 @@
+import { type XYChartState } from '../types/state.js';
+export declare function reduceFilterSeries(visibleIds: Set<string>): (prev: XYChartState) => XYChartState;