Stat: Support no value in spark line (#78986)

packages/grafana-data/src/transformations/index.ts

@@ -23,3 +23,4 @@ export { ensureTimeField } from './transformers/convertFieldType';
 
 // Required for Sparklines util to work in @grafana/data, but ideally kept internal
 export { applyNullInsertThreshold } from './transformers/nulls/nullInsertThreshold';
+export { nullToValue } from './transformers/nulls/nullToValue';

packages/grafana-ui/src/components/BigValue/BigValue.story.tsx

@@ -57,6 +57,50 @@ interface StoryProps extends Partial<Props> {
   valueText: string;
 }
 
+export const ApplyNoValue: Story<StoryProps> = ({
+  valueText,
+  title,
+  colorMode,
+  graphMode,
+  height,
+  width,
+  color,
+  textMode,
+  justifyMode,
+}) => {
+  const theme = useTheme2();
+  const sparkline: FieldSparkline = {
+    y: {
+      name: '',
+      values: [1, 2, 3, null, null],
+      type: FieldType.number,
+      state: { range: { min: 1, max: 4, delta: 3 } },
+      config: {
+        noValue: '0',
+      },
+    },
+  };
+
+  return (
+    <BigValue
+      theme={theme}
+      width={width}
+      height={height}
+      colorMode={colorMode}
+      graphMode={graphMode}
+      textMode={textMode}
+      justifyMode={justifyMode}
+      value={{
+        text: valueText,
+        numeric: 5022,
+        color: color,
+        title,
+      }}
+      sparkline={graphMode === BigValueGraphMode.None ? undefined : sparkline}
+    />
+  );
+};
+
 export const Basic: Story<StoryProps> = ({
   valueText,
   title,
@@ -111,4 +155,16 @@ Basic.args = {
   textMode: BigValueTextMode.Auto,
 };
 
+ApplyNoValue.args = {
+  valueText: '$5022',
+  title: 'Total Earnings',
+  colorMode: BigValueColorMode.Value,
+  graphMode: BigValueGraphMode.Area,
+  justifyMode: BigValueJustifyMode.Auto,
+  width: 400,
+  height: 300,
+  color: 'red',
+  textMode: BigValueTextMode.Auto,
+};
+
 export default meta;

packages/grafana-ui/src/components/Sparkline/Sparkline.tsx

@@ -10,6 +10,7 @@ import {
   FieldSparkline,
   FieldType,
   getFieldColorModeForField,
+  nullToValue,
 } from '@grafana/data';
 import {
   AxisPlacement,
@@ -62,7 +63,8 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
   }
 
   static getDerivedStateFromProps(props: SparklineProps, state: State) {
-    const frame = preparePlotFrame(props.sparkline, props.config);
+    const _frame = preparePlotFrame(props.sparkline, props.config);
+    const frame = nullToValue(_frame);
     if (!frame) {
       return { ...state };
     }
@@ -96,6 +98,12 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
 
   getYRange(field: Field): Range.MinMax {
     let { min, max } = this.state.alignedDataFrame.fields[1].state?.range!;
+    const noValue = +this.state.alignedDataFrame.fields[1].config?.noValue!;
+
+    if (!Number.isNaN(noValue)) {
+      min = Math.min(min!, +noValue);
+      max = Math.max(max!, +noValue);
+    }
 
     if (min === max) {
       if (min === 0) {