From 0ca32f0c61473ab4ea25d1c991eeef7befc62a3d Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 25 Apr 2022 11:46:00 -0500
Subject: [PATCH] TimeSeries: use positive stacks for 0-valued series (#48197)

---
 .../src/components/uPlot/utils.test.ts        | 95 +++++++++----------
 .../grafana-ui/src/components/uPlot/utils.ts  |  7 +-
 2 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/utils.test.ts b/packages/grafana-ui/src/components/uPlot/utils.test.ts
index 09df64ff81c..6075349a62d 100644
--- a/packages/grafana-ui/src/components/uPlot/utils.test.ts
+++ b/packages/grafana-ui/src/components/uPlot/utils.test.ts
@@ -230,29 +230,29 @@ describe('preparePlotData2', () => {
         ],
       });
       expect(preparePlotData2(df, getStackingGroups(df))).toMatchInlineSnapshot(`
-              Array [
-                Array [
-                  9997,
-                  9998,
-                  9999,
-                ],
-                Array [
-                  -10,
-                  20,
-                  10,
-                ],
-                Array [
-                  10,
-                  10,
-                  10,
-                ],
-                Array [
-                  20,
-                  20,
-                  20,
-                ],
-              ]
-          `);
+        Array [
+          Array [
+            9997,
+            9998,
+            9999,
+          ],
+          Array [
+            -10,
+            20,
+            10,
+          ],
+          Array [
+            10,
+            10,
+            10,
+          ],
+          Array [
+            20,
+            20,
+            20,
+          ],
+        ]
+      `);
     });
 
     it('standard', () => {
@@ -289,14 +289,14 @@ describe('preparePlotData2', () => {
             10,
           ],
           Array [
-            0,
-            30,
-            20,
+            10,
+            10,
+            10,
           ],
           Array [
-            20,
-            50,
-            40,
+            30,
+            30,
+            30,
           ],
         ]
       `);
@@ -345,19 +345,19 @@ describe('preparePlotData2', () => {
             10,
           ],
           Array [
+            10,
+            10,
+            10,
+          ],
+          Array [
+            -30,
             0,
-            30,
-            20,
+            -10,
           ],
           Array [
+            -40,
+            -10,
             -20,
-            -20,
-            -20,
-          ],
-          Array [
-            -30,
-            -30,
-            -30,
           ],
         ]
       `);
@@ -413,14 +413,14 @@ describe('preparePlotData2', () => {
             10,
           ],
           Array [
-            0,
-            30,
-            20,
+            10,
+            10,
+            10,
           ],
           Array [
-            20,
-            50,
-            40,
+            30,
+            30,
+            30,
           ],
           Array [
             1,
@@ -580,13 +580,13 @@ describe('auto stacking groups', () => {
           "dir": -1,
           "series": Array [
             1,
-            3,
           ],
         },
         Object {
           "dir": 1,
           "series": Array [
             2,
+            3,
           ],
         },
       ]
@@ -622,11 +622,6 @@ describe('auto stacking groups', () => {
           "series": Array [
             1,
             2,
-          ],
-        },
-        Object {
-          "dir": -1,
-          "series": Array [
             3,
           ],
         },
diff --git a/packages/grafana-ui/src/components/uPlot/utils.ts b/packages/grafana-ui/src/components/uPlot/utils.ts
index 9c76ed929a3..0e8923bb387 100755
--- a/packages/grafana-ui/src/components/uPlot/utils.ts
+++ b/packages/grafana-ui/src/components/uPlot/utils.ts
@@ -115,16 +115,17 @@ export function getStackingGroups(frame: DataFrame) {
     // will this be stacked up or down after any transforms applied
     let vals = values.toArray();
     let transform = custom.transform;
+    let firstValue = vals.find((v) => v != null);
     let stackDir =
       transform === GraphTransform.Constant
-        ? vals[0] > 0
+        ? firstValue >= 0
           ? StackDirection.Pos
           : StackDirection.Neg
         : transform === GraphTransform.NegativeY
-        ? vals.some((v) => v > 0)
+        ? firstValue >= 0
           ? StackDirection.Neg
           : StackDirection.Pos
-        : vals.some((v) => v > 0)
+        : firstValue >= 0
         ? StackDirection.Pos
         : StackDirection.Neg;