From 178dd8333da0da1aa1e33fac501bd730badc4fbe Mon Sep 17 00:00:00 2001 From: Gaurav Singhania Date: Thu, 2 Jul 2015 15:16:43 +0530 Subject: [PATCH 1/3] Added caching for consistent color of values across visualization --- .../vislib/components/color/color.js | 13 ++-- .../vislib/components/color/mapped_colors.js | 63 +++++++++++++++++++ test/unit/specs/vislib/components/color.js | 49 ++++++++++++++- 3 files changed, 120 insertions(+), 5 deletions(-) create mode 100644 src/kibana/components/vislib/components/color/mapped_colors.js diff --git a/src/kibana/components/vislib/components/color/color.js b/src/kibana/components/vislib/components/color/color.js index ecaa02ebe5baa..38ad9d515ab69 100644 --- a/src/kibana/components/vislib/components/color/color.js +++ b/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); }; }; }; -}); \ No newline at end of file +}); diff --git a/src/kibana/components/vislib/components/color/mapped_colors.js b/src/kibana/components/vislib/components/color/mapped_colors.js new file mode 100644 index 0000000000000..d55543ed81c2a --- /dev/null +++ b/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; + }; +}); diff --git a/test/unit/specs/vislib/components/color.js b/test/unit/specs/vislib/components/color.js index a6512c1df5610..943c7cdb1bb56 100644 --- a/test/unit/specs/vislib/components/color.js +++ b/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) { }); }); -}); \ No newline at end of file +}); From 6f8341c224a6748d193962d61e308954e932112a Mon Sep 17 00:00:00 2001 From: Gaurav Singhania Date: Mon, 6 Jul 2015 21:26:01 +0530 Subject: [PATCH 2/3] matching legend color with bar when bar doesn't have a label --- src/kibana/components/vislib/visualizations/column_chart.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/kibana/components/vislib/visualizations/column_chart.js b/src/kibana/components/vislib/visualizations/column_chart.js index 089f41f32709e..16988da502a90 100644 --- a/src/kibana/components/vislib/visualizations/column_chart.js +++ b/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.dataset.label; + return color(label); }); self.updateBars(bars); From d8b6371ae9ca8ee9dbe689b16b464c6dc4317da3 Mon Sep 17 00:00:00 2001 From: Gaurav Singhania Date: Tue, 14 Jul 2015 17:46:36 +0530 Subject: [PATCH 3/3] fixing color defect --- src/kibana/components/vislib/visualizations/column_chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/kibana/components/vislib/visualizations/column_chart.js b/src/kibana/components/vislib/visualizations/column_chart.js index 16988da502a90..3945833675817 100644 --- a/src/kibana/components/vislib/visualizations/column_chart.js +++ b/src/kibana/components/vislib/visualizations/column_chart.js @@ -75,7 +75,7 @@ define(function (require) { .attr('fill', function (d) { var label = d.label ; if (!label) - label = this.dataset.label; + label = this.getAttribute('data-label'); return color(label); });