Replace non-finite values and null-fill across timerange (#69919)

* Replace non-finite values and null-fill across timerange

* PR mods, fix tests, add test dashboard

* regen jsonnet

* poke gdev dash

* pr mods

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

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

@@ -43,5 +43,9 @@ export function preparePlotFrame(sparkline: FieldSparkline, config?: FieldConfig
     frame = sortDataFrame(frame, 0);
   }
 
-  return applyNullInsertThreshold({ frame });
+  return applyNullInsertThreshold({
+    frame,
+    refFieldPseudoMin: sparkline.timeRange?.from.valueOf(),
+    refFieldPseudoMax: sparkline.timeRange?.to.valueOf(),
+  });
 }

packages/grafana-ui/src/components/Table/SparklineCell.tsx

@@ -40,6 +40,20 @@ export const SparklineCell = (props: TableCellProps) => {
     );
   }
 
+  // Get the step from the first two values to null-fill the x-axis based on timerange
+  if (sparkline.x && !sparkline.x.config.interval && sparkline.x.values.length > 1) {
+    sparkline.x.config.interval = sparkline.x.values[1] - sparkline.x.values[0];
+  }
+
+  // Remove non-finite values, e.g: NaN, +/-Infinity
+  sparkline.y.values = sparkline.y.values.map((v) => {
+    if (!Number.isFinite(v)) {
+      return null;
+    } else {
+      return v;
+    }
+  });
+
   const range = getMinMaxAndDelta(sparkline.y);
   sparkline.y.config.min = range.min;
   sparkline.y.config.max = range.max;
@@ -101,5 +115,5 @@ function getTableSparklineCellOptions(field: Field): TableSparklineCellOptions {
   if (options.type === TableCellDisplayMode.Sparkline) {
     return options;
   }
-  throw new Error(`Excpected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`);
+  throw new Error(`Expected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`);
 }