DataFrame: insert null values along interval (#44622)

public/app/plugins/panel/state-timeline/timeline.ts

@@ -41,6 +41,7 @@ export interface TimelineCoreOptions {
   colWidth?: number;
   theme: GrafanaTheme2;
   showValue: VisibilityMode;
+  mergeValues?: boolean;
   isDiscrete: (seriesIdx: number) => boolean;
   getValueColor: (seriesIdx: number, value: any) => string;
   label: (seriesIdx: number) => string;
@@ -62,6 +63,7 @@ export function getConfig(opts: TimelineCoreOptions) {
     rowHeight = 0,
     colWidth = 0,
     showValue,
+    mergeValues = false,
     theme,
     label,
     formatValue,
@@ -212,11 +214,16 @@ export function getConfig(opts: TimelineCoreOptions) {
         walk(rowHeight, sidx - 1, numSeries, yDim, (iy, y0, height) => {
           if (mode === TimelineMode.Changes) {
             for (let ix = 0; ix < dataY.length; ix++) {
-              if (dataY[ix] != null) {
+              let yVal = dataY[ix];
+
+              if (yVal != null) {
                 let left = Math.round(valToPosX(dataX[ix], scaleX, xDim, xOff));
 
                 let nextIx = ix;
-                while (dataY[++nextIx] === undefined && nextIx < dataY.length) {}
+                while (
+                  ++nextIx < dataY.length &&
+                  (dataY[nextIx] === undefined || (mergeValues && dataY[nextIx] === yVal))
+                ) {}
 
                 // to now (not to end of chart)
                 let right =
@@ -236,7 +243,7 @@ export function getConfig(opts: TimelineCoreOptions) {
                   strokeWidth,
                   iy,
                   ix,
-                  dataY[ix],
+                  yVal,
                   discrete
                 );
 

public/app/plugins/panel/state-timeline/utils.test.ts

@@ -54,12 +54,12 @@ describe('prepare timeline graph', () => {
     const field = out.fields.find((f) => f.name === 'b');
     expect(field?.values.toArray()).toMatchInlineSnapshot(`
       Array [
+        1,
         1,
         undefined,
-        undefined,
-        undefined,
+        1,
+        2,
         2,
-        undefined,
         null,
         2,
         3,

public/app/plugins/panel/state-timeline/utils.ts

@@ -69,6 +69,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
   colWidth,
   showValue,
   alignValue,
+  mergeValues,
 }) => {
   const builder = new UPlotConfigBuilder(timeZone);
 
@@ -98,6 +99,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
     mode: mode!,
     numSeries: frame.fields.length - 1,
     isDiscrete: (seriesIdx) => isDiscrete(frame.fields[seriesIdx]),
+    mergeValues,
     rowHeight: rowHeight!,
     colWidth: colWidth,
     showValue: showValue!,
@@ -329,7 +331,6 @@ export function mergeThresholdValues(field: Field, theme: GrafanaTheme2): Field
     textToColor.set(items[i].label, items[i].color!);
   }
 
-  let prev: Threshold | undefined = undefined;
   let input = field.values.toArray();
   const vals = new Array<String | undefined>(field.values.length);
   if (thresholds.mode === ThresholdsMode.Percentage) {
@@ -347,19 +348,21 @@ export function mergeThresholdValues(field: Field, theme: GrafanaTheme2): Field
     const v = input[i];
     if (v == null) {
       vals[i] = v;
-      prev = undefined;
-    }
-    const active = getActiveThreshold(v, thresholds.steps);
-    if (active === prev) {
-      vals[i] = undefined;
     } else {
-      vals[i] = thresholdToText.get(active);
+      vals[i] = thresholdToText.get(getActiveThreshold(v, thresholds.steps));
     }
-    prev = active;
   }
 
   return {
     ...field,
+    config: {
+      ...field.config,
+      custom: {
+        ...field.config.custom,
+        // magic value for join() to leave nulls alone
+        spanNulls: -1,
+      },
+    },
     type: FieldType.string,
     values: new ArrayVector(vals),
     display: (value: string) => ({
@@ -415,18 +418,6 @@ export function prepareTimelineFields(
               },
             },
           };
-
-          if (mergeValues) {
-            let merged = unsetSameFutureValues(field.values.toArray());
-            if (merged) {
-              fields.push({
-                ...field,
-                values: new ArrayVector(merged),
-              });
-              changed = true;
-              continue;
-            }
-          }
           fields.push(field);
           break;
         default: