Switch color generation algorithm to flots method

Fixes #5565

src/ui/public/vislib/components/color/color_palette.js

@@ -5,54 +5,62 @@ define(function (require) {
 
     var seedColors = Private(require('ui/vislib/components/color/seed_colors'));
 
-
-    /*
-     * Generates an array of hex colors the length of the input number.
-     * If the number is greater than the length of seed colors available,
-     * new colors are generated up to the value of the input number.
-     */
-
-    var offset = 300; // Hue offset to start at
-
-    var fraction = function (goal) {
-      var walkTree = function (numerator, denominator, bytes) {
-        if (bytes.length) {
-          return walkTree(
-            (numerator * 2) + (bytes.pop() ? 1 : -1),
-            denominator * 2,
-            bytes
-          );
-
-        } else {
-          return numerator / denominator;
-        }
-      };
-
-      var b = (goal + 2)
-        .toString(2)
-        .split('')
-        .map(function (num) {
-          return parseInt(num, 10);
-        });
-      b.shift();
-
-      return walkTree(1, 2, b);
-
+    // Shamelessly borrowed from flot.colorhelpers
+    function scale(color, c, f) {
+      for (var i = 0; i < c.length; ++i) {
+        color[c.charAt(i)] *= f;
+      }
+      return normalize(color);
     };
 
-    return function (num) {
-      if (!_.isNumber(num)) {
-        throw new TypeError('ColorPaletteUtilService expects a number');
+    function normalize(color) {
+      function clamp(min, value, max) {
+        if (value < min) return min;
+        if (value > max) return max;
+        return value;
       }
 
-      var colors = seedColors;
+      color.r = clamp(0, parseInt(color.r), 255);
+      color.g = clamp(0, parseInt(color.g), 255);
+      color.b = clamp(0, parseInt(color.b), 255);
+      color.a = clamp(0, color.a, 1);
+      return color;
+    };
 
-      var seedLength = seedColors.length;
 
-      _.times(num - seedLength, function (i) {
-        colors.push(d3.hsl((fraction(i + seedLength + 1) * 360 + offset) % 360, 0.5, 0.5).toString());
-      });
+    return function (num) {
+      // Also shamelessly ported from flot.
+      // Generate all the colors, using first the option colors and then
+      // variations on those colors once they're exhausted.
 
+      var color;
+      var colors = [];
+      var colorPool = seedColors;
+      var colorPoolSize = colorPool.length;
+      var variation = 0;
+
+      for (var i = 0; i < num; i++) {
+
+        color = d3.rgb(colorPool[i % colorPoolSize]);
+
+        // Each time we exhaust the colors in the pool we adjust
+        // a scaling factor used to produce more variations on
+        // those colors. The factor alternates negative/positive
+        // to produce lighter/darker colors.
+
+        // Reset the variation after every few cycles, or else
+        // it will end up producing only white or black colors.
+
+        if (i % colorPoolSize === 0 && i) {
+          if (variation >= 0) {
+            if (variation < 0.5) {
+              variation = -variation - 0.2;
+            } else variation = 0;
+          } else variation = -variation;
+        }
+
+        colors[i] = scale(color, 'rgb', 1 + variation);
+      }
       return colors;
 
     };

src/ui/public/vislib/components/color/seed_colors.js

@@ -8,13 +8,14 @@ define(function () {
 
   return function SeedColorUtilService() {
     return [
-      '#57c17b',
-      '#006e8a',
-      '#6f87d8',
-      '#663db8',
-      '#bc52bc',
-      '#9e3533',
-      '#daa05d'
+      '#7EB26D',
+      '#EAB839',
+      '#6ED0E0',
+      '#EF843C',
+      '#E24D42',
+      '#1F78C1',
+      '#BA43A9',
+      '#705DA0'
     ];
   };
 });