@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/xy-chart/store/reducer-filter-series.js

@@ -0,0 +1,35 @@
+"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 reducer_filter_series_exports = {};
+__export(reducer_filter_series_exports, {
+  reduceFilterSeries: () => reduceFilterSeries
+});
+module.exports = __toCommonJS(reducer_filter_series_exports);
+var import_state = require("../types/state.js");
+function reduceFilterSeries(visibleIds) {
+  return (prev) => ({
+    ...prev,
+    filteredSeriesIds: visibleIds,
+    explore: {
+      ...prev.explore,
+      pinned: false,
+      content: import_state.UndefinedContent
+    }
+  });
+}

package/charts/xy-chart/store/selectors.d.ts

@@ -16,3 +16,4 @@ export declare const useCurrentDomainState: () => import("../types/xy-chart-inte
 export declare const useSelectState: () => import("../../core/components/interactions-state-helpers/types.js").SelectState | undefined;
 export declare const useHoveredThresholdState: () => string | undefined;
 export declare const useAnnotationsState: () => import("../../core/components/annotations/components/indicators/types.js").AnnotationsIntegrationSelectionState;
+export declare const useFilteredSeriesIdsState: () => Set<string> | undefined;

package/charts/xy-chart/store/selectors.js

@@ -21,6 +21,7 @@ __export(selectors_exports, {
   useAnnotationsState: () => useAnnotationsState,
   useContentState: () => useContentState,
   useCurrentDomainState: () => useCurrentDomainState,
+  useFilteredSeriesIdsState: () => useFilteredSeriesIdsState,
   useHoveredThresholdState: () => useHoveredThresholdState,
   useInteractionModeState: () => useInteractionModeState,
   usePinnedState: () => usePinnedState,
@@ -60,3 +61,21 @@ const useCurrentDomainState = () => useSelector((state) => state.currentDomain,
 const useSelectState = () => useSelector((state) => state.select);
 const useHoveredThresholdState = () => useSelector((state) => state.thresholds.hoveredThresholdId);
 const useAnnotationsState = () => useSelector((state) => state.annotations);
+const areSetsEqual = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const value of a) {
+    if (!b.has(value)) {
+      return false;
+    }
+  }
+  return true;
+};
+const useFilteredSeriesIdsState = () => useSelector((state) => state.filteredSeriesIds, areSetsEqual);

package/charts/xy-chart/types/guards.d.ts

@@ -3,6 +3,7 @@ import { type CATEGORICAL, TIME, type XYAxisAnyNumericalType, type XYAxisInterna
 import type { XYChartExploreState } from './state.js';
 import { DOT_VARIANT, DotSeriesWithDatapoints, LINE_VARIANT, LineSeriesWithDatapoints, AREA_VARIANT, AreaSeriesWithDatapoints, XYChartAxisInternal, type XYChartColorScale, type XYChartLinearAxisInternalProps, type XYChartLogAxisInternalProps } from './xy-chart-internals.js';
 import type { XYChartCategoricalAxisProps, XYChartTimeAxisProps } from './xy-chart-props.js';
+import type { XYChartSelectionLinearMetadata, DotOrLineSelection } from './xy-chart-selection.js';
 import type { DotDatapoint, LineDatapoint, AreaDatapoint, XYChartData } from './xy-chart.js';
 import { DateTimeFormatter, FormatterWithPrecision } from '../../core/types/formatter.js';
 import type { AnyNumberScale, AnyScale, CategoricalScales, DateScales } from '../../core/types/scales.js';
@@ -206,3 +207,4 @@ export declare function isAreaContentPoint(content: XYChartExploreState['content
 };
 export declare function isNumericColoringScale(colorScale: XYChartColorScale): boolean;
 export declare const isValidCategoryValue: (value: unknown) => value is string;
+export declare function isDotOrLineSelection(point: XYChartSelectionLinearMetadata): point is DotOrLineSelection;

package/charts/xy-chart/types/guards.js

@@ -27,6 +27,7 @@ __export(guards_exports, {
   isCategoricalScale: () => isCategoricalScale,
   isDate: () => isDate,
   isDotContentPoint: () => isDotContentPoint,
+  isDotOrLineSelection: () => isDotOrLineSelection,
   isFunction: () => isFunction,
   isLineContentPoint: () => isLineContentPoint,
   isLinear: () => isLinear,
@@ -109,3 +110,6 @@ function isNumericColoringScale(colorScale) {
   return colorScale.domain().every((value) => typeof value === "number");
 }
 const isValidCategoryValue = (value) => Boolean(value && typeof value === "string");
+function isDotOrLineSelection(point) {
+  return point.series.type === import_xy_chart_internals.DOT_VARIANT || point.series.type === import_xy_chart_internals.LINE_VARIANT;
+}

package/charts/xy-chart/types/state.d.ts

@@ -40,6 +40,7 @@ export interface XYChartThresholdsState {
     hoveredThresholdId: string | undefined;
 }
 export interface XYChartState extends InteractionState<AxisIdToCurrentScaleDomain> {
+    filteredSeriesIds?: Set<string>;
     explore: XYChartExploreState;
     thresholds: XYChartThresholdsState;
     annotations: AnnotationsIntegrationSelectionState;

package/charts/xy-chart/types/xy-chart-internals.d.ts

@@ -1,8 +1,8 @@
 import { type ScaleBand, type ScaleLinear, type ScaleOrdinal, ScaleQuantize, type ScaleSymLog, ScaleThreshold, type ScaleTime } from 'd3-scale';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { XYAxisTypeLinear, XYAxisTypeLog } from './axis.js';
-import type { _XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartCustomTooltipProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
-import type { _XYChartAreaSeries, _XYChartBarSeries, _XYChartDotSeries, _XYChartLineSeries, _XYChartRectSeries, AreaDatapoint, BarDatapoint, BarSeriesVariant, BaseDatapoint, DotDatapoint, LineDatapoint, SeriesCurve, XYAccessorDataTypes, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
+import type { XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartCustomTooltipProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
+import type { XYChartAreaSeries, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, AreaDatapoint, BarDatapoint, BarSeriesVariant, BaseDatapoint, DotDatapoint, LineDatapoint, SeriesCurve, XYAccessorDataTypes, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
 import type { TickLabelLayout } from '../../core/components/axes/types.js';
 import type { Orientation, PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';
 import type { PointShapeType } from '../../core/components/shape/type.js';
@@ -112,7 +112,7 @@ export type XYChartAreaVariant = 'area' | 'band';
  * @internal
  * Area series slot config
  */
-export type XYChartAreaSeriesInternal = _XYChartAreaSeriesProps & XYChartSeriesBaseInternal & {
+export type XYChartAreaSeriesInternal = XYChartAreaSeriesProps & XYChartSeriesBaseInternal & {
     type: typeof AREA_VARIANT;
 };
 /**
@@ -258,6 +258,7 @@ export interface RectSeriesWithDatapoints {
     id: SeriesId;
     type: typeof RECT_VARIANT;
     data: RectDatapointInternal[];
+    filteredData: RectDatapointInternal[];
     xAxisId: string;
     yAxisId: string;
 }
@@ -296,6 +297,7 @@ export type BaseMetadata = {
     yAxis: XYChartAxisInternal;
     colorPalette: XYChartColorPalette;
     colorIsFromSlot: boolean;
+    isVisible?: boolean;
 };
 export interface RectMetadata extends BaseMetadata {
     valueMin: XYChartRectSeriesProps['valueMin'];
@@ -305,30 +307,31 @@ export interface RectMetadata extends BaseMetadata {
     valueAccessorLabel?: XYChartRectSeriesProps['valueAccessorLabel'];
     valueFormatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
     valueUnit?: ChartUnit;
-    actions?: (datapoint: XYChartRectSeriesActionItem, _series?: _XYChartRectSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartRectSeriesActionItem, series?: XYChartRectSeries) => SeriesActionsTemplate;
 }
 export interface BarMetadata extends BaseMetadata {
     color: ColorToken;
     variant: BarSeriesVariant;
     chartOrientation?: XYChartOrientation;
-    actions?: (datapoint: XYChartBarSeriesActionItem, _series?: _XYChartBarSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartBarSeriesActionItem, series?: XYChartBarSeries) => SeriesActionsTemplate;
 }
 export interface AreaMetadata extends BaseMetadata {
     curve?: SeriesCurve;
     color: ColorToken;
     orientation: Orientation;
+    isStacked: boolean;
     variant: XYChartAreaVariant;
     pointsDisplay?: PointsDisplay;
-    actions?: (datapoint: XYChartAreaSeriesActionItem, _series?: _XYChartAreaSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartAreaSeriesActionItem, series?: XYChartAreaSeries) => SeriesActionsTemplate;
 }
 export interface DotMetadata extends BaseMetadata {
     color: ColorToken;
     shape?: PointShapeType;
-    actions?: (datapoint: XYChartDotSeriesActionItem, _series?: _XYChartDotSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartDotSeriesActionItem, series?: XYChartDotSeries) => SeriesActionsTemplate;
 }
 export interface LineMetadata extends BaseMetadata {
     curve?: SeriesCurve;
-    actions?: (datapoint: XYChartLineSeriesActionItem, _series?: _XYChartLineSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartLineSeriesActionItem, series?: XYChartLineSeries) => SeriesActionsTemplate;
     pointsDisplay?: PointsDisplay;
     color: ColorToken;
 }
@@ -351,6 +354,7 @@ export type DatapointMetadata = {
     baseline?: XYChartAxisDirection;
     colorOverride?: string;
     binDomain?: number;
+    isVisible?: boolean;
 };
 export type MapDatapoints = Map<RectDatapointInternal | DotDatapoint | LineDatapoint | BarDatapoint | AreaDatapoint, DatapointMetadata>;
 /**

package/charts/xy-chart/types/xy-chart-props.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ConvertibleUnit, FormatDateOptions, FormatOptions, Unit } from '@dynatrace-sdk/units';
-import type { _XYChartAreaSeries, _XYChartBarSeries, _XYChartDotSeries, _XYChartLineSeries, _XYChartRectSeries, BAR_VARIANT_GROUP, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BarSeriesVariant, SeriesCurve, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartTooltipPayload, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
+import type { XYChartAreaSeries, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, BAR_VARIANT_GROUP, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BarSeriesVariant, SeriesCurve, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartTooltipPayload, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
 import { IntentProps } from '../../../core/slots/Intent/Intent.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
@@ -37,10 +37,11 @@ export interface XYChartProps extends StylingProps, MaskingProps {
      */
     height?: number | string;
     /**
-     * Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container
+     * Chart width. When a number is specified, it's treated as pixels,
+     * otherwise a valid width string is expected.
      * @defaultValue 100%
      */
-    width?: number;
+    width?: number | string;
     /**
      * Color palette for the xy chart.
      * @defaultValue 'blue'
@@ -132,7 +133,7 @@ export interface XYChartRectSeriesProps extends XYChartSeriesBaseProps {
      * For tooltip, information about the selected datapoint is displayed.
      * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
      */
-    actions?: (datapoint: XYChartRectSeriesActionItem, _series?: _XYChartRectSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartRectSeriesActionItem, series?: XYChartRectSeries) => SeriesActionsTemplate;
 }
 /**
  * Color selection prop for the xy chart ensures that either a color or a color palette is used, but not both simultaneously.
@@ -179,7 +180,7 @@ export type XYChartDotSeriesProps = XYChartSeriesBaseProps & ShapeColorSelection
      * For tooltip, information about the selected datapoint is displayed.
      * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
      */
-    actions?: (datapoint: XYChartDotSeriesActionItem, _series?: _XYChartDotSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartDotSeriesActionItem, series?: XYChartDotSeries) => SeriesActionsTemplate;
     /**
      * Determines the visual appearance of the dot, such as 'circle', 'square', 'diamond', or 'triangle'.
      * @defaultValue 'circle'
@@ -233,7 +234,7 @@ export type XYChartLineSeriesProps = Omit<XYChartSeriesBaseProps, 'colorPalette'
      * For tooltip, information about the selected datapoint is displayed.
      * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
      */
-    actions?: (datapoint: XYChartLineSeriesActionItem, _series?: _XYChartLineSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartLineSeriesActionItem, series?: XYChartLineSeries) => SeriesActionsTemplate;
     /**
      * Show the datapoints always, never or auto based on a threshold amount.
      * @defaultValue 'auto'
@@ -347,13 +348,13 @@ export type XYChartBarSeriesProps = (BarSeriesProps<typeof BAR_VARIANT_SINGLE> |
      * For tooltip, information about the selected datapoint is displayed.
      * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
      */
-    actions?: (datapoint: XYChartBarSeriesActionItem, _series?: _XYChartBarSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartBarSeriesActionItem, series?: XYChartBarSeries) => SeriesActionsTemplate;
 };
 /**
  * Props for the single area series slot of the xy chart.
  * @public
  */
-export type _XYChartAreaSeriesProps = Omit<XYChartSeriesBaseProps, 'colorPalette' | 'x0Accessor' | 'y0Accessor'> & ShapeColorSelectionProp & {
+export type XYChartAreaSeriesProps = Omit<XYChartSeriesBaseProps, 'colorPalette' | 'x0Accessor' | 'y0Accessor'> & ShapeColorSelectionProp & {
     x0Accessor?: string;
     y0Accessor?: string;
     x1Accessor?: string;
@@ -374,7 +375,7 @@ export type _XYChartAreaSeriesProps = Omit<XYChartSeriesBaseProps, 'colorPalette
      * (Upcoming for tooltip)
      * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
      */
-    actions?: (datapoint: XYChartAreaSeriesActionItem, _series?: _XYChartAreaSeries) => SeriesActionsTemplate;
+    actions?: (datapoint: XYChartAreaSeriesActionItem, series?: XYChartAreaSeries) => SeriesActionsTemplate;
 };
 /**
  * Props for the x-axis of the xy chart.

package/charts/xy-chart/types/xy-chart-selection.d.ts

@@ -1,8 +1,8 @@
 import { ColorToken } from '../../core/types/color-palette.js';
-import { DotSeriesWithDatapoints, LineSeriesWithDatapoints } from '../types/xy-chart-internals.js';
-import { DotDatapoint, LineDatapoint, XYAccessorDataTypes } from '../types/xy-chart.js';
-export type LinearSeriesWithDatapoints = DotSeriesWithDatapoints | LineSeriesWithDatapoints;
-export type LinearDatapoint = DotDatapoint | LineDatapoint;
+import { AreaSeriesWithDatapoints, DotSeriesWithDatapoints, LineSeriesWithDatapoints } from '../types/xy-chart-internals.js';
+import { AreaDatapoint, DotDatapoint, LineDatapoint, XYAccessorDataTypes } from '../types/xy-chart.js';
+export type LinearSeriesWithDatapoints = DotSeriesWithDatapoints | LineSeriesWithDatapoints | AreaSeriesWithDatapoints;
+export type LinearDatapoint = DotDatapoint | LineDatapoint | AreaDatapoint;
 export type LinearDatapointSelection = LinearDatapoint;
 export interface XYChartSelectionLinearMetadata<TSeries extends LinearSeriesWithDatapoints = LinearSeriesWithDatapoints, TDatapoint extends LinearDatapointSelection = Extract<TSeries['data'][number], LinearDatapoint>> {
     series: TSeries;
@@ -14,3 +14,4 @@ export interface AxisSelectConfig<TMetadata extends XYChartSelectionLinearMetada
     uniqueXValuesWithDatapoints: Set<XYAccessorDataTypes>;
     datapointsPerXAxisValue: Map<XYAccessorDataTypes, TMetadata[]>;
 }
+export type DotOrLineSelection = XYChartSelectionLinearMetadata<DotSeriesWithDatapoints, DotDatapoint> | XYChartSelectionLinearMetadata<LineSeriesWithDatapoints, LineDatapoint>;

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

@@ -221,17 +221,17 @@ export interface AreaDatapoint extends Partial<BaseDatapoint> {
  * The selected area datapoint displayed on the action
  * @public
  */
-export type XYChartAreaSeriesActionItem = AreaDatapoint & {
-    /**
-     * series name
-     */
+export type XYChartAreaSeriesActionItem = {
+    datapoint: AreaDatapoint;
+    category?: string;
+    datapoints?: AreaDatapoint[];
     name: string;
 };
 /**
- * The selected Area series in the action
+ * The selected area series in the action
  * @public
  */
-export type _XYChartAreaSeries = XYChartSeriesActionInfo<AreaDatapoint>;
+export type XYChartAreaSeries = XYChartSeriesActionInfo<AreaDatapoint>;
 /**
  * The selected dot datapoint displayed on the action
  * @public
@@ -256,7 +256,7 @@ export type XYChartSeriesActionInfo<T> = {
  * The selected dot series in the action
  * @public
  */
-export type _XYChartDotSeries = XYChartSeriesActionInfo<DotDatapoint>;
+export type XYChartDotSeries = XYChartSeriesActionInfo<DotDatapoint>;
 /**
  * The selected rect datapoint displayed on the action
  * @public
@@ -266,7 +266,7 @@ export type XYChartRectSeriesActionItem = RectDatapoint;
  * The selected rect series in the action
  * @public
  */
-export type _XYChartRectSeries = XYChartSeriesActionInfo<RectDatapoint>;
+export type XYChartRectSeries = XYChartSeriesActionInfo<RectDatapoint>;
 /**
  * The selected line datapoint displayed on the action
  * @public
@@ -281,7 +281,7 @@ export type XYChartLineSeriesActionItem = LineDatapoint & {
  * The selected line series in the action
  * @public
  */
-export type _XYChartLineSeries = XYChartSeriesActionInfo<LineDatapoint>;
+export type XYChartLineSeries = XYChartSeriesActionInfo<LineDatapoint>;
 /**
  * The selected bar datapoint displayed on the action.
  * Can be a single BarDatapoint or include grouped datapoints for stacked/grouped bars.
@@ -297,7 +297,7 @@ export type XYChartBarSeriesActionItem = {
  * The selected bar series in the action
  * @public
  */
-export type _XYChartBarSeries = XYChartSeriesActionInfo<BarDatapoint>;
+export type XYChartBarSeries = XYChartSeriesActionInfo<BarDatapoint>;
 /**
  * Static threshold data: a single value or a range.
  * @public

package/charts/xy-chart/utils/build-series-action-item.d.ts

@@ -0,0 +1,30 @@
+import { AREA_VARIANT, BAR_VARIANT, type DatapointMetadata, type BarSeriesWithDatapoints, type AreaSeriesWithDatapoints, type BarMetadata, type AreaMetadata } from '../types/xy-chart-internals.js';
+import { type AreaDatapoint, type BarDatapoint, type XYChartBarSeriesActionItem, type XYChartAreaSeriesActionItem } from '../types/xy-chart.js';
+type SeriesMap = {
+    bar: {
+        Series: BarSeriesWithDatapoints;
+        Metadata: BarMetadata;
+        Datapoint: BarDatapoint;
+    };
+    area: {
+        Series: AreaSeriesWithDatapoints;
+        Metadata: AreaMetadata;
+        Datapoint: AreaDatapoint;
+    };
+};
+type SeriesKey = keyof SeriesMap;
+type SeriesWithDatapoints<K extends SeriesKey> = SeriesMap[K]['Series'] & {
+    type: K;
+};
+type SeriesMetadata<K extends keyof SeriesMap> = SeriesMap[K]['Metadata'];
+type SeriesDatapoint<K extends keyof SeriesMap> = SeriesMap[K]['Datapoint'];
+interface BuildSeriesActionItemParams<T extends keyof SeriesMap> {
+    datapoint: SeriesDatapoint<T>;
+    allSeries: SeriesWithDatapoints<T>[];
+    seriesToMetadata: Map<SeriesWithDatapoints<T>, SeriesMetadata<T>>;
+    datapointMetadataMap: Map<SeriesDatapoint<T>, DatapointMetadata>;
+    currentSeries: SeriesWithDatapoints<T>;
+}
+export declare function buildBarSeriesActionItem(params: BuildSeriesActionItemParams<typeof BAR_VARIANT>): XYChartBarSeriesActionItem;
+export declare function buildAreaSeriesActionItem(params: BuildSeriesActionItemParams<typeof AREA_VARIANT>): XYChartAreaSeriesActionItem;
+export {};

package/charts/xy-chart/utils/{build-bar-series-action-item.js → build-series-action-item.js}

@@ -16,11 +16,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var build_bar_series_action_item_exports = {};
-__export(build_bar_series_action_item_exports, {
+var build_series_action_item_exports = {};
+__export(build_series_action_item_exports, {
+  buildAreaSeriesActionItem: () => buildAreaSeriesActionItem,
   buildBarSeriesActionItem: () => buildBarSeriesActionItem
 });
-module.exports = __toCommonJS(build_bar_series_action_item_exports);
+module.exports = __toCommonJS(build_series_action_item_exports);
 var import_safe_get = require("../../core/utils/safe-get.js");
 var import_guards = require("../types/guards.js");
 var import_xy_chart = require("../types/xy-chart.js");
@@ -42,17 +43,31 @@ function getBaselineCategoryInfo(datapoint, baselineAccessor, metadata) {
     isBaselineCategorical: true
   };
 }
-function buildBarSeriesActionItem({
+const barSeriesFilterStrategy = (_series, currentMetadata, _seriesToMetadata, haveSameGrowingAxis) => {
+  return currentMetadata.variant === import_xy_chart.BAR_VARIANT_STACK && !haveSameGrowingAxis;
+};
+const areaSeriesFilterStrategy = (series, _currentMetadata, seriesToMetadata, haveSameGrowingAxis) => {
+  if (!haveSameGrowingAxis) {
+    return true;
+  }
+  const seriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, series);
+  return seriesMetadata.variant === "band";
+};
+const areaSimpleActionItemStrategy = (metadata) => metadata.variant === "band";
+const barSimpleActionItemStrategy = (metadata) => metadata.variant === import_xy_chart.BAR_VARIANT_SINGLE;
+function buildSeriesActionItemInternal({
   datapoint,
-  allBarSeries,
+  allSeries,
   seriesToMetadata,
   datapointMetadataMap,
-  currentSeries
+  currentSeries,
+  simpleActionItemStrategy,
+  seriesFilterStrategy
 }) {
   const currentMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
   const { baseline } = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
   const baselineAccessor = baselineDirectionToAccessor(baseline);
-  if (!baselineAccessor || currentMetadata.variant === import_xy_chart.BAR_VARIANT_SINGLE) {
+  if (!baselineAccessor || simpleActionItemStrategy(currentMetadata)) {
     return { datapoint, name: currentMetadata.name };
   }
   const { category, isBaselineCategorical } = getBaselineCategoryInfo(
@@ -66,10 +81,15 @@ function buildBarSeriesActionItem({
   const relatedDatapoints = [];
   const primaryAxisAccessor = baseline === "x" ? "xAxisId" : "yAxisId";
   const growingAxisAccessor = baseline === "x" ? "yAxisId" : "xAxisId";
-  for (const series of allBarSeries) {
+  for (const series of allSeries) {
     const haveSamePrimaryAxis = series[primaryAxisAccessor] === currentSeries[primaryAxisAccessor];
     const haveSameGrowingAxis = series[growingAxisAccessor] === currentSeries[growingAxisAccessor];
-    if (!haveSamePrimaryAxis || currentMetadata.variant === import_xy_chart.BAR_VARIANT_STACK && !haveSameGrowingAxis) {
+    if (!haveSamePrimaryAxis || seriesFilterStrategy(
+      series,
+      currentMetadata,
+      seriesToMetadata,
+      haveSameGrowingAxis
+    )) {
       continue;
     }
     for (const dp of series.data) {
@@ -85,3 +105,17 @@ function buildBarSeriesActionItem({
     name: currentMetadata.name
   };
 }
+function buildBarSeriesActionItem(params) {
+  return buildSeriesActionItemInternal({
+    ...params,
+    simpleActionItemStrategy: barSimpleActionItemStrategy,
+    seriesFilterStrategy: barSeriesFilterStrategy
+  });
+}
+function buildAreaSeriesActionItem(params) {
+  return buildSeriesActionItemInternal({
+    ...params,
+    simpleActionItemStrategy: areaSimpleActionItemStrategy,
+    seriesFilterStrategy: areaSeriesFilterStrategy
+  });
+}

package/charts/xy-chart/utils/coloring/get-color-selection.d.ts

@@ -3,4 +3,4 @@ import type { XYChartData } from '../../types/xy-chart.js';
 export declare function getColorSelection(colorProp: XYShapeColorProp | undefined, datum: XYChartData): {
     Default: string;
 } | undefined;
-export declare function getColorPaletteSelection(colorProp: XYShapeColorPaletteProp | undefined, datum: XYChartData): "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | string[] | "status" | Record<string, string> | import("../../../core/types/colored-range.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | undefined;
+export declare function getColorPaletteSelection(colorProp: XYShapeColorPaletteProp | undefined, datum: XYChartData): "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | string[] | "status" | import("../../../core/types/colored-range.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | Record<string, string> | undefined;

package/charts/xy-chart/utils/count-datapoints-with-series-and-categories.d.ts

@@ -1,5 +1,5 @@
 import type { RectDatapointInternal, XYChartAxisInternal, XYChartSeriesWithDatapoints } from '../types/xy-chart-internals.js';
-import type { BarDatapoint, DotDatapoint, LineDatapoint } from '../types/xy-chart.js';
+import type { AreaDatapoint, BarDatapoint, DotDatapoint, LineDatapoint } from '../types/xy-chart.js';
 /**
  * Counts the total datapoints, series, and categories in a selection.
  *
@@ -8,7 +8,7 @@ import type { BarDatapoint, DotDatapoint, LineDatapoint } from '../types/xy-char
  * @param axes - Array of chart axes
  * @returns Object containing total counts for datapoints, series, and categories
  */
-export declare const countDatapointsWithSeriesAndCategories: (selectedDatapoints: (DotDatapoint[] | RectDatapointInternal[] | LineDatapoint[] | BarDatapoint[] | undefined)[], seriesWithDatapoints: XYChartSeriesWithDatapoints[], axes: XYChartAxisInternal[]) => {
+export declare const countDatapointsWithSeriesAndCategories: (selectedDatapoints: (DotDatapoint[] | RectDatapointInternal[] | LineDatapoint[] | BarDatapoint[] | AreaDatapoint[] | undefined)[], seriesWithDatapoints: XYChartSeriesWithDatapoints[], axes: XYChartAxisInternal[]) => {
     selectedDatapoints: number;
     totalSeries: number;
     totalCategories: number;

package/charts/xy-chart/utils/count-datapoints-with-series-and-categories.js

@@ -36,7 +36,8 @@ const countDatapointsWithSeriesAndCategories = (selectedDatapoints, seriesWithDa
       totalCount += datapointArray.length;
       if (xAxis && (0, import_guards.isCategoricalAxis)(xAxis)) {
         datapointArray.forEach((datapoint) => {
-          axesCategories.add(`${xAxis.id}_${datapoint.x0}`);
+          const xValue = datapoint.x0 ?? datapoint.x1;
+          axesCategories.add(`${xAxis.id}_${xValue}`);
         });
       } else {
         totalSeries += 1;

package/charts/xy-chart/utils/get-area-series-accessors.d.ts

@@ -13,7 +13,29 @@ import type { AreaDatapoint } from '../types/xy-chart.js';
  * @param yRelAccessor - Optional function to convert absolute y values to relative values
  * @returns Tuple of [xAccessor, yAccessor] functions that take a datapoint
  */
-export declare function getAreaSeriesAccessors(isHorizontal: boolean, isBand: boolean, xScale: AnyXYChartScale, yScale: AnyXYChartScale, datapointToMetadata: MapDatapoints, xRelAccessor?: (value: number) => number, yRelAccessor?: (value: number) => number): [
+export declare function getAreaAccessors(isHorizontal: boolean, isBand: boolean, xScale: AnyXYChartScale, yScale: AnyXYChartScale, datapointToMetadata: MapDatapoints, xRelAccessor?: (value: number) => number, yRelAccessor?: (value: number) => number, isSeriesStacked?: boolean): [
     (datapoint: AreaDatapoint) => number,
     (datapoint: AreaDatapoint) => number
 ];
+/**
+ * Get bound accessor pairs for both endpoints of a band area series.
+ * For horizontal bands: returns two points at (x0, y0) and (x1, y0).
+ * For vertical bands: returns two points at (x0, y0) and (x0, y1).
+ *
+ * @param isHorizontal - Whether the band has horizontal orientation
+ * @param xScale - The x scale to use
+ * @param yScale - The y scale to use
+ * @param xRelAccessor - Optional function to convert absolute x values to relative values
+ * @param yRelAccessor - Optional function to convert absolute y values to relative values
+ * @returns Array of two [xAccessor, yAccessor] tuples for each endpoint
+ */
+export declare function getBandAccessors(isHorizontal: boolean, xScale: AnyXYChartScale, yScale: AnyXYChartScale, xRelAccessor?: (value: number) => number, yRelAccessor?: (value: number) => number): [
+    [
+        (datapoint: AreaDatapoint) => number,
+        (datapoint: AreaDatapoint) => number
+    ],
+    [
+        (datapoint: AreaDatapoint) => number,
+        (datapoint: AreaDatapoint) => number
+    ]
+];

package/charts/xy-chart/utils/get-area-series-accessors.js

@@ -18,12 +18,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var get_area_series_accessors_exports = {};
 __export(get_area_series_accessors_exports, {
-  getAreaSeriesAccessors: () => getAreaSeriesAccessors
+  getAreaAccessors: () => getAreaAccessors,
+  getBandAccessors: () => getBandAccessors
 });
 module.exports = __toCommonJS(get_area_series_accessors_exports);
 var import_area_accessors = require("../components/displays/area-accessors.js");
 var import_band_accessors = require("../components/displays/band-accessors.js");
-function getAreaSeriesAccessors(isHorizontal, isBand, xScale, yScale, datapointToMetadata, xRelAccessor, yRelAccessor) {
+function getAreaAccessors(isHorizontal, isBand, xScale, yScale, datapointToMetadata, xRelAccessor, yRelAccessor, isSeriesStacked) {
   if (isBand) {
     return [
       isHorizontal ? (datapoint) => ((0, import_band_accessors.bandX0Accessor)(xScale, xRelAccessor)(datapoint) + (0, import_band_accessors.bandX1Accessor)(xScale, xRelAccessor)(datapoint)) / 2 : (0, import_band_accessors.bandX0Accessor)(xScale, xRelAccessor),
@@ -31,7 +32,31 @@ function getAreaSeriesAccessors(isHorizontal, isBand, xScale, yScale, datapointT
     ];
   }
   return [
-    isHorizontal ? (0, import_area_accessors.x1Accessor)(xScale, datapointToMetadata, xRelAccessor) : (0, import_area_accessors.xAccessor)(xScale, xRelAccessor),
-    isHorizontal ? (0, import_area_accessors.yAccessor)(yScale, yRelAccessor) : (0, import_area_accessors.y1Accessor)(yScale, datapointToMetadata, yRelAccessor)
+    isHorizontal ? (0, import_area_accessors.x1Accessor)(
+      xScale,
+      datapointToMetadata,
+      xRelAccessor,
+      isSeriesStacked
+    ) : (0, import_area_accessors.xAccessor)(xScale, xRelAccessor),
+    isHorizontal ? (0, import_area_accessors.yAccessor)(yScale, yRelAccessor) : (0, import_area_accessors.y1Accessor)(
+      yScale,
+      datapointToMetadata,
+      yRelAccessor,
+      isSeriesStacked
+    )
+  ];
+}
+function getBandAccessors(isHorizontal, xScale, yScale, xRelAccessor, yRelAccessor) {
+  if (isHorizontal) {
+    const yAccessor = (0, import_band_accessors.bandY0Accessor)(yScale, yRelAccessor);
+    return [
+      [(0, import_band_accessors.bandX0Accessor)(xScale, xRelAccessor), yAccessor],
+      [(0, import_band_accessors.bandX1Accessor)(xScale, xRelAccessor), yAccessor]
+    ];
+  }
+  const xAccessor = (0, import_band_accessors.bandX0Accessor)(xScale, xRelAccessor);
+  return [
+    [xAccessor, (0, import_band_accessors.bandY0Accessor)(yScale, yRelAccessor)],
+    [xAccessor, (0, import_band_accessors.bandY1Accessor)(yScale, yRelAccessor)]
   ];
 }

package/charts/xy-chart/utils/is-empty-data.js

@@ -33,7 +33,7 @@ const typesOfCharts = [
   import_DotSeries.DotSeries.displayName,
   import_LineSeries.LineSeries.displayName,
   import_BarSeries.BarSeries.displayName,
-  import_AreaSeries._AreaSeries.displayName
+  import_AreaSeries.AreaSeries.displayName
 ];
 function isSeriesSlot(el) {
   return (0, import_react.isValidElement)(el);

package/charts/xy-chart/utils/iterate-slots.js

@@ -77,7 +77,7 @@ const iterateSlots = (children) => {
         id: crypto.randomUUID(),
         type: import_xy_chart_internals.BAR_VARIANT
       });
-    } else if ((0, import_is_slot.isSlot)(child, import_AreaSeries._AreaSeries)) {
+    } else if ((0, import_is_slot.isSlot)(child, import_AreaSeries.AreaSeries)) {
       slots.series.push({
         ...child.props,
         id: crypto.randomUUID(),