GraphNG: add spanNulls config option (#29512)

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

@@ -43,6 +43,7 @@ export function mapDimesions(match: XYFieldMatchers, frame: DataFrame, frames?:
 export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers): AlignedFrameWithGapTest | null {
 export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers): AlignedFrameWithGapTest | null {
   const valuesFromFrames: AlignedData[] = [];
   const valuesFromFrames: AlignedData[] = [];
   const sourceFields: Field[] = [];
   const sourceFields: Field[] = [];
+  let spanNulls = false;
 
 
   // Default to timeseries config
   // Default to timeseries config
   if (!fields) {
   if (!fields) {
@@ -79,6 +80,10 @@ export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers):
       }
       }
       alignedData.push(values);
       alignedData.push(values);
 
 
+      if (field.config.custom.spanNulls) {
+        spanNulls = true;
+      }
+
       // This will cache an appropriate field name in the field state
       // This will cache an appropriate field name in the field state
       getFieldDisplayName(field, frame, frames);
       getFieldDisplayName(field, frame, frames);
       sourceFields.push(field);
       sourceFields.push(field);
@@ -92,12 +97,22 @@ export function alignDataFrames(frames: DataFrame[], fields?: XYFieldMatchers):
   }
   }
 
 
   // do the actual alignment (outerJoin on the first arrays)
   // do the actual alignment (outerJoin on the first arrays)
-  const { data: alignedData, isGap } = outerJoinValues(valuesFromFrames);
+  let { data: alignedData, isGap } = outerJoinValues(valuesFromFrames);
 
 
   if (alignedData!.length !== sourceFields.length) {
   if (alignedData!.length !== sourceFields.length) {
     throw new Error('outerJoinValues lost a field?');
     throw new Error('outerJoinValues lost a field?');
   }
   }
 
 
+  // Wrap the gap function when span nulls exists
+  if (spanNulls) {
+    isGap = (u: uPlot, seriesIdx: number, dataIdx: number) => {
+      if (sourceFields[seriesIdx].config?.custom?.spanNulls) {
+        return false;
+      }
+      return isGap(u, seriesIdx, dataIdx);
+    };
+  }
+
   // Replace the values from the outer-join field
   // Replace the values from the outer-join field
   return {
   return {
     frame: {
     frame: {

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

@@ -55,6 +55,8 @@ export interface AxisConfig {
 
 
 export interface GraphFieldConfig extends LineConfig, AreaConfig, PointsConfig, AxisConfig {
 export interface GraphFieldConfig extends LineConfig, AreaConfig, PointsConfig, AxisConfig {
   mode?: GraphMode;
   mode?: GraphMode;
+
+  spanNulls?: boolean;
 }
 }
 
 
 export const graphFieldOptions = {
 export const graphFieldOptions = {

public/app/plugins/panel/graph3/module.tsx

@@ -83,6 +83,17 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
           showIf: c => c.points !== PointMode.Never,
           showIf: c => c.points !== PointMode.Never,
         })
         })
         .addRadio({
         .addRadio({
+          path: 'spanNulls',
+          name: 'Null values',
+          defaultValue: false,
+          settings: {
+            options: [
+              { label: 'Gaps', value: false },
+              { label: 'Connected', value: true },
+            ],
+          },
+        })
+        .addRadio({
           path: 'axisPlacement',
           path: 'axisPlacement',
           name: 'Placement',
           name: 'Placement',
           category: ['Axis'],
           category: ['Axis'],