decimals

public/app/core/components/Picker/Unit/UnitGroup.tsx

@@ -15,11 +15,12 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
   };
 
   componentDidMount() {
-    const value = this.props.selectProps.value[this.props.selectProps.value.length - 1].value;
-    console.log(value);
+    if (this.props.selectProps) {
+      const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
 
-    if (value && this.props.options.some(option => option.value === value)) {
-      this.setState({ expanded: true });
+      if (value && this.props.options.some(option => option.value === value)) {
+        this.setState({ expanded: true });
+      }
     }
   }
 

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

@@ -7,12 +7,17 @@ import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 
 export interface Options {
-  stat: { value: string; text: string };
-  unit: { label: string; value: string };
+  decimals: number;
+  stat: string;
+  unit: string;
 }
 
 interface Props extends PanelProps<Options> {}
 
+interface OptionsState {
+  decimals: number;
+}
+
 const statOptions = [
   { value: 'min', text: 'Min' },
   { value: 'max', text: 'Max' },
@@ -40,13 +45,15 @@ class GaugePanel extends PureComponent<Props> {
   }
 }
 
-class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
-  onUnitChange = value => {
-    this.props.onChange({ ...this.props.options, unit: value });
-  };
+class GaugeOptions extends PureComponent<PanelOptionsProps<Options>, OptionsState> {
+  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+
+  onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
 
-  onStatChange = value => {
-    this.props.onChange({ ...this.props.options, stat: value });
+  onDecimalChange = event => {
+    if (!isNaN(event.target.value)) {
+      this.props.onChange({ ...this.props.options, decimals: event.target.value });
+    }
   };
 
   render() {
@@ -57,18 +64,27 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
           <div className="gf-form-inline">
             <Label width={5}>Stat</Label>
             <SimplePicker
-              defaultValue={statOptions.find(option => option.value === this.props.options.stat.value)}
               width={12}
               options={statOptions}
               getOptionLabel={i => i.text}
               getOptionValue={i => i.value}
               onSelected={this.onStatChange}
-              value={this.props.options.stat}
+              value={statOptions.find(option => option.value === this.props.options.stat)}
             />
           </div>
           <div className="gf-form-inline">
             <Label width={5}>Unit</Label>
-            <UnitPicker defaultValue={this.props.options.unit.value} onSelected={value => this.onUnitChange(value)} />
+            <UnitPicker defaultValue={this.props.options.unit} onSelected={value => this.onUnitChange(value)} />
+          </div>
+          <div className="gf-form-inline">
+            <Label width={5}>Decimals</Label>
+            <input
+              className="gf-form-input width-12"
+              type="number"
+              placeholder="auto"
+              value={this.props.options.decimals || ''}
+              onChange={this.onDecimalChange}
+            />
           </div>
         </div>
       </div>

public/app/viz/Gauge.tsx

@@ -5,16 +5,17 @@ import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
 interface Props {
+  decimals: number;
   timeSeries: TimeSeriesVMs;
   minValue?: number;
   maxValue?: number;
   showThresholdMarkers?: boolean;
   thresholds?: number[];
   showThresholdLables?: boolean;
-  unit: { label: string; value: string };
+  unit: string;
   width: number;
   height: number;
-  stat?: { value: string; text: string };
+  stat?: string;
 }
 
 const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
@@ -40,10 +41,10 @@ export class Gauge extends PureComponent<Props> {
   }
 
   formatValue(value) {
-    const { unit } = this.props;
+    const { decimals, unit } = this.props;
 
-    const formatFunc = kbn.valueFormats[unit.value];
-    return formatFunc(value);
+    const formatFunc = kbn.valueFormats[unit];
+    return formatFunc(value, decimals);
   }
 
   draw() {
@@ -59,8 +60,6 @@ export class Gauge extends PureComponent<Props> {
       stat,
     } = this.props;
 
-    console.log(stat);
-
     const dimension = Math.min(width, height * 1.3);
     const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
     const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
@@ -105,7 +104,9 @@ export class Gauge extends PureComponent<Props> {
           value: {
             color: fontColor,
             formatter: () => {
-              return this.formatValue(timeSeries[0].stats[stat.value]);
+              if (timeSeries[0]) {
+                return this.formatValue(timeSeries[0].stats[stat]);
+              }
             },
             font: {
               size: fontSize,