From 92e7e36bfdc62792630bf4c383de597c3ed0aa5b Mon Sep 17 00:00:00 2001 From: Tony Xiao Date: Thu, 14 Nov 2024 12:43:40 -0500 Subject: [PATCH] fix(explore): Incomplete series on area chart should not be stacked The incomplete series should not have a stacked config so the area chart is unstacked which is the same as the rest of the chart. --- .../views/insights/common/components/chart.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/static/app/views/insights/common/components/chart.tsx b/static/app/views/insights/common/components/chart.tsx index 4a9d1fe36ff5a1..d2da6cfbd89042 100644 --- a/static/app/views/insights/common/components/chart.tsx +++ b/static/app/views/insights/common/components/chart.tsx @@ -243,13 +243,23 @@ function Chart({ if (type === ChartType.LINE || type === ChartType.AREA) { const metricChartType = type === ChartType.AREA ? MetricDisplayType.AREA : MetricDisplayType.LINE; - const seriesToShow = series.map(serie => - createIngestionSeries(serie as MetricSeries, ingestionBuckets, metricChartType) - ); + const seriesToShow = series.map(serie => { + const ingestionSeries = createIngestionSeries( + serie as MetricSeries, + ingestionBuckets, + metricChartType + ); + // this helper causes all the incomplete series to stack, here we remove the stacking + for (const s of ingestionSeries) { + delete s.stack; + } + return ingestionSeries; + }); [series, incompleteSeries] = seriesToShow.reduce( (acc, serie, index) => { const [trimmed, incomplete] = acc; const {markLine: _, ...incompleteSerie} = serie[1] ?? {}; + return [ [...trimmed, {...serie[0], color: colors[index]}], [