TimeSeries: don't auto-disable fill of fillBelowTo targets (#43165) (#43244)

(cherry picked from commit 8fdbc6cc20)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json

@@ -1991,7 +1991,7 @@
             "axisLabel": "",
             "axisPlacement": "auto",
             "drawStyle": "line",
-            "fillOpacity": 29,
+            "fillOpacity": 0,
             "gradientMode": {
               "label": "None",
               "value": "none"

devenv/dev-dashboards/panel-graph/graph-ng.json

@@ -1346,7 +1346,7 @@
             "axisPlacement": "auto",
             "drawStyle": "line",
             "fillGradient": "hue",
-            "fillOpacity": 25,
+            "fillOpacity": 0,
             "hideFrom": {
               "graph": false,
               "legend": false,

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -307,7 +307,6 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
   }
 
   if (stackingGroups.size !== 0) {
-    builder.setStacking(true);
     for (const [_, seriesIds] of stackingGroups.entries()) {
       const seriesIdxs = orderIdsByCalcs({ ids: seriesIds, legend, frame });
       for (let j = seriesIdxs.length - 1; j > 0; j--) {

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

@@ -548,7 +548,6 @@ describe('UPlotConfigBuilder', () => {
   describe('Stacking', () => {
     it('allows stacking config', () => {
       const builder = new UPlotConfigBuilder();
-      builder.setStacking();
       builder.addSeries({
         drawStyle: GraphDrawStyle.Line,
         scaleKey: 'scale-x',

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -40,7 +40,6 @@ export class UPlotConfigBuilder {
   private scales: UPlotScaleBuilder[] = [];
   private bands: Band[] = [];
   private cursor: Cursor | undefined;
-  private isStacking = false;
   private select: uPlot.Select | undefined;
   private hasLeftAxis = false;
   private hooks: Hooks.Arrays = {};
@@ -122,10 +121,6 @@ export class UPlotConfigBuilder {
     this.select = select;
   }
 
-  setStacking(enabled = true) {
-    this.isStacking = enabled;
-  }
-
   addSeries(props: SeriesProps) {
     this.series.push(new UPlotSeriesBuilder(props));
   }
@@ -224,24 +219,8 @@ export class UPlotConfigBuilder {
     config.tzDate = this.tzDate;
     config.padding = this.padding;
 
-    if (this.isStacking) {
-      // Let uPlot handle bands and fills
+    if (this.bands.length) {
       config.bands = this.bands;
-    } else {
-      // When fillBelowTo option enabled, handle series bands fill manually
-      if (this.bands?.length) {
-        config.bands = this.bands;
-        const killFill = new Set<number>();
-        for (const b of config.bands) {
-          killFill.add(b.series[1]);
-        }
-
-        for (let i = 1; i < config.series.length; i++) {
-          if (killFill.has(i)) {
-            config.series[i].fill = undefined;
-          }
-        }
-      }
     }
 
     return config;

public/app/plugins/panel/barchart/utils.ts

@@ -213,7 +213,6 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
   }
 
   if (stackingGroups.size !== 0) {
-    builder.setStacking(true);
     for (const [_, seriesIds] of stackingGroups.entries()) {
       const seriesIdxs = orderIdsByCalcs({ ids: seriesIds, legend, frame });
       for (let j = seriesIdxs.length - 1; j > 0; j--) {