TimeSeries: fix too-thin bar widths of joined series with null values (#47367)

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

@@ -2,7 +2,13 @@ import { XYFieldMatchers } from './types';
 import { ArrayVector, DataFrame, FieldConfig, FieldType, outerJoinDataFrames, TimeRange } from '@grafana/data';
 import { nullToUndefThreshold } from './nullToUndefThreshold';
 import { applyNullInsertThreshold } from './nullInsertThreshold';
-import { AxisPlacement, GraphFieldConfig, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
+import {
+  AxisPlacement,
+  GraphDrawStyle,
+  GraphFieldConfig,
+  ScaleDistribution,
+  ScaleDistributionConfig,
+} from '@grafana/schema';
 import { FIXED_UNIT } from './GraphNG';
 
 // will mutate the DataFrame's fields' values
@@ -31,7 +37,23 @@ function applySpanNullsThresholds(frame: DataFrame) {
 
 export function preparePlotFrame(frames: DataFrame[], dimFields: XYFieldMatchers, timeRange?: TimeRange | null) {
   let alignedFrame = outerJoinDataFrames({
-    frames: frames.map((frame) => applyNullInsertThreshold(frame, null, timeRange?.to.valueOf())),
+    frames: frames.map((frame) => {
+      let fr = applyNullInsertThreshold(frame, null, timeRange?.to.valueOf());
+
+      // prevent minesweeper-expansion of nulls (gaps) when joining bars
+      // since bar width is determined from the minimum distance between non-undefined values
+      // (this strategy will still retain any original pre-join nulls, though)
+      fr.fields.forEach((f) => {
+        if (f.type === FieldType.number && f.config.custom?.drawStyle === GraphDrawStyle.Bars) {
+          f.config.custom = {
+            ...f.config.custom,
+            spanNulls: -1,
+          };
+        }
+      });
+
+      return fr;
+    }),
     joinBy: dimFields.x,
     keep: dimFields.y,
     keepOriginIndices: true,