fix:(Legend): missing values with filtered stacked series (#2477)

e2e/tests/legend_stories.test.ts

@@ -332,6 +332,22 @@ test.describe('Legend stories', () => {
       },
     );
   });
+
+  test('should all values in stacked chart with filtered series - nick', async ({ page }) => {
+    const action = async () => {
+      await page.locator(':nth-match(.echLegendItem__label, 3)').click();
+      await page.locator(':nth-match(.echLegendItem__label, 4)').click();
+      await page.locator(':nth-match(.echLegendItem__label, 6)').click();
+      await page.locator(':nth-match(.echLegendItem__label, 8)').click();
+    };
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/legend--tabular-data&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Blue groupId_Annotations=primary&knob-Dataset_Legend=defaultDataset&knob-Domain axis_Annotations=y&knob-Enable debug state=true&knob-FadeOnFocusingOthers_Animations=true&knob-Hide color picker_Legend=true&knob-Legend Value_Legend[0]=median&knob-Legend Value_Legend[1]=min&knob-Legend Value_Legend[2]=max&knob-Legend position_Legend=right&knob-Number formatting precision_Legend=2&knob-Outside dimension_Annotations=4&knob-Popover position_Legend=leftCenter&knob-Red groupId_Annotations=primary&knob-Render outside chart_Annotations=true&knob-Scale type=linear&knob-SeriesType=bar&knob-Tick size=10&knob-annotation count_Styles=6&knob-annotation opacity_Styles=0.5&knob-annotation zIndex_Styles=0&knob-chartRotation=180&knob-data polarity=Mixed&knob-delay (ms)_Animations=50&knob-duration (ms)_Animations=250&knob-enable y0 and y1 values=true&knob-enabled_Animations=true&knob-max label lines_Label options=1&knob-stackMode=wiggle&knob-stacked=true&knob-Hide legend action_Legend=&knob-Hide legend extra_Legend=&knob-Legend title_Legend=&knob-enable legend size=',
+      {
+        action,
+      },
+    );
+  });
+
   test.describe('Legend tabular data', () => {
     const datasetKnob = (p1: string, p2: string) => `&globals=&knob-Dataset_Legend=${p1}&knob-dataset=${p2}`;
     const getDatasetUrl = (p1: string, p2: string, others = '') => {

packages/charts/src/chart_types/xy_chart/utils/diverging_offsets.ts

@@ -27,7 +27,7 @@ import { DataSeriesDatum } from './series';
 import { SeriesKey } from '../../../common/series_id';
 
 type XValue = string | number;
-type SeriesValueMap = Map<SeriesKey, DataSeriesDatum>;
+type SeriesValueMap = Map<SeriesKey, DataSeriesDatum & { isFiltered: boolean }>;
 
 /** @internal */
 export type XValueMap = Map<XValue, SeriesValueMap>;

packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts

@@ -56,16 +56,16 @@ export function formatStackedDataSeriesValues(
   // group data series by x values
   const xMap: XValueMap = new Map();
   [...xValues].forEach((xValue) => {
-    const seriesMap = new Map<SeriesKey, DataSeriesDatum>();
+    const seriesMap = new Map<SeriesKey, DataSeriesDatum & { isFiltered: boolean }>();
     dataSeries.forEach(({ key, data, isFiltered }) => {
-      if (isFiltered) return;
       const datum = data.find(({ x }) => x === xValue);
       if (!datum) return;
       const y1 = datum.y1 ?? 0;
       if (hasPositive || y1 > 0) hasPositive = true;
       if (hasNegative || y1 < 0) hasNegative = true;
-      seriesMap.set(`${key}-y0`, datum);
-      seriesMap.set(key, datum);
+      const newDatum = Object.assign(datum, { isFiltered });
+      seriesMap.set(`${key}-y0`, newDatum);
+      seriesMap.set(key, newDatum);
     });
     xMap.set(xValue, seriesMap);
   });
@@ -82,7 +82,7 @@ export function formatStackedDataSeriesValues(
     .keys(keys)
     .value(([, indexMap], key) => {
       const datum = indexMap.get(key);
-      if (!datum) return 0; // hides filtered series while maintaining their existence
+      if (!datum || datum.isFiltered) return 0; // hides filtered series while maintaining their existence
       return key.endsWith('-y0') ? datum.y0 ?? 0 : datum.y1 ?? 0;
     })
     .order(stackOrderNone)

storybook/stories/legend/17_tabular_data.story.tsx

@@ -86,6 +86,8 @@ export const Example: ChartsStory = (_, { title, description }) => {
     'Legend',
   );
 
+  const stacked = boolean('stacked', false);
+
   return (
     <Chart title={title} description={description}>
       <Settings
@@ -107,7 +109,13 @@ export const Example: ChartsStory = (_, { title, description }) => {
         tickFormat={(d) => Number(d).toFixed(numberFormattingPrecision)}
       />
 
-      <BarSeries id="bars" xScaleType={ScaleType.Linear} yScaleType={ScaleType.Linear} {...datasets[datasetSelect]} />
+      <BarSeries
+        id="bars"
+        xScaleType={ScaleType.Linear}
+        yScaleType={ScaleType.Linear}
+        stackAccessors={stacked ? [''] : []}
+        {...datasets[datasetSelect]}
+      />
     </Chart>
   );
 };