changing type and started on Gauge

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

@@ -159,7 +159,7 @@ export default class MappingRow extends PureComponent<Props, State> {
             value={mappingOptions.find(o => o.value === mapping.type)}
             value={mappingOptions.find(o => o.value === mapping.type)}
             getOptionLabel={i => i.label}
             getOptionLabel={i => i.label}
             getOptionValue={i => i.value}
             getOptionValue={i => i.value}
-            onSelected={type => this.onMappingTypeChange(type)}
+            onSelected={type => this.onMappingTypeChange(type.value)}
             width={7}
             width={7}
           />
           />
         </div>
         </div>

public/app/viz/Gauge.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
 import $ from 'jquery';
-import { Threshold, TimeSeriesVMs } from 'app/types';
+import { RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
 import config from '../core/config';
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 import kbn from '../core/utils/kbn';
 
 
 interface Props {
 interface Props {
   decimals: number;
   decimals: number;
+  height: number;
+  mappings: Array<RangeMap | ValueMap>;
+  maxValue: number;
+  minValue: number;
+  prefix: string;
   timeSeries: TimeSeriesVMs;
   timeSeries: TimeSeriesVMs;
-  showThresholdMarkers: boolean;
   thresholds: Threshold[];
   thresholds: Threshold[];
+  showThresholdMarkers: boolean;
   showThresholdLabels: boolean;
   showThresholdLabels: boolean;
-  unit: string;
-  width: number;
-  height: number;
   stat: string;
   stat: string;
-  prefix: string;
   suffix: string;
   suffix: string;
+  unit: string;
+  width: number;
 }
 }
 
 
 export class Gauge extends PureComponent<Props> {
 export class Gauge extends PureComponent<Props> {
   canvasElement: any;
   canvasElement: any;
 
 
   static defaultProps = {
   static defaultProps = {
-    minValue: 0,
     maxValue: 100,
     maxValue: 100,
+    mappings: [],
+    minValue: 0,
     prefix: '',
     prefix: '',
     showThresholdMarkers: true,
     showThresholdMarkers: true,
     showThresholdLabels: false,
     showThresholdLabels: false,
     suffix: '',
     suffix: '',
-    unit: 'none',
     thresholds: [
     thresholds: [
       { label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' },
       { label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' },
       { label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' },
       { label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' },
     ],
     ],
+    unit: 'none',
   };
   };
 
 
   componentDidMount() {
   componentDidMount() {