Prototype HSL shifting color spectrum

ui/src/shared/constants/colorOperations.js

@@ -121,7 +121,7 @@ export const generateThresholdsListHexs = (
   return {bgColor, textColor}
 }
 
-// Handy tool for converting hexcodes to HSV values
+// Handy tool for converting Hexcodes to HSL values
 export const HexcodeToHSL = hex => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
 
@@ -160,3 +160,46 @@ export const HexcodeToHSL = hex => {
 
   return {hue, saturation, lightness}
 }
+
+// Handy tool for converting HSL values to Hexcode
+export const HSLToHexcode = (hue, saturation, lightness) => {
+  hue /= 360
+  saturation /= 100
+  lightness /= 100
+  let red, green, blue
+  if (saturation === 0) {
+    red = green = blue = lightness // achromatic
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) {
+        t += 1
+      }
+      if (t > 1) {
+        t -= 1
+      }
+      if (t < 1 / 6) {
+        return p + (q - p) * 6 * t
+      }
+      if (t < 1 / 2) {
+        return q
+      }
+      if (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6
+      }
+      return p
+    }
+    const q =
+      lightness < 0.5
+        ? lightness * (1 + saturation)
+        : lightness + saturation - lightness * saturation
+    const p = 2 * lightness - q
+    red = hue2rgb(p, q, hue + 1 / 3)
+    green = hue2rgb(p, q, hue)
+    blue = hue2rgb(p, q, hue - 1 / 3)
+  }
+  const toHex = x => {
+    const hex = Math.round(x * 255).toString(16)
+    return hex.length === 1 ? `0${hex}` : hex
+  }
+  return `#${toHex(red)}${toHex(green)}${toHex(blue)}`
+}

ui/src/shared/constants/graphColorPalettes.js

@@ -1,4 +1,4 @@
-import {HexcodeToHSL} from 'src/shared/constants/colorOperations'
+import {HexcodeToHSL, HSLToHexcode} from 'src/shared/constants/colorOperations'
 import _ from 'lodash'
 
 // Tier 5 Colors
@@ -50,18 +50,53 @@ const graphColors = [
   series20,
 ]
 
+export const generateLargePalette = numSeries => {
+  const start = {hue: 190, saturation: 90, lightness: 50}
+  const end = {hue: 360, saturation: 80, lightness: 98}
+  const colorsHSL = []
+
+  for (let i = 0; i < numSeries; i++) {
+    const hRange = end.hue - start.hue
+    const hStep = hRange / (numSeries - 1)
+    const h = hStep * i
+
+    const sRange = end.saturation - start.saturation
+    const sStep = sRange / (numSeries - 1)
+    const s = sStep * i
+
+    const lRange = end.lightness - start.lightness
+    const lStep = lRange / (numSeries - 1)
+    const l = lStep * i
+
+    colorsHSL[i] = {
+      hue: Math.floor(start.hue + h),
+      saturation: Math.floor(start.saturation + s),
+      lightness: Math.floor(start.lightness + l),
+    }
+  }
+
+  const colorsHex = colorsHSL.map(color =>
+    HSLToHexcode(color.hue, color.saturation, color.lightness)
+  )
+
+  return colorsHex
+}
+
 // Sort by hue
 const sortColorsByHue = colors => {
   return _.sortBy(colors, color => {
     const {hue} = HexcodeToHSL(color)
-    console.log(color, hue)
+
     return hue
   })
 }
 
 // Color Finder
 export const getIdealColors = numSeries => {
+  if (numSeries > 18) {
+    return generateLargePalette(numSeries)
+  }
   const colors = graphColors[numSeries - 1]
-  console.log(sortColorsByHue(colors))
+
   return sortColorsByHue(colors)
 }