color picker

public/app/core/components/colorpicker/ColorPicker.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import $ from 'jquery';
 import Drop from 'tether-drop';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
@@ -11,29 +10,17 @@ export interface Props {
 }
 
 export class ColorPicker extends React.Component<Props, any> {
-  pickerElem: any;
+  pickerElem: HTMLElement;
   colorPickerDrop: any;
 
-  constructor(props) {
-    super(props);
-    this.openColorPicker = this.openColorPicker.bind(this);
-    this.closeColorPicker = this.closeColorPicker.bind(this);
-    this.setPickerElem = this.setPickerElem.bind(this);
-    this.onColorSelect = this.onColorSelect.bind(this);
-  }
-
-  setPickerElem(elem) {
-    this.pickerElem = $(elem);
-  }
-
-  openColorPicker() {
+  openColorPicker = () => {
     const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
 
     const dropContentElem = document.createElement('div');
     ReactDOM.render(dropContent, dropContentElem);
 
     const drop = new Drop({
-      target: this.pickerElem[0],
+      target: this.pickerElem,
       content: dropContentElem,
       position: 'top center',
       classes: 'drop-popover',
@@ -48,23 +35,23 @@ export class ColorPicker extends React.Component<Props, any> {
 
     this.colorPickerDrop = drop;
     this.colorPickerDrop.open();
-  }
+  };
 
-  closeColorPicker() {
+  closeColorPicker = () => {
     setTimeout(() => {
       if (this.colorPickerDrop && this.colorPickerDrop.tether) {
         this.colorPickerDrop.destroy();
       }
     }, 100);
-  }
+  };
 
-  onColorSelect(color) {
+  onColorSelect = color => {
     this.props.onChange(color);
-  }
+  };
 
   render() {
     return (
-      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={this.setPickerElem}>
+      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={element => (this.pickerElem = element)}>
         <div className="sp-preview">
           <div className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
         </div>

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

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames/bind';
 import { PanelOptionsProps, Threshold } from 'app/types';
 import { OptionsProps } from './module';
+import { ColorPicker } from '../../../core/components/colorpicker/ColorPicker';
 
 interface State {
   thresholds: Threshold[];
@@ -14,7 +15,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
     this.state = {
       thresholds: this.props.options.thresholds || [
-        { index: 0, label: 'Min', value: 0, canRemove: false },
+        { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
         { index: 1, label: 'Max', value: 100, canRemove: false },
       ],
       userAddedThresholds: 0,
@@ -36,7 +37,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
 
     this.setState(prevState => ({
-      thresholds: this.sortThresholds([...newThresholds, { index: index, label: '', value: value, canRemove: true }]),
+      thresholds: this.sortThresholds([
+        ...newThresholds,
+        { index: index, label: '', value: value, canRemove: true, color: '#ff851b' },
+      ]),
       userAddedThresholds: prevState.userAddedThresholds + 1,
     }));
   };
@@ -50,11 +54,26 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
   onChangeThresholdValue = (event, threshold) => {
     const { thresholds } = this.state;
-    const value = event.target.value;
 
     const newThresholds = thresholds.map(currentThreshold => {
       if (currentThreshold === threshold) {
-        currentThreshold = { ...currentThreshold, value: value };
+        currentThreshold = { ...currentThreshold, value: event.target.value };
+      }
+
+      return currentThreshold;
+    });
+
+    this.setState({
+      thresholds: newThresholds,
+    });
+  };
+
+  onChangeThresholdColor = (threshold, color) => {
+    const { thresholds } = this.state;
+
+    const newThresholds = thresholds.map(currentThreshold => {
+      if (currentThreshold === threshold) {
+        currentThreshold = { ...currentThreshold, color: color };
       }
 
       return currentThreshold;
@@ -83,9 +102,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { thresholds } = this.state;
 
     if (index === 0) {
-      return '#3aa655';
+      return thresholds[0].color;
     } else if (index < thresholds.length) {
-      return '#ff851b';
+      return thresholds[index].color;
     }
 
     return '#d44939';
@@ -94,17 +113,24 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   renderNoThresholds() {
     const { thresholds } = this.state;
 
+    const min = thresholds[0];
+    const max = thresholds[1];
+
     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">
+            <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, thresholds[0])}
-            value={thresholds[0].value}
+            onChange={event => this.onChangeThresholdValue(event, min)}
+            value={min.value}
           />
-          <div className="threshold-row-label">{thresholds[0].label}</div>
+          <div className="threshold-row-label">{min.label}</div>
         </div>
       </div>,
       <div className="threshold-row" key="add">
@@ -121,10 +147,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
           <input
             className="threshold-row-input"
             onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, thresholds[1])}
-            value={thresholds[1].value}
+            onChange={event => this.onChangeThresholdValue(event, max)}
+            value={max.value}
           />
-          <div className="threshold-row-label">{thresholds[1].label}</div>
+          <div className="threshold-row-label">{max.label}</div>
         </div>
       </div>,
     ];
@@ -143,7 +169,16 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       return (
         <div className={rowStyle} key={`${threshold.index}-${index}`}>
           <div className="threshold-row-inner">
-            <div className="threshold-row-color" />
+            <div className="threshold-row-color">
+              {threshold.color && (
+                <div className="threshold-row-color-inner">
+                  <ColorPicker
+                    color={threshold.color}
+                    onChange={color => this.onChangeThresholdColor(threshold, color)}
+                  />
+                </div>
+              )}
+            </div>
             <input
               className="threshold-row-input"
               type="text"

public/sass/components/_thresholds.scss

@@ -33,6 +33,17 @@
 .threshold-row-color {
   width: 36px;
   border-right: 1px solid $input-label-border-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.threshold-row-color-inner {
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
 }
 
 .threshold-row-input {