initial stuff

public/app/core/components/Picker/SimplePicker.tsx

@@ -6,8 +6,8 @@ import ResetStyles from './ResetStyles';
 interface Props {
   className?: string;
   defaultValue?: any;
-  getOptionLabel: (item: any) => string;
-  getOptionValue: (item: any) => string;
+  getOptionLabel?: (item: any) => string;
+  getOptionValue?: (item: any) => string;
   onSelected: (item: any) => {} | void;
   options: any[];
   placeholder?: string;

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

+import React, { PureComponent } from 'react';
+import { Label } from 'app/core/components/Label/Label';
+import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import { OptionModuleProps } from './module';
+import { RangeMap, ValueMap } from 'app/types';
+
+interface State {
+  valueMaps: ValueMap[];
+  rangeMaps: RangeMap[];
+}
+
+enum MappingType {
+  ValueToText = 1,
+  RangeToText = 2,
+}
+
+const mappingOptions = [
+  { name: 'Value to text', value: MappingType.ValueToText },
+  { name: 'Range to text', value: MappingType.RangeToText },
+];
+
+export default class ValueMappings extends PureComponent<OptionModuleProps, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      valueMaps: props.options.valueMaps,
+      rangeMaps: props.options.rangeMaps,
+    };
+  }
+  onMappingTypeChange = option => this.props.onChange({ ...this.props.options, mappingType: option.value });
+
+  addValueMap = () =>
+    this.setState(prevState => ({
+      valueMaps: [...prevState.valueMaps, { op: '', value: '', text: '' }],
+    }));
+
+  addRangeMap = () => {
+    this.setState = () =>
+      this.setState(prevState => ({
+        valueMaps: [...prevState.valueMaps, { op: '', value: '', text: '', from: '', to: '' }],
+      }));
+  };
+
+  updateGauge = () => {};
+
+  renderValueMapList() {
+    const { mappingType, rangeMaps, valueMaps } = this.props.options;
+
+    if (mappingType === MappingType.RangeToText) {
+      return (
+        <div>
+          {rangeMaps.length > 0
+            ? rangeMaps.map((range, index) => {
+                return <div>{`${range.from}-${range.to}`}</div>;
+              })
+            : 'aint no ranges, add one?'}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        {valueMaps.length > 0
+          ? valueMaps.map((value, index) => {
+              return <div>{`${value}`}</div>;
+            })
+          : 'aint no values, add one?'}
+      </div>
+    );
+  }
+
+  render() {
+    const { mappingType } = this.props.options;
+
+    return (
+      <div className="gf-form-group">
+        <div className="gf-form">
+          <Label width={5}>Type</Label>
+          <SimplePicker
+            options={mappingOptions}
+            defaultValue={MappingType.ValueToText}
+            getOptionLabel={i => i.name}
+            onSelected={option => this.onMappingTypeChange(option)}
+            width={5}
+            value={mappingType}
+          />
+        </div>
+        <div className="section gf-form-group">
+          <h5 className="page-heading">Set value mappings</h5>
+          <div className="gf-form">{this.renderValueMapList()}</div>
+        </div>
+      </div>
+    );
+  }
+}

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

 import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
-import { NullValueMode, PanelOptionsProps, PanelProps, Threshold } from 'app/types';
+import { NullValueMode, PanelOptionsProps, PanelProps, RangeMap, Threshold, ValueMap } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import ValueOptions from './ValueOptions';
 import GaugeOptions from './GaugeOptions';
 import Thresholds from './Thresholds';
+import ValueMappings from './ValueMappings';
 
 export interface OptionsProps {
   decimals: number;
@@ -15,6 +16,9 @@ export interface OptionsProps {
   suffix: string;
   unit: string;
   thresholds: Threshold[];
+  valueMaps: ValueMap[];
+  rangeMaps: RangeMap[];
+  mappingType: number;
 }
 
 export interface OptionModuleProps {
@@ -52,11 +56,19 @@ class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
   static defaultProps = defaultProps;
 
   render() {
+    const { onChange, options } = this.props;
     return (
       <div>
-        <ValueOptions onChange={this.props.onChange} options={this.props.options} />
-        <GaugeOptions onChange={this.props.onChange} options={this.props.options} />
-        <Thresholds onChange={this.props.onChange} options={this.props.options} />
+        <div className="form-section">
+          <div className="form-section__header">Options</div>
+          <ValueOptions onChange={onChange} options={options} />
+          <GaugeOptions onChange={onChange} options={options} />
+          <Thresholds onChange={onChange} options={options} />
+        </div>
+        <div className="form-section">
+          <div className="form-section__header">Value mappings</div>
+          <ValueMappings onChange={onChange} options={options} />
+        </div>
       </div>
     );
   }

public/app/types/index.ts

@@ -20,7 +20,7 @@ import {
   DataQueryResponse,
   DataQueryOptions,
 } from './series';
-import { PanelProps, PanelOptionsProps, Threshold } from './panel';
+import { PanelProps, PanelOptionsProps, RangeMap, Threshold, ValueMap } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
@@ -92,6 +92,8 @@ export {
   Threshold,
   ValidationEvents,
   ValidationRule,
+  ValueMap,
+  RangeMap,
 };
 
 export interface StoreState {

public/app/types/panel.ts

@@ -36,3 +36,17 @@ export interface Threshold {
   color?: string;
   canRemove: boolean;
 }
+
+interface BaseMap {
+  op: string;
+  text: string;
+}
+
+export interface ValueMap extends BaseMap {
+  value: string;
+}
+
+export interface RangeMap extends BaseMap {
+  from: string;
+  to: string;
+}