starting with threshold refactor

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

@@ -15,7 +15,7 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
   onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
 
   render() {
-    const { showThresholdLabels, showThresholdMarkers } = this.props.options;
+    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options;
 
     return (
       <div className="section gf-form-group">
@@ -38,11 +38,11 @@ export default class GaugeOptions extends PureComponent<OptionModuleProps> {
         </div>
         <div className="gf-form-inline">
           <Label width={6}>Min value</Label>
-          <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} />
+          <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
         </div>
         <div className="gf-form-inline">
           <Label width={6}>Max value</Label>
-          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} />
+          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
         </div>
       </div>
     );

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

@@ -88,6 +88,7 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     );
   };
 
+  onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
   onBlur = () => {
     this.setState(prevState => ({
       thresholds: this.sortThresholds(prevState.thresholds),
@@ -116,47 +117,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
     return index < thresholds.length ? thresholds[index].color : BasicGaugeColor.Red;
   };
 
-  renderNoThresholds() {
-    const { thresholds } = this.state;
-
-    const min = thresholds[0];
-
-    return [
-      <div className="threshold-row threshold-row-min" key="min">
-        <div className="threshold-row-inner">
-          <div className="threshold-row-color">
-            <div className="threshold-row-color-inner">
-              <ColorPicker color={min.color} onChange={color => this.onChangeThresholdColor(min, color)} />
-            </div>
-          </div>
-          <input
-            className="threshold-row-input"
-            onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, min)}
-            value={min.value}
-          />
-          <div className="threshold-row-label">{min.label}</div>
-        </div>
-      </div>,
-      <div className="threshold-row" key="add">
-        <div className="threshold-row-inner">
-          <div onClick={() => this.onAddThreshold(1)} className="threshold-row-add">
-            <i className="fa fa-plus" />
-          </div>
-          <div className="threshold-row-add-label">Add new threshold by clicking the line.</div>
-        </div>
-      </div>,
-    ];
-  }
-
   renderThresholds() {
     const { thresholds } = this.state;
 
     return thresholds.map((threshold, index) => {
-      if (index === thresholds.length - 1) {
-        return null;
-      }
-
       const rowStyle = classNames({
         'threshold-row': true,
         'threshold-row-min': index === 0,
@@ -182,13 +146,9 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
               value={threshold.value}
               onBlur={this.onBlur}
             />
-            {threshold.canRemove ? (
-              <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
-                <i className="fa fa-times" />
-              </div>
-            ) : (
-              <div className="threshold-row-label">{threshold.label}</div>
-            )}
+            <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
+              <i className="fa fa-times" />
+            </div>
           </div>
         </div>
       );
@@ -260,38 +220,47 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
   renderIndicator() {
     const { thresholds } = this.state;
 
-    return thresholds.map((t, i) => {
-      if (i <= thresholds.length - 1) {
-        return this.renderIndicatorSection(i);
-      }
+    if (thresholds.length > 0) {
+      return thresholds.map((t, i) => {
+        if (i <= thresholds.length - 1) {
+          return this.renderIndicatorSection(i);
+        }
 
-      return null;
-    });
+        return null;
+      });
+    }
+
+    return (
+      <div className="indicator-section" style={{ height: '100%' }}>
+        <div
+          onClick={() => this.onAddThreshold(0)}
+          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
+        />
+      </div>
+    );
   }
 
   render() {
     const { thresholds } = this.state;
-    const max = thresholds[thresholds.length - 1];
 
     return (
       <div className="section gf-form-group">
         <h5 className="page-heading">Thresholds</h5>
+        <span>Click the colored line to add a threshold</span>
         <div className="thresholds">
           <div className="color-indicators">{this.renderIndicator()}</div>
           <div className="threshold-rows">
-            {thresholds.length > 2 ? this.renderThresholds() : this.renderNoThresholds()}
-            <div className="threshold-row threshold-row-max">
+            <div className="threshold-row threshold-row-base">
               <div className="threshold-row-inner">
-                <div className="threshold-row-color" />
-                <input
-                  className="threshold-row-input"
-                  onBlur={this.onBlur}
-                  onChange={event => this.onChangeThresholdValue(event, max)}
-                  value={max.value}
-                />
-                <div className="threshold-row-label">{max.label}</div>
+                <div className="threshold-row-color">
+                  <div className="threshold-row-color-inner">
+                    <ColorPicker color={BasicGaugeColor.Green} onChange={color => this.onChangeBaseColor(color)} />
+                  </div>
+                </div>
+                <div className="threshold-row-label">Base</div>
               </div>
             </div>
+            {thresholds.length > 0 && this.renderThresholds()}
           </div>
         </div>
       </div>

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

@@ -16,15 +16,18 @@ import {
 } from 'app/types';
 
 export interface OptionsProps {
+  baseColor: string;
   decimals: number;
+  mappings: Array<RangeMap | ValueMap>;
+  maxValue: number;
+  minValue: number;
   prefix: string;
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
   stat: string;
   suffix: string;
-  unit: string;
   thresholds: Threshold[];
-  mappings: Array<RangeMap | ValueMap>;
+  unit: string;
 }
 
 export interface OptionModuleProps {
@@ -34,6 +37,7 @@ export interface OptionModuleProps {
 
 export const defaultProps = {
   options: {
+    baseColor: BasicGaugeColor.Green,
     minValue: 0,
     maxValue: 100,
     prefix: '',
@@ -45,8 +49,8 @@ export const defaultProps = {
     unit: '',
     mappings: [],
     thresholds: [
-      { index: 0, label: 'Min', value: 0, canRemove: false, color: BasicGaugeColor.Green },
-      { index: 1, label: 'Max', value: 100, canRemove: false },
+      { index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
+      { index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
     ],
   },
 };

public/app/viz/Gauge.tsx

 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
+import { BasicGaugeColor, MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
 interface Props {
+  baseColor: string;
   decimals: number;
   height: number;
   mappings: Array<RangeMap | ValueMap>;
@@ -25,6 +26,7 @@ export class Gauge extends PureComponent<Props> {
   canvasElement: any;
 
   static defaultProps = {
+    baseColor: BasicGaugeColor.Green,
     maxValue: 100,
     mappings: [],
     minValue: 0,
@@ -32,11 +34,9 @@ export class Gauge extends PureComponent<Props> {
     showThresholdMarkers: true,
     showThresholdLabels: false,
     suffix: '',
-    thresholds: [
-      { label: 'Min', value: 0, color: 'rgba(50, 172, 45, 0.97)' },
-      { label: 'Max', value: 100, color: 'rgba(245, 54, 54, 0.9)' },
-    ],
+    thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }],
     unit: 'none',
+    stat: 'avg',
   };
 
   componentDidMount() {
@@ -92,12 +92,43 @@ export class Gauge extends PureComponent<Props> {
     return `${prefix} ${formattedValue} ${suffix}`;
   }
 
+  getFontColor(value) {
+    const { baseColor, thresholds } = this.props;
+
+    if (thresholds.length > 0) {
+      const foo = thresholds.filter(t => value <= t.value);
+
+      if (foo.length > 0) {
+        return foo[0].color;
+      }
+    }
+
+    return baseColor;
+  }
+
   draw() {
-    const { timeSeries, showThresholdLabels, showThresholdMarkers, thresholds, width, height, stat } = this.props;
+    const {
+      maxValue,
+      minValue,
+      timeSeries,
+      showThresholdLabels,
+      showThresholdMarkers,
+      thresholds,
+      width,
+      height,
+      stat,
+    } = this.props;
+
+    let value: string | number = '';
+
+    if (timeSeries[0]) {
+      value = timeSeries[0].stats[stat];
+    } else {
+      value = 'N/A';
+    }
 
     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)';
     const fontScale = parseInt('80', 10) / 100;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
@@ -113,12 +144,14 @@ export class Gauge extends PureComponent<Props> {
       };
     });
 
+    console.log(formattedThresholds);
+
     const options = {
       series: {
         gauges: {
           gauge: {
-            min: thresholds[0].value,
-            max: thresholds[thresholds.length - 1].value,
+            min: minValue,
+            max: maxValue,
             background: { color: backgroundColor },
             border: { color: null },
             shadow: { show: false },
@@ -139,10 +172,10 @@ export class Gauge extends PureComponent<Props> {
             width: thresholdMarkersWidth,
           },
           value: {
-            color: fontColor,
+            color: this.getFontColor(value),
             formatter: () => {
               if (timeSeries[0]) {
-                return this.formatValue(timeSeries[0].stats[stat]);
+                return this.formatValue(value);
               }
 
               return '';
@@ -157,11 +190,6 @@ export class Gauge extends PureComponent<Props> {
       },
     };
 
-    let value: string | number = 'N/A';
-    if (timeSeries.length) {
-      value = timeSeries[0].stats[stat];
-    }
-
     const plotSeries = {
       data: [[0, value]],
     };

public/sass/components/_thresholds.scss

@@ -65,7 +65,7 @@
   padding: 5px 8px;
 }
 
-.threshold-row-min {
+.threshold-row-base {
   margin-top: -22px;
 }