refactor options, show labels and markers

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

@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react';
+import { OptionsProps } from './Options';
+import { Switch } from 'app/core/components/Switch/Switch';
+
+interface Props {
+  onChange: (item: any) => any;
+  options: OptionsProps;
+}
+
+export default class GaugeOptions extends PureComponent<Props> {
+  toggleThresholdLabels = () =>
+    this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
+
+  toggleThresholdMarkers = () =>
+    this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
+
+  render() {
+    const { showThresholdLabels, showThresholdMarkers } = this.props.options;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="page-heading">Gauge</h5>
+        <div className="gf-form-inline">
+          <Switch
+            label="Threshold labels"
+            labelClass="width-10"
+            checked={showThresholdLabels}
+            onChange={this.toggleThresholdLabels}
+          />
+        </div>
+        <div className="gf-form-inline">
+          <Switch
+            label="Threshold labels"
+            labelClass="width-10"
+            checked={showThresholdMarkers}
+            onChange={this.toggleThresholdMarkers}
+          />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react';
+import ValueOptions from './ValueOptions';
+import { PanelOptionsProps } from 'app/types';
+import GaugeOptions from './GaugeOptions';
+
+export interface OptionsProps {
+  decimals: number;
+  prefix: string;
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+  stat: string;
+  suffix: string;
+  unit: string;
+  thresholds: number[];
+  minValue: number;
+  maxValue: number;
+}
+
+export default class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
+  render() {
+    return (
+      <div>
+        <ValueOptions onChange={this.props.onChange} options={this.props.options} />
+        <GaugeOptions onChange={this.props.onChange} options={this.props.options} />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,85 @@
+import React, { PureComponent } from 'react';
+import { Label } from 'app/core/components/Label/Label';
+import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
+import { OptionsProps } from './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' },
+];
+
+const labelWidth = 6;
+
+interface Props {
+  onChange: (arg: any) => void;
+  options: OptionsProps;
+}
+
+export default class ValueOptions extends PureComponent<Props> {
+  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+
+  onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
+
+  onDecimalChange = event => {
+    if (!isNaN(event.target.value)) {
+      this.props.onChange({ ...this.props.options, decimals: event.target.value });
+    }
+  };
+
+  onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value });
+
+  onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value });
+
+  render() {
+    const { stat, unit, decimals, prefix, suffix } = this.props.options;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="page-heading">Value</h5>
+        <div className="gf-form-inline">
+          <Label width={labelWidth}>Stat</Label>
+          <SimplePicker
+            width={12}
+            options={statOptions}
+            getOptionLabel={i => i.text}
+            getOptionValue={i => i.value}
+            onSelected={this.onStatChange}
+            value={statOptions.find(option => option.value === stat)}
+          />
+        </div>
+        <div className="gf-form-inline">
+          <Label width={labelWidth}>Unit</Label>
+          <UnitPicker defaultValue={unit} onSelected={value => this.onUnitChange(value)} />
+        </div>
+        <div className="gf-form-inline">
+          <Label width={labelWidth}>Decimals</Label>
+          <input
+            className="gf-form-input width-12"
+            type="number"
+            placeholder="auto"
+            value={decimals || ''}
+            onChange={this.onDecimalChange}
+          />
+        </div>
+        <div className="gf-form-inline">
+          <Label width={labelWidth}>Prefix</Label>
+          <input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
+        </div>
+        <div className="gf-form-inline">
+          <Label width={labelWidth}>Suffix</Label>
+          <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -1,34 +1,10 @@
 import React, { PureComponent } from 'react';
-import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
-import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
 import Gauge from 'app/viz/Gauge';
-import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
+import Options, { OptionsProps } from './Options';
+import { NullValueMode, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 
-export interface Options {
-  decimals: number;
-  prefix: string;
-  stat: string;
-  suffix: string;
-  unit: string;
-}
-
-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' },
-];
+interface Props extends PanelProps<OptionsProps> {}
 
 class GaugePanel extends PureComponent<Props> {
   render() {
@@ -43,64 +19,4 @@ class GaugePanel extends PureComponent<Props> {
   }
 }
 
-class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
-  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
-
-  onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
-
-  onDecimalChange = event => {
-    if (!isNaN(event.target.value)) {
-      this.props.onChange({ ...this.props.options, decimals: event.target.value });
-    }
-  };
-
-  onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value });
-
-  onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value });
-
-  render() {
-    const { stat, unit, decimals, prefix, suffix } = this.props.options;
-    return (
-      <div>
-        <div className="section gf-form-group">
-          <h5 className="page-heading">Value</h5>
-          <div className="gf-form-inline">
-            <Label width={5}>Stat</Label>
-            <SimplePicker
-              width={12}
-              options={statOptions}
-              getOptionLabel={i => i.text}
-              getOptionValue={i => i.value}
-              onSelected={this.onStatChange}
-              value={statOptions.find(option => option.value === stat)}
-            />
-          </div>
-          <div className="gf-form-inline">
-            <Label width={5}>Unit</Label>
-            <UnitPicker defaultValue={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={decimals || ''}
-              onChange={this.onDecimalChange}
-            />
-          </div>
-          <div className="gf-form-inline">
-            <Label width={5}>Prefix</Label>
-            <input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
-          </div>
-          <div className="gf-form-inline">
-            <Label width={5}>Suffix</Label>
-            <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export { GaugePanel as Panel, GaugeOptions as PanelOptions };
+export { GaugePanel as Panel, Options as PanelOptions };

public/app/viz/Gauge.tsx

@@ -7,15 +7,15 @@ import kbn from '../core/utils/kbn';
 interface Props {
   decimals: number;
   timeSeries: TimeSeriesVMs;
-  minValue?: number;
-  maxValue?: number;
-  showThresholdMarkers?: boolean;
-  thresholds?: number[];
-  showThresholdLables?: boolean;
+  minValue: number;
+  maxValue: number;
+  showThresholdMarkers: boolean;
+  thresholds: number[];
+  showThresholdLabels: boolean;
   unit: string;
   width: number;
   height: number;
-  stat?: string;
+  stat: string;
   prefix: string;
   suffix: string;
 }
@@ -23,7 +23,6 @@ interface Props {
 const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
 
 export class Gauge extends PureComponent<Props> {
-  parentElement: any;
   canvasElement: any;
 
   static defaultProps = {
@@ -31,7 +30,7 @@ export class Gauge extends PureComponent<Props> {
     maxValue: 100,
     prefix: '',
     showThresholdMarkers: true,
-    showThresholdLables: false,
+    showThresholdLabels: false,
     suffix: '',
     thresholds: [0, 100],
   };
@@ -56,7 +55,7 @@ export class Gauge extends PureComponent<Props> {
       timeSeries,
       maxValue,
       minValue,
-      showThresholdLables,
+      showThresholdLabels,
       showThresholdMarkers,
       thresholds,
       width,
@@ -64,6 +63,10 @@ export class Gauge extends PureComponent<Props> {
       stat,
     } = this.props;
 
+    console.log('-------------------');
+    console.log('showThresholdMarkers', showThresholdMarkers);
+    console.log('showThresholdLabels', showThresholdLabels);
+
     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)';
@@ -98,7 +101,7 @@ export class Gauge extends PureComponent<Props> {
           threshold: {
             values: formattedThresholds,
             label: {
-              show: showThresholdLables,
+              show: showThresholdLabels,
               margin: thresholdMarkersWidth + 1,
               font: { size: thresholdLabelFontSize },
             },
@@ -144,7 +147,7 @@ export class Gauge extends PureComponent<Props> {
     const { height, width } = this.props;
 
     return (
-      <div className="singlestat-panel" ref={element => (this.parentElement = element)}>
+      <div className="singlestat-panel">
         <div
           style={{
             height: `${height * 0.9}px`,