-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4894 from lukasolson/color-mapping-config
Add config option to map values to colors
- Loading branch information
Showing
4 changed files
with
123 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,50 @@ | ||
| 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; | ||
| }; | ||
| define((require) => (Private, config) => { | ||
| const _ = require('lodash'); | ||
| const d3 = require('d3'); | ||
| const createColorPalette = Private(require('ui/vislib/components/color/color_palette')); | ||
|
|
||
| const standardizeColor = (color) => d3.rgb(color).toString(); | ||
| function getConfigColorMapping() { | ||
| return _.mapValues(config.get('visualization:colorMapping'), standardizeColor); | ||
| } | ||
|
|
||
| /* | ||
| * 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 | ||
| */ | ||
| class MappedColors { | ||
| constructor() { | ||
| this.mapping = {}; | ||
| } | ||
|
|
||
| get(key) { | ||
| return getConfigColorMapping()[key] || this.mapping[key]; | ||
| } | ||
|
|
||
| mapKeys(keys) { | ||
| const configMapping = getConfigColorMapping(); | ||
| const configColors = _.values(configMapping); | ||
|
|
||
| const keysToMap = []; | ||
| _.each(keys, (key) => { | ||
| // If this key is mapped in the config, it's unnecessary to have it mapped here | ||
| if (configMapping[key]) delete this.mapping[key]; | ||
|
|
||
| // If this key is mapped to a color used by the config color mapping, we need to remap it | ||
| if (_.contains(configColors, this.mapping[key])) keysToMap.push(key); | ||
|
|
||
| // If this key isn't mapped, we need to map it | ||
| if (this.get(key) == null) keysToMap.push(key); | ||
| }); | ||
|
|
||
| // Generate a color palette big enough that all new keys can have unique color values | ||
| const allColors = _(this.mapping).values().union(configColors).value(); | ||
| const colorPalette = createColorPalette(allColors.length + keysToMap.length); | ||
| const newColors = _.difference(colorPalette, allColors); | ||
| _.merge(this.mapping, _.zipObject(keysToMap, newColors)); | ||
| } | ||
| } | ||
|
|
||
| return new MappedColors(); | ||
| }); |