diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-all-values-in-stacked-chart-with-filtered-series-nick-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-all-values-in-stacked-chart-with-filtered-series-nick-chrome-linux.png new file mode 100644 index 0000000000..f5064589ac Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-all-values-in-stacked-chart-with-filtered-series-nick-chrome-linux.png differ diff --git a/e2e/tests/legend_stories.test.ts b/e2e/tests/legend_stories.test.ts index 7b2ad618a0..610f657d33 100644 --- a/e2e/tests/legend_stories.test.ts +++ b/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 = '') => { diff --git a/packages/charts/src/chart_types/xy_chart/utils/diverging_offsets.ts b/packages/charts/src/chart_types/xy_chart/utils/diverging_offsets.ts index 43b3043042..65b11b006e 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/diverging_offsets.ts +++ b/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; +type SeriesValueMap = Map; /** @internal */ export type XValueMap = Map; diff --git a/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts b/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts index d77ff904c0..d724bb154b 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts +++ b/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(); + const seriesMap = new Map(); 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) diff --git a/storybook/stories/legend/17_tabular_data.story.tsx b/storybook/stories/legend/17_tabular_data.story.tsx index f12c6d2f83..fc92f99a6e 100644 --- a/storybook/stories/legend/17_tabular_data.story.tsx +++ b/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 ( { tickFormat={(d) => Number(d).toFixed(numberFormattingPrecision)} /> - + ); };