Added caching for consistent color of values across visualization. Closes #485

src/kibana/components/vislib/components/color/color.js

@@ -3,7 +3,8 @@ define(function (require) {
     var _ = require('lodash');
 
     var createColorPalette = Private(require('components/vislib/components/color/color_palette'));
-
+    var MappedColors = Private(require('components/vislib/components/color/mapped_colors'));
+    var mappedColors = new MappedColors();
     /*
      * Accepts an array of strings or numbers that are used to create a
      * a lookup table that associates the values (key) with a hex color (value).
@@ -23,11 +24,15 @@ define(function (require) {
       });
 
       var arrayLength = arrayOfStringsOrNumbers.length;
-      var colorObj = _.zipObject(arrayOfStringsOrNumbers, createColorPalette(arrayLength));
+      var colors = createColorPalette(arrayLength + mappedColors.count());
+      var uniqueColors = _.difference(colors, mappedColors.all()).slice(0, arrayLength + 1);
+      var colorObj = _.zipObject(arrayOfStringsOrNumbers, uniqueColors);
 
       return function (value) {
-        return colorObj[value];
+        if (!mappedColors.get(value))
+          mappedColors.add(value, colorObj[value]);
+        return mappedColors.get(value);
       };
     };
   };
-});
+});

src/kibana/components/vislib/components/color/mapped_colors.js

@@ -0,0 +1,63 @@
+define(function () {
+  return function MappedColorFactory() {
+
+    var _ = require('lodash');
+    /*
+     * Maintains a lookup table that associates the value (key) with a hex color (value)
+     * across the visualizations.
+     * Provides functions to interact with the lookup table
+     */
+
+    var MappedColorService = function () {
+    };
+
+    MappedColorService.colors = {};
+    /**
+     * Allows to add value (key) and color (value) to the lookup table
+     *
+     * @method add
+     * @param {String} key - the value in a visualization
+     * @param {String} value - the color associated with the value
+     */
+    MappedColorService.prototype.add = function (key, value) {
+      MappedColorService.colors[key] = value;
+    };
+
+    /**
+     * Provides the color (value) associated with the value (key)
+     *
+     * @method get
+     * @param {String} key - the value for which color is required
+     * @returns the color associated with the value
+     */
+    MappedColorService.prototype.get = function (key) {
+      return MappedColorService.colors[key];
+    };
+
+    /**
+     * Size of the mapped colors
+     *
+     * @method count
+     * @returns the number of values (keys) stored in the lookup table
+     */
+    MappedColorService.prototype.count = function () {
+      return _.keys(MappedColorService.colors).length;
+    };
+
+    /**
+     * All the colors of in the lookup table
+     *
+     * @method all
+     * @returns all the colors used in the lookup table
+     */
+    MappedColorService.prototype.all = function () {
+      return _.values(MappedColorService.colors);
+    };
+
+    MappedColorService.prototype.reset = function () {
+      MappedColorService.colors = {};
+    };
+
+    return MappedColorService;
+  };
+});

src/kibana/components/vislib/visualizations/column_chart.js

@@ -73,7 +73,10 @@ define(function (require) {
       .append('rect')
       .call(this._addIdentifier)
       .attr('fill', function (d) {
-        return color(d.label);
+        var label = d.label ;
+        if (!label)
+          label = this.getAttribute('data-label');
+        return color(label);
       });
 
       self.updateBars(bars);

test/unit/specs/vislib/components/color.js

@@ -5,9 +5,11 @@ define(function (require) {
   angular.module('SeedColorUtilService', ['kibana']);
   angular.module('ColorObjUtilService', ['kibana']);
   angular.module('ColorPaletteUtilService', ['kibana']);
+  angular.module('MappedColorService', ['kibana']);
 
   describe('Vislib Color Module Test Suite', function () {
     var seedColors;
+    var MappedColors, mappedColors;
 
     describe('Color (main)', function () {
       var getColors;
@@ -30,6 +32,8 @@ define(function (require) {
         inject(function (d3, Private) {
           seedColors = Private(require('components/vislib/components/color/seed_colors'));
           getColors = Private(require('components/vislib/components/color/color'));
+          MappedColors = Private(require('components/vislib/components/color/mapped_colors'));
+          mappedColors = new MappedColors();
           color = getColors(arr);
         });
       });
@@ -101,6 +105,10 @@ define(function (require) {
       it('should return the first hex color in the seed colors array', function () {
         expect(color(arr[0])).to.be(seedColors[0]);
       });
+
+      it('should return the value from the mapped colors', function () {
+        expect(color(arr[1])).to.be(mappedColors.get(arr[1]));
+      });
     });
 
     describe('Seed Colors', function () {
@@ -115,6 +123,45 @@ define(function (require) {
 
     });
 
+    describe('Mapped Colors', function () {
+
+      beforeEach(function () {
+        module('MappedColorService');
+      });
+
+      beforeEach(function () {
+        inject(function (d3, Private) {
+          MappedColors = Private(require('components/vislib/components/color/mapped_colors'));
+          mappedColors = new MappedColors();
+        });
+      });
+
+      it('should clear all the keys from the map table', function () {
+        mappedColors.reset();
+        expect(mappedColors.count()).to.be(0);
+      });
+
+      it('should return the color for the added value', function () {
+        mappedColors.reset();
+        mappedColors.add('value1', '#somecolor');
+        expect(mappedColors.get('value1')).to.be('#somecolor');
+      });
+
+      it('should return the count of mapped keys', function () {
+        mappedColors.reset();
+        mappedColors.add('value1', '#color1');
+        mappedColors.add('value2', '#color2');
+        expect(mappedColors.count()).to.be(2);
+      });
+
+      it('should return all the colors in the map', function () {
+        mappedColors.reset();
+        mappedColors.add('value1', '#colors1');
+        mappedColors.add('value3', '#newColor');
+        expect(mappedColors.all()).to.eql(['#colors1', '#newColor']);
+      });
+    });
+
     describe('Color Palette', function () {
       var num1 = 45;
       var num2 = 72;
@@ -192,4 +239,4 @@ define(function (require) {
 
     });
   });
-});
+});