mirror of
https://github.com/apache/superset.git
synced 2026-04-18 23:55:00 +00:00
[Refactor] Extend color scheme management to sequential schemes (#6150)
* refactor color scheme * Update data structure * Update color scheme files * wip * convert all sequential schemes * Update how color schemes are managed. Extend it for sequential schemes * extract color setup into separate file * Update imports * update imports * Add new functions to Registry * Update ColorSchemeManager to extends Registry and update unit tests * Add test for Registry * Rename ColorSchemeManager to ColorSchemeRegistry * Fix unit tests * Update API * Fix imports * Add label field * Fix reference to colors * update SequentialScheme contructor * Fix controls * rename manager to registry * Split sequential schemes into multiple files * update sequential color labels * add values and valuesAsPromise() * use .values()
This commit is contained in:
Krist Wongsuphasawat
committed by
Chris Williams
Chris Williams
parent
a71e6eb0a3
commit
b9257b2a09
@@ -1,139 +0,0 @@
|
||||
import ColorSchemeManager, {
|
||||
getInstance,
|
||||
getScheme,
|
||||
getAllSchemes,
|
||||
getDefaultSchemeName,
|
||||
setDefaultSchemeName,
|
||||
registerScheme,
|
||||
registerMultipleSchemes,
|
||||
} from '../../../src/modules/ColorSchemeManager';
|
||||
|
||||
describe('ColorSchemeManager', () => {
|
||||
beforeEach(() => {
|
||||
const m = getInstance();
|
||||
m.clearScheme();
|
||||
m.registerScheme('test', ['red', 'green', 'blue']);
|
||||
m.registerScheme('test2', ['orange', 'yellow', 'pink']);
|
||||
m.setDefaultSchemeName('test');
|
||||
});
|
||||
it('The class constructor cannot be accessed directly', () => {
|
||||
expect(typeof ColorSchemeManager).not.toBe('Function');
|
||||
});
|
||||
describe('static getInstance()', () => {
|
||||
it('returns a singleton instance', () => {
|
||||
const m1 = getInstance();
|
||||
const m2 = getInstance();
|
||||
expect(m1).toBeDefined();
|
||||
expect(m1).toBe(m2);
|
||||
});
|
||||
});
|
||||
describe('.getScheme()', () => {
|
||||
it('.getScheme() returns default color scheme', () => {
|
||||
const scheme = getInstance().getScheme();
|
||||
expect(scheme).toEqual(['red', 'green', 'blue']);
|
||||
});
|
||||
it('.getScheme(name) returns color scheme with specified name', () => {
|
||||
const scheme = getInstance().getScheme('test2');
|
||||
expect(scheme).toEqual(['orange', 'yellow', 'pink']);
|
||||
});
|
||||
});
|
||||
describe('.getAllSchemes()', () => {
|
||||
it('returns all registered schemes', () => {
|
||||
const schemes = getInstance().getAllSchemes();
|
||||
expect(schemes).toEqual({
|
||||
test: ['red', 'green', 'blue'],
|
||||
test2: ['orange', 'yellow', 'pink'],
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('.getDefaultSchemeName()', () => {
|
||||
it('returns default scheme name', () => {
|
||||
const name = getInstance().getDefaultSchemeName();
|
||||
expect(name).toBe('test');
|
||||
});
|
||||
});
|
||||
describe('.setDefaultSchemeName()', () => {
|
||||
it('set default scheme name', () => {
|
||||
getInstance().setDefaultSchemeName('test2');
|
||||
const name = getInstance().getDefaultSchemeName();
|
||||
expect(name).toBe('test2');
|
||||
getInstance().setDefaultSchemeName('test');
|
||||
});
|
||||
it('returns the ColorSchemeManager instance', () => {
|
||||
const instance = getInstance().setDefaultSchemeName('test');
|
||||
expect(instance).toBe(getInstance());
|
||||
});
|
||||
});
|
||||
describe('.registerScheme(name, colors)', () => {
|
||||
it('sets schemename and color', () => {
|
||||
getInstance().registerScheme('test3', ['cyan', 'magenta']);
|
||||
const scheme = getInstance().getScheme('test3');
|
||||
expect(scheme).toEqual(['cyan', 'magenta']);
|
||||
});
|
||||
it('returns the ColorSchemeManager instance', () => {
|
||||
const instance = getInstance().registerScheme('test3', ['cyan', 'magenta']);
|
||||
expect(instance).toBe(getInstance());
|
||||
});
|
||||
});
|
||||
describe('.registerMultipleSchemes(object)', () => {
|
||||
it('sets multiple schemes at once', () => {
|
||||
getInstance().registerMultipleSchemes({
|
||||
test4: ['cyan', 'magenta'],
|
||||
test5: ['brown', 'purple'],
|
||||
});
|
||||
const scheme1 = getInstance().getScheme('test4');
|
||||
expect(scheme1).toEqual(['cyan', 'magenta']);
|
||||
const scheme2 = getInstance().getScheme('test5');
|
||||
expect(scheme2).toEqual(['brown', 'purple']);
|
||||
});
|
||||
it('returns the ColorSchemeManager instance', () => {
|
||||
const instance = getInstance().registerMultipleSchemes({
|
||||
test4: ['cyan', 'magenta'],
|
||||
test5: ['brown', 'purple'],
|
||||
});
|
||||
expect(instance).toBe(getInstance());
|
||||
});
|
||||
});
|
||||
describe('static getScheme()', () => {
|
||||
it('is equivalent to getInstance().getScheme()', () => {
|
||||
expect(getInstance().getScheme()).toBe(getScheme());
|
||||
});
|
||||
});
|
||||
describe('static getAllSchemes()', () => {
|
||||
it('is equivalent to getInstance().getAllSchemes()', () => {
|
||||
expect(getInstance().getAllSchemes()).toBe(getAllSchemes());
|
||||
});
|
||||
});
|
||||
describe('static getDefaultSchemeName()', () => {
|
||||
it('is equivalent to getInstance().getDefaultSchemeName()', () => {
|
||||
expect(getInstance().getDefaultSchemeName()).toBe(getDefaultSchemeName());
|
||||
});
|
||||
});
|
||||
describe('static setDefaultSchemeName()', () => {
|
||||
it('is equivalent to getInstance().setDefaultSchemeName()', () => {
|
||||
setDefaultSchemeName('test2');
|
||||
const name = getInstance().getDefaultSchemeName();
|
||||
expect(name).toBe('test2');
|
||||
setDefaultSchemeName('test');
|
||||
});
|
||||
});
|
||||
describe('static registerScheme()', () => {
|
||||
it('is equivalent to getInstance().registerScheme()', () => {
|
||||
registerScheme('test3', ['cyan', 'magenta']);
|
||||
const scheme = getInstance().getScheme('test3');
|
||||
expect(scheme).toEqual(['cyan', 'magenta']);
|
||||
});
|
||||
});
|
||||
describe('static registerMultipleSchemes()', () => {
|
||||
it('is equivalent to getInstance().registerMultipleSchemes()', () => {
|
||||
registerMultipleSchemes({
|
||||
test4: ['cyan', 'magenta'],
|
||||
test5: ['brown', 'purple'],
|
||||
});
|
||||
const scheme1 = getInstance().getScheme('test4');
|
||||
expect(scheme1).toEqual(['cyan', 'magenta']);
|
||||
const scheme2 = getInstance().getScheme('test5');
|
||||
expect(scheme2).toEqual(['brown', 'purple']);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -17,6 +17,20 @@ describe('Registry', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('.clear()', () => {
|
||||
it('clears all registered items', () => {
|
||||
const registry = new Registry();
|
||||
registry.registerValue('a', 'testValue');
|
||||
registry.clear();
|
||||
expect(Object.keys(registry.items)).toHaveLength(0);
|
||||
expect(Object.keys(registry.promises)).toHaveLength(0);
|
||||
});
|
||||
it('returns the registry itself', () => {
|
||||
const registry = new Registry();
|
||||
expect(registry.clear()).toBe(registry);
|
||||
});
|
||||
});
|
||||
|
||||
describe('.has(key)', () => {
|
||||
it('returns true if an item with the given key exists', () => {
|
||||
const registry = new Registry();
|
||||
@@ -134,6 +148,34 @@ describe('Registry', () => {
|
||||
);
|
||||
});
|
||||
|
||||
describe('.getMap()', () => {
|
||||
it('returns key-value map as plain object', () => {
|
||||
const registry = new Registry();
|
||||
registry.registerValue('a', 'cat');
|
||||
registry.registerLoader('b', () => 'dog');
|
||||
expect(registry.getMap()).toEqual({
|
||||
a: 'cat',
|
||||
b: 'dog',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('.getMapAsPromise()', () => {
|
||||
it('returns a promise of key-value map', () => {
|
||||
const registry = new Registry();
|
||||
registry.registerValue('a', 'test1');
|
||||
registry.registerLoader('b', () => 'test2');
|
||||
registry.registerLoader('c', () => Promise.resolve('test3'));
|
||||
return registry.getMapAsPromise().then((map) => {
|
||||
expect(map).toEqual({
|
||||
a: 'test1',
|
||||
b: 'test2',
|
||||
c: 'test3',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('.keys()', () => {
|
||||
it('returns an array of keys', () => {
|
||||
const registry = new Registry();
|
||||
@@ -143,6 +185,34 @@ describe('Registry', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('.values()', () => {
|
||||
it('returns an array of values', () => {
|
||||
const registry = new Registry();
|
||||
registry.registerValue('a', 'test1');
|
||||
registry.registerLoader('b', () => 'test2');
|
||||
expect(registry.values()).toEqual([
|
||||
'test1',
|
||||
'test2',
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('.valuesAsPromise()', () => {
|
||||
it('returns a Promise of an array { key, value }', () => {
|
||||
const registry = new Registry();
|
||||
registry.registerValue('a', 'test1');
|
||||
registry.registerLoader('b', () => 'test2');
|
||||
registry.registerLoader('c', () => Promise.resolve('test3'));
|
||||
return registry.valuesAsPromise().then((entries) => {
|
||||
expect(entries).toEqual([
|
||||
'test1',
|
||||
'test2',
|
||||
'test3',
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('.entries()', () => {
|
||||
it('returns an array of { key, value }', () => {
|
||||
const registry = new Registry();
|
||||
|
||||
@@ -3,13 +3,21 @@ import CategoricalColorNamespace, {
|
||||
getScale,
|
||||
getColor,
|
||||
DEFAULT_NAMESPACE,
|
||||
} from '../../../src/modules/CategoricalColorNamespace';
|
||||
import { registerScheme } from '../../../src/modules/ColorSchemeManager';
|
||||
} from '../../../../src/modules/colors/CategoricalColorNamespace';
|
||||
import getCategoricalSchemeRegistry from '../../../../src/modules/colors/CategoricalSchemeRegistrySingleton';
|
||||
import CategoricalScheme from '../../../../src/modules/colors/CategoricalScheme';
|
||||
|
||||
describe('CategoricalColorNamespace', () => {
|
||||
beforeAll(() => {
|
||||
registerScheme('testColors', ['red', 'green', 'blue']);
|
||||
registerScheme('testColors2', ['red', 'green', 'blue']);
|
||||
getCategoricalSchemeRegistry()
|
||||
.registerValue('testColors', new CategoricalScheme({
|
||||
name: 'testColors',
|
||||
colors: ['red', 'green', 'blue'],
|
||||
}))
|
||||
.registerValue('testColors2', new CategoricalScheme({
|
||||
name: 'testColors2',
|
||||
colors: ['red', 'green', 'blue'],
|
||||
}));
|
||||
});
|
||||
it('The class constructor cannot be accessed directly', () => {
|
||||
expect(typeof CategoricalColorNamespace).not.toBe('Function');
|
||||
@@ -1,4 +1,4 @@
|
||||
import CategoricalColorScale from '../../../src/modules/CategoricalColorScale';
|
||||
import CategoricalColorScale from '../../../../src/modules/colors/CategoricalColorScale';
|
||||
|
||||
describe('CategoricalColorScale', () => {
|
||||
it('exists', () => {
|
||||
@@ -0,0 +1,64 @@
|
||||
import ColorSchemeRegistry from '../../../../src/modules/colors/ColorSchemeRegistry';
|
||||
import CategoricalScheme from '../../../../src/modules/colors/CategoricalScheme';
|
||||
|
||||
describe('ColorSchemeRegistry', () => {
|
||||
const registry = new ColorSchemeRegistry();
|
||||
const SCHEME1 = new CategoricalScheme({
|
||||
name: 'test',
|
||||
colors: ['red', 'green', 'blue'],
|
||||
});
|
||||
const SCHEME2 = new CategoricalScheme({
|
||||
name: 'test2',
|
||||
colors: ['orange', 'yellow', 'pink'],
|
||||
});
|
||||
const SCHEME3 = new CategoricalScheme({
|
||||
name: 'test3',
|
||||
colors: ['cyan', 'magenta'],
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
registry.clear();
|
||||
registry.registerValue('test', SCHEME1);
|
||||
registry.registerValue('test2', SCHEME2);
|
||||
registry.setDefaultSchemeName('test');
|
||||
});
|
||||
describe('.get()', () => {
|
||||
it('.get() returns default color scheme', () => {
|
||||
const scheme = registry.get();
|
||||
expect(scheme).toEqual(SCHEME1);
|
||||
});
|
||||
it('.get(name) returns color scheme with specified name', () => {
|
||||
const scheme = registry.get('test2');
|
||||
expect(scheme).toEqual(SCHEME2);
|
||||
});
|
||||
});
|
||||
describe('.getDefaultSchemeName()', () => {
|
||||
it('returns default scheme name', () => {
|
||||
const name = registry.getDefaultSchemeName();
|
||||
expect(name).toBe('test');
|
||||
});
|
||||
});
|
||||
describe('.setDefaultSchemeName()', () => {
|
||||
it('set default scheme name', () => {
|
||||
registry.setDefaultSchemeName('test2');
|
||||
const name = registry.getDefaultSchemeName();
|
||||
expect(name).toBe('test2');
|
||||
registry.setDefaultSchemeName('test');
|
||||
});
|
||||
it('returns the ColorSchemeRegistry instance', () => {
|
||||
const instance = registry.setDefaultSchemeName('test');
|
||||
expect(instance).toBe(registry);
|
||||
});
|
||||
});
|
||||
describe('.registerValue(name, colors)', () => {
|
||||
it('sets schemename and color', () => {
|
||||
registry.registerValue('test3', SCHEME3);
|
||||
const scheme = registry.get('test3');
|
||||
expect(scheme).toEqual(SCHEME3);
|
||||
});
|
||||
it('returns the ColorSchemeRegistry instance', () => {
|
||||
const instance = registry.registerValue('test3', SCHEME3);
|
||||
expect(instance).toBe(registry);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user