picker and functionaliy

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

-import React, { PureComponent } from 'react';
-import { PanelOptionsProps } from 'app/types';
-
-interface Props {}
-
-export class GaugeOptions extends PureComponent<PanelOptionsProps<Props>> {
-  render() {
-    return (
-      <div>
-        <div className="section gf-form-group">
-          <h5 className="page-heading">Draw Modes</h5>
-        </div>
-      </div>
-    );
-  }
-}

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
 import Gauge from 'app/viz/Gauge';
-import { NullValueMode, PanelProps } from 'app/types';
+import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import { GaugeOptions } from './GaugeOptions';
+import { Label } from '../../../core/components/Label/Label';
+import SimplePicker from '../../../core/components/Picker/SimplePicker';
 
 
-export interface Options {}
+export interface Options {
+  stat: { value: string; text: string };
+}
 
 
 interface Props extends PanelProps<Options> {}
 interface Props extends PanelProps<Options> {}
 
 
+const statOptions = [
+  { value: 'min', text: 'Min' },
+  { value: 'max', text: 'Max' },
+  { value: 'avg', text: 'Average' },
+  { value: 'current', text: 'Current' },
+  { value: 'total', text: 'Total' },
+  { value: 'name', text: 'Name' },
+  { value: 'first', text: 'First' },
+  { value: 'delta', text: 'Delta' },
+  { value: 'diff', text: 'Difference' },
+  { value: 'range', text: 'Range' },
+  { value: 'last_time', text: 'Time of last point' },
+];
+
 export class GaugePanel extends PureComponent<Props> {
 export class GaugePanel extends PureComponent<Props> {
   render() {
   render() {
     const { timeSeries, width, height } = this.props;
     const { timeSeries, width, height } = this.props;
@@ -17,8 +34,36 @@ export class GaugePanel extends PureComponent<Props> {
       nullValueMode: NullValueMode.Ignore,
       nullValueMode: NullValueMode.Ignore,
     });
     });
 
 
+    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
+  }
+}
+
+class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
+  onStatChange = value => {
+    this.props.onChange({ ...this.props.options, stat: value });
+  };
+
+  render() {
+    const { stat } = this.props.options;
+
     return (
     return (
-      <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} height={height} width={width} />
+      <div>
+        <div className="section gf-form-group">
+          <h5 className="page-heading">Value</h5>
+          <div className="gf-form-inline">
+            <Label width={5}>Stat</Label>
+            <SimplePicker
+              defaultValue={statOptions.find(option => option.value === stat.value)}
+              width={11}
+              options={statOptions}
+              getOptionLabel={i => i.text}
+              getOptionValue={i => i.value}
+              onSelected={this.onStatChange}
+              value={stat}
+            />
+          </div>
+        </div>
+      </div>
     );
     );
   }
   }
 }
 }

public/app/viz/Gauge.tsx

@@ -5,13 +5,14 @@ import config from '../core/config';
 
 
 interface Props {
 interface Props {
   timeSeries: TimeSeriesVMs;
   timeSeries: TimeSeriesVMs;
-  minValue: number;
-  maxValue: number;
+  minValue?: number;
+  maxValue?: number;
   showThresholdMarkers?: boolean;
   showThresholdMarkers?: boolean;
   thresholds?: number[];
   thresholds?: number[];
   showThresholdLables?: boolean;
   showThresholdLables?: boolean;
   width: number;
   width: number;
   height: number;
   height: number;
+  stat?: { value: string; text: string };
 }
 }
 
 
 const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
 const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
@@ -25,7 +26,7 @@ export class Gauge extends PureComponent<Props> {
     maxValue: 100,
     maxValue: 100,
     showThresholdMarkers: true,
     showThresholdMarkers: true,
     showThresholdLables: false,
     showThresholdLables: false,
-    thresholds: [],
+    thresholds: [0, 100],
   };
   };
 
 
   componentDidMount() {
   componentDidMount() {
@@ -38,16 +39,19 @@ export class Gauge extends PureComponent<Props> {
 
 
   draw() {
   draw() {
     const {
     const {
+      timeSeries,
       maxValue,
       maxValue,
       minValue,
       minValue,
       showThresholdLables,
       showThresholdLables,
       showThresholdMarkers,
       showThresholdMarkers,
-      timeSeries,
       thresholds,
       thresholds,
       width,
       width,
       height,
       height,
+      stat,
     } = this.props;
     } = this.props;
 
 
+    console.log(stat);
+
     const dimension = Math.min(width, height * 1.3);
     const dimension = Math.min(width, height * 1.3);
     const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
     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)';
     const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
@@ -57,13 +61,11 @@ export class Gauge extends PureComponent<Props> {
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdLabelFontSize = fontSize / 2.5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
 
-    const formattedThresholds = [];
-
-    thresholds.forEach((threshold, index) => {
-      formattedThresholds.push({
+    const formattedThresholds = thresholds.map((threshold, index) => {
+      return {
         value: threshold,
         value: threshold,
         color: colors[index],
         color: colors[index],
-      });
+      };
     });
     });
 
 
     const options = {
     const options = {
@@ -94,7 +96,7 @@ export class Gauge extends PureComponent<Props> {
           value: {
           value: {
             color: fontColor,
             color: fontColor,
             formatter: () => {
             formatter: () => {
-              return Math.round(timeSeries[0].stats.avg);
+              return Math.round(timeSeries[0].stats[stat.value]);
             },
             },
             font: {
             font: {
               size: fontSize,
               size: fontSize,