Fixed gauge issue that will require migration later and also value options editor did not handle null decimals or 0 decimals

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

@@ -9,7 +9,7 @@ import { Themeable } from '../../index';
 type TimeSeriesValue = string | number | null;
 
 export interface Props extends Themeable {
-  decimals: number;
+  decimals?: number | null;
   height: number;
   valueMappings: ValueMapping[];
   maxValue: number;

public/app/plugins/panel/gauge/SingleStatValueEditor.tsx

@@ -35,7 +35,15 @@ export class SingleStatValueEditor extends PureComponent<Props> {
 
   onDecimalChange = event => {
     if (!isNaN(event.target.value)) {
-      this.props.onChange({ ...this.props.options, decimals: event.target.value });
+      this.props.onChange({
+        ...this.props.options,
+        decimals: parseInt(event.target.value, 10),
+      });
+    } else {
+      this.props.onChange({
+        ...this.props.options,
+        decimals: null,
+      });
     }
   };
 
@@ -45,6 +53,11 @@ export class SingleStatValueEditor extends PureComponent<Props> {
   render() {
     const { stat, unit, decimals, prefix, suffix } = this.props.options;
 
+    let decimalsString = '';
+    if (Number.isFinite(decimals)) {
+      decimalsString = decimals.toString();
+    }
+
     return (
       <PanelOptionsGroup title="Value">
         <div className="gf-form">
@@ -65,7 +78,7 @@ export class SingleStatValueEditor extends PureComponent<Props> {
           labelWidth={labelWidth}
           placeholder="auto"
           onChange={this.onDecimalChange}
-          value={decimals || ''}
+          value={decimalsString}
           type="number"
         />
         <FormField label="Prefix" labelWidth={labelWidth} onChange={this.onPrefixChange} value={prefix || ''} />

public/app/plugins/panel/gauge/types.ts

@@ -15,7 +15,7 @@ export interface SingleStatValueOptions {
   suffix: string;
   stat: string;
   prefix: string;
-  decimals: number;
+  decimals?: number | null;
 }
 
 export const defaults: GaugeOptions = {
@@ -26,7 +26,7 @@ export const defaults: GaugeOptions = {
   valueOptions: {
     prefix: '',
     suffix: '',
-    decimals: 0,
+    decimals: null,
     stat: 'avg',
     unit: 'none',
   },