@dynatrace/strato-components 3.0.1 → 3.1.1

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

@@ -31,15 +31,14 @@ var import_lodash_es = require("lodash");
 var import_get_band_centered_point = require("../../utils/get-band-centered-point.js");
 var import_get_center_date = require("../../utils/get-center-date.js");
 var import_type_guards = require("../../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 = !(0, import_lodash_es.isNil)(v0) ? v0 + accumulator : accumulator;
     v1 = !(0, import_lodash_es.isNil)(v1) ? v1 + accumulator : accumulator;
   }
-  if (relAccessor && isNotBaseline && !(0, import_lodash_es.isNil)(binDomain) && !isDatapointAlone) {
+  if (relAccessor && isNotBaseline && !(0, import_lodash_es.isNil)(binDomain) && isSeriesStacked) {
     return {
       v0: !(0, import_lodash_es.isNil)(v0) ? v0 / binDomain * 100 : v0,
       v1: !(0, import_lodash_es.isNil)(v1) ? v1 / binDomain * 100 : v1,
@@ -79,7 +78,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]];
@@ -92,7 +91,8 @@ const getGrowingAccessors = (accessorKeys, baselineCoord) => {
           baseline,
           relAccessor,
           accumulator,
-          binDomain
+          binDomain,
+          isSeriesStacked
         );
       }
       if ((0, import_type_guards.isNumericalAreaScale)(args)) {
@@ -108,7 +108,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]];
@@ -126,7 +126,8 @@ const getGrowingAccessors = (accessorKeys, baselineCoord) => {
           baseline,
           relAccessor,
           accumulator,
-          binDomain
+          binDomain,
+          isSeriesStacked
         );
       }
       if ((0, import_type_guards.isTimeAreaScale)(args) || (0, import_type_guards.isNumericalAreaScale)(args)) {

package/charts/xy-chart/components/displays/index.d.ts

@@ -1,9 +1,15 @@
-import type { AnyScale } from '../../../core/types/scales.js';
-import type { LinearDatapoint } from '../../types/xy-chart-selection.js';
-type AccessorFactory = (scale: AnyScale, relAccessor?: (value: number) => number) => (d: LinearDatapoint) => number;
-interface LinearAccessors {
-    x: AccessorFactory;
-    y: AccessorFactory;
-}
-export declare const LINEAR_ACCESSORS: Record<string, LinearAccessors>;
+import { xAccessor as xDotAccessor, yAccessor as yDotAccessor } from './dot-accessors.js';
+import { xAccessor as xLineAccessor, yAccessor as yLineAccessor } from './line-accessors.js';
+import { DOT_VARIANT, LINE_VARIANT } from '../../types/xy-chart-internals.js';
+type LinearAccessors = {
+    [DOT_VARIANT]: {
+        x: typeof xDotAccessor;
+        y: typeof yDotAccessor;
+    };
+    [LINE_VARIANT]: {
+        x: typeof xLineAccessor;
+        y: typeof yLineAccessor;
+    };
+};
+export declare const LINEAR_ACCESSORS: LinearAccessors;
 export {};

package/charts/xy-chart/components/legend/XYChartLegend.js

@@ -22,28 +22,33 @@ __export(XYChartLegend_exports, {
 });
 module.exports = __toCommonJS(XYChartLegend_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_RectRangeLegend = require("./RectRangeLegend/RectRangeLegend.js");
 var import_XYLegend = require("./XYLegend/XYLegend.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
-var import_useRectData = require("../../hooks/useRectData.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_is_range_legend = require("../../utils/is-range-legend.js");
 var import_type_guards = require("../../utils/type-guards.js");
+function buildLegendIdentityKey(series) {
+  return series.map((s) => s.id).join(",");
+}
 const XYChartLegend = () => {
-  const { seriesWithDatapoints } = (0, import_useXYChartData.useXYChartData)();
-  const { seriesToMetadata } = (0, import_useRectData.useRectData)();
-  const firstSeries = seriesWithDatapoints[0];
+  const { seriesWithDatapoints, seriesToMetadata: fullSeriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
+  const identityKey = buildLegendIdentityKey(seriesWithDatapoints);
+  const stableSeries = (0, import_react.useMemo)(() => seriesWithDatapoints, [identityKey]);
+  const stableMetadata = (0, import_react.useMemo)(() => fullSeriesToMetadata, [identityKey]);
+  const firstSeries = stableSeries[0];
   if ((0, import_type_guards.isRectSeries)(firstSeries)) {
     const { valueType: firstSeriesValueType } = (0, import_safe_get.safeGet)(
-      seriesToMetadata,
+      stableMetadata,
       firstSeries
     );
     if (!firstSeriesValueType) {
       return null;
     }
-    if ((0, import_is_range_legend.isRangeLegend)(seriesToMetadata, firstSeries)) {
+    if ((0, import_is_range_legend.isRangeLegend)(stableMetadata, firstSeries)) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RectRangeLegend.RectRangeLegend, { series: firstSeries });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYLegend.XYLegend, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYLegend.XYLegend, { series: stableSeries, seriesToMetadata: stableMetadata });
 };

package/charts/xy-chart/components/legend/XYLegend/XYLegend.d.ts

@@ -1 +1,7 @@
-export declare function XYLegend(): import("react/jsx-runtime.js").JSX.Element;
+import { type SeriesToMetadata, type XYChartSeriesWithDatapoints } from '../../../types/xy-chart-internals.js';
+interface XYLegendProps {
+    series: XYChartSeriesWithDatapoints[];
+    seriesToMetadata: SeriesToMetadata;
+}
+export declare function XYLegend({ series, seriesToMetadata }: XYLegendProps): import("react/jsx-runtime.js").JSX.Element;
+export {};

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

@@ -29,11 +29,10 @@ var import_useChartLayoutOrientation = require("../../../../core/components/char
 var import_orientation = require("../../../../core/components/chart-layout/utils/orientation.js");
 var import_ChartLegend = require("../../../../core/components/legend/categorical/ChartLegend.js");
 var import_build_categorical_items_from_scale = require("../../../../core/utils/build-categorical-items-from-scale.js");
-var import_is_feature_enabled = require("../../../../core/utils/is-feature-enabled.js");
 var import_safe_get = require("../../../../core/utils/safe-get.js");
 var import_useXYChartColorScales = require("../../../hooks/useXYChartColorScales.js");
-var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
+var import_reducer_filter_series = require("../../../store/reducer-filter-series.js");
 var import_selectors = require("../../../store/selectors.js");
 var import_xy_chart_internals = require("../../../types/xy-chart-internals.js");
 var import_is_range_legend = require("../../../utils/is-range-legend.js");
@@ -76,32 +75,35 @@ function getLegendItems(series, metadata, isMixedSeries, scaleColorMap, isCatego
     }
   });
 }
-function XYLegend() {
+function XYLegend({ series, seriesToMetadata }) {
   const { orientation: layoutOrientation } = (0, import_useChartLayoutOrientation.useChartLayoutOrientation)();
   const orientation = (0, import_orientation.getLegendOrientation)(layoutOrientation);
-  const { seriesWithDatapoints, seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
   const setState = (0, import_selectors.useSetState)();
   const scaleColorMap = (0, import_useXYChartColorScales.useXYChartColorScales)();
   const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
-  const firstSeries = seriesWithDatapoints[0];
-  const isCategoricalRectOnly = (0, import_type_guards.isRectSeries)(firstSeries) && seriesWithDatapoints.every(import_type_guards.isRectSeries) && !(0, import_is_range_legend.isRangeLegend)(seriesToMetadata, firstSeries);
+  const firstSeries = series[0];
+  const isCategoricalRectOnly = (0, import_type_guards.isRectSeries)(firstSeries) && series.every(import_type_guards.isRectSeries) && !(0, import_is_range_legend.isRangeLegend)(seriesToMetadata, firstSeries);
   const isMixedSeries = (0, import_react.useMemo)(() => {
-    const typeSet = new Set(seriesWithDatapoints.map((series) => series.type));
+    const typeSet = new Set(series.map((s) => s.type));
     return typeSet.size >= 2;
-  }, [seriesWithDatapoints]);
-  const legendItems = getLegendItems(
-    seriesWithDatapoints,
-    seriesToMetadata,
-    isMixedSeries,
-    scaleColorMap,
-    isCategoricalRectOnly
+  }, [series]);
+  const legendItems = (0, import_react.useMemo)(
+    () => getLegendItems(
+      series,
+      seriesToMetadata,
+      isMixedSeries,
+      scaleColorMap,
+      isCategoricalRectOnly
+    ),
+    [series, seriesToMetadata]
   );
-  const legendActions = (0, import_getXYLegendActions.getXYLegendActions)(
-    seriesWithDatapoints,
-    seriesToMetadata
-  );
-  const interactionsDisabled = !(0, import_is_feature_enabled.isFeatureEnabled)(
-    "areLegendInteractionsEnabled"
+  const legendActions = (0, import_getXYLegendActions.getXYLegendActions)(series, seriesToMetadata);
+  const updateVisibleSeries = (0, import_react.useCallback)(
+    (visibleItems) => {
+      const visibleIds = new Set(visibleItems.map((item) => item.id));
+      setState((0, import_reducer_filter_series.reduceFilterSeries)(visibleIds));
+    },
+    [setState]
   );
   const updateHighlightedSeriesId = (legendItemId) => {
     setState((prev) => ({ ...prev, highlightedSeriesId: legendItemId }));
@@ -109,12 +111,12 @@ function XYLegend() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartLegend.ChartLegend,
     {
-      interactionsDisabled,
       items: legendItems,
       orientation,
       truncationMode,
-      onSeriesAction: interactionsDisabled ? void 0 : legendActions,
-      onHover: interactionsDisabled ? void 0 : (legendItem) => updateHighlightedSeriesId(legendItem?.id)
+      onSeriesAction: legendActions,
+      onHover: (legendItem) => updateHighlightedSeriesId(legendItem?.id),
+      onClick: updateVisibleSeries
     }
   );
 }

package/charts/xy-chart/components/legend/XYLegend/utils/getXYLegendActions.js

@@ -42,9 +42,11 @@ function getXYLegendActions(seriesWithDatapoints, seriesToMetadata) {
     if (currentSeries) {
       const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
       const datapoints = currentSeries.type === import_xy_chart_internals.RECT_VARIANT ? filterRectDatapointsByCategory(currentSeries, item.name) : currentSeries.data;
+      const isAreaOrBarSeries = currentSeries.type === import_xy_chart_internals.AREA_VARIANT || currentSeries.type === import_xy_chart_internals.BAR_VARIANT;
       const firstDatapoint = datapoints[0];
+      const datapointElement = isAreaOrBarSeries ? { datapoint: firstDatapoint, name: item.name } : firstDatapoint;
       const seriesActions = metadata.actions?.(
-        firstDatapoint,
+        datapointElement,
         { datapoints, name: item.name }
       );
       if (seriesActions) {

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

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

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

@@ -22,4 +22,4 @@ __export(xy_legend_css_exports, {
 });
 module.exports = __toCommonJS(xy_legend_css_exports);
 var import_xy_legend_css_ts_vanilla = require("./xy-legend.css");
-var shapeIconWrapper = "_1lwufqz0-3-0-1";
+var shapeIconWrapper = "_1lwufqz0-3-1-1";

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

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

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

@@ -22,4 +22,4 @@ __export(XYChartCrosshair_css_exports, {
 });
 module.exports = __toCommonJS(XYChartCrosshair_css_exports);
 var import_XYChartCrosshair_css_ts_vanilla = require("./XYChartCrosshair.css");
-var crosshair = "_1bbe5uo0-3-0-1";
+var crosshair = "_1bbe5uo0-3-1-1";

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

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

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

@@ -24,5 +24,5 @@ __export(XYChartExplore_css_exports, {
 module.exports = __toCommonJS(XYChartExplore_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartExplore_css_ts_vanilla = require("./XYChartExplore.css");
-var datapointIndicatorLayout = "_cd1yys1-3-0-1 _13lzg4k0-3-0-1";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-0-1 _13lzg4k0-3-0-1";
+var datapointIndicatorLayout = "_cd1yys1-3-1-1 _13lzg4k0-3-1-1";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-1-1 _13lzg4k0-3-1-1";

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

@@ -47,13 +47,16 @@ const XYChartLinearPoint = (0, import_react.memo)(() => {
   const { axes, datapointMetadataMap } = (0, import_useXYChartData.useXYChartData)();
   const {
     seriesToMetadata: dotSeriesMeta,
-    seriesWithDatapoints: dotSeriesWithDatapoints
+    filteredSeriesWithDatapoints: dotSeriesWithDatapoints
   } = (0, import_useDotData.useDotData)();
   const {
     seriesToMetadata: lineSeriesMeta,
-    seriesWithDatapoints: lineSeriesWithDatapoints
+    filteredSeriesWithDatapoints: lineSeriesWithDatapoints
   } = (0, import_useLineData.useLineData)();
-  const { seriesToMetadata: areaSeriesMeta } = (0, import_useAreaData.useAreaData)();
+  const {
+    seriesToMetadata: areaSeriesMeta,
+    filteredSeriesWithDatapoints: areaSeriesWithDatapoints
+  } = (0, import_useAreaData.useAreaData)();
   const showContentPoint = (0, import_get_selected_datapoints.hasLinearContentPoint)(contentState);
   const showPoint = !showContentPoint && (!selectState || linearSelection.selectionConfigByAxisId.size === 0);
   if (showPoint) {
@@ -66,10 +69,13 @@ const XYChartLinearPoint = (0, import_react.memo)(() => {
     axisIdToScales,
     dotSeriesWithDatapoints,
     lineSeriesWithDatapoints,
+    areaSeriesWithDatapoints,
     dotSeriesMeta,
     lineSeriesMeta,
+    areaSeriesMeta,
     axisIdToScaleDomain,
-    axes
+    axes,
+    datapointMetadataMap
   });
   const contentPoints = showContentPoint ? (0, import_get_selected_datapoints.buildContentHighlightedPoint)({
     contentState,

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

@@ -46,11 +46,11 @@ const XYChartRectanglePoint = (0, import_react.memo)(() => {
   const { axisIdToScaleDomain, axes } = (0, import_useXYChartData.useXYChartData)();
   const {
     seriesToMetadata: barSeriesMeta,
-    seriesWithDatapoints: barSeriesWithDatapoints
+    filteredSeriesWithDatapoints: barSeriesWithDatapoints
   } = (0, import_useBarData.useBarData)();
   const {
     seriesToMetadata: rectSeriesMeta,
-    seriesWithDatapoints: rectSeriesWithDatapoints
+    filteredSeriesWithDatapoints: rectSeriesWithDatapoints
   } = (0, import_useRectData.useRectData)();
   const highlightedRects = (0, import_get_selected_datapoints.buildRectangleHighlightedPoints)({
     contentState,

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

@@ -101,11 +101,11 @@ function reduceTooltipContentByType(hoveredDatapoint) {
   }
 }
 const useOverlayEvents = () => {
-  const { seriesWithDatapoints: rectSeriesData } = (0, import_useRectData.useRectData)();
-  const { seriesWithDatapoints: barSeriesData } = (0, import_useBarData.useBarData)();
-  const { seriesWithDatapoints: dotSeriesData } = (0, import_useDotData.useDotData)();
-  const { seriesWithDatapoints: lineSeriesData } = (0, import_useLineData.useLineData)();
-  const { seriesWithDatapoints: areaSeriesData } = (0, import_useAreaData.useAreaData)();
+  const { filteredSeriesWithDatapoints: rectSeriesData } = (0, import_useRectData.useRectData)();
+  const { filteredSeriesWithDatapoints: barSeriesData } = (0, import_useBarData.useBarData)();
+  const { filteredSeriesWithDatapoints: dotSeriesData } = (0, import_useDotData.useDotData)();
+  const { filteredSeriesWithDatapoints: lineSeriesData } = (0, import_useLineData.useLineData)();
+  const { filteredSeriesWithDatapoints: areaSeriesData } = (0, import_useAreaData.useAreaData)();
   const zoomToSelection = (0, import_useZoomToSelection.useZoomToSelection)();
   const setState = (0, import_selectors.useSetState)();
   const mode = (0, import_selectors.useInteractionModeState)();

package/charts/xy-chart/components/overlay/utils/get-selected-datapoints.d.ts

@@ -7,20 +7,20 @@ import type { useXYChartRectSelection } from '../../../hooks/useXYChartRectSelec
 import type { useXYChartScales } from '../../../hooks/useXYChartScales.js';
 import type { useSelectState } from '../../../store/selectors.js';
 import type { XYChartExploreState } from '../../../types/state.js';
-import { type AxisIdToScaleDomain, type BarSeriesToMetadata, type BarSeriesWithDatapoints, type DotMetadata, type DotSeriesToMetadata, type DotSeriesWithDatapoints, type HighlightedLinearPoint, type LineMetadata, type LineSeriesToMetadata, type LineSeriesWithDatapoints, type RectDatapointInternal, type RectMetadata, type RectSeriesToMetadata, type RectSeriesWithDatapoints, type AreaMetadata, type AreaSeriesWithDatapoints, type MapDatapoints, type XYChartAxisInternal, type XYChartSeriesWithDatapoints } from '../../../types/xy-chart-internals.js';
-import type { BarDatapoint, DotDatapoint, LineDatapoint } from '../../../types/xy-chart.js';
+import { type AxisIdToScaleDomain, type BarSeriesToMetadata, type BarSeriesWithDatapoints, type DotMetadata, type DotSeriesToMetadata, type DotSeriesWithDatapoints, type HighlightedLinearPoint, type LineMetadata, type LineSeriesToMetadata, type LineSeriesWithDatapoints, type RectDatapointInternal, type RectMetadata, type RectSeriesToMetadata, type RectSeriesWithDatapoints, type AreaMetadata, type AreaSeriesWithDatapoints, type MapDatapoints, type XYChartAxisInternal, type XYChartSeriesWithDatapoints, type AreaSeriesToMetadata } from '../../../types/xy-chart-internals.js';
+import type { AreaDatapoint, BarDatapoint, DotDatapoint, LineDatapoint } from '../../../types/xy-chart.js';
 import { type BinDomain } from '../../../utils/value-representation.js';
 import type { RectanglePoint } from '../explore/types.js';
 type DomainValue = [number, number] | [Date, Date] | string[];
 export interface XYChartSelectedDatapointsPerSeries {
     seriesName: string;
-    datapoints: DotDatapoint[] | LineDatapoint[] | RectDatapointInternal[] | BarDatapoint[];
+    datapoints: DotDatapoint[] | LineDatapoint[] | RectDatapointInternal[] | BarDatapoint[] | AreaDatapoint[];
     domain: DomainValue;
 }
 export declare const getSelectedDatapoints: (seriesWithDatapoints: XYChartSeriesWithDatapoints[], axisIdToScales: AxisIdToScales, axes: XYChartAxisInternal[], selection: {
     start: number;
     end: number;
-}, dotSeriesToMetadata: DotSeriesToMetadata, lineSeriesToMetadata: LineSeriesToMetadata, rectSeriesToMetadata: RectSeriesToMetadata, datapointMetadataMap: MapDatapoints, axisIdToScaleDomain: Map<string, BinDomain>, barSeriesToMetadata: BarSeriesToMetadata) => XYChartSelectedDatapointsPerSeries[];
+}, dotSeriesToMetadata: DotSeriesToMetadata, lineSeriesToMetadata: LineSeriesToMetadata, rectSeriesToMetadata: RectSeriesToMetadata, datapointMetadataMap: MapDatapoints, axisIdToScaleDomain: Map<string, BinDomain>, barSeriesToMetadata: BarSeriesToMetadata, areaSeriesToMetadata: AreaSeriesToMetadata) => XYChartSelectedDatapointsPerSeries[];
 /**
  * Returns true if the content state refers to a linear (dot, line, or area) point.
  */
@@ -28,7 +28,7 @@ export declare function hasLinearContentPoint(contentState: XYChartExploreState[
 /**
  * Collect all distinct xAxisIds from provided linear series arrays.
  */
-export declare function collectLinearXAxisIds(dotSeries: DotSeriesWithDatapoints[], lineSeries: LineSeriesWithDatapoints[]): Set<string>;
+export declare function collectLinearXAxisIds(dotSeries: DotSeriesWithDatapoints[], lineSeries: LineSeriesWithDatapoints[], areaSeries: AreaSeriesWithDatapoints[]): Set<string>;
 /**
  * Build highlighted points derived from a selection (brush / range selection).
  * Returns an empty array if preconditions fail.
@@ -40,10 +40,13 @@ export declare function buildSelectionHighlightedPoints(params: {
     axisIdToScales: AxisIdToScales;
     dotSeriesWithDatapoints: DotSeriesWithDatapoints[];
     lineSeriesWithDatapoints: LineSeriesWithDatapoints[];
+    areaSeriesWithDatapoints: AreaSeriesWithDatapoints[];
     dotSeriesMeta: Map<DotSeriesWithDatapoints, DotMetadata>;
     lineSeriesMeta: Map<LineSeriesWithDatapoints, LineMetadata>;
+    areaSeriesMeta: Map<AreaSeriesWithDatapoints, AreaMetadata>;
     axisIdToScaleDomain: AxisIdToScaleDomain;
     axes: XYChartAxisInternal[];
+    datapointMetadataMap: MapDatapoints;
 }): HighlightedLinearPoint[];
 /**
  * Build highlighted points from the current content (hover/focus) state.