2021-10-28 06:27:35 -04:00
|
|
|
/*
|
|
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
|
|
* or more contributor license agreements. See the NOTICE file
|
|
|
|
* distributed with this work for additional information
|
|
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
|
|
* to you under the Apache License, Version 2.0 (the
|
|
|
|
* "License"); you may not use this file except in compliance
|
|
|
|
* with the License. You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing,
|
|
|
|
* software distributed under the License is distributed on an
|
|
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
|
|
* KIND, either express or implied. See the License for the
|
|
|
|
* specific language governing permissions and limitations
|
|
|
|
* under the License.
|
|
|
|
*/
|
|
|
|
|
2020-04-13 15:38:11 -04:00
|
|
|
import { ScaleOrdinal } from 'd3-scale';
|
2022-06-03 09:32:32 -04:00
|
|
|
import { CategoricalColorScale, FeatureFlag } from '@superset-ui/core';
|
2018-11-03 04:39:14 -04:00
|
|
|
|
|
|
|
describe('CategoricalColorScale', () => {
|
|
|
|
it('exists', () => {
|
|
|
|
expect(CategoricalColorScale !== undefined).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('new CategoricalColorScale(colors, parentForcedColors)', () => {
|
|
|
|
it('can create new scale when parentForcedColors is not given', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
expect(scale).toBeInstanceOf(CategoricalColorScale);
|
|
|
|
});
|
|
|
|
it('can create new scale when parentForcedColors is given', () => {
|
|
|
|
const parentForcedColors = {};
|
2021-11-09 07:42:28 -05:00
|
|
|
const scale = new CategoricalColorScale(
|
|
|
|
['blue', 'red', 'green'],
|
|
|
|
parentForcedColors,
|
|
|
|
);
|
2018-11-03 04:39:14 -04:00
|
|
|
expect(scale).toBeInstanceOf(CategoricalColorScale);
|
|
|
|
expect(scale.parentForcedColors).toBe(parentForcedColors);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('.getColor(value)', () => {
|
|
|
|
it('returns same color for same value', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
const c1 = scale.getColor('pig');
|
|
|
|
const c2 = scale.getColor('horse');
|
|
|
|
const c3 = scale.getColor('pig');
|
|
|
|
scale.getColor('cow');
|
|
|
|
const c5 = scale.getColor('horse');
|
|
|
|
|
|
|
|
expect(c1).toBe(c3);
|
|
|
|
expect(c2).toBe(c5);
|
|
|
|
});
|
|
|
|
it('returns different color for consecutive items', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
const c1 = scale.getColor('pig');
|
|
|
|
const c2 = scale.getColor('horse');
|
|
|
|
const c3 = scale.getColor('cat');
|
|
|
|
|
|
|
|
expect(c1).not.toBe(c2);
|
|
|
|
expect(c2).not.toBe(c3);
|
|
|
|
expect(c3).not.toBe(c1);
|
|
|
|
});
|
2022-06-03 09:32:32 -04:00
|
|
|
it('recycles colors when number of items exceed available colors', () => {
|
|
|
|
window.featureFlags = {
|
|
|
|
[FeatureFlag.USE_ANALAGOUS_COLORS]: false,
|
|
|
|
};
|
|
|
|
const colorSet: { [key: string]: number } = {};
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
const colors = [
|
|
|
|
scale.getColor('pig'),
|
|
|
|
scale.getColor('horse'),
|
|
|
|
scale.getColor('cat'),
|
|
|
|
scale.getColor('cow'),
|
|
|
|
scale.getColor('donkey'),
|
|
|
|
scale.getColor('goat'),
|
|
|
|
];
|
|
|
|
colors.forEach(color => {
|
|
|
|
if (colorSet[color]) {
|
|
|
|
colorSet[color] += 1;
|
|
|
|
} else {
|
|
|
|
colorSet[color] = 1;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
expect(Object.keys(colorSet)).toHaveLength(3);
|
|
|
|
['blue', 'red', 'green'].forEach(color => {
|
|
|
|
expect(colorSet[color]).toBe(2);
|
|
|
|
});
|
|
|
|
});
|
2022-04-01 11:42:30 -04:00
|
|
|
it('get analogous colors when number of items exceed available colors', () => {
|
2022-06-03 09:32:32 -04:00
|
|
|
window.featureFlags = {
|
|
|
|
[FeatureFlag.USE_ANALAGOUS_COLORS]: true,
|
|
|
|
};
|
2018-11-03 04:39:14 -04:00
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
2022-04-01 11:42:30 -04:00
|
|
|
scale.getColor('pig');
|
|
|
|
scale.getColor('horse');
|
|
|
|
scale.getColor('cat');
|
|
|
|
scale.getColor('cow');
|
|
|
|
scale.getColor('donkey');
|
|
|
|
scale.getColor('goat');
|
|
|
|
expect(scale.range()).toHaveLength(6);
|
2018-11-03 04:39:14 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('.setColor(value, forcedColor)', () => {
|
|
|
|
it('overrides default color', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale.setColor('pig', 'pink');
|
|
|
|
expect(scale.getColor('pig')).toBe('pink');
|
|
|
|
});
|
|
|
|
it('does not override parentForcedColors', () => {
|
|
|
|
const scale1 = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale1.setColor('pig', 'black');
|
2021-11-09 07:42:28 -05:00
|
|
|
const scale2 = new CategoricalColorScale(
|
|
|
|
['blue', 'red', 'green'],
|
|
|
|
scale1.forcedColors,
|
|
|
|
);
|
2018-11-03 04:39:14 -04:00
|
|
|
scale2.setColor('pig', 'pink');
|
|
|
|
expect(scale1.getColor('pig')).toBe('black');
|
|
|
|
expect(scale2.getColor('pig')).toBe('black');
|
|
|
|
});
|
|
|
|
it('returns the scale', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
const output = scale.setColor('pig', 'pink');
|
|
|
|
expect(scale).toBe(output);
|
|
|
|
});
|
|
|
|
});
|
2019-03-25 17:33:45 -04:00
|
|
|
describe('.getColorMap()', () => {
|
|
|
|
it('returns correct mapping and parentForcedColors and forcedColors are specified', () => {
|
|
|
|
const scale1 = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale1.setColor('cow', 'black');
|
2021-11-09 07:42:28 -05:00
|
|
|
const scale2 = new CategoricalColorScale(
|
|
|
|
['blue', 'red', 'green'],
|
|
|
|
scale1.forcedColors,
|
|
|
|
);
|
2019-03-25 17:33:45 -04:00
|
|
|
scale2.setColor('pig', 'pink');
|
|
|
|
scale2.getColor('cow');
|
|
|
|
scale2.getColor('pig');
|
|
|
|
scale2.getColor('horse');
|
|
|
|
expect(scale2.getColorMap()).toEqual({
|
|
|
|
cow: 'black',
|
|
|
|
pig: 'pink',
|
2022-10-17 05:01:20 -04:00
|
|
|
horse: 'green',
|
2019-03-25 17:33:45 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-04-13 15:38:11 -04:00
|
|
|
|
|
|
|
describe('.copy()', () => {
|
|
|
|
it('returns a copy', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
const copy = scale.copy();
|
|
|
|
expect(copy).not.toBe(scale);
|
|
|
|
expect(copy('cat')).toEqual(scale('cat'));
|
|
|
|
expect(copy.domain()).toEqual(scale.domain());
|
|
|
|
expect(copy.range()).toEqual(scale.range());
|
|
|
|
expect(copy.unknown()).toEqual(scale.unknown());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('.domain()', () => {
|
|
|
|
it('when called without argument, returns domain', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale.getColor('pig');
|
|
|
|
expect(scale.domain()).toEqual(['pig']);
|
|
|
|
});
|
|
|
|
it('when called with argument, sets domain', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale.domain(['dog', 'pig', 'cat']);
|
|
|
|
expect(scale('pig')).toEqual('red');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('.range()', () => {
|
|
|
|
it('when called without argument, returns range', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
expect(scale.range()).toEqual(['blue', 'red', 'green']);
|
|
|
|
});
|
|
|
|
it('when called with argument, sets range', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale.range(['pink', 'gray', 'yellow']);
|
|
|
|
expect(scale.range()).toEqual(['pink', 'gray', 'yellow']);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
describe('.unknown()', () => {
|
|
|
|
it('when called without argument, returns output for unknown value', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale.unknown('#666');
|
|
|
|
expect(scale.unknown()).toEqual('#666');
|
|
|
|
});
|
|
|
|
it('when called with argument, sets output for unknown value', () => {
|
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
|
|
|
scale.unknown('#222');
|
|
|
|
expect(scale.unknown()).toEqual('#222');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-11-17 00:24:54 -05:00
|
|
|
describe('a CategoricalColorScale instance is also a color function itself', () => {
|
|
|
|
it('scale(value) returns color similar to calling scale.getColor(value)', () => {
|
2018-11-03 04:39:14 -04:00
|
|
|
const scale = new CategoricalColorScale(['blue', 'red', 'green']);
|
2018-11-17 00:24:54 -05:00
|
|
|
expect(scale.getColor('pig')).toBe(scale('pig'));
|
|
|
|
expect(scale.getColor('cat')).toBe(scale('cat'));
|
2018-11-03 04:39:14 -04:00
|
|
|
});
|
|
|
|
});
|
2020-04-13 15:38:11 -04:00
|
|
|
|
|
|
|
describe("is compatible with D3's ScaleOrdinal", () => {
|
|
|
|
it('passes type check', () => {
|
2021-11-09 07:42:28 -05:00
|
|
|
const scale: ScaleOrdinal<{ toString(): string }, string> =
|
|
|
|
new CategoricalColorScale(['blue', 'red', 'green']);
|
2020-04-13 15:38:11 -04:00
|
|
|
expect(scale('pig')).toBe('blue');
|
|
|
|
});
|
|
|
|
});
|
2018-11-03 04:39:14 -04:00
|
|
|
});
|