mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -04:00
feat(dashboard): make color indices referable (#23657)
This commit is contained in:
parent
a5b6ccc1ec
commit
c8fa44e9e9
@ -20,7 +20,7 @@
|
|||||||
/* eslint-disable no-dupe-class-members */
|
/* eslint-disable no-dupe-class-members */
|
||||||
import { scaleOrdinal, ScaleOrdinal } from 'd3-scale';
|
import { scaleOrdinal, ScaleOrdinal } from 'd3-scale';
|
||||||
import { ExtensibleFunction } from '../models';
|
import { ExtensibleFunction } from '../models';
|
||||||
import { ColorsLookup } from './types';
|
import { ColorsInitLookup, ColorsLookup } from './types';
|
||||||
import stringifyAndTrim from './stringifyAndTrim';
|
import stringifyAndTrim from './stringifyAndTrim';
|
||||||
import getSharedLabelColor from './SharedLabelColorSingleton';
|
import getSharedLabelColor from './SharedLabelColorSingleton';
|
||||||
import { getAnalogousColors } from './utils';
|
import { getAnalogousColors } from './utils';
|
||||||
@ -39,7 +39,7 @@ class CategoricalColorScale extends ExtensibleFunction {
|
|||||||
|
|
||||||
scale: ScaleOrdinal<{ toString(): string }, string>;
|
scale: ScaleOrdinal<{ toString(): string }, string>;
|
||||||
|
|
||||||
parentForcedColors?: ColorsLookup;
|
parentForcedColors: ColorsLookup;
|
||||||
|
|
||||||
forcedColors: ColorsLookup;
|
forcedColors: ColorsLookup;
|
||||||
|
|
||||||
@ -51,14 +51,24 @@ class CategoricalColorScale extends ExtensibleFunction {
|
|||||||
* @param {*} parentForcedColors optional parameter that comes from parent
|
* @param {*} parentForcedColors optional parameter that comes from parent
|
||||||
* (usually CategoricalColorNamespace) and supersede this.forcedColors
|
* (usually CategoricalColorNamespace) and supersede this.forcedColors
|
||||||
*/
|
*/
|
||||||
constructor(colors: string[], parentForcedColors: ColorsLookup = {}) {
|
constructor(colors: string[], parentForcedColors: ColorsInitLookup = {}) {
|
||||||
super((value: string, sliceId?: number) => this.getColor(value, sliceId));
|
super((value: string, sliceId?: number) => this.getColor(value, sliceId));
|
||||||
|
|
||||||
this.originColors = colors;
|
this.originColors = colors;
|
||||||
this.colors = colors;
|
this.colors = colors;
|
||||||
this.scale = scaleOrdinal<{ toString(): string }, string>();
|
this.scale = scaleOrdinal<{ toString(): string }, string>();
|
||||||
this.scale.range(colors);
|
this.scale.range(colors);
|
||||||
this.parentForcedColors = parentForcedColors;
|
|
||||||
|
// reserve fixed colors in parent map based on their index in the scale
|
||||||
|
Object.entries(parentForcedColors).forEach(([key, value]) => {
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
parentForcedColors[key] = colors[value % colors.length];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// all indexes have been replaced by a fixed color
|
||||||
|
this.parentForcedColors = parentForcedColors as ColorsLookup;
|
||||||
this.forcedColors = {};
|
this.forcedColors = {};
|
||||||
this.multiple = 0;
|
this.multiple = 0;
|
||||||
}
|
}
|
||||||
@ -165,7 +175,7 @@ class CategoricalColorScale extends ExtensibleFunction {
|
|||||||
*
|
*
|
||||||
* If there are fewer elements in the range than in the domain, the scale will reuse values from the start of the range.
|
* If there are fewer elements in the range than in the domain, the scale will reuse values from the start of the range.
|
||||||
*
|
*
|
||||||
* @param range Array of range values.
|
* @param newRange Array of range values.
|
||||||
*/
|
*/
|
||||||
range(newRange: string[]): this;
|
range(newRange: string[]): this;
|
||||||
|
|
||||||
|
@ -17,6 +17,10 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
export interface ColorsInitLookup {
|
||||||
|
[key: string]: string | number;
|
||||||
|
}
|
||||||
|
|
||||||
export interface ColorsLookup {
|
export interface ColorsLookup {
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
}
|
}
|
||||||
|
@ -39,7 +39,22 @@ describe('CategoricalColorScale', () => {
|
|||||||
expect(scale).toBeInstanceOf(CategoricalColorScale);
|
expect(scale).toBeInstanceOf(CategoricalColorScale);
|
||||||
expect(scale.parentForcedColors).toBe(parentForcedColors);
|
expect(scale.parentForcedColors).toBe(parentForcedColors);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('can refer to colors based on their index', () => {
|
||||||
|
const parentForcedColors = { pig: 1, horse: 5 };
|
||||||
|
const scale = new CategoricalColorScale(
|
||||||
|
['blue', 'red', 'green'],
|
||||||
|
parentForcedColors,
|
||||||
|
);
|
||||||
|
expect(scale.getColor('pig')).toEqual('red');
|
||||||
|
expect(parentForcedColors.pig).toEqual('red');
|
||||||
|
|
||||||
|
// can loop around the scale
|
||||||
|
expect(scale.getColor('horse')).toEqual('green');
|
||||||
|
expect(parentForcedColors.horse).toEqual('green');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('.getColor(value)', () => {
|
describe('.getColor(value)', () => {
|
||||||
it('returns same color for same value', () => {
|
it('returns same color for same value', () => {
|
||||||
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
||||||
|
Loading…
Reference in New Issue
Block a user