TimeSeries: Improved constantY rendering parity with Graph (old) (#51401)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

.betterer.results

@@ -2219,9 +2219,11 @@ exports[`better eslint`] = {
       [56, 22, 24, "Do not use any type assertions.", "4121028738"],
       [56, 43, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "packages/grafana-ui/src/components/TimeSeries/utils.ts:1695012447": [
+    "packages/grafana-ui/src/components/TimeSeries/utils.ts:1896295166": [
-      [33, 29, 3, "Unexpected any. Specify a different type.", "193409811"],
+      [34, 29, 3, "Unexpected any. Specify a different type.", "193409811"],
-      [135, 19, 146, "Do not use any type assertions.", "3723122882"]
+      [136, 19, 146, "Do not use any type assertions.", "3723122882"],
+      [308, 12, 73, "Do not use any type assertions.", "587500217"],
+      [311, 17, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
     "packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx:1133352709": [
       [10, 15, 780, "Do not use any type assertions.", "3533394757"]
@@ -2329,13 +2331,13 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/uPlot/types.ts:1918909040": [
       [16, 26, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "packages/grafana-ui/src/components/uPlot/utils.ts:20167453": [
+    "packages/grafana-ui/src/components/uPlot/utils.ts:1200596632": [
       [70, 13, 20, "Do not use any type assertions.", "1571376654"],
       [131, 20, 34, "Do not use any type assertions.", "1148863494"],
       [134, 11, 35, "Do not use any type assertions.", "2376372234"],
       [136, 11, 45, "Do not use any type assertions.", "1627514634"],
       [164, 13, 41, "Do not use any type assertions.", "1747339107"],
-      [261, 14, 32, "Do not use any type assertions.", "319021204"]
+      [264, 14, 32, "Do not use any type assertions.", "319021204"]
     ],
     "packages/grafana-ui/src/options/builder/axis.tsx:1832382450": [
       [91, 14, 30, "Do not use any type assertions.", "3478399522"],

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

@@ -25,6 +25,7 @@ import {
   ScaleDirection,
   ScaleOrientation,
   StackingMode,
+  GraphTransform,
 } from '@grafana/schema';
 
 import { buildScaleKey } from '../GraphNG/utils';
@@ -285,6 +286,35 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
       if (customRenderedFields.indexOf(dispName) >= 0) {
         pathBuilder = () => null;
         pointsBuilder = () => undefined;
+      } else if (customConfig.transform === GraphTransform.Constant) {
+        // patch some monkeys!
+        const defaultBuilder = uPlot.paths!.linear!();
+
+        pathBuilder = (u, seriesIdx) => {
+          //eslint-disable-next-line
+          const _data: any[] = (u as any)._data; // uplot.AlignedData not exposed in types
+
+          // the data we want the line renderer to pull is x at each plot edge with paired flat y values
+
+          const r = getTimeRange();
+          let xData = [r.from.valueOf(), r.to.valueOf()];
+          let firstY = _data[seriesIdx].find((v: number | null | undefined) => v != null);
+          let yData = [firstY, firstY];
+          let fauxData = _data.slice();
+          fauxData[0] = xData;
+          fauxData[seriesIdx] = yData;
+
+          //eslint-disable-next-line
+          return defaultBuilder(
+            {
+              ...u,
+              _data: fauxData,
+            } as any,
+            seriesIdx,
+            0,
+            1
+          );
+        };
       }
 
       if (customConfig.fillBelowTo) {

packages/grafana-ui/src/components/uPlot/utils.test.ts

@@ -192,8 +192,8 @@ describe('preparePlotData2', () => {
           ],
           Array [
             -10,
-            -10,
+            undefined,
-            -10,
+            undefined,
           ],
           Array [
             10,

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

@@ -216,7 +216,10 @@ export function preparePlotData2(
 
     // apply transforms
     if (custom.transform === GraphTransform.Constant) {
-      vals = Array(vals.length).fill(vals[0]);
+      let firstValIdx = vals.findIndex((v) => v != null);
+      let firstVal = vals[firstValIdx];
+      vals = Array(vals.length).fill(undefined);
+      vals[firstValIdx] = firstVal;
     } else {
       vals = vals.slice();