Make RuleGraph comply with new shape of overrideColors

ui/src/kapacitor/components/RuleGraph.js

@@ -8,6 +8,8 @@ import underlayCallback from 'src/kapacitor/helpers/ruleGraphUnderlay'
 
 const RefreshingLineGraph = AutoRefresh(LineGraph)
 
+import {LINE_COLORS_RULE_GRAPH} from 'src/shared/constants/graphColorPalettes'
+
 const {shape, string, func} = PropTypes
 const RuleGraph = ({
   query,
@@ -20,7 +22,6 @@ const RuleGraph = ({
   const autoRefreshMs = 30000
   const queryText = buildInfluxQLQuery({lower}, query)
   const queries = [{host: source.links.proxy, text: queryText}]
-  const kapacitorLineColors = ['#4ED8A0']
 
   if (!queryText) {
     return (
@@ -47,7 +48,7 @@ const RuleGraph = ({
         isGraphFilled={false}
         ruleValues={rule.values}
         autoRefresh={autoRefreshMs}
-        overrideLineColors={kapacitorLineColors}
+        overrideLineColors={LINE_COLORS_RULE_GRAPH}
         underlayCallback={underlayCallback(rule)}
       />
     </div>

ui/src/shared/components/Dygraph.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import shallowCompare from 'react-addons-shallow-compare'
 import _ from 'lodash'
-import chroma from 'chroma-js'
 import NanoDate from 'nano-date'
 
 import Dygraphs from 'src/external/dygraph'
@@ -205,11 +204,8 @@ class Dygraph extends Component {
       lineColors = getLineColorsHexes(DEFAULT_LINE_COLORS, numSeries)
     }
 
-    if (overrideLineColors && overrideLineColors.length > 0) {
-      lineColors = chroma
-        .scale(overrideLineColors)
-        .mode('lch')
-        .colors(numSeries)
+    if (overrideLineColors) {
+      lineColors = getLineColorsHexes(overrideLineColors, numSeries)
     }
 
     const coloredDygraphSeries = {}
@@ -440,7 +436,12 @@ Dygraph.propTypes = {
   isGraphFilled: bool,
   isBarGraph: bool,
   staticLegend: bool,
-  overrideLineColors: arrayOf(string.isRequired),
+  overrideLineColors: arrayOf(
+    shape({
+      type: string.isRequired,
+      hex: string.isRequired,
+    }).isRequired
+  ),
   dygraphSeries: shape({}).isRequired,
   ruleValues: shape({
     operator: string,

ui/src/shared/constants/graphColorPalettes.js

@@ -171,6 +171,16 @@ export const LINE_COLORS_G = [
   },
 ]
 
+export const LINE_COLORS_RULE_GRAPH = [
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#4ED8A0',
+    id: '1',
+    name: 'Rainforest',
+    value: 0,
+  },
+]
+
 export const DEFAULT_LINE_COLORS = LINE_COLORS_A
 
 export const LINE_COLOR_SCALES = [
@@ -190,7 +200,7 @@ export const LINE_COLOR_SCALES = [
 })
 
 export const validateLineColors = colors => {
-  if (!colors || colors.length !== 3) {
+  if (!colors) {
     return DEFAULT_LINE_COLORS
   }
 
@@ -205,7 +215,7 @@ export const getLineColorsHexes = (colors, numSeries) => {
   const validatedColors = validateLineColors(colors) // ensures safe defaults
   const colorsHexArray = validatedColors.map(color => color.hex)
 
-  if (numSeries === 1) {
+  if (numSeries === 1 || numSeries === 0) {
     return [colorsHexArray[0]]
   }
   if (numSeries === 2) {