@dynatrace/strato-components 3.0.1 → 3.1.0

package/charts/xy-chart/hooks/useSortLinearDatapoints.js

@@ -22,7 +22,6 @@ __export(useSortLinearDatapoints_exports, {
 });
 module.exports = __toCommonJS(useSortLinearDatapoints_exports);
 var import_lodash_es = require("lodash");
-var import_react = require("react");
 var import_detect_scale = require("../../core/utils/detect-scale.js");
 var import_scale = require("../../core/utils/scale.js");
 var import_get_band_centered_point = require("../utils/get-band-centered-point.js");
@@ -33,20 +32,41 @@ const initialAxisSelectConfig = {
   uniqueXValuesWithDatapoints: /* @__PURE__ */ new Set(),
   datapointsPerXAxisValue: /* @__PURE__ */ new Map()
 };
-const getPointValue = (point) => {
-  if (typeof point.datapoint.x0 === "string") {
-    return point.datapoint.x0;
-  } else {
-    return point.datapoint.x0 instanceof Date ? (0, import_get_center_date.getCenterDate)(point.datapoint.x0, point.datapoint.x1) : point.datapoint.x0;
+const getPointValue = (point, datapointMetadataMap) => {
+  const xValue = point.datapoint.x0 ?? point.datapoint.x1;
+  if (xValue === void 0) {
+    return void 0;
   }
+  if (typeof xValue === "string") {
+    return xValue;
+  }
+  if (xValue instanceof Date) {
+    const x1 = point.datapoint.x1;
+    return x1 instanceof Date ? (0, import_get_center_date.getCenterDate)(xValue, x1) : xValue;
+  }
+  if (typeof xValue === "number") {
+    const metadata = datapointMetadataMap.get(point.datapoint);
+    if (metadata?.baseline === "y" && typeof metadata.accumulator === "number") {
+      return xValue + metadata.accumulator;
+    }
+  }
+  return xValue;
+};
+const getPointValues = (point, datapointMetadataMap) => {
+  const primaryValue = getPointValue(point, datapointMetadataMap);
+  if ((0, import_lodash_es.isUndefined)(primaryValue)) {
+    return [];
+  }
+  const { x0, x1 } = point.datapoint;
+  if (typeof x0 === "number" && typeof x1 === "number" && x0 !== x1) {
+    return [x0, x1];
+  }
+  return [primaryValue];
 };
-const useSortLinearDatapoints = (seriesVariantsProps) => {
-  const axisSelectConfig = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react.useMemo)(() => {
-    axisSelectConfig.current.clear();
-  }, [seriesVariantsProps]);
+const useSortLinearDatapoints = (seriesVariantsProps, datapointMetadataMap) => {
+  const axisSelectConfig = /* @__PURE__ */ new Map();
   const getSortedValuesByAxisId = (axisId) => {
-    const selectConfig = axisSelectConfig.current.get(axisId);
+    const selectConfig = axisSelectConfig.get(axisId);
     if (selectConfig) {
       const { uniqueXValuesWithDatapoints } = selectConfig;
       return Array.from(uniqueXValuesWithDatapoints).sort((a, b) => {
@@ -62,24 +82,26 @@ const useSortLinearDatapoints = (seriesVariantsProps) => {
     return [];
   };
   const handleAddValue = (point) => {
-    if ((0, import_lodash_es.isUndefined)(point.datapoint.x0)) {
+    const values = getPointValues(point, datapointMetadataMap);
+    if (values.length === 0) {
       return;
     }
-    const value = getPointValue(point);
     const axisId = point.series.xAxisId;
-    if (!axisSelectConfig.current.has(axisId)) {
-      axisSelectConfig.current.set(axisId, {
+    if (!axisSelectConfig.has(axisId)) {
+      axisSelectConfig.set(axisId, {
         uniqueXValuesWithDatapoints: /* @__PURE__ */ new Set(),
         datapointsPerXAxisValue: /* @__PURE__ */ new Map()
       });
     }
-    const { uniqueXValuesWithDatapoints, datapointsPerXAxisValue } = axisSelectConfig.current.get(axisId) ?? initialAxisSelectConfig;
-    if (!uniqueXValuesWithDatapoints.has(value)) {
-      uniqueXValuesWithDatapoints.add(value);
-      datapointsPerXAxisValue.set(value, []);
+    const { uniqueXValuesWithDatapoints, datapointsPerXAxisValue } = axisSelectConfig.get(axisId) ?? initialAxisSelectConfig;
+    for (const value of values) {
+      if (!uniqueXValuesWithDatapoints.has(value)) {
+        uniqueXValuesWithDatapoints.add(value);
+        datapointsPerXAxisValue.set(value, []);
+      }
+      const existingPointsInXPosition = datapointsPerXAxisValue.get(value) ?? [];
+      existingPointsInXPosition.push(point);
     }
-    const existingPointsInXPosition = datapointsPerXAxisValue.get(value) ?? [];
-    existingPointsInXPosition.push(point);
   };
   const handleSearchNumericRange = (start, end, axisId) => {
     const sortedValues = getSortedValuesByAxisId(axisId);
@@ -102,23 +124,32 @@ const useSortLinearDatapoints = (seriesVariantsProps) => {
     return categoriesCoordinates.filter((xValue) => xValue >= start && xValue <= end).map((xValue) => (0, import_scale.scaleBandInvert)(scale)(xValue));
   };
   const handleGetPoints = (axisId, range, callback, pointsByRange = []) => {
-    const selectConfig = axisSelectConfig.current.get(axisId);
+    const selectConfig = axisSelectConfig.get(axisId);
     if (!selectConfig) {
       return pointsByRange;
     }
     const { datapointsPerXAxisValue } = selectConfig;
+    const addMappedPoints = (mappedPoint) => {
+      if (!mappedPoint) {
+        return;
+      }
+      if (Array.isArray(mappedPoint)) {
+        pointsByRange.push(...mappedPoint);
+      } else {
+        pointsByRange.push(mappedPoint);
+      }
+    };
+    const mapPointsForValue = (points) => {
+      for (const point of points) {
+        addMappedPoints(callback(point));
+      }
+    };
     for (const value of range) {
       const points = datapointsPerXAxisValue.get(value);
-      if (points) {
-        for (const point of points) {
-          const mappedPoint = callback(
-            point
-          );
-          if (mappedPoint) {
-            pointsByRange.push(mappedPoint);
-          }
-        }
+      if (!points?.length) {
+        continue;
       }
+      mapPointsForValue(points);
     }
     return pointsByRange;
   };
@@ -138,7 +169,7 @@ const useSortLinearDatapoints = (seriesVariantsProps) => {
     }
     const axesIdsArray = typeof axesIds === "string" ? [axesIds] : axesIds;
     axesIdsArray.forEach((axisId) => {
-      if (axisSelectConfig.current.has(axisId)) {
+      if (axisSelectConfig.has(axisId)) {
         const scale = (0, import_get_scale.getCurrentScale)(axisIdToScales, axisId);
         if ((0, import_detect_scale.isBandScale)(scale)) {
           axesCurrentSelection[axisId] = handleGetPointsByCategories(
@@ -170,7 +201,7 @@ const useSortLinearDatapoints = (seriesVariantsProps) => {
     return { axesCurrentSelection, highlightedDatapoints };
   };
   return {
-    getCurrentSelectConfig: () => axisSelectConfig.current,
+    getCurrentSelectConfig: () => axisSelectConfig,
     addValue: (point) => handleAddValue(point),
     searchAllAxisDatapoints
   };

package/charts/xy-chart/hooks/useSortRectangleDatapoints.js

@@ -23,7 +23,6 @@ __export(useSortRectangleDatapoints_exports, {
 });
 module.exports = __toCommonJS(useSortRectangleDatapoints_exports);
 var import_lodash_es = require("lodash");
-var import_react = require("react");
 var import_detect_scale = require("../../core/utils/detect-scale.js");
 var import_is_rectangle_selected = require("../components/overlay/utils/is-rectangle-selected.js");
 var import_get_scale = require("../utils/get-scale.js");
@@ -59,12 +58,7 @@ const applySerialization = (range, columnsMap, callback, rectsByRange) => {
   }
 };
 const useSortRectangleDatapoints = (seriesVariantsProps) => {
-  const rectAxisSelectConfig = (0, import_react.useRef)(
-    /* @__PURE__ */ new Map()
-  );
-  (0, import_react.useMemo)(() => {
-    rectAxisSelectConfig.current.clear();
-  }, [seriesVariantsProps]);
+  const rectAxisSelectConfig = /* @__PURE__ */ new Map();
   function updateBoundariesForAxis(boundaries, axisName, v0, v1) {
     if (typeof v0 === "string" || typeof v1 === "string") {
       return;
@@ -106,15 +100,15 @@ const useSortRectangleDatapoints = (seriesVariantsProps) => {
     const primaryV1 = isVerticalBar ? x1 : isHorizontalBar ? y1 : x1;
     const secondaryV0 = isVerticalBar ? y0 : isHorizontalBar ? x0 : y0;
     const secondaryV1 = isVerticalBar ? y1 : isHorizontalBar ? x1 : y1;
-    if (!rectAxisSelectConfig.current.has(primaryAxisId)) {
-      rectAxisSelectConfig.current.set(primaryAxisId, {
+    if (!rectAxisSelectConfig.has(primaryAxisId)) {
+      rectAxisSelectConfig.set(primaryAxisId, {
         uniqueColumns: /* @__PURE__ */ new Set(),
         uniqueRows: /* @__PURE__ */ new Set(),
         columnsMap: /* @__PURE__ */ new Map(),
         boundaries: {}
       });
     }
-    const axisConfig = rectAxisSelectConfig.current.get(primaryAxisId) ?? {
+    const axisConfig = rectAxisSelectConfig.get(primaryAxisId) ?? {
       uniqueColumns: /* @__PURE__ */ new Set(),
       uniqueRows: /* @__PURE__ */ new Set(),
       columnsMap: /* @__PURE__ */ new Map(),
@@ -156,7 +150,7 @@ const useSortRectangleDatapoints = (seriesVariantsProps) => {
     axisConfig.columnsMap.set(hashedKey, rectsInRange);
   };
   const getAxisSortedValues = (axisId) => {
-    const sortedData = rectAxisSelectConfig.current.get(axisId);
+    const sortedData = rectAxisSelectConfig.get(axisId);
     if (sortedData) {
       const { uniqueColumns, uniqueRows, columnsMap } = sortedData;
       const sortedColumns = sortRangeKeys(Array.from(uniqueColumns));
@@ -169,7 +163,7 @@ const useSortRectangleDatapoints = (seriesVariantsProps) => {
     }
     return void 0;
   };
-  const getAxisValues = (axisId) => rectAxisSelectConfig.current.get(axisId);
+  const getAxisValues = (axisId) => rectAxisSelectConfig.get(axisId);
   const handleSearchRange = (start, end, sortedColumns) => {
     const sX = start instanceof Date ? start.getTime() : Number(start);
     const eX = end instanceof Date ? end.getTime() : Number(end);
@@ -268,7 +262,7 @@ const useSortRectangleDatapoints = (seriesVariantsProps) => {
     }
     const axesIdsArray = typeof axesIds === "string" ? [axesIds] : axesIds;
     axesIdsArray.forEach((axisId) => {
-      if (rectAxisSelectConfig.current.has(axisId)) {
+      if (rectAxisSelectConfig.has(axisId)) {
         const currentScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, axisId);
         if ((0, import_detect_scale.isBandScale)(currentScale)) {
           const rectsByRange = handleGetRectanglesByCategoricalRange(
@@ -281,7 +275,7 @@ const useSortRectangleDatapoints = (seriesVariantsProps) => {
             highlightedDatapoints.push(rect);
           }
         } else {
-          const axisConfig = rectAxisSelectConfig.current.get(axisId);
+          const axisConfig = rectAxisSelectConfig.get(axisId);
           if (axisConfig && isHorizontalBarConfiguration(axisConfig)) {
             const horizontalBarResults = handleGetRectanglesByNumericalRangeForHorizontalBar(
               start,
@@ -316,7 +310,7 @@ const useSortRectangleDatapoints = (seriesVariantsProps) => {
   };
   return {
     addValue: handleAddValue,
-    getCurrentSelectConfig: () => rectAxisSelectConfig.current,
+    getCurrentSelectConfig: () => rectAxisSelectConfig,
     searchAllAxisDatapoints
   };
 };

package/charts/xy-chart/hooks/useXYChartDataProvider.d.ts

@@ -23,8 +23,8 @@ export declare function useXYChartDataProvider(seriesVariantsProps: XYChartVaria
     seriesIdToValueScaleDomain: import("../types/xy-chart-internals.js").RectSeriesIdToValueScaleDomain;
     datapointMetadataMap: MapDatapoints;
     linearSelectionContextValue: {
-        selectionConfigByAxisId: Map<string, import("../types/xy-chart-selection.js").AxisSelectConfig<import("../types/xy-chart-selection.js").XYChartSelectionLinearMetadata<import("../types/xy-chart-selection.js").LinearSeriesWithDatapoints, import("../types/xy-chart.js").DotDatapoint | import("../types/xy-chart.js").LineDatapoint>>>;
-        searchAllAxisDatapoints: (start: number, end: number, callback: (point: import("../types/xy-chart-selection.js").XYChartSelectionDotMetadata) => import("../../core/types/data-point.js").DataPoint | null, axesIds: string | string[], axisIdToScales: import("../context/XYChartScales.context.js").AxisIdToScales, axisIdToScaleDomain: AxisIdToScaleDomain, axisIdToIsRelative: Map<string, boolean>) => {
+        selectionConfigByAxisId: Map<string, import("../types/xy-chart-selection.js").AxisSelectConfig<import("../types/xy-chart-selection.js").XYChartSelectionLinearMetadata<import("../types/xy-chart-selection.js").LinearSeriesWithDatapoints, import("../types/xy-chart.js").DotDatapoint | import("../types/xy-chart.js").LineDatapoint | import("../types/xy-chart.js").AreaDatapoint>>>;
+        searchAllAxisDatapoints: (start: number, end: number, callback: (point: import("../types/xy-chart-selection.js").XYChartSelectionDotMetadata) => import("../../core/types/data-point.js").DataPoint | import("../../core/types/data-point.js").DataPoint[] | null, axesIds: string | string[], axisIdToScales: import("../context/XYChartScales.context.js").AxisIdToScales, axisIdToScaleDomain: AxisIdToScaleDomain, axisIdToIsRelative: Map<string, boolean>) => {
             axesCurrentSelection: Record<string, import("../../core/types/data-point.js").DataPoint[]>;
             highlightedDatapoints: import("../../core/types/data-point.js").DataPoint[];
         };
@@ -37,6 +37,7 @@ export declare function useXYChartDataProvider(seriesVariantsProps: XYChartVaria
         };
     };
     seriesWithDatapoints: XYChartSeriesWithDatapoints[];
+    filteredSeriesWithDatapoints: XYChartSeriesWithDatapoints[];
     seriesToMetadata: SeriesToMetadata;
     axisIdToDimension: Map<string, Set<string>>;
 };

package/charts/xy-chart/hooks/useXYChartDataProvider.js

@@ -32,6 +32,7 @@ var import_bar_series = require("../processing-strategies/strategies/bar-series.
 var import_dot_series = require("../processing-strategies/strategies/dot-series.js");
 var import_line_series = require("../processing-strategies/strategies/line-series.js");
 var import_rect_series = require("../processing-strategies/strategies/rect-series.js");
+var import_selectors = require("../store/selectors.js");
 var import_axis_interactions = require("../utils/axis-interactions.js");
 var import_combine_data_with_corresponding_series = require("../utils/combine-data-with-corresponding-series.js");
 var import_combine_series_with_axes = require("../utils/combine-series-with-axes.js");
@@ -45,7 +46,7 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     addValue,
     getCurrentSelectConfig: getCurrentShapeSelectConfig,
     searchAllAxisDatapoints: searchAllAxisShapeDatapoints
-  } = (0, import_useSortLinearDatapoints.useSortLinearDatapoints)(seriesVariantsProps);
+  } = (0, import_useSortLinearDatapoints.useSortLinearDatapoints)(seriesVariantsProps, datapointMetadataMap);
   const {
     addValue: addRectangleValue,
     searchAllAxisDatapoints: searchAllAxisRectangleDatapoints,
@@ -76,6 +77,7 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     barSeriesStrategy,
     areaSeriesStrategy
   ];
+  const filteredSeriesIds = (0, import_selectors.useFilteredSeriesIdsState)();
   const mutableContext = {
     seriesMap,
     seriesWithDatapoints,
@@ -84,7 +86,8 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     seriesIndexes,
     intl,
     colorPalette,
-    datapointMetadataMap
+    datapointMetadataMap,
+    filteredSeriesIds
   };
   for (const { data: data2, series } of dataWithSeries.filter(
     ({ series: series2 }) => series2.length
@@ -92,7 +95,7 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     for (const { seriesProps, xAxis, yAxis } of series) {
       const strategy = (0, import_factory.getStrategyFactory)(strategies, seriesProps);
       if (strategy?.preprocess) {
-        strategy.preprocess(data2, seriesProps, xAxis, yAxis);
+        strategy.preprocess(data2, seriesProps, xAxis, yAxis, mutableContext);
       }
     }
     for (const datum of data2) {
@@ -139,6 +142,16 @@ function useXYChartDataProvider(seriesVariantsProps, data) {
     linearSelectionContextValue,
     rectSelectionContextValue,
     seriesWithDatapoints,
+    filteredSeriesWithDatapoints: seriesWithDatapoints.filter((series) => {
+      if (series.type === "rect") {
+        series.filteredData = series.data.filter(
+          (datapoint) => {
+            return datapointMetadataMap.get(datapoint)?.isVisible !== false;
+          }
+        );
+      }
+      return seriesToMetadata.get(series)?.isVisible !== false;
+    }),
     seriesToMetadata,
     axisIdToDimension: barSeriesStrategy.axisIdToDimension
   };

package/charts/xy-chart/layout/XYChartHighlightedCanvasLayout.js

@@ -32,10 +32,10 @@ const XYChartHighlightedCanvasLayout = ({
 }) => {
   const highlightedSeriesId = (0, import_selectors.useXYChartHighlightedSeriesIdsState)();
   const pinned = (0, import_selectors.usePinnedState)();
-  const { seriesWithDatapoints } = (0, import_useXYChartData.useXYChartData)();
+  const { filteredSeriesWithDatapoints } = (0, import_useXYChartData.useXYChartData)();
   handleOpacity((0, import_apply_opacity_to_canvas.applyOpacityToCanvas)(highlightedSeriesId));
   const highlightedSeries = (0, import_get_highlighted_series.getHighlightedSeries)(
-    seriesWithDatapoints,
+    filteredSeriesWithDatapoints,
     highlightedSeriesId
   );
   if (!highlightedSeriesId || !highlightedSeries) {

package/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-0-1 {
+._1ru1qe70-3-1-0 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-0-1 {
+._1ru1qe71-3-1-0 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/charts/xy-chart/layout/XYChartLayout.js

@@ -29,7 +29,7 @@ var import_XYChartThresholdIndicators = require("../components/thresholds/XYChar
 var import_useXYChartData = require("../hooks/useXYChartData.js");
 function XYChartLayout() {
   const canvasRef = (0, import_react.useRef)([]);
-  const { seriesWithDatapoints } = (0, import_useXYChartData.useXYChartData)();
+  const { filteredSeriesWithDatapoints } = (0, import_useXYChartData.useXYChartData)();
   const handleOpacityChange = (value) => {
     if (canvasRef?.current) {
       canvasRef.current.forEach((canvas) => {
@@ -41,7 +41,7 @@ function XYChartLayout() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_XYChartGenericCanvasLayout.XYChartGenericCanvasLayout,
       {
-        seriesWithDatapoints,
+        seriesWithDatapoints: filteredSeriesWithDatapoints,
         ref: canvasRef
       }
     ),

package/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -24,5 +24,5 @@ __export(XYChartLayout_css_exports, {
 module.exports = __toCommonJS(XYChartLayout_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartLayout_css_ts_vanilla = require("./XYChartLayout.css");
-var datapointCanvasPlot = "_1ru1qe71-3-0-1 _13lzg4k0-3-0-1 _1ru1qe70-3-0-1";
-var rectangleCanvasPlot = "_13lzg4k0-3-0-1 _1ru1qe70-3-0-1";
+var datapointCanvasPlot = "_1ru1qe71-3-1-0 _13lzg4k0-3-1-0 _1ru1qe70-3-1-0";
+var rectangleCanvasPlot = "_13lzg4k0-3-1-0 _1ru1qe70-3-1-0";

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

@@ -7,6 +7,12 @@ import type { AreaSeriesConstructor, ControlFlowCommand, MutableProcessingContex
 export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelectionLinearMetadata> {
     private readonly stackHelper;
     private readonly gapHelper;
+    /**
+     * This is needed for special cases such as isolated points in value representation in area charts.
+     */
+    readonly combinedAxesOrientationKeyToSeriesCount: Map<string, number>;
+    /** This set contains series Id that has been preprocessed at least once */
+    private readonly preprocessedSeriesIds;
     constructor(initializer: AreaSeriesConstructor);
     canHandle(seriesProps: XYChartVariantsInternal): seriesProps is XYChartAreaSeriesInternal;
     protected getSeriesId(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal): string;
@@ -23,7 +29,7 @@ export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
         curve: import("../../types/xy-chart.js").SeriesCurve | undefined;
         variant: XYChartAreaVariant;
         pointsDisplay: "auto" | "always" | "never";
-        actions: ((datapoint: import("../../types/xy-chart.js").XYChartAreaSeriesActionItem, _series?: import("../../types/xy-chart.js")._XYChartAreaSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
+        actions: ((datapoint: import("../../types/xy-chart.js").XYChartAreaSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartAreaSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
         color: import("../../../index.js").ColorToken;
         colorPalette: XYChartColorPalette;
         colorIsFromSlot: boolean;
@@ -51,7 +57,7 @@ export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
         x1: import("../../types/xy-chart.js").XYAccessorDataTypes | undefined;
         y1?: undefined;
     };
-    protected preprocessImpl(data: XYChartData[], seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): ControlFlowCommand;
+    protected preprocessImpl(data: XYChartData[], seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     protected processImpl(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: AreaDatapoint, context: MutableProcessingContext): "continue" | undefined;
     getColor(datum: XYChartData, seriesProps: XYChartAreaSeriesInternal, configColorPalette: XYChartColorPalette | undefined, seriesName: string, seriesIndex: number): {
         color: import("../../../index.js").ColorToken;
@@ -65,4 +71,6 @@ export declare class AreaSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
         y1: string | number | Date | undefined;
     } | undefined;
     private handleStacking;
+    private registerSeriesCountForAxisCombination;
+    private registerSeriesCountOnPreprocessing;
 }

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

@@ -25,20 +25,30 @@ var import_base_series = require("./base-series.js");
 var import_gappable_series = require("./gappable-series.js");
 var import_stackable_series = require("./stackable-series.js");
 var import_is_valid_points_display = require("../../../core/components/canvas/utils/is-valid-points-display.js");
+var import_safe_get = require("../../../core/utils/safe-get.js");
 var import_defaults = require("../../constants/defaults.js");
 var import_type_guards = require("../../utils/type-guards.js");
 var import_get_area_datapoints = require("../utils/access-datapoint/get-area-datapoints.js");
 var import_get_datapoints = require("../utils/access-datapoint/get-datapoints.js");
 var import_get_calculated_linear_point = require("../utils/cast-data/get-calculated-linear-point.js");
 var import_get_linear_color_palette = require("../utils/coloring/get-linear-color-palette.js");
+var import_is_area_series_stacked = require("../utils/stacking/is-area-series-stacked.js");
 var import_stack_datapoints = require("../utils/stacking/stack-datapoints.js");
 class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
   stackHelper;
   gapHelper;
+  /**
+   * This is needed for special cases such as isolated points in value representation in area charts.
+   */
+  combinedAxesOrientationKeyToSeriesCount;
+  /** This set contains series Id that has been preprocessed at least once */
+  preprocessedSeriesIds;
   constructor(initializer) {
     super(initializer);
     this.stackHelper = new import_stackable_series.StackableSeriesHelper();
     this.gapHelper = new import_gappable_series.GappableSeriesHelper();
+    this.combinedAxesOrientationKeyToSeriesCount = /* @__PURE__ */ new Map();
+    this.preprocessedSeriesIds = /* @__PURE__ */ new Set();
   }
   canHandle(seriesProps) {
     return (0, import_type_guards.isAreaSeries)(seriesProps);
@@ -97,7 +107,7 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       variant
     );
   }
-  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;
@@ -110,10 +120,22 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     if (!canStack) {
       return;
     }
+    const filteredSeriesIds = context?.filteredSeriesIds;
     for (const datum of data) {
       const datapoint = this.getDatapoint(datum, seriesProps, xAxis, yAxis);
       const variant = (0, import_get_datapoints.getChartAreaVariant)(chartOrientation, seriesProps);
       if (datapoint) {
+        const seriesId = this.getSeriesId(datum, seriesProps);
+        const isSeriesVisible = filteredSeriesIds === void 0 || filteredSeriesIds.has(seriesId);
+        if (!isSeriesVisible) {
+          continue;
+        }
+        this.registerSeriesCountOnPreprocessing(
+          seriesId,
+          xAxis.id,
+          yAxis.id,
+          chartOrientation
+        );
         const preCalcPoint = this.getCalculationPoint(
           datapoint,
           xAxis,
@@ -133,6 +155,7 @@ class AreaSeriesStrategy 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);
     const chartOrientation = (0, import_get_datapoints.getChartOrientation)(seriesProps);
     if (!chartOrientation) {
       return "continue";
@@ -145,13 +168,25 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       chartOrientation,
       variant
     );
-    const { calcDatapoint, datapointMetadata, shouldContinue } = this.handleStacking(
-      preCalcPoint,
-      xAxis,
-      yAxis,
-      chartOrientation,
-      variant
-    );
+    let calcDatapoint;
+    let datapointMetadata;
+    let shouldContinue;
+    if (isSeriesVisible) {
+      ({ calcDatapoint, datapointMetadata, shouldContinue } = this.handleStacking(
+        preCalcPoint,
+        xAxis,
+        yAxis,
+        chartOrientation,
+        variant
+      ));
+    } else {
+      calcDatapoint = preCalcPoint;
+      datapointMetadata = {
+        isGap: false,
+        baseline: (0, import_stack_datapoints.getBaselineCoordinate)(chartOrientation)
+      };
+      shouldContinue = false;
+    }
     if (shouldContinue) {
       return "continue";
     }
@@ -167,21 +202,32 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
         seriesId,
         context
       );
-      seriesToMetadata.set(currentSeries, metadata);
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: isSeriesVisible,
+        isStacked: chartOrientation !== "both" && (0, import_is_area_series_stacked.isAreaSeriesStacked)(
+          (0, import_stack_datapoints.getCombinedAxesOrientationKey)(xAxis.id, yAxis.id, chartOrientation),
+          this.combinedAxesOrientationKeyToSeriesCount,
+          variant
+        )
+      });
     }
-    const gappedDatapoint = this.gapHelper.handleGapDetection(
-      datapoint,
-      currentSeries,
-      xAxis,
-      yAxis
-    );
-    if (gappedDatapoint) {
-      this.registerDatapoint(
-        gappedDatapoint,
-        { isGap: true },
+    const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+    if (isSeriesVisible) {
+      const gappedDatapoint = this.gapHelper.handleGapDetection(
+        datapoint,
         currentSeries,
-        context
+        xAxis,
+        yAxis
       );
+      if (gappedDatapoint) {
+        this.registerDatapoint(
+          gappedDatapoint,
+          { isGap: true },
+          currentSeries,
+          context
+        );
+      }
     }
     this.registerDatapoint(
       datapoint,
@@ -189,12 +235,19 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       currentSeries,
       context
     );
-    this.updateAxisDomains(
-      calcDatapoint,
-      xAxis,
-      yAxis,
-      context.axisIdToScaleDomain
-    );
+    if (isSeriesVisible) {
+      this.addValue({
+        series: currentSeries,
+        datapoint,
+        color: currentSeriesMetadata?.color
+      });
+      this.updateAxisDomains(
+        calcDatapoint,
+        xAxis,
+        yAxis,
+        context.axisIdToScaleDomain
+      );
+    }
   }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {
     return (0, import_get_linear_color_palette.getLinearColor)(
@@ -241,4 +294,26 @@ class AreaSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       shouldContinue
     };
   }
+  registerSeriesCountForAxisCombination(xAxisId, yAxisId, chartOrientation) {
+    const axesCombinationKey = (0, import_stack_datapoints.getCombinedAxesOrientationKey)(
+      xAxisId,
+      yAxisId,
+      chartOrientation
+    );
+    const count = this.combinedAxesOrientationKeyToSeriesCount.get(axesCombinationKey) ?? 0;
+    this.combinedAxesOrientationKeyToSeriesCount.set(
+      axesCombinationKey,
+      count + 1
+    );
+  }
+  registerSeriesCountOnPreprocessing(seriesId, xAxisId, yAxisId, chartOrientation) {
+    if (!this.preprocessedSeriesIds.has(seriesId)) {
+      this.registerSeriesCountForAxisCombination(
+        xAxisId,
+        yAxisId,
+        chartOrientation
+      );
+      this.preprocessedSeriesIds.add(seriesId);
+    }
+  }
 }

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

@@ -20,7 +20,7 @@ export declare class BarSeriesStrategy extends SeriesBaseStrategy<XYChartSelecti
     protected createSeriesMetadata(datum: XYChartData, seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext, variant?: BarSeriesVariant): {
         name: string;
         variant: BarSeriesVariant;
-        actions: ((datapoint: import("../../types/xy-chart.js").XYChartBarSeriesActionItem, _series?: import("../../types/xy-chart.js")._XYChartBarSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
+        actions: ((datapoint: import("../../types/xy-chart.js").XYChartBarSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartBarSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;
         chartOrientation: import("../../types/xy-chart-internals.js").XYChartOrientation | undefined;
         color: import("../../../index.js").ColorToken;
         colorPalette: XYChartColorPalette;
@@ -29,7 +29,7 @@ export declare class BarSeriesStrategy extends SeriesBaseStrategy<XYChartSelecti
         yAxis: XYChartAxisInternal;
     };
     private handleStackingAndGrouping;
-    protected preprocessImpl(data: XYChartData[], seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): ControlFlowCommand;
+    protected preprocessImpl(data: XYChartData[], seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, context: MutableProcessingContext): ControlFlowCommand;
     protected processImpl(datum: XYChartData, seriesProps: XYChartBarSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, datapoint: BarDatapoint, context: MutableProcessingContext): "continue" | undefined;
     getColor(datum: XYChartData, seriesProps: XYChartBarSeriesInternal, configColorPalette: XYChartColorPalette | undefined, seriesName: string, seriesIndex: number): {
         color: import("../../../index.js").ColorToken;