Only enforce DEFAULT_COLORS when visualization type is gauge

Allows for fluid switching between single stat and gauge types without
conflict

ui/src/dashboards/components/CellEditorOverlay.js

@@ -24,11 +24,12 @@ import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
 import {AUTO_GROUP_BY} from 'shared/constants'
 import {
   COLOR_TYPE_THRESHOLD,
+  MIN_THRESHOLDS,
   MAX_THRESHOLDS,
-  DEFAULT_COLORS,
   GAUGE_COLORS,
   COLOR_TYPE_MIN,
   COLOR_TYPE_MAX,
+  DEFAULT_COLORS,
   validateColors,
 } from 'src/dashboards/constants/gaugeColors'
 
@@ -56,7 +57,7 @@ class CellEditorOverlay extends Component {
       activeQueryIndex: 0,
       isDisplayOptionsTabActive: false,
       axes,
-      colors: validateColors(colors) ? colors : DEFAULT_COLORS,
+      colors: validateColors(colors, type),
     }
   }
 
@@ -287,7 +288,12 @@ class CellEditorOverlay extends Component {
   }
 
   handleSelectGraphType = graphType => () => {
-    this.setState({cellWorkingType: graphType})
+    const {colors} = this.state
+    if (colors.length < MIN_THRESHOLDS && graphType === 'gauge') {
+      this.setState({cellWorkingType: graphType, colors: DEFAULT_COLORS})
+    } else {
+      this.setState({cellWorkingType: graphType})
+    }
   }
 
   handleClickDisplayOptionsTab = isDisplayOptionsTabActive => () => {

ui/src/dashboards/components/GaugeOptions.js

@@ -7,7 +7,6 @@ import Threshold from 'src/dashboards/components/Threshold'
 import {
   MAX_THRESHOLDS,
   MIN_THRESHOLDS,
-  DEFAULT_COLORS,
 } from 'src/dashboards/constants/gaugeColors'
 
 const GaugeOptions = ({
@@ -19,9 +18,7 @@ const GaugeOptions = ({
   onUpdateColorValue,
 }) => {
   const disableMaxColor = colors.length > MIN_THRESHOLDS
-
   const disableAddThreshold = colors.length > MAX_THRESHOLDS
-
   const sortedColors = _.sortBy(colors, color => Number(color.value))
 
   return (
@@ -41,6 +38,7 @@ const GaugeOptions = ({
           </button>
           {sortedColors.map(color =>
             <Threshold
+              visualizationType="gauge"
               threshold={color}
               key={color.id}
               disableMaxColor={disableMaxColor}
@@ -58,10 +56,6 @@ const GaugeOptions = ({
 
 const {arrayOf, func, shape, string} = PropTypes
 
-GaugeOptions.defaultProps = {
-  colors: DEFAULT_COLORS,
-}
-
 GaugeOptions.propTypes = {
   colors: arrayOf(
     shape({

ui/src/dashboards/components/SingleStatOptions.js

@@ -4,10 +4,7 @@ import _ from 'lodash'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import Threshold from 'src/dashboards/components/Threshold'
 
-import {
-  MAX_THRESHOLDS,
-  DEFAULT_COLORS,
-} from 'src/dashboards/constants/singleStatColors'
+import {MAX_THRESHOLDS} from 'src/dashboards/constants/gaugeColors'
 
 const SingleStatOptions = ({
   colors,
@@ -38,6 +35,7 @@ const SingleStatOptions = ({
           </button>
           {sortedColors.map(color =>
             <Threshold
+              visualizationType="single-stat"
               threshold={color}
               key={color.id}
               onChooseColor={onChooseColor}

ui/src/dashboards/constants/gaugeColors.js

@@ -95,12 +95,15 @@ export const DEFAULT_COLORS = [
   },
 ]
 
-export const validateColors = colors => {
+export const validateColors = (colors, type) => {
+  if (type === 'single-stat') {
+    return colors
+  }
   if (!colors) {
-    return false
+    return DEFAULT_COLORS
   }
   const hasMin = colors.some(color => color.type === COLOR_TYPE_MIN)
   const hasMax = colors.some(color => color.type === COLOR_TYPE_MAX)
 
-  return hasMin && hasMax
+  return hasMin && hasMax ? colors : DEFAULT_COLORS
 }

ui/src/shared/components/GaugeChart.js

@@ -1,8 +1,8 @@
 import React, {PropTypes, PureComponent} from 'react'
+
 import lastValues from 'shared/parsing/lastValues'
 import Gauge from 'shared/components/Gauge'
 
-import {DEFAULT_COLORS} from 'src/dashboards/constants/gaugeColors'
 import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants'
 
 class GaugeChart extends PureComponent {
@@ -59,10 +59,6 @@ class GaugeChart extends PureComponent {
 
 const {arrayOf, bool, number, shape, string} = PropTypes
 
-GaugeChart.defaultProps = {
-  colors: DEFAULT_COLORS,
-}
-
 GaugeChart.propTypes = {
   data: arrayOf(shape()).isRequired,
   isFetchingInitially: bool,