You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2018/11/07 01:55:02 UTC

[GitHub] kristw closed pull request #6234: Integrate @superset-ui/{core, color, chart} modules

kristw closed pull request #6234: Integrate @superset-ui/{core,color,chart} modules
URL: https://github.com/apache/incubator-superset/pull/6234
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/superset/assets/package.json b/superset/assets/package.json
index 8c15bfaeec..a0aa9e8e6c 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -51,8 +51,11 @@
     "@data-ui/sparkline": "^0.0.54",
     "@data-ui/theme": "^0.0.62",
     "@data-ui/xy-chart": "^0.0.61",
-    "@superset-ui/connection": "^0.3.0",
-    "@superset-ui/translation": "^0.3.0",
+    "@superset-ui/chart": "^0.5.0",
+    "@superset-ui/color": "^0.5.0",
+    "@superset-ui/connection": "^0.5.0",
+    "@superset-ui/core": "^0.5.0",
+    "@superset-ui/translation": "^0.5.0",
     "@vx/legend": "^0.0.170",
     "@vx/responsive": "0.0.172",
     "@vx/scale": "^0.0.165",
@@ -66,9 +69,13 @@
     "d3-array": "^1.2.4",
     "d3-cloud": "^1.2.1",
     "d3-color": "^1.2.0",
+    "d3-format": "^1.3.2",
     "d3-hierarchy": "^1.1.5",
     "d3-sankey": "^0.4.2",
+    "d3-scale": "^2.1.2",
+    "d3-selection": "^1.3.2",
     "d3-svg-legend": "^1.x",
+    "d3-time-format": "^2.1.3",
     "d3-tip": "^0.9.1",
     "datamaps": "^0.5.8",
     "datatables.net-bs": "^1.10.15",
diff --git a/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx b/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx
index ca814ee7a9..7c24bd361b 100644
--- a/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/ColorPickerControl_spec.jsx
@@ -3,12 +3,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { OverlayTrigger } from 'react-bootstrap';
 import { SketchPicker } from 'react-color';
+import { CategoricalScheme, getCategoricalSchemeRegistry } from '@superset-ui/color';
 
 import ColorPickerControl from
   '../../../../src/explore/components/controls/ColorPickerControl';
 import ControlHeader from '../../../../src/explore/components/ControlHeader';
-import getCategoricalSchemeRegistry from '../../../../src/modules/colors/CategoricalSchemeRegistrySingleton';
-import CategoricalScheme from '../../../../src/modules/colors/CategoricalScheme';
 
 const defaultProps = {
   value: { },
diff --git a/superset/assets/spec/javascripts/explore/components/ColorScheme_spec.jsx b/superset/assets/spec/javascripts/explore/components/ColorScheme_spec.jsx
index 995bb59dc8..25976530e1 100644
--- a/superset/assets/spec/javascripts/explore/components/ColorScheme_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/ColorScheme_spec.jsx
@@ -2,10 +2,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Creatable } from 'react-select';
+import { getCategoricalSchemeRegistry } from '@superset-ui/color';
 
 import ColorSchemeControl from
   '../../../../src/explore/components/controls/ColorSchemeControl';
-import getCategoricalSchemeRegistry from '../../../../src/modules/colors/CategoricalSchemeRegistrySingleton';
 
 const defaultProps = {
   options: getCategoricalSchemeRegistry().keys().map(s => ([s, s])),
diff --git a/superset/assets/spec/javascripts/explore/components/VizTypeControl_spec.jsx b/superset/assets/spec/javascripts/explore/components/VizTypeControl_spec.jsx
index a6db627552..08f57c4a25 100644
--- a/superset/assets/spec/javascripts/explore/components/VizTypeControl_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/VizTypeControl_spec.jsx
@@ -2,9 +2,8 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { Modal } from 'react-bootstrap';
+import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/chart';
 import VizTypeControl from '../../../../src/explore/components/controls/VizTypeControl';
-import getChartMetadataRegistry from '../../../../src/visualizations/core/registries/ChartMetadataRegistrySingleton';
-import ChartMetadata from '../../../../src/visualizations/core/models/ChartMetadata';
 
 const defaultProps = {
   name: 'viz_type',
diff --git a/superset/assets/spec/javascripts/modules/Registry_spec.js b/superset/assets/spec/javascripts/modules/Registry_spec.js
deleted file mode 100644
index 111a614516..0000000000
--- a/superset/assets/spec/javascripts/modules/Registry_spec.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import Registry from '../../../src/modules/Registry';
-
-describe('Registry', () => {
-  it('exists', () => {
-    expect(Registry !== undefined).toBe(true);
-  });
-
-  describe('new Registry(name)', () => {
-    it('can create a new registry when name is not given', () => {
-      const registry = new Registry();
-      expect(registry).toBeInstanceOf(Registry);
-    });
-    it('can create a new registry when name is given', () => {
-      const registry = new Registry('abc');
-      expect(registry).toBeInstanceOf(Registry);
-      expect(registry.name).toBe('abc');
-    });
-  });
-
-  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();
-      registry.registerValue('a', 'testValue');
-      expect(registry.has('a')).toBe(true);
-      registry.registerLoader('b', () => 'testValue2');
-      expect(registry.has('b')).toBe(true);
-    });
-    it('returns false if an item with the given key does not exist', () => {
-      const registry = new Registry();
-      expect(registry.has('a')).toBe(false);
-    });
-  });
-
-  describe('.registerValue(key, value)', () => {
-    it('registers the given value with the given key', () => {
-      const registry = new Registry();
-      registry.registerValue('a', 'testValue');
-      expect(registry.has('a')).toBe(true);
-      expect(registry.get('a')).toBe('testValue');
-    });
-    it('returns the registry itself', () => {
-      const registry = new Registry();
-      expect(registry.registerValue('a', 'testValue')).toBe(registry);
-    });
-  });
-
-  describe('.registerLoader(key, loader)', () => {
-    it('registers the given loader with the given key', () => {
-      const registry = new Registry();
-      registry.registerLoader('a', () => 'testValue');
-      expect(registry.has('a')).toBe(true);
-      expect(registry.get('a')).toBe('testValue');
-    });
-    it('returns the registry itself', () => {
-      const registry = new Registry();
-      expect(registry.registerLoader('a', () => 'testValue')).toBe(registry);
-    });
-  });
-
-  describe('.get(key)', () => {
-    it('given the key, returns the value if the item is a value', () => {
-      const registry = new Registry();
-      registry.registerValue('a', 'testValue');
-      expect(registry.get('a')).toBe('testValue');
-    });
-    it(
-      'given the key, returns the result of the loader function if the item is a loader',
-      () => {
-        const registry = new Registry();
-        registry.registerLoader('b', () => 'testValue2');
-        expect(registry.get('b')).toBe('testValue2');
-      },
-    );
-    it('returns null if the item with specified key does not exist', () => {
-      const registry = new Registry();
-      expect(registry.get('a')).toBeNull();
-    });
-    it(
-      'If the key was registered multiple times, returns the most recent item.',
-      () => {
-        const registry = new Registry();
-        registry.registerValue('a', 'testValue');
-        expect(registry.get('a')).toBe('testValue');
-        registry.registerLoader('a', () => 'newValue');
-        expect(registry.get('a')).toBe('newValue');
-      },
-    );
-  });
-
-  describe('.getAsPromise(key)', () => {
-    it(
-      'given the key, returns a promise of item value if the item is a value',
-      () => {
-        const registry = new Registry();
-        registry.registerValue('a', 'testValue');
-        return registry.getAsPromise('a').then((value) => {
-          expect(value).toBe('testValue');
-        });
-      },
-    );
-    it(
-      'given the key, returns a promise of result of the loader function if the item is a loader ',
-      () => {
-        const registry = new Registry();
-        registry.registerLoader('a', () => 'testValue');
-        return registry.getAsPromise('a').then((value) => {
-          expect(value).toBe('testValue');
-        });
-      },
-    );
-    it(
-      'returns a rejected promise if the item with specified key does not exist',
-      () => {
-        const registry = new Registry();
-        return registry.getAsPromise('a').then(null, (err) => {
-          expect(err).toBe('Item with key "a" is not registered.');
-        });
-      },
-    );
-    it(
-      'If the key was registered multiple times, returns a promise of the most recent item.',
-      () => {
-        const registry = new Registry();
-        registry.registerValue('a', 'testValue');
-        const promise1 = registry.getAsPromise('a').then((value) => {
-          expect(value).toBe('testValue');
-        });
-        registry.registerLoader('a', () => 'newValue');
-        const promise2 = registry.getAsPromise('a').then((value) => {
-          expect(value).toBe('newValue');
-        });
-        return Promise.all([promise1, promise2]);
-      },
-    );
-  });
-
-  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();
-      registry.registerValue('a', 'testValue');
-      registry.registerLoader('b', () => 'test2');
-      expect(registry.keys()).toEqual(['a', 'b']);
-    });
-  });
-
-  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();
-      registry.registerValue('a', 'test1');
-      registry.registerLoader('b', () => 'test2');
-      expect(registry.entries()).toEqual([
-        { key: 'a', value: 'test1' },
-        { key: 'b', value: 'test2' },
-      ]);
-    });
-  });
-
-  describe('.entriesAsPromise()', () => {
-    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.entriesAsPromise().then((entries) => {
-        expect(entries).toEqual([
-          { key: 'a', value: 'test1' },
-          { key: 'b', value: 'test2' },
-          { key: 'c', value: 'test3' },
-        ]);
-      });
-    });
-  });
-
-  describe('.remove(key)', () => {
-    it('removes the item with given key', () => {
-      const registry = new Registry();
-      registry.registerValue('a', 'testValue');
-      registry.remove('a');
-      expect(registry.get('a')).toBeNull();
-    });
-    it('does not throw error if the key does not exist', () => {
-      const registry = new Registry();
-      expect(() => registry.remove('a')).not.toThrowError();
-    });
-    it('returns itself', () => {
-      const registry = new Registry();
-      registry.registerValue('a', 'testValue');
-      expect(registry.remove('a')).toBe(registry);
-    });
-  });
-});
diff --git a/superset/assets/spec/javascripts/modules/colors/CategoricalColorNameSpace_spec.js b/superset/assets/spec/javascripts/modules/colors/CategoricalColorNameSpace_spec.js
deleted file mode 100644
index 8ff952ac5c..0000000000
--- a/superset/assets/spec/javascripts/modules/colors/CategoricalColorNameSpace_spec.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import CategoricalColorNamespace, {
-  getNamespace,
-  getScale,
-  getColor,
-  DEFAULT_NAMESPACE,
-} from '../../../../src/modules/colors/CategoricalColorNamespace';
-import getCategoricalSchemeRegistry from '../../../../src/modules/colors/CategoricalSchemeRegistrySingleton';
-import CategoricalScheme from '../../../../src/modules/colors/CategoricalScheme';
-
-describe('CategoricalColorNamespace', () => {
-  beforeAll(() => {
-    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');
-  });
-  describe('static getNamespace()', () => {
-    it('returns default namespace if name is not specified', () => {
-      const namespace = getNamespace();
-      expect(namespace !== undefined).toBe(true);
-      expect(namespace.name).toBe(DEFAULT_NAMESPACE);
-    });
-    it('returns namespace with specified name', () => {
-      const namespace = getNamespace('myNamespace');
-      expect(namespace !== undefined).toBe(true);
-      expect(namespace.name).toBe('myNamespace');
-    });
-    it('returns existing instance if the name already exists', () => {
-      const ns1 = getNamespace('myNamespace');
-      const ns2 = getNamespace('myNamespace');
-      expect(ns1).toBe(ns2);
-      const ns3 = getNamespace();
-      const ns4 = getNamespace();
-      expect(ns3).toBe(ns4);
-    });
-  });
-  describe('.getScale()', () => {
-    it('returns a CategoricalColorScale from given scheme name', () => {
-      const namespace = getNamespace('test-get-scale1');
-      const scale = namespace.getScale('testColors');
-      expect(scale).toBeDefined();
-      expect(scale.getColor('dog')).toBeDefined();
-    });
-    it(
-      'returns same scale if the scale with that name already exists in this namespace',
-      () => {
-        const namespace = getNamespace('test-get-scale2');
-        const scale1 = namespace.getScale('testColors');
-        const scale2 = namespace.getScale('testColors2');
-        const scale3 = namespace.getScale('testColors2');
-        const scale4 = namespace.getScale('testColors');
-        expect(scale1).toBe(scale4);
-        expect(scale2).toBe(scale3);
-      },
-    );
-  });
-  describe('.setColor()', () => {
-    it(
-      'overwrites color for all CategoricalColorScales in this namespace',
-      () => {
-        const namespace = getNamespace('test-set-scale1');
-        namespace.setColor('dog', 'black');
-        const scale = namespace.getScale('testColors');
-        expect(scale.getColor('dog')).toBe('black');
-        expect(scale.getColor('boy')).not.toBe('black');
-      },
-    );
-    it('can override forcedColors in each scale', () => {
-      const namespace = getNamespace('test-set-scale2');
-      namespace.setColor('dog', 'black');
-      const scale = namespace.getScale('testColors');
-      scale.setColor('dog', 'pink');
-      expect(scale.getColor('dog')).toBe('black');
-      expect(scale.getColor('boy')).not.toBe('black');
-    });
-    it('does not affect scales in other namespaces', () => {
-      const ns1 = getNamespace('test-set-scale3.1');
-      ns1.setColor('dog', 'black');
-      const scale1 = ns1.getScale('testColors');
-      const ns2 = getNamespace('test-set-scale3.2');
-      const scale2 = ns2.getScale('testColors');
-      expect(scale1.getColor('dog')).toBe('black');
-      expect(scale2.getColor('dog')).not.toBe('black');
-    });
-    it('returns the namespace instance', () => {
-      const ns1 = getNamespace('test-set-scale3.1');
-      const ns2 = ns1.setColor('dog', 'black');
-      expect(ns1).toBe(ns2);
-    });
-  });
-  describe('static getScale()', () => {
-    it(
-      'getScale() returns a CategoricalColorScale with default scheme in default namespace',
-      () => {
-        const scale = getScale();
-        expect(scale).toBeDefined();
-        const scale2 = getNamespace().getScale();
-        expect(scale).toBe(scale2);
-      },
-    );
-    it(
-      'getScale(scheme) returns a CategoricalColorScale with specified scheme in default namespace',
-      () => {
-        const scale = getScale('testColors');
-        expect(scale).toBeDefined();
-        const scale2 = getNamespace().getScale('testColors');
-        expect(scale).toBe(scale2);
-      },
-    );
-    it(
-      'getScale(scheme, namespace) returns a CategoricalColorScale with specified scheme in specified namespace',
-      () => {
-        const scale = getScale('testColors', 'test-getScale');
-        expect(scale).toBeDefined();
-        const scale2 = getNamespace('test-getScale').getScale('testColors');
-        expect(scale).toBe(scale2);
-      },
-    );
-  });
-  describe('static getColor()', () => {
-    it(
-      'getColor(value) returns a color from default scheme in default namespace',
-      () => {
-        const value = 'dog';
-        const color = getColor(value);
-        const color2 = getNamespace().getScale().getColor(value);
-        expect(color).toBe(color2);
-      },
-    );
-    it(
-      'getColor(value, scheme) returns a color from specified scheme in default namespace',
-      () => {
-        const value = 'dog';
-        const scheme = 'testColors';
-        const color = getColor(value, scheme);
-        const color2 = getNamespace().getScale(scheme).getColor(value);
-        expect(color).toBe(color2);
-      },
-    );
-    it(
-      'getColor(value, scheme, namespace) returns a color from specified scheme in specified namespace',
-      () => {
-        const value = 'dog';
-        const scheme = 'testColors';
-        const namespace = 'test-getColor';
-        const color = getColor(value, scheme, namespace);
-        const color2 = getNamespace(namespace).getScale(scheme).getColor(value);
-        expect(color).toBe(color2);
-      },
-    );
-  });
-});
diff --git a/superset/assets/spec/javascripts/modules/colors/CategoricalColorScale_spec.js b/superset/assets/spec/javascripts/modules/colors/CategoricalColorScale_spec.js
deleted file mode 100644
index 32a455d71b..0000000000
--- a/superset/assets/spec/javascripts/modules/colors/CategoricalColorScale_spec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import CategoricalColorScale from '../../../../src/modules/colors/CategoricalColorScale';
-
-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 = {};
-      const scale = new CategoricalColorScale(['blue', 'red', 'green'], parentForcedColors);
-      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);
-    });
-    it('recycles colors when number of items exceed available colors', () => {
-      const colorSet = {};
-      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]++;
-        } else {
-          colorSet[color] = 1;
-        }
-      });
-      expect(Object.keys(colorSet)).toHaveLength(3);
-      ['blue', 'red', 'green'].forEach((color) => {
-        expect(colorSet[color]).toBe(2);
-      });
-    });
-  });
-  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');
-      const scale2 = new CategoricalColorScale(['blue', 'red', 'green'], scale1.forcedColors);
-      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);
-    });
-  });
-  describe('.toFunction()', () => {
-    it('returns a function that wraps getColor', () => {
-      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
-      const colorFn = scale.toFunction();
-      expect(scale.getColor('pig')).toBe(colorFn('pig'));
-      expect(scale.getColor('cat')).toBe(colorFn('cat'));
-    });
-  });
-});
diff --git a/superset/assets/spec/javascripts/modules/colors/ColorSchemeRegistry_spec.js b/superset/assets/spec/javascripts/modules/colors/ColorSchemeRegistry_spec.js
deleted file mode 100644
index 94f6c89517..0000000000
--- a/superset/assets/spec/javascripts/modules/colors/ColorSchemeRegistry_spec.js
+++ /dev/null
@@ -1,64 +0,0 @@
-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);
-    });
-  });
-});
diff --git a/superset/assets/spec/javascripts/utils/convertKeysToCamelCase_spec.js b/superset/assets/spec/javascripts/utils/convertKeysToCamelCase_spec.js
deleted file mode 100644
index 4a57bc1212..0000000000
--- a/superset/assets/spec/javascripts/utils/convertKeysToCamelCase_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import convertKeysToCamelCase from '../../../src/utils/convertKeysToCamelCase';
-
-describe('convertKeysToCamelCase(object)', () => {
-  it('returns undefined for undefined input', () => {
-    expect(convertKeysToCamelCase(undefined)).toBeUndefined();
-  });
-  it('returns null for null input', () => {
-    expect(convertKeysToCamelCase(null)).toBeNull();
-  });
-  it('returns a new object that has all keys in camelCase', () => {
-    const input = {
-      is_happy: true,
-      'is-angry': false,
-      isHungry: false,
-    };
-    expect(convertKeysToCamelCase(input)).toEqual({
-      isHappy: true,
-      isAngry: false,
-      isHungry: false,
-    });
-  });
-  it('throws error if input is not a plain object', () => {
-    expect(() => { convertKeysToCamelCase({}); }).not.toThrowError();
-    expect(() => { convertKeysToCamelCase(''); }).toThrowError();
-    expect(() => { convertKeysToCamelCase(new Map()); }).toThrowError();
-  });
-});
diff --git a/superset/assets/spec/javascripts/utils/isDefined_spec.js b/superset/assets/spec/javascripts/utils/isDefined_spec.js
deleted file mode 100644
index ea0effc0d7..0000000000
--- a/superset/assets/spec/javascripts/utils/isDefined_spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import isDefined from '../../../src/utils/isDefined';
-
-describe('isDefined(value)', () => {
-  it('returns true if value is not null and not undefined', () => {
-    expect(isDefined(0)).toBe(true);
-    expect(isDefined(1)).toBe(true);
-    expect(isDefined('')).toBe(true);
-    expect(isDefined('a')).toBe(true);
-    expect(isDefined([])).toBe(true);
-    expect(isDefined([0])).toBe(true);
-    expect(isDefined([1])).toBe(true);
-    expect(isDefined({})).toBe(true);
-    expect(isDefined({ a: 1 })).toBe(true);
-    expect(isDefined([{}])).toBe(true);
-  });
-  it('returns false otherwise', () => {
-    expect(isDefined(null)).toBe(false);
-    expect(isDefined(undefined)).toBe(false);
-  });
-});
diff --git a/superset/assets/spec/javascripts/utils/isRequired_spec.js b/superset/assets/spec/javascripts/utils/isRequired_spec.js
deleted file mode 100644
index c41d5fbcd2..0000000000
--- a/superset/assets/spec/javascripts/utils/isRequired_spec.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import isRequired from '../../../src/utils/isRequired';
-
-describe('isRequired(field)', () => {
-  it('should throw error with the given field in the message', () => {
-    expect(() => isRequired('myField')).toThrowError(Error);
-  });
-});
diff --git a/superset/assets/spec/javascripts/utils/makeSingleton_spec.js b/superset/assets/spec/javascripts/utils/makeSingleton_spec.js
deleted file mode 100644
index f7b1eb8114..0000000000
--- a/superset/assets/spec/javascripts/utils/makeSingleton_spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import makeSingleton from '../../../src/utils/makeSingleton';
-
-describe('makeSingleton()', () => {
-  class Dog {
-    constructor(name) {
-      this.name = name;
-    }
-    sit() {
-      this.isSitting = true;
-    }
-  }
-  describe('makeSingleton(BaseClass)', () => {
-    const getInstance = makeSingleton(Dog);
-
-    it(
-      'returns a function for getting singleton instance of a given base class',
-      () => {
-        expect(typeof getInstance).toBe('function');
-        expect(getInstance()).toBeInstanceOf(Dog);
-      },
-    );
-    it('returned function returns same instance across all calls', () => {
-      expect(getInstance()).toBe(getInstance());
-    });
-  });
-  describe('makeSingleton(BaseClass, ...args)', () => {
-    const getInstance = makeSingleton(Dog, 'Doug');
-
-    it(
-      'returns a function for getting singleton instance of a given base class constructed with the given arguments',
-      () => {
-        expect(typeof getInstance).toBe('function');
-        expect(getInstance()).toBeInstanceOf(Dog);
-        expect(getInstance().name).toBe('Doug');
-      },
-    );
-    it('returned function returns same instance across all calls', () => {
-      expect(getInstance()).toBe(getInstance());
-    });
-  });
-
-});
diff --git a/superset/assets/spec/javascripts/visualizations/models/ChartPlugin_spec.js b/superset/assets/spec/javascripts/visualizations/models/ChartPlugin_spec.js
deleted file mode 100644
index 4e7a71441c..0000000000
--- a/superset/assets/spec/javascripts/visualizations/models/ChartPlugin_spec.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import ChartPlugin from '../../../../src/visualizations/core/models/ChartPlugin';
-import ChartMetadata from '../../../../src/visualizations/core/models/ChartMetadata';
-
-describe('ChartPlugin', () => {
-  const metadata = new ChartMetadata({});
-
-  it('exists', () => {
-    expect(ChartPlugin).toBeDefined();
-  });
-
-  describe('new ChartPlugin()', () => {
-    it('creates a new plugin', () => {
-      const plugin = new ChartPlugin({
-        metadata,
-        Chart() {},
-      });
-      expect(plugin).toBeInstanceOf(ChartPlugin);
-    });
-    it('throws an error if metadata is not specified', () => {
-      expect(() => new ChartPlugin()).toThrowError(Error);
-    });
-    it('throws an error if none of Chart or loadChart is specified', () => {
-      expect(() => new ChartPlugin({ metadata })).toThrowError(Error);
-    });
-  });
-
-  describe('.register(key)', () => {
-    const plugin = new ChartPlugin({
-      metadata,
-      Chart() {},
-    });
-    it('throws an error if key is not provided', () => {
-      expect(() => plugin.register()).toThrowError(Error);
-      expect(() => plugin.configure({ key: 'abc' }).register()).not.toThrowError(Error);
-    });
-    it('returns itself', () => {
-      expect(plugin.configure({ key: 'abc' }).register()).toBe(plugin);
-    });
-  });
-});
diff --git a/superset/assets/spec/javascripts/visualizations/models/Plugin_spec.js b/superset/assets/spec/javascripts/visualizations/models/Plugin_spec.js
deleted file mode 100644
index ffde9fe0f0..0000000000
--- a/superset/assets/spec/javascripts/visualizations/models/Plugin_spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import Plugin from '../../../../src/visualizations/core/models/Plugin';
-
-describe('Plugin', () => {
-  it('exists', () => {
-    expect(Plugin).toBeDefined();
-  });
-
-  describe('new Plugin()', () => {
-    it('creates a new plugin', () => {
-      const plugin = new Plugin();
-      expect(plugin).toBeInstanceOf(Plugin);
-    });
-  });
-
-  describe('.configure(config, replace)', () => {
-    it(
-      'extends the default config with given config when replace is not set or false',
-      () => {
-        const plugin = new Plugin();
-        plugin.configure({ key: 'abc', foo: 'bar' });
-        plugin.configure({ key: 'def' });
-        expect(plugin.config).toEqual({ key: 'def', foo: 'bar' });
-      },
-    );
-    it(
-      'replaces the default config with given config when replace is true',
-      () => {
-        const plugin = new Plugin();
-        plugin.configure({ key: 'abc', foo: 'bar' });
-        plugin.configure({ key: 'def' }, true);
-        expect(plugin.config).toEqual({ key: 'def' });
-      },
-    );
-    it('returns the plugin itself', () => {
-      const plugin = new Plugin();
-      expect(plugin.configure({ key: 'abc' })).toBe(plugin);
-    });
-  });
-
-  describe('.resetConfig()', () => {
-    it('resets config back to default', () => {
-      const plugin = new Plugin();
-      plugin.configure({ key: 'abc', foo: 'bar' });
-      plugin.resetConfig();
-      expect(plugin.config).toEqual({});
-    });
-    it('returns the plugin itself', () => {
-      const plugin = new Plugin();
-      expect(plugin.resetConfig()).toBe(plugin);
-    });
-  });
-});
diff --git a/superset/assets/spec/javascripts/visualizations/models/Preset_spec.js b/superset/assets/spec/javascripts/visualizations/models/Preset_spec.js
deleted file mode 100644
index 1836e932c0..0000000000
--- a/superset/assets/spec/javascripts/visualizations/models/Preset_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Preset from '../../../../src/visualizations/core/models/Preset';
-import Plugin from '../../../../src/visualizations/core/models/Plugin';
-
-describe('Preset', () => {
-  it('exists', () => {
-    expect(Preset).toBeDefined();
-  });
-
-  describe('new Preset()', () => {
-    it('creates new preset', () => {
-      const preset = new Preset();
-      expect(preset).toBeInstanceOf(Preset);
-    });
-  });
-
-  describe('.register()', () => {
-    it('register all listed presets then plugins', () => {
-      const values = [];
-      class Plugin1 extends Plugin {
-        register() {
-          values.push(1);
-        }
-      }
-      class Plugin2 extends Plugin {
-        register() {
-          values.push(2);
-        }
-      }
-      class Plugin3 extends Plugin {
-        register() {
-          values.push(3);
-        }
-      }
-      class Plugin4 extends Plugin {
-        register() {
-          const { key } = this.config;
-          values.push(key);
-        }
-      }
-
-      const preset1 = new Preset({
-        plugins: [new Plugin1()],
-      });
-      const preset2 = new Preset({
-        plugins: [new Plugin2()],
-      });
-      const preset3 = new Preset({
-        presets: [preset1, preset2],
-        plugins: [
-          new Plugin3(),
-          new Plugin4().configure({ key: 'abc' }),
-        ],
-      });
-      preset3.register();
-      expect(values).toEqual([1, 2, 3, 'abc']);
-    });
-
-    it('returns itself', () => {
-      const preset = new Preset();
-      expect(preset.register()).toBe(preset);
-    });
-  });
-});
diff --git a/superset/assets/src/addSlice/AddSliceContainer.jsx b/superset/assets/src/addSlice/AddSliceContainer.jsx
index 968856e751..b3b9304d0a 100644
--- a/superset/assets/src/addSlice/AddSliceContainer.jsx
+++ b/superset/assets/src/addSlice/AddSliceContainer.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Panel } from 'react-bootstrap';
 import Select from 'react-virtualized-select';
 import { t } from '@superset-ui/translation';
-import getChartMetadataRegistry from '../visualizations/core/registries/ChartMetadataRegistrySingleton';
+import { getChartMetadataRegistry } from '@superset-ui/chart';
 
 const propTypes = {
   datasources: PropTypes.arrayOf(PropTypes.shape({
diff --git a/superset/assets/src/chart/Chart.jsx b/superset/assets/src/chart/Chart.jsx
index b6bc8d7d9c..343284fac4 100644
--- a/superset/assets/src/chart/Chart.jsx
+++ b/superset/assets/src/chart/Chart.jsx
@@ -3,11 +3,11 @@ import { snakeCase } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Tooltip } from 'react-bootstrap';
+import { ChartProps } from '@superset-ui/chart';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger';
 import Loading from '../components/Loading';
 import RefreshChartOverlay from '../components/RefreshChartOverlay';
 import StackTraceMessage from '../components/StackTraceMessage';
-import ChartProps from '../visualizations/core/models/ChartProps';
 import SuperChart from '../visualizations/core/components/SuperChart';
 import './chart.css';
 
diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/superset/assets/src/dashboard/reducers/getInitialState.js
index 65b194af04..75767ec892 100644
--- a/superset/assets/src/dashboard/reducers/getInitialState.js
+++ b/superset/assets/src/dashboard/reducers/getInitialState.js
@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 import shortid from 'shortid';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 
 import { chart } from '../../chart/chartReducer';
 import { initSliceEntities } from './sliceEntities';
@@ -18,7 +19,6 @@ import {
   CHART_TYPE,
   ROW_TYPE,
 } from '../util/componentTypes';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
 
 export default function(bootstrapData) {
   const { user_id, datasources, common, editMode } = bootstrapData;
@@ -39,7 +39,7 @@ export default function(bootstrapData) {
   if (dashboard.metadata && dashboard.metadata.label_colors) {
     const colorMap = dashboard.metadata.label_colors;
     Object.keys(colorMap).forEach(label => {
-      getScale().setColor(label, colorMap[label]);
+      CategoricalColorNamespace.getScale().setColor(label, colorMap[label]);
     });
   }
 
diff --git a/superset/assets/src/explore/components/controls/AnnotationLayer.jsx b/superset/assets/src/explore/components/controls/AnnotationLayer.jsx
index a8783451f2..db887579f7 100644
--- a/superset/assets/src/explore/components/controls/AnnotationLayer.jsx
+++ b/superset/assets/src/explore/components/controls/AnnotationLayer.jsx
@@ -5,6 +5,8 @@ import { Button } from 'react-bootstrap';
 import mathjs from 'mathjs';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
+import { getCategoricalSchemeRegistry } from '@superset-ui/color';
+import { getChartMetadataRegistry } from '@superset-ui/chart';
 
 import SelectControl from './SelectControl';
 import TextControl from './TextControl';
@@ -21,8 +23,6 @@ import ANNOTATION_TYPES, {
 import PopoverSection from '../../../components/PopoverSection';
 import ControlHeader from '../ControlHeader';
 import { nonEmpty } from '../../validators';
-import getChartMetadataRegistry from '../../../visualizations/core/registries/ChartMetadataRegistrySingleton';
-import getCategoricalSchemeRegistry from '../../../modules/colors/CategoricalSchemeRegistrySingleton';
 
 const AUTOMATIC_COLOR = '';
 
diff --git a/superset/assets/src/explore/components/controls/ColorPickerControl.jsx b/superset/assets/src/explore/components/controls/ColorPickerControl.jsx
index 2c631c11ce..751d72cfd8 100644
--- a/superset/assets/src/explore/components/controls/ColorPickerControl.jsx
+++ b/superset/assets/src/explore/components/controls/ColorPickerControl.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { SketchPicker } from 'react-color';
+import { getCategoricalSchemeRegistry } from '@superset-ui/color';
 import ControlHeader from '../ControlHeader';
-import getCategoricalSchemeRegistry from '../../../modules/colors/CategoricalSchemeRegistrySingleton';
 
 const propTypes = {
   onChange: PropTypes.func,
diff --git a/superset/assets/src/explore/components/controls/ColorSchemeControl.jsx b/superset/assets/src/explore/components/controls/ColorSchemeControl.jsx
index 5d9ad4685d..affa24a4ba 100644
--- a/superset/assets/src/explore/components/controls/ColorSchemeControl.jsx
+++ b/superset/assets/src/explore/components/controls/ColorSchemeControl.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { isFunction } from 'lodash';
 import { Creatable } from 'react-select';
 import ControlHeader from '../ControlHeader';
-import { colorScalerFactory } from '../../../modules/colors';
 
 const propTypes = {
   description: PropTypes.string,
@@ -47,23 +46,27 @@ export default class ColorSchemeControl extends React.PureComponent {
   }
 
   renderOption(key) {
-    const { schemes } = this.props;
+    const { isLinear, schemes } = this.props;
     const schemeLookup = isFunction(schemes) ? schemes() : schemes;
-    const currentScheme = schemeLookup[key.value || defaultProps.value].colors;
+    const currentScheme = schemeLookup[key.value || defaultProps.value];
 
-    let colors = currentScheme;
-    if (this.props.isLinear) {
-      const colorScaler = colorScalerFactory(currentScheme);
-      colors = [...Array(20).keys()].map(d => (colorScaler(d / 20)));
-    }
+    const colors = isLinear
+      ? currentScheme.getColors(9)
+      : currentScheme.colors;
 
-    const list = colors.map((color, i) => (
-      <li
-        key={`${currentScheme}-${i}`}
-        style={{ backgroundColor: color, border: `1px solid ${color === 'white' ? 'black' : color}` }}
-      >&nbsp;</li>
-    ));
-    return (<ul className="color-scheme-container">{list}</ul>);
+    return (
+      <ul className="color-scheme-container">
+        {colors.map((color, i) => (
+          <li
+            key={`${currentScheme.name}-${i}`}
+            style={{
+              backgroundColor: color,
+              border: `1px solid ${color === 'white' ? 'black' : color}`,
+            }}
+          >&nbsp;</li>
+        ))}
+      </ul>
+    );
   }
 
   render() {
diff --git a/superset/assets/src/explore/components/controls/VizTypeControl.jsx b/superset/assets/src/explore/components/controls/VizTypeControl.jsx
index 2f92242eac..7b91235618 100644
--- a/superset/assets/src/explore/components/controls/VizTypeControl.jsx
+++ b/superset/assets/src/explore/components/controls/VizTypeControl.jsx
@@ -4,8 +4,8 @@ import {
   Label, Row, Col, FormControl, Modal, OverlayTrigger,
   Tooltip } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
+import { getChartMetadataRegistry } from '@superset-ui/chart';
 
-import getChartMetadataRegistry from '../../../visualizations/core/registries/ChartMetadataRegistrySingleton';
 import ControlHeader from '../ControlHeader';
 import './VizTypeControl.css';
 
diff --git a/superset/assets/src/explore/controls.jsx b/superset/assets/src/explore/controls.jsx
index 92dfb1c24a..2775066863 100644
--- a/superset/assets/src/explore/controls.jsx
+++ b/superset/assets/src/explore/controls.jsx
@@ -40,22 +40,23 @@
  */
 import React from 'react';
 import { t } from '@superset-ui/translation';
+import { getCategoricalSchemeRegistry, getSequentialSchemeRegistry } from '@superset-ui/color';
+
 import {
   formatSelectOptionsForRange,
   formatSelectOptions,
   mainMetric,
 } from '../modules/utils';
 import * as v from './validators';
-import { PRIMARY_COLOR } from '../modules/colors';
 import { defaultViewport } from '../modules/geo';
 import ColumnOption from '../components/ColumnOption';
 import OptionDescription from '../components/OptionDescription';
-import getCategoricalSchemeRegistry from '../modules/colors/CategoricalSchemeRegistrySingleton';
-import getSequentialSchemeRegistry from '../modules/colors/SequentialSchemeRegistrySingleton';
 
 const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
 const sequentialSchemeRegistry = getSequentialSchemeRegistry();
 
+const PRIMARY_COLOR = { r: 0, g: 122, b: 135, a: 1 };
+
 const D3_FORMAT_DOCS = 'D3 format syntax: https://github.com/d3/d3-format';
 
 // input choices & options
diff --git a/superset/assets/src/modules/Registry.js b/superset/assets/src/modules/Registry.js
deleted file mode 100644
index 3b9ef44246..0000000000
--- a/superset/assets/src/modules/Registry.js
+++ /dev/null
@@ -1,104 +0,0 @@
-export default class Registry {
-  constructor(name = '') {
-    this.name = name;
-    this.items = {};
-    this.promises = {};
-  }
-
-  clear() {
-    this.items = {};
-    this.promises = {};
-    return this;
-  }
-
-  has(key) {
-    const item = this.items[key];
-    return item !== null && item !== undefined;
-  }
-
-  registerValue(key, value) {
-    this.items[key] = { value };
-    delete this.promises[key];
-    return this;
-  }
-
-  registerLoader(key, loader) {
-    this.items[key] = { loader };
-    delete this.promises[key];
-    return this;
-  }
-
-  get(key) {
-    const item = this.items[key];
-    if (item) {
-      return item.loader ? item.loader() : item.value;
-    }
-    return null;
-  }
-
-  getAsPromise(key) {
-    const promise = this.promises[key];
-    if (promise) {
-      return promise;
-    }
-    const item = this.get(key);
-    if (item) {
-      const newPromise = Promise.resolve(item);
-      this.promises[key] = newPromise;
-      return newPromise;
-    }
-    return Promise.reject(`Item with key "${key}" is not registered.`);
-  }
-
-  getMap() {
-    return this.keys().reduce((prev, key) => {
-      const map = prev;
-      map[key] = this.get(key);
-      return map;
-    }, {});
-  }
-
-  getMapAsPromise() {
-    const keys = this.keys();
-    return Promise.all(keys.map(key => this.getAsPromise(key)))
-      .then(values => values.reduce((prev, value, i) => {
-        const map = prev;
-        map[keys[i]] = value;
-        return map;
-      }, {}));
-  }
-
-  keys() {
-    return Object.keys(this.items);
-  }
-
-  values() {
-    return this.keys().map(key => this.get(key));
-  }
-
-  valuesAsPromise() {
-    return Promise.all(this.keys().map(key => this.getAsPromise(key)));
-  }
-
-  entries() {
-    return this.keys().map(key => ({
-      key,
-      value: this.get(key),
-    }));
-  }
-
-  entriesAsPromise() {
-    const keys = this.keys();
-    return Promise.all(keys.map(key => this.getAsPromise(key)))
-      .then(values => values.map((value, i) => ({
-        key: keys[i],
-        value,
-      })));
-  }
-
-  remove(key) {
-    delete this.items[key];
-    delete this.promises[key];
-    return this;
-  }
-}
diff --git a/superset/assets/src/modules/colors.js b/superset/assets/src/modules/colors.js
index 183bc4e99d..b05ca67696 100644
--- a/superset/assets/src/modules/colors.js
+++ b/superset/assets/src/modules/colors.js
@@ -1,8 +1,6 @@
 import d3 from 'd3';
-import getSequentialSchemeRegistry from './colors/SequentialSchemeRegistrySingleton';
-
-export const BRAND_COLOR = '#00A699';
-export const PRIMARY_COLOR = { r: 0, g: 122, b: 135, a: 1 };
+import { extent as d3Extent } from 'd3-array';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
 
 export function hexToRGB(hex, alpha = 255) {
   if (!hex) {
@@ -14,7 +12,7 @@ export function hexToRGB(hex, alpha = 255) {
   return [r, g, b, alpha];
 }
 
-export const colorScalerFactory = function (colors, data, accessor, extents, outputRGBA = false) {
+export const colorScalerFactory = function (colors, data, accessor, extents) {
   // Returns a linear scaler out of an array of color
   if (!Array.isArray(colors)) {
     /* eslint no-param-reassign: 0 */
@@ -25,13 +23,9 @@ export const colorScalerFactory = function (colors, data, accessor, extents, out
     ext = extents;
   }
   if (data) {
-    ext = d3.extent(data, accessor);
+    ext = d3Extent(data, accessor);
   }
   const chunkSize = (ext[1] - ext[0]) / (colors.length - 1);
   const points = colors.map((col, i) => ext[0] + (i * chunkSize));
-  const scaler = d3.scale.linear().domain(points).range(colors).clamp(true);
-  if (outputRGBA) {
-    return v => hexToRGB(scaler(v));
-  }
-  return scaler;
+  return d3.scale.linear().domain(points).range(colors).clamp(true);
 };
diff --git a/superset/assets/src/modules/colors/CategoricalColorNamespace.js b/superset/assets/src/modules/colors/CategoricalColorNamespace.js
deleted file mode 100644
index ea5ea935b2..0000000000
--- a/superset/assets/src/modules/colors/CategoricalColorNamespace.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import CategoricalColorScale from './CategoricalColorScale';
-import getCategoricalSchemeRegistry from './CategoricalSchemeRegistrySingleton';
-
-class CategoricalColorNamespace {
-  constructor(name) {
-    this.name = name;
-    this.scales = {};
-    this.forcedItems = {};
-  }
-
-  getScale(schemeName) {
-    const name = schemeName || getCategoricalSchemeRegistry().getDefaultSchemeName();
-    const scale = this.scales[name];
-    if (scale) {
-      return scale;
-    }
-    const newScale = new CategoricalColorScale(
-      getCategoricalSchemeRegistry().get(name).colors,
-      this.forcedItems,
-    );
-    this.scales[name] = newScale;
-    return newScale;
-  }
-
-  /**
-   * Enforce specific color for given value
-   * This will apply across all color scales
-   * in this namespace.
-   * @param {*} value value
-   * @param {*} forcedColor color
-   */
-  setColor(value, forcedColor) {
-    this.forcedItems[value] = forcedColor;
-    return this;
-  }
-}
-
-const namespaces = {};
-export const DEFAULT_NAMESPACE = 'GLOBAL';
-
-export function getNamespace(name = DEFAULT_NAMESPACE) {
-  const instance = namespaces[name];
-  if (instance) {
-    return instance;
-  }
-  const newInstance = new CategoricalColorNamespace(name);
-  namespaces[name] = newInstance;
-  return newInstance;
-}
-
-export function getColor(value, scheme, namespace) {
-  return getNamespace(namespace)
-    .getScale(scheme)
-    .getColor(value);
-}
-
-export function getScale(scheme, namespace) {
-  return getNamespace(namespace)
-    .getScale(scheme);
-}
diff --git a/superset/assets/src/modules/colors/CategoricalColorScale.js b/superset/assets/src/modules/colors/CategoricalColorScale.js
deleted file mode 100644
index 69d8ab2a73..0000000000
--- a/superset/assets/src/modules/colors/CategoricalColorScale.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { TIME_SHIFT_PATTERN } from '../../utils/common';
-
-export function cleanValue(value) {
-  // for superset series that should have the same color
-  return String(value).trim()
-    .toLowerCase()
-    .split(', ')
-    .filter(k => !TIME_SHIFT_PATTERN.test(k))
-    .join(', ');
-}
-
-export default class CategoricalColorScale {
-  /**
-   * Constructor
-   * @param {*} colors an array of colors
-   * @param {*} parentForcedColors optional parameter that comes from parent
-   * (usually CategoricalColorNamespace) and supersede this.forcedColors
-   */
-  constructor(colors, parentForcedColors) {
-    this.colors = colors;
-    this.parentForcedColors = parentForcedColors;
-    this.forcedColors = {};
-    this.seen = {};
-    this.fn = value => this.getColor(value);
-  }
-
-  getColor(value) {
-    const cleanedValue = cleanValue(value);
-
-    const parentColor = this.parentForcedColors && this.parentForcedColors[cleanedValue];
-    if (parentColor) {
-      return parentColor;
-    }
-
-    const forcedColor = this.forcedColors[cleanedValue];
-    if (forcedColor) {
-      return forcedColor;
-    }
-
-    const seenColor = this.seen[cleanedValue];
-    const length = this.colors.length;
-    if (seenColor !== undefined) {
-      return this.colors[seenColor % length];
-    }
-
-    const index = Object.keys(this.seen).length;
-    this.seen[cleanedValue] = index;
-    return this.colors[index % length];
-  }
-
-  /**
-   * Enforce specific color for given value
-   * @param {*} value value
-   * @param {*} forcedColor forcedColor
-   */
-  setColor(value, forcedColor) {
-    this.forcedColors[value] = forcedColor;
-    return this;
-  }
-
-  toFunction() {
-    return this.fn;
-  }
-}
diff --git a/superset/assets/src/modules/colors/CategoricalScheme.js b/superset/assets/src/modules/colors/CategoricalScheme.js
deleted file mode 100644
index c70ee58415..0000000000
--- a/superset/assets/src/modules/colors/CategoricalScheme.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ColorScheme from './ColorScheme';
-
-export default class CategoricalScheme extends ColorScheme {}
diff --git a/superset/assets/src/modules/colors/CategoricalSchemeRegistrySingleton.js b/superset/assets/src/modules/colors/CategoricalSchemeRegistrySingleton.js
deleted file mode 100644
index 54171802da..0000000000
--- a/superset/assets/src/modules/colors/CategoricalSchemeRegistrySingleton.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import ColorSchemeRegistry from './ColorSchemeRegistry';
-import makeSingleton from '../../utils/makeSingleton';
-
-class CategoricalSchemeRegistry extends ColorSchemeRegistry {}
-
-const getInstance = makeSingleton(CategoricalSchemeRegistry);
-
-export default getInstance;
diff --git a/superset/assets/src/modules/colors/ColorScheme.js b/superset/assets/src/modules/colors/ColorScheme.js
deleted file mode 100644
index 91936a077c..0000000000
--- a/superset/assets/src/modules/colors/ColorScheme.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import isRequired from '../../utils/isRequired';
-
-export default class ColorScheme {
-  constructor({
-    name = isRequired('name'),
-    label,
-    colors = isRequired('colors'),
-    description = '',
-  }) {
-    this.name = name;
-    this.label = label || name;
-    this.colors = colors;
-    this.description = description;
-  }
-}
diff --git a/superset/assets/src/modules/colors/ColorSchemeRegistry.js b/superset/assets/src/modules/colors/ColorSchemeRegistry.js
deleted file mode 100644
index 59d798de6c..0000000000
--- a/superset/assets/src/modules/colors/ColorSchemeRegistry.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Registry from '../Registry';
-
-class ColorSchemeRegistry extends Registry {
-  getDefaultSchemeName() {
-    return this.defaultSchemeName;
-  }
-
-  setDefaultSchemeName(schemeName) {
-    this.defaultSchemeName = schemeName;
-    return this;
-  }
-
-  get(schemeName) {
-    return super.get(schemeName || this.defaultSchemeName);
-  }
-
-  registerValue(schemeName, colors) {
-    super.registerValue(schemeName, colors);
-    // If there is no default, set as default
-    if (!this.defaultSchemeName) {
-      this.defaultSchemeName = schemeName;
-    }
-    return this;
-  }
-
-  registerLoader(schemeName, loader) {
-    super.registerLoader(schemeName, loader);
-    // If there is no default, set as default
-    if (!this.defaultSchemeName) {
-      this.defaultSchemeName = schemeName;
-    }
-    return this;
-  }
-}
-
-export default ColorSchemeRegistry;
diff --git a/superset/assets/src/modules/colors/SequentialScheme.js b/superset/assets/src/modules/colors/SequentialScheme.js
deleted file mode 100644
index 27ad849ec0..0000000000
--- a/superset/assets/src/modules/colors/SequentialScheme.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import ColorScheme from './ColorScheme';
-
-export default class SequentialScheme extends ColorScheme {
-  constructor(input) {
-    super(input);
-    const { isDiverging = false } = input;
-    this.isDiverging = isDiverging;
-  }
-}
diff --git a/superset/assets/src/modules/colors/SequentialSchemeRegistrySingleton.js b/superset/assets/src/modules/colors/SequentialSchemeRegistrySingleton.js
deleted file mode 100644
index 6ba5202306..0000000000
--- a/superset/assets/src/modules/colors/SequentialSchemeRegistrySingleton.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import ColorSchemeRegistry from './ColorSchemeRegistry';
-import makeSingleton from '../../utils/makeSingleton';
-
-class SequentialSchemeRegistry extends ColorSchemeRegistry {}
-
-const getInstance = makeSingleton(SequentialSchemeRegistry);
-
-export default getInstance;
diff --git a/superset/assets/src/modules/colors/colorSchemes/categorical/airbnb.js b/superset/assets/src/modules/colors/colorSchemes/categorical/airbnb.js
deleted file mode 100644
index 2047624453..0000000000
--- a/superset/assets/src/modules/colors/colorSchemes/categorical/airbnb.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import CategoricalScheme from '../../CategoricalScheme';
-
-const schemes = [
-  {
-    name: 'bnbColors',
-    colors: [
-      '#ff5a5f', // rausch
-      '#7b0051', // hackb
-      '#007A87', // kazan
-      '#00d1c1', // babu
-      '#8ce071', // lima
-      '#ffb400', // beach
-      '#b4a76c', // barol
-      '#ff8083',
-      '#cc0086',
-      '#00a1b3',
-      '#00ffeb',
-      '#bbedab',
-      '#ffd266',
-      '#cbc29a',
-      '#ff3339',
-      '#ff1ab1',
-      '#005c66',
-      '#00b3a5',
-      '#55d12e',
-      '#b37e00',
-      '#988b4e',
-    ],
-  },
-].map(s => new CategoricalScheme(s));
-
-export default schemes;
diff --git a/superset/assets/src/modules/colors/colorSchemes/categorical/d3.js b/superset/assets/src/modules/colors/colorSchemes/categorical/d3.js
deleted file mode 100644
index deac97a112..0000000000
--- a/superset/assets/src/modules/colors/colorSchemes/categorical/d3.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import d3 from 'd3';
-import CategoricalScheme from '../../CategoricalScheme';
-
-const schemes = [
-  {
-    name: 'd3Category10',
-    colors: d3.scale.category10().range(),
-  },
-  {
-    name: 'd3Category20',
-    colors: d3.scale.category20().range(),
-  },
-  {
-    name: 'd3Category20b',
-    colors: d3.scale.category20b().range(),
-  },
-  {
-    name: 'd3Category20c',
-    colors: d3.scale.category20c().range(),
-  },
-].map(s => new CategoricalScheme(s));
-
-export default schemes;
diff --git a/superset/assets/src/modules/colors/colorSchemes/categorical/google.js b/superset/assets/src/modules/colors/colorSchemes/categorical/google.js
deleted file mode 100644
index b4195db2b8..0000000000
--- a/superset/assets/src/modules/colors/colorSchemes/categorical/google.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import CategoricalScheme from '../../CategoricalScheme';
-
-const schemes = [
-  {
-    name: 'googleCategory10c',
-    colors: [
-      '#3366cc',
-      '#dc3912',
-      '#ff9900',
-      '#109618',
-      '#990099',
-      '#0099c6',
-      '#dd4477',
-      '#66aa00',
-      '#b82e2e',
-      '#316395',
-    ],
-  },
-  {
-    name: 'googleCategory20c',
-    colors: [
-      '#3366cc',
-      '#dc3912',
-      '#ff9900',
-      '#109618',
-      '#990099',
-      '#0099c6',
-      '#dd4477',
-      '#66aa00',
-      '#b82e2e',
-      '#316395',
-      '#994499',
-      '#22aa99',
-      '#aaaa11',
-      '#6633cc',
-      '#e67300',
-      '#8b0707',
-      '#651067',
-      '#329262',
-      '#5574a6',
-      '#3b3eac',
-    ],
-  },
-].map(s => new CategoricalScheme(s));
-
-export default schemes;
diff --git a/superset/assets/src/modules/colors/colorSchemes/categorical/lyft.js b/superset/assets/src/modules/colors/colorSchemes/categorical/lyft.js
deleted file mode 100644
index cb81cbb89e..0000000000
--- a/superset/assets/src/modules/colors/colorSchemes/categorical/lyft.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import CategoricalScheme from '../../CategoricalScheme';
-
-const schemes = [
-  {
-    name: 'lyftColors',
-    colors: [
-      '#EA0B8C',
-      '#6C838E',
-      '#29ABE2',
-      '#33D9C1',
-      '#9DACB9',
-      '#7560AA',
-      '#2D5584',
-      '#831C4A',
-      '#333D47',
-      '#AC2077',
-    ],
-  },
-].map(s => new CategoricalScheme(s));
-
-export default schemes;
diff --git a/superset/assets/src/modules/colors/colorSchemes/sequential/common.js b/superset/assets/src/modules/colors/colorSchemes/sequential/common.js
deleted file mode 100644
index b5c4a24bf0..0000000000
--- a/superset/assets/src/modules/colors/colorSchemes/sequential/common.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import SequentialScheme from '../../SequentialScheme';
-
-const schemes = [
-  {
-    name: 'blue_white_yellow',
-    label: 'blue/white/yellow',
-    colors: [
-      '#00d1c1',
-      'white',
-      '#ffb400',
-    ],
-  },
-  {
-    name: 'fire',
-    colors: [
-      'white',
-      'yellow',
-      'red',
-      'black',
-    ],
-  },
-  {
-    name: 'white_black',
-    label: 'white/black',
-    colors: [
-      'white',
-      'black',
-    ],
-  },
-  {
-    name: 'black_white',
-    label: 'black/white',
-    colors: [
-      'black',
-      'white',
-    ],
-  },
-  {
-    name: 'dark_blue',
-    label: 'dark blues',
-    colors: [
-      '#EBF5F8',
-      '#6BB1CC',
-      '#357E9B',
-      '#1B4150',
-      '#092935',
-    ],
-  },
-  {
-    name: 'pink_grey',
-    label: 'pink/grey',
-    colors: [
-      '#E70B81',
-      '#FAFAFA',
-      '#666666',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'greens',
-    colors: [
-      '#ffffcc',
-      '#78c679',
-      '#006837',
-    ],
-  },
-  {
-    name: 'purples',
-    colors: [
-      '#f2f0f7',
-      '#9e9ac8',
-      '#54278f',
-    ],
-  },
-  {
-    name: 'oranges',
-    colors: [
-      '#fef0d9',
-      '#fc8d59',
-      '#b30000',
-    ],
-  },
-  {
-    name: 'red_yellow_blue',
-    label: 'red/yellow/blue',
-    colors: [
-      '#d7191c',
-      '#fdae61',
-      '#ffffbf',
-      '#abd9e9',
-      '#2c7bb6',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'brown_white_green',
-    label: 'brown/white/green',
-    colors: [
-      '#a6611a',
-      '#dfc27d',
-      '#f5f5f5',
-      '#80cdc1',
-      '#018571',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'purple_white_green',
-    label: 'purple/white/green',
-    colors: [
-      '#7b3294',
-      '#c2a5cf',
-      '#f7f7f7',
-      '#a6dba0',
-      '#008837',
-    ],
-    isDiverging: true,
-  },
-].map(s => new SequentialScheme(s));
-
-export default schemes;
diff --git a/superset/assets/src/modules/colors/colorSchemes/sequential/d3.js b/superset/assets/src/modules/colors/colorSchemes/sequential/d3.js
deleted file mode 100644
index e811b63330..0000000000
--- a/superset/assets/src/modules/colors/colorSchemes/sequential/d3.js
+++ /dev/null
@@ -1,510 +0,0 @@
-import SequentialScheme from '../../SequentialScheme';
-
-const schemes = [
-  {
-    name: 'schemeBrBG',
-    label: 'brown/green',
-    colors: [
-      '#543005',
-      '#8c510a',
-      '#bf812d',
-      '#dfc27d',
-      '#f6e8c3',
-      '#c7eae5',
-      '#80cdc1',
-      '#35978f',
-      '#01665e',
-      '#003c30',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemePRGn',
-    label: 'purple/green',
-    colors: [
-      '#40004b',
-      '#762a83',
-      '#9970ab',
-      '#c2a5cf',
-      '#e7d4e8',
-      '#d9f0d3',
-      '#a6dba0',
-      '#5aae61',
-      '#1b7837',
-      '#00441b',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemePiYG',
-    label: 'pink/green',
-    colors: [
-      '#8e0152',
-      '#c51b7d',
-      '#de77ae',
-      '#f1b6da',
-      '#fde0ef',
-      '#e6f5d0',
-      '#b8e186',
-      '#7fbc41',
-      '#4d9221',
-      '#276419',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemePuOr',
-    label: 'purple/orange',
-    colors: [
-      '#2d004b',
-      '#542788',
-      '#8073ac',
-      '#b2abd2',
-      '#d8daeb',
-      '#fee0b6',
-      '#fdb863',
-      '#e08214',
-      '#b35806',
-      '#7f3b08',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemeRdBu',
-    label: 'red/blue',
-    colors: [
-      '#67001f',
-      '#b2182b',
-      '#d6604d',
-      '#f4a582',
-      '#fddbc7',
-      '#d1e5f0',
-      '#92c5de',
-      '#4393c3',
-      '#2166ac',
-      '#053061',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemeRdGy',
-    label: 'red/gray/black',
-    colors: [
-      '#67001f',
-      '#b2182b',
-      '#d6604d',
-      '#f4a582',
-      '#fddbc7',
-      '#e0e0e0',
-      '#bababa',
-      '#878787',
-      '#4d4d4d',
-      '#1a1a1a',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemeRdYlBu',
-    label: 'red/yellow/blue',
-    colors: [
-      '#a50026',
-      '#d73027',
-      '#f46d43',
-      '#fdae61',
-      '#fee090',
-      '#e0f3f8',
-      '#abd9e9',
-      '#74add1',
-      '#4575b4',
-      '#313695',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemeRdYlGn',
-    label: 'red/yellow/green',
-    colors: [
-      '#a50026',
-      '#d73027',
-      '#f46d43',
-      '#fdae61',
-      '#fee08b',
-      '#d9ef8b',
-      '#a6d96a',
-      '#66bd63',
-      '#1a9850',
-      '#006837',
-    ],
-    isDiverging: true,
-  },
-  {
-    name: 'schemeSpectral',
-    label: 'rainbow',
-    colors: [
-      '#9e0142',
-      '#d53e4f',
-      '#f46d43',
-      '#fdae61',
-      '#fee08b',
-      '#e6f598',
-      '#abdda4',
-      '#66c2a5',
-      '#3288bd',
-      '#5e4fa2',
-    ],
-  },
-  {
-    name: 'schemeBlues',
-    label: 'blues',
-    colors: [
-      '#b5d4e9',
-      '#93c3df',
-      '#6daed5',
-      '#4b97c9',
-      '#2f7ebc',
-      '#1864aa',
-      '#0a4a90',
-      '#08306b',
-    ],
-  },
-  {
-    name: 'schemeGreens',
-    label: 'greens',
-    colors: [
-      '#b7e2b1',
-      '#97d494',
-      '#73c378',
-      '#4daf62',
-      '#2f984f',
-      '#157f3b',
-      '#036429',
-      '#00441b',
-    ],
-  },
-  {
-    name: 'schemeGrays',
-    label: 'grays',
-    colors: [
-      '#cecece',
-      '#b4b4b4',
-      '#979797',
-      '#7a7a7a',
-      '#5f5f5f',
-      '#404040',
-      '#1e1e1e',
-      '#000000',
-    ],
-  },
-  {
-    name: 'schemeOranges',
-    label: 'oranges',
-    colors: [
-      '#fdc28c',
-      '#fda762',
-      '#fb8d3d',
-      '#f2701d',
-      '#e25609',
-      '#c44103',
-      '#9f3303',
-      '#7f2704',
-    ],
-  },
-  {
-    name: 'schemePurples',
-    label: 'purples',
-    colors: [
-      '#cecee5',
-      '#b6b5d8',
-      '#9e9bc9',
-      '#8782bc',
-      '#7363ac',
-      '#61409b',
-      '#501f8c',
-      '#3f007d',
-    ],
-  },
-  {
-    name: 'schemeReds',
-    label: 'reds',
-    colors: [
-      '#fcaa8e',
-      '#fc8a6b',
-      '#f9694c',
-      '#ef4533',
-      '#d92723',
-      '#bb151a',
-      '#970b13',
-      '#67000d',
-    ],
-  },
-  {
-    name: 'schemeViridis',
-    label: 'Viridis',
-    colors: [
-      '#482475',
-      '#414487',
-      '#355f8d',
-      '#2a788e',
-      '#21918c',
-      '#22a884',
-      '#44bf70',
-      '#7ad151',
-      '#bddf26',
-      '#fde725',
-    ],
-  },
-  {
-    name: 'schemeInferno',
-    label: 'Inferno',
-    colors: [
-      '#160b39',
-      '#420a68',
-      '#6a176e',
-      '#932667',
-      '#bc3754',
-      '#dd513a',
-      '#f37819',
-      '#fca50a',
-      '#f6d746',
-      '#fcffa4',
-    ],
-  },
-  {
-    name: 'schemeMagma',
-    label: 'Magma',
-    colors: [
-      '#140e36',
-      '#3b0f70',
-      '#641a80',
-      '#8c2981',
-      '#b73779',
-      '#de4968',
-      '#f7705c',
-      '#fe9f6d',
-      '#fecf92',
-      '#fcfdbf',
-    ],
-  },
-  {
-    name: 'schemeWarm',
-    label: 'Warm',
-    colors: [
-      '#963db3',
-      '#bf3caf',
-      '#e4419d',
-      '#fe4b83',
-      '#ff5e63',
-      '#ff7847',
-      '#fb9633',
-      '#e2b72f',
-      '#c6d63c',
-      '#aff05b',
-    ],
-  },
-  {
-    name: 'schemeCool',
-    label: 'Cool',
-    colors: [
-      '#6054c8',
-      '#4c6edb',
-      '#368ce1',
-      '#23abd8',
-      '#1ac7c2',
-      '#1ddfa3',
-      '#30ef82',
-      '#52f667',
-      '#7ff658',
-      '#aff05b',
-    ],
-  },
-  {
-    name: 'schemeCubehelixDefault',
-    label: 'Cube Helix',
-    colors: [
-      '#1a1530',
-      '#163d4e',
-      '#1f6642',
-      '#54792f',
-      '#a07949',
-      '#d07e93',
-      '#cf9cda',
-      '#c1caf3',
-      '#d2eeef',
-      '#ffffff',
-    ],
-  },
-  {
-    name: 'schemeBuGn',
-    label: 'blue/green',
-    colors: [
-      '#b7e4da',
-      '#8fd3c1',
-      '#68c2a3',
-      '#49b17f',
-      '#2f9959',
-      '#157f3c',
-      '#036429',
-      '#00441b',
-    ],
-  },
-  {
-    name: 'schemeBuPu',
-    label: 'blue/purple',
-    colors: [
-      '#b2cae1',
-      '#9cb3d5',
-      '#8f95c6',
-      '#8c74b5',
-      '#8952a5',
-      '#852d8f',
-      '#730f71',
-      '#4d004b',
-    ],
-  },
-  {
-    name: 'schemeGnBu',
-    label: 'green/blue',
-    colors: [
-      '#bde5bf',
-      '#9ed9bb',
-      '#7bcbc4',
-      '#58b7cd',
-      '#399cc6',
-      '#1d7eb7',
-      '#0b60a1',
-      '#084081',
-    ],
-  },
-  {
-    name: 'schemeOrRd',
-    label: 'orange/red',
-    colors: [
-      '#fdca94',
-      '#fdb07a',
-      '#fa8e5d',
-      '#f16c49',
-      '#e04530',
-      '#c81d13',
-      '#a70403',
-      '#7f0000',
-    ],
-  },
-  {
-    name: 'schemePuBuGn',
-    label: 'purple/blue/green',
-    colors: [
-      '#bec9e2',
-      '#98b9d9',
-      '#69a8cf',
-      '#4096c0',
-      '#19879f',
-      '#037877',
-      '#016353',
-      '#014636',
-    ],
-  },
-  {
-    name: 'schemePuBu',
-    label: 'purple/blue',
-    colors: [
-      '#bfc9e2',
-      '#9bb9d9',
-      '#72a8cf',
-      '#4394c3',
-      '#1a7db6',
-      '#0667a1',
-      '#045281',
-      '#023858',
-    ],
-  },
-  {
-    name: 'schemePuRd',
-    label: 'purple/red',
-    colors: [
-      '#d0aad2',
-      '#d08ac2',
-      '#dd63ae',
-      '#e33890',
-      '#d71c6c',
-      '#b70b4f',
-      '#8f023a',
-      '#67001f',
-    ],
-  },
-  {
-    name: 'schemeRdPu',
-    label: 'red/purple',
-    colors: [
-      '#fbb5bc',
-      '#f993b0',
-      '#f369a3',
-      '#e03e98',
-      '#c01788',
-      '#99037c',
-      '#700174',
-      '#49006a',
-    ],
-  },
-  {
-    name: 'schemeYlGnBu',
-    label: 'yellow/green/blue',
-    colors: [
-      '#d5eeb3',
-      '#a9ddb7',
-      '#73c9bd',
-      '#45b4c2',
-      '#2897bf',
-      '#2073b2',
-      '#234ea0',
-      '#1c3185',
-      '#081d58',
-    ],
-  },
-  {
-    name: 'schemeYlGn',
-    label: 'yellow/green',
-    colors: [
-      '#e4f4ac',
-      '#c7e89b',
-      '#a2d88a',
-      '#78c578',
-      '#4eaf63',
-      '#2f944e',
-      '#15793f',
-      '#036034',
-      '#004529',
-    ],
-  },
-  {
-    name: 'schemeYlOrBr',
-    label: 'yellow/orange/brown',
-    colors: [
-      '#feeaa1',
-      '#fed676',
-      '#feba4a',
-      '#fb992c',
-      '#ee7918',
-      '#d85b0a',
-      '#b74304',
-      '#8f3204',
-      '#662506',
-    ],
-  },
-  {
-    name: 'schemeYlOrRd',
-    label: 'yellow/orange/red',
-    colors: [
-      '#fee087',
-      '#fec965',
-      '#feab4b',
-      '#fd893c',
-      '#fa5c2e',
-      '#ec3023',
-      '#d31121',
-      '#af0225',
-      '#800026',
-    ],
-  },
-].map(s => new SequentialScheme(s));
-
-export default schemes;
diff --git a/superset/assets/src/modules/dates.js b/superset/assets/src/modules/dates.js
index 8b8dfa9dfc..311340bda6 100644
--- a/superset/assets/src/modules/dates.js
+++ b/superset/assets/src/modules/dates.js
@@ -1,7 +1,6 @@
+import d3 from 'd3';
 import moment from 'moment';
 
-const d3 = require('d3');
-
 export function UTC(dttm) {
   return new Date(
     dttm.getUTCFullYear(),
diff --git a/superset/assets/src/modules/visUtils.js b/superset/assets/src/modules/visUtils.js
index 6ff06d76b3..e4e692044d 100644
--- a/superset/assets/src/modules/visUtils.js
+++ b/superset/assets/src/modules/visUtils.js
@@ -1,4 +1,4 @@
-import isDefined from '../utils/isDefined';
+import { isDefined } from '@superset-ui/core';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
diff --git a/superset/assets/src/setup/setupColors.js b/superset/assets/src/setup/setupColors.js
index e51ea3db30..84cd53de56 100644
--- a/superset/assets/src/setup/setupColors.js
+++ b/superset/assets/src/setup/setupColors.js
@@ -1,11 +1,10 @@
-import airbnb from '../modules/colors/colorSchemes/categorical/airbnb';
-import categoricalD3 from '../modules/colors/colorSchemes/categorical/d3';
-import google from '../modules/colors/colorSchemes/categorical/google';
-import lyft from '../modules/colors/colorSchemes/categorical/lyft';
-import sequentialCommon from '../modules/colors/colorSchemes/sequential/common';
-import sequentialD3 from '../modules/colors/colorSchemes/sequential/d3';
-import getCategoricalSchemeRegistry from '../modules/colors/CategoricalSchemeRegistrySingleton';
-import getSequentialSchemeRegistry from '../modules/colors/SequentialSchemeRegistrySingleton';
+import airbnb from '@superset-ui/color/esm/colorSchemes/categorical/airbnb';
+import categoricalD3 from '@superset-ui/color/esm/colorSchemes/categorical/d3';
+import google from '@superset-ui/color/esm/colorSchemes/categorical/google';
+import lyft from '@superset-ui/color/esm/colorSchemes/categorical/lyft';
+import sequentialCommon from '@superset-ui/color/esm/colorSchemes/sequential/common';
+import sequentialD3 from '@superset-ui/color/esm/colorSchemes/sequential/d3';
+import { getCategoricalSchemeRegistry, getSequentialSchemeRegistry } from '@superset-ui/color';
 
 export default function setupColors() {
   // Register color schemes
diff --git a/superset/assets/src/utils/convertKeysToCamelCase.js b/superset/assets/src/utils/convertKeysToCamelCase.js
deleted file mode 100644
index c1071e6494..0000000000
--- a/superset/assets/src/utils/convertKeysToCamelCase.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { mapKeys, camelCase, isPlainObject } from 'lodash/fp';
-
-export default function convertKeysToCamelCase(object) {
-  if (object === null || object === undefined) {
-    return object;
-  }
-  if (isPlainObject(object)) {
-    return mapKeys(k => camelCase(k), object);
-  }
-  throw new Error(`Cannot convert input that is not a plain object: ${object}`);
-}
diff --git a/superset/assets/src/utils/createAdaptor.jsx b/superset/assets/src/utils/createAdaptor.jsx
deleted file mode 100644
index c107e0db93..0000000000
--- a/superset/assets/src/utils/createAdaptor.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ChartProps from '../visualizations/core/models/ChartProps';
-
-const IDENTITY = x => x;
-
-export default function createAdaptor(Component, transformProps = IDENTITY) {
-  return function adaptor(slice, payload, setControlValue) {
-    const chartProps = new ChartProps({
-      width: slice.width(),
-      height: slice.height(),
-      annotationData: slice.annotationData,
-      datasource: slice.datasource,
-      filters: slice.getFilters(),
-      formData: slice.formData,
-      onAddFilter(...args) {
-        slice.addFilter(...args);
-      },
-      onError(...args) {
-        slice.error(...args);
-      },
-      payload,
-      setControlValue,
-      setTooltip(...args) {
-        slice.setTooltip(...args);
-      },
-    });
-
-    ReactDOM.render(
-      <Component {...transformProps(chartProps)} />,
-      document.querySelector(slice.selector),
-    );
-  };
-}
diff --git a/superset/assets/src/utils/isDefined.js b/superset/assets/src/utils/isDefined.js
deleted file mode 100644
index 807bbb76ae..0000000000
--- a/superset/assets/src/utils/isDefined.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function isDefined(x) {
-  return x !== null && x !== undefined;
-}
diff --git a/superset/assets/src/utils/isRequired.js b/superset/assets/src/utils/isRequired.js
deleted file mode 100644
index 988c8cebf9..0000000000
--- a/superset/assets/src/utils/isRequired.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function isRequired(field) {
-  throw new Error(`${field} is required.`);
-}
diff --git a/superset/assets/src/utils/makeSingleton.js b/superset/assets/src/utils/makeSingleton.js
deleted file mode 100644
index 3eee475788..0000000000
--- a/superset/assets/src/utils/makeSingleton.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function makeSingleton(BaseClass, ...args) {
-  let singleton;
-
-  return function getInstance() {
-    if (!singleton) {
-      singleton = new BaseClass(...args);
-    }
-    return singleton;
-  };
-}
diff --git a/superset/assets/src/visualizations/BigNumber/BigNumber.jsx b/superset/assets/src/visualizations/BigNumber/BigNumber.jsx
index d1be54408f..9c80e04871 100644
--- a/superset/assets/src/visualizations/BigNumber/BigNumber.jsx
+++ b/superset/assets/src/visualizations/BigNumber/BigNumber.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import shortid from 'shortid';
 import { XYChart, AreaSeries, CrossHair, LinearGradient } from '@data-ui/xy-chart';
-import { BRAND_COLOR } from '../../modules/colors';
+import { BRAND_COLOR } from '@superset-ui/color';
 import { formatDateVerbose } from '../../modules/dates';
 import { computeMaxFontSize } from '../../modules/visUtils';
 
diff --git a/superset/assets/src/visualizations/BigNumber/BigNumberChartPlugin.js b/superset/assets/src/visualizations/BigNumber/BigNumberChartPlugin.js
index cbe5cf679c..f7dd5cff97 100644
--- a/superset/assets/src/visualizations/BigNumber/BigNumberChartPlugin.js
+++ b/superset/assets/src/visualizations/BigNumber/BigNumberChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/BigNumberTotal/BigNumberTotalChartPlugin.js b/superset/assets/src/visualizations/BigNumberTotal/BigNumberTotalChartPlugin.js
index 808d3ff8e5..c4a57f3981 100644
--- a/superset/assets/src/visualizations/BigNumberTotal/BigNumberTotalChartPlugin.js
+++ b/superset/assets/src/visualizations/BigNumberTotal/BigNumberTotalChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../BigNumber/transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Calendar/Calendar.js b/superset/assets/src/visualizations/Calendar/Calendar.js
index bcecb3c6d6..3976fbd462 100644
--- a/superset/assets/src/visualizations/Calendar/Calendar.js
+++ b/superset/assets/src/visualizations/Calendar/Calendar.js
@@ -1,6 +1,7 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import { colorScalerFactory } from '../../modules/colors';
+import { extent as d3Extent } from 'd3-array';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
 import CalHeatMap from '../../../vendor/cal-heatmap/cal-heatmap';
 import { d3TimeFormatPreset, d3FormatPreset } from '../../modules/utils';
 import { UTC } from '../../modules/dates';
@@ -80,9 +81,11 @@ function Calendar(element, props) {
       calContainer.text(`Metric: ${verboseMap[metric] || metric}`);
     }
     const timestamps = metricsData[metric];
-    const extents = d3.extent(Object.keys(timestamps), key => timestamps[key]);
+    const extents = d3Extent(Object.keys(timestamps), key => timestamps[key]);
     const step = (extents[1] - extents[0]) / (steps - 1);
-    const colorScale = colorScalerFactory(linearColorScheme, null, null, extents);
+    const colorScale = getSequentialSchemeRegistry()
+      .get(linearColorScheme)
+      .createLinearScale(extents);
 
     const legend = d3.range(steps)
       .map(i => extents[0] + (step * i));
diff --git a/superset/assets/src/visualizations/Calendar/CalendarChartPlugin.js b/superset/assets/src/visualizations/Calendar/CalendarChartPlugin.js
index 1c344195ca..ffb6c20957 100644
--- a/superset/assets/src/visualizations/Calendar/CalendarChartPlugin.js
+++ b/superset/assets/src/visualizations/Calendar/CalendarChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Chord/Chord.js b/superset/assets/src/visualizations/Chord/Chord.js
index e650262451..ece2524434 100644
--- a/superset/assets/src/visualizations/Chord/Chord.js
+++ b/superset/assets/src/visualizations/Chord/Chord.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import './Chord.css';
 
 const propTypes = {
@@ -29,7 +29,7 @@ function Chord(element, props) {
   const div = d3.select(element);
   const { nodes, matrix } = data;
   const f = d3.format(numberFormat);
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
 
   const outerRadius = Math.min(width, height) / 2 - 10;
   const innerRadius = outerRadius - 24;
diff --git a/superset/assets/src/visualizations/Chord/ChordChartPlugin.js b/superset/assets/src/visualizations/Chord/ChordChartPlugin.js
index a3e16db60a..67e2e7eb68 100644
--- a/superset/assets/src/visualizations/Chord/ChordChartPlugin.js
+++ b/superset/assets/src/visualizations/Chord/ChordChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/CountryMap/CountryMap.js b/superset/assets/src/visualizations/CountryMap/CountryMap.js
index cc08f9c895..ff22bcf317 100644
--- a/superset/assets/src/visualizations/CountryMap/CountryMap.js
+++ b/superset/assets/src/visualizations/CountryMap/CountryMap.js
@@ -1,6 +1,8 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import { colorScalerFactory } from '../../modules/colors';
+import { extent as d3Extent } from 'd3-array';
+import { format as d3Format } from 'd3-format';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
 import './CountryMap.css';
 
 const propTypes = {
@@ -30,11 +32,13 @@ function CountryMap(element, props) {
   } = props;
 
   const container = element;
-  const format = d3.format(numberFormat);
-  const colorScaler = colorScalerFactory(linearColorScheme, data, v => v.metric);
+  const format = d3Format(numberFormat);
+  const colorScale = getSequentialSchemeRegistry()
+    .get(linearColorScheme)
+    .createLinearScale(d3Extent(data, v => v.metric));
   const colorMap = {};
   data.forEach((d) => {
-    colorMap[d.country_id] = colorScaler(d.metric);
+    colorMap[d.country_id] = colorScale(d.metric);
   });
   const colorFn = d => colorMap[d.properties.ISO] || 'none';
 
diff --git a/superset/assets/src/visualizations/CountryMap/CountryMapChartPlugin.js b/superset/assets/src/visualizations/CountryMap/CountryMapChartPlugin.js
index 325df332cf..0755d8ecd1 100644
--- a/superset/assets/src/visualizations/CountryMap/CountryMapChartPlugin.js
+++ b/superset/assets/src/visualizations/CountryMap/CountryMapChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/EventFlow/EventFlowChartPlugin.js b/superset/assets/src/visualizations/EventFlow/EventFlowChartPlugin.js
index 53effaa21f..fba46df90a 100644
--- a/superset/assets/src/visualizations/EventFlow/EventFlowChartPlugin.js
+++ b/superset/assets/src/visualizations/EventFlow/EventFlowChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
diff --git a/superset/assets/src/visualizations/FilterBox/FilterBoxChartPlugin.js b/superset/assets/src/visualizations/FilterBox/FilterBoxChartPlugin.js
index a3dc0af687..3df9f6b0c3 100644
--- a/superset/assets/src/visualizations/FilterBox/FilterBoxChartPlugin.js
+++ b/superset/assets/src/visualizations/FilterBox/FilterBoxChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/ForceDirected/ForceDirectedChartPlugin.js b/superset/assets/src/visualizations/ForceDirected/ForceDirectedChartPlugin.js
index 69ccb9fa4b..baed1b91e4 100644
--- a/superset/assets/src/visualizations/ForceDirected/ForceDirectedChartPlugin.js
+++ b/superset/assets/src/visualizations/ForceDirected/ForceDirectedChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Heatmap/Heatmap.js b/superset/assets/src/visualizations/Heatmap/Heatmap.js
index ca6d7a120f..4c8f6aa881 100644
--- a/superset/assets/src/visualizations/Heatmap/Heatmap.js
+++ b/superset/assets/src/visualizations/Heatmap/Heatmap.js
@@ -2,8 +2,8 @@ import d3 from 'd3';
 import PropTypes from 'prop-types';
 import 'd3-svg-legend';
 import d3tip from 'd3-tip';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
 
-import { colorScalerFactory } from '../../modules/colors';
 import '../../../stylesheets/d3tip.css';
 import './Heatmap.css';
 
@@ -164,7 +164,9 @@ function Heatmap(element, props) {
 
   const minBound = yAxisBounds[0] || 0;
   const maxBound = yAxisBounds[1] || 1;
-  const colorScaler = colorScalerFactory(colorScheme, null, null, [minBound, maxBound]);
+  const colorScale = getSequentialSchemeRegistry()
+    .get(colorScheme)
+    .createLinearScale([minBound, maxBound]);
 
   const scale = [
     d3.scale.linear()
@@ -213,7 +215,7 @@ function Heatmap(element, props) {
   if (showLegend) {
     const colorLegend = d3.legend.color()
       .labelFormat(valueFormatter)
-      .scale(colorScaler)
+      .scale(colorScale)
       .shapePadding(0)
       .cells(10)
       .shapeWidth(10)
@@ -309,7 +311,7 @@ function Heatmap(element, props) {
     const image = context.createImageData(heatmapDim[0], heatmapDim[1]);
     const pixs = {};
     records.forEach((d) => {
-      const c = d3.rgb(colorScaler(normalized ? d.rank : d.perc));
+      const c = d3.rgb(colorScale(normalized ? d.rank : d.perc));
       const x = xScale(d.x);
       const y = yScale(d.y);
       pixs[x + (y * xScale.domain().length)] = c;
diff --git a/superset/assets/src/visualizations/Heatmap/HeatmapChartPlugin.js b/superset/assets/src/visualizations/Heatmap/HeatmapChartPlugin.js
index 297e7f96b4..16d7aef47f 100644
--- a/superset/assets/src/visualizations/Heatmap/HeatmapChartPlugin.js
+++ b/superset/assets/src/visualizations/Heatmap/HeatmapChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Histogram/Histogram.jsx b/superset/assets/src/visualizations/Histogram/Histogram.jsx
index 0b896d7946..8414830a2d 100644
--- a/superset/assets/src/visualizations/Histogram/Histogram.jsx
+++ b/superset/assets/src/visualizations/Histogram/Histogram.jsx
@@ -4,8 +4,8 @@ import { Histogram, BarSeries, XAxis, YAxis } from '@data-ui/histogram';
 import { chartTheme } from '@data-ui/theme';
 import { LegendOrdinal } from '@vx/legend';
 import { scaleOrdinal } from '@vx/scale';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import WithLegend from '../WithLegend';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
 
 const propTypes = {
   className: PropTypes.string,
@@ -47,7 +47,7 @@ class CustomHistogram extends React.PureComponent {
       yAxisLabel,
     } = this.props;
 
-    const colorFn = getScale(colorScheme).toFunction();
+    const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
     const keys = data.map(d => d.key);
     const colorScale = scaleOrdinal({
       domain: keys,
diff --git a/superset/assets/src/visualizations/Histogram/HistogramChartPlugin.js b/superset/assets/src/visualizations/Histogram/HistogramChartPlugin.js
index ee714e651c..007d9fabd9 100644
--- a/superset/assets/src/visualizations/Histogram/HistogramChartPlugin.js
+++ b/superset/assets/src/visualizations/Histogram/HistogramChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Horizon/HorizonChartPlugin.js b/superset/assets/src/visualizations/Horizon/HorizonChartPlugin.js
index 8563e800cc..9a91fbf115 100644
--- a/superset/assets/src/visualizations/Horizon/HorizonChartPlugin.js
+++ b/superset/assets/src/visualizations/Horizon/HorizonChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/MapBox/MapBoxChartPlugin.js b/superset/assets/src/visualizations/MapBox/MapBoxChartPlugin.js
index 24905b28fd..707fa3f25c 100644
--- a/superset/assets/src/visualizations/MapBox/MapBoxChartPlugin.js
+++ b/superset/assets/src/visualizations/MapBox/MapBoxChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
diff --git a/superset/assets/src/visualizations/PairedTTest/PairedTTestChartPlugin.js b/superset/assets/src/visualizations/PairedTTest/PairedTTestChartPlugin.js
index ce299ac774..0bb21c63c8 100644
--- a/superset/assets/src/visualizations/PairedTTest/PairedTTestChartPlugin.js
+++ b/superset/assets/src/visualizations/PairedTTest/PairedTTestChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js
index d52d08de66..2b91146ddf 100644
--- a/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js
+++ b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js
@@ -1,6 +1,8 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import { colorScalerFactory } from '../../modules/colors';
+import { extent as d3Extent } from 'd3-array';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
+
 import parcoords from '../../../vendor/parallel_coordinates/d3.parcoords';
 import divgrid from '../../../vendor/parallel_coordinates/divgrid';
 import '../../../vendor/parallel_coordinates/d3.parcoords.css';
@@ -38,10 +40,12 @@ function ParallelCoordinates(element, props) {
   ttypes[series] = 'string';
   metrics.forEach((v) => { ttypes[v] = 'number'; });
 
-  const colorScaler = colorMetric
-    ? colorScalerFactory(linearColorScheme, data, d => d[colorMetric])
+  const colorScale = colorMetric
+    ? getSequentialSchemeRegistry()
+      .get(linearColorScheme)
+      .createLinearScale(d3Extent(data, d => d[colorMetric]))
     : () => 'grey';
-  const color = d => colorScaler(d[colorMetric]);
+  const color = d => colorScale(d[colorMetric]);
   const container = d3.select(element);
   container.selectAll('*').remove();
   const effHeight = showDatatable ? (height / 2) : height;
diff --git a/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinatesChartPlugin.js b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinatesChartPlugin.js
index ac2907ef13..8ea4132bd6 100644
--- a/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinatesChartPlugin.js
+++ b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinatesChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Partition/Partition.js b/superset/assets/src/visualizations/Partition/Partition.js
index 03b4df0455..128585976b 100644
--- a/superset/assets/src/visualizations/Partition/Partition.js
+++ b/superset/assets/src/visualizations/Partition/Partition.js
@@ -2,7 +2,7 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
 import { hierarchy } from 'd3-hierarchy';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import { d3TimeFormatPreset } from '../../modules/utils';
 import './Partition.css';
 
@@ -95,7 +95,7 @@ function Icicle(element, props) {
   const hasTime = ['adv_anal', 'time_series'].indexOf(chartType) >= 0;
   const format = d3.format(numberFormat);
   const timeFormat = d3TimeFormatPreset(dateTimeFormat);
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
 
   div.selectAll('*').remove();
   const tooltip = div
diff --git a/superset/assets/src/visualizations/Partition/PartitionChartPlugin.js b/superset/assets/src/visualizations/Partition/PartitionChartPlugin.js
index 586f4669b5..754c1d7df8 100644
--- a/superset/assets/src/visualizations/Partition/PartitionChartPlugin.js
+++ b/superset/assets/src/visualizations/Partition/PartitionChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/PivotTable/PivotTableChartPlugin.js b/superset/assets/src/visualizations/PivotTable/PivotTableChartPlugin.js
index 99c315040e..e2bf08feb9 100644
--- a/superset/assets/src/visualizations/PivotTable/PivotTableChartPlugin.js
+++ b/superset/assets/src/visualizations/PivotTable/PivotTableChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Rose/Rose.js b/superset/assets/src/visualizations/Rose/Rose.js
index 2d48c5b5c1..36e2426a51 100644
--- a/superset/assets/src/visualizations/Rose/Rose.js
+++ b/superset/assets/src/visualizations/Rose/Rose.js
@@ -2,7 +2,7 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
 import nv from 'nvd3';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import { d3TimeFormatPreset } from '../../modules/utils';
 import './Rose.css';
 
@@ -60,7 +60,7 @@ function Rose(element, props) {
   const numGroups = datum[times[0]].length;
   const format = d3.format(numberFormat);
   const timeFormat = d3TimeFormatPreset(dateTimeFormat);
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
 
   d3.select('.nvtooltip').remove();
   div.selectAll('*').remove();
diff --git a/superset/assets/src/visualizations/Rose/RoseChartPlugin.js b/superset/assets/src/visualizations/Rose/RoseChartPlugin.js
index 388290fc2e..3a628587a0 100644
--- a/superset/assets/src/visualizations/Rose/RoseChartPlugin.js
+++ b/superset/assets/src/visualizations/Rose/RoseChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Sankey/Sankey.js b/superset/assets/src/visualizations/Sankey/Sankey.js
index 405f1b53f3..5d1bd6b8df 100644
--- a/superset/assets/src/visualizations/Sankey/Sankey.js
+++ b/superset/assets/src/visualizations/Sankey/Sankey.js
@@ -2,7 +2,7 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
 import { sankey as d3Sankey } from 'd3-sankey';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import './Sankey.css';
 
 const propTypes = {
@@ -47,7 +47,7 @@ function Sankey(element, props) {
     .attr('class', 'sankey-tooltip')
     .style('opacity', 0);
 
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
 
   const sankey = d3Sankey()
     .nodeWidth(15)
diff --git a/superset/assets/src/visualizations/Sankey/SankeyChartPlugin.js b/superset/assets/src/visualizations/Sankey/SankeyChartPlugin.js
index 92f6b7f347..819c341055 100644
--- a/superset/assets/src/visualizations/Sankey/SankeyChartPlugin.js
+++ b/superset/assets/src/visualizations/Sankey/SankeyChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Sunburst/Sunburst.js b/superset/assets/src/visualizations/Sunburst/Sunburst.js
index 3cd95128bf..bfd22f8e2f 100644
--- a/superset/assets/src/visualizations/Sunburst/Sunburst.js
+++ b/superset/assets/src/visualizations/Sunburst/Sunburst.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import { wrapSvgText } from '../../modules/utils';
 import './Sunburst.css';
 
@@ -66,7 +66,7 @@ function Sunburst(element, props) {
   let arcs;
   let gMiddleText; // dom handles
 
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
 
   // Helper + path gen functions
   const partition = d3.layout.partition()
diff --git a/superset/assets/src/visualizations/Sunburst/SunburstChartPlugin.js b/superset/assets/src/visualizations/Sunburst/SunburstChartPlugin.js
index 2ba78e20e1..dd1d136a62 100644
--- a/superset/assets/src/visualizations/Sunburst/SunburstChartPlugin.js
+++ b/superset/assets/src/visualizations/Sunburst/SunburstChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Table/TableChartPlugin.js b/superset/assets/src/visualizations/Table/TableChartPlugin.js
index 4c4e78e65a..a6079cc085 100644
--- a/superset/assets/src/visualizations/Table/TableChartPlugin.js
+++ b/superset/assets/src/visualizations/Table/TableChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../../modules/AnnotationTypes';
diff --git a/superset/assets/src/visualizations/TimeTable/TimeTableChartPlugin.js b/superset/assets/src/visualizations/TimeTable/TimeTableChartPlugin.js
index 2060b701ad..031d19f385 100644
--- a/superset/assets/src/visualizations/TimeTable/TimeTableChartPlugin.js
+++ b/superset/assets/src/visualizations/TimeTable/TimeTableChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/Treemap/Treemap.js b/superset/assets/src/visualizations/Treemap/Treemap.js
index 88db8cceac..d0db1f4d29 100644
--- a/superset/assets/src/visualizations/Treemap/Treemap.js
+++ b/superset/assets/src/visualizations/Treemap/Treemap.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-shadow, no-param-reassign */
 import d3 from 'd3';
 import PropTypes from 'prop-types';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import './Treemap.css';
 
 // Declare PropTypes for recursive data structures
@@ -68,7 +68,7 @@ function Treemap(element, props) {
   } = props;
   const div = d3.select(element);
   const formatNumber = d3.format(numberFormat);
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
   const data = clone(rawData);
 
   function draw(data, eltWidth, eltHeight) {
diff --git a/superset/assets/src/visualizations/Treemap/TreemapChartPlugin.js b/superset/assets/src/visualizations/Treemap/TreemapChartPlugin.js
index 80ae89b36e..2acaf3658e 100644
--- a/superset/assets/src/visualizations/Treemap/TreemapChartPlugin.js
+++ b/superset/assets/src/visualizations/Treemap/TreemapChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/WorldMap/WorldMapChartPlugin.js b/superset/assets/src/visualizations/WorldMap/WorldMapChartPlugin.js
index 6150b99dee..8a80bae101 100644
--- a/superset/assets/src/visualizations/WorldMap/WorldMapChartPlugin.js
+++ b/superset/assets/src/visualizations/WorldMap/WorldMapChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/core/components/SuperChart.jsx b/superset/assets/src/visualizations/core/components/SuperChart.jsx
index a7c220cb6c..a8b92147b5 100644
--- a/superset/assets/src/visualizations/core/components/SuperChart.jsx
+++ b/superset/assets/src/visualizations/core/components/SuperChart.jsx
@@ -2,9 +2,7 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
-import getChartComponentRegistry from '../registries/ChartComponentRegistrySingleton';
-import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton';
-import ChartProps from '../models/ChartProps';
+import { getChartComponentRegistry, getChartTransformPropsRegistry, ChartProps } from '@superset-ui/chart';
 
 const IDENTITY = x => x;
 
diff --git a/superset/assets/src/visualizations/core/models/ChartMetadata.js b/superset/assets/src/visualizations/core/models/ChartMetadata.js
deleted file mode 100644
index daa3f32289..0000000000
--- a/superset/assets/src/visualizations/core/models/ChartMetadata.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default class ChartMetadata {
-  constructor({
-    name,
-    credits = [],
-    description = '',
-    show = true,
-    canBeAnnotationTypes = [],
-    supportedAnnotationTypes = [],
-    thumbnail,
-  }) {
-    this.name = name;
-    this.credits = credits;
-    this.description = description;
-    this.show = show;
-    this.canBeAnnotationTypesLookup = canBeAnnotationTypes.reduce((prev, type) => {
-      const lookup = prev;
-      lookup[type] = true;
-      return lookup;
-    }, {});
-    this.supportedAnnotationTypes = supportedAnnotationTypes;
-    this.thumbnail = thumbnail;
-  }
-
-  canBeAnnotationType(type) {
-    return this.canBeAnnotationTypesLookup[type] || false;
-  }
-}
diff --git a/superset/assets/src/visualizations/core/models/ChartPlugin.js b/superset/assets/src/visualizations/core/models/ChartPlugin.js
deleted file mode 100644
index 8109926fda..0000000000
--- a/superset/assets/src/visualizations/core/models/ChartPlugin.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import Plugin from './Plugin';
-import isRequired from '../../../utils/isRequired';
-import getChartMetadataRegistry from '../registries/ChartMetadataRegistrySingleton';
-import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton';
-import getChartComponentRegistry from '../registries/ChartComponentRegistrySingleton';
-import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton';
-
-const IDENTITY = x => x;
-
-export default class ChartPlugin extends Plugin {
-  constructor({
-    metadata = isRequired('metadata'),
-
-    // use buildQuery for immediate value
-    buildQuery = IDENTITY,
-    // use loadBuildQuery for dynamic import (lazy-loading)
-    loadBuildQuery,
-
-    // use transformProps for immediate value
-    transformProps = IDENTITY,
-    // use loadTransformProps for dynamic import (lazy-loading)
-    loadTransformProps,
-
-    // use Chart for immediate value
-    Chart,
-    // use loadChart for dynamic import (lazy-loading)
-    loadChart,
-  } = {}) {
-    super();
-    this.metadata = metadata;
-    this.loadBuildQuery = loadBuildQuery || (() => buildQuery);
-    this.loadTransformProps = loadTransformProps || (() => transformProps);
-
-    if (loadChart) {
-      this.loadChart = loadChart;
-    } else if (Chart) {
-      this.loadChart = () => Chart;
-    } else {
-      throw new Error('Chart or loadChart is required');
-    }
-  }
-
-  register() {
-    const { key = isRequired('config.key') } = this.config;
-    getChartMetadataRegistry().registerValue(key, this.metadata);
-    getChartBuildQueryRegistry().registerLoader(key, this.loadBuildQuery);
-    getChartComponentRegistry().registerLoader(key, this.loadChart);
-    getChartTransformPropsRegistry().registerLoader(key, this.loadTransformProps);
-    return this;
-  }
-}
diff --git a/superset/assets/src/visualizations/core/models/ChartProps.js b/superset/assets/src/visualizations/core/models/ChartProps.js
deleted file mode 100644
index 0d4411acd4..0000000000
--- a/superset/assets/src/visualizations/core/models/ChartProps.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { createSelector } from 'reselect';
-import convertKeysToCamelCase from '../../../utils/convertKeysToCamelCase';
-
-export default class ChartProps {
-  constructor({
-    width,
-    height,
-    annotationData,
-    datasource,
-    filters,
-    formData,
-    onAddFilter,
-    onError,
-    payload,
-    setControlValue,
-    setTooltip,
-  }) {
-    this.width = width;
-    this.height = height;
-    this.annotationData = annotationData;
-    this.datasource = convertKeysToCamelCase(datasource);
-    this.rawDatasource = datasource;
-    this.filters = filters;
-    this.formData = convertKeysToCamelCase(formData);
-    this.rawFormData = formData;
-    this.onAddFilter = onAddFilter;
-    this.onError = onError;
-    this.payload = payload;
-    this.setControlValue = setControlValue;
-    this.setTooltip = setTooltip;
-  }
-}
-
-ChartProps.createSelector = function () {
-  return createSelector(
-    input => input.width,
-    input => input.height,
-    input => input.annotationData,
-    input => input.datasource,
-    input => input.filters,
-    input => input.formData,
-    input => input.onAddFilter,
-    input => input.onError,
-    input => input.payload,
-    input => input.setControlValue,
-    input => input.setTooltip,
-    (
-      width,
-      height,
-      annotationData,
-      datasource,
-      filters,
-      formData,
-      onAddFilter,
-      onError,
-      payload,
-      setControlValue,
-      setTooltip,
-    ) => new ChartProps({
-      width,
-      height,
-      annotationData,
-      datasource,
-      filters,
-      formData,
-      onAddFilter,
-      onError,
-      payload,
-      setControlValue,
-      setTooltip,
-    }),
-  );
-};
diff --git a/superset/assets/src/visualizations/core/models/Plugin.js b/superset/assets/src/visualizations/core/models/Plugin.js
deleted file mode 100644
index 33609f6da0..0000000000
--- a/superset/assets/src/visualizations/core/models/Plugin.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default class Plugin {
-  constructor() {
-    this.resetConfig();
-  }
-
-  resetConfig() {
-    // The child class can set default config
-    // by overriding this function.
-    this.config = {};
-    return this;
-  }
-
-  configure(config, replace = false) {
-    if (replace) {
-      this.config = config;
-    } else {
-      this.config = { ...this.config, ...config };
-    }
-    return this;
-  }
-
-  register() {
-    return this;
-  }
-}
diff --git a/superset/assets/src/visualizations/core/models/Preset.js b/superset/assets/src/visualizations/core/models/Preset.js
deleted file mode 100644
index 557351d6d2..0000000000
--- a/superset/assets/src/visualizations/core/models/Preset.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default class Preset {
-  constructor({
-    name = '',
-    description = '',
-    presets = [],
-    plugins = [],
-  } = {}) {
-    this.name = name;
-    this.description = description;
-    this.presets = presets;
-    this.plugins = plugins;
-  }
-
-  register() {
-    this.presets.forEach((preset) => {
-      preset.register();
-    });
-    this.plugins.forEach((plugin) => {
-      plugin.register();
-    });
-    return this;
-  }
-}
diff --git a/superset/assets/src/visualizations/core/registries/ChartBuildQueryRegistrySingleton.js b/superset/assets/src/visualizations/core/registries/ChartBuildQueryRegistrySingleton.js
deleted file mode 100644
index dc29df3619..0000000000
--- a/superset/assets/src/visualizations/core/registries/ChartBuildQueryRegistrySingleton.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Registry from '../../../modules/Registry';
-import makeSingleton from '../../../utils/makeSingleton';
-
-class ChartBuildQueryRegistry extends Registry {
-  constructor() {
-    super('ChartBuildQuery');
-  }
-}
-
-const getInstance = makeSingleton(ChartBuildQueryRegistry);
-
-export default getInstance;
diff --git a/superset/assets/src/visualizations/core/registries/ChartComponentRegistrySingleton.js b/superset/assets/src/visualizations/core/registries/ChartComponentRegistrySingleton.js
deleted file mode 100644
index df7d74356a..0000000000
--- a/superset/assets/src/visualizations/core/registries/ChartComponentRegistrySingleton.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Registry from '../../../modules/Registry';
-import makeSingleton from '../../../utils/makeSingleton';
-
-class ChartComponentRegistry extends Registry {
-  constructor() {
-    super('ChartComponent');
-  }
-}
-
-const getInstance = makeSingleton(ChartComponentRegistry);
-
-export default getInstance;
diff --git a/superset/assets/src/visualizations/core/registries/ChartMetadataRegistrySingleton.js b/superset/assets/src/visualizations/core/registries/ChartMetadataRegistrySingleton.js
deleted file mode 100644
index e1c569bc05..0000000000
--- a/superset/assets/src/visualizations/core/registries/ChartMetadataRegistrySingleton.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Registry from '../../../modules/Registry';
-import makeSingleton from '../../../utils/makeSingleton';
-
-class ChartMetadataRegistry extends Registry {
-  constructor() {
-    super('ChartMetadata');
-  }
-}
-
-const getInstance = makeSingleton(ChartMetadataRegistry);
-
-export default getInstance;
diff --git a/superset/assets/src/visualizations/core/registries/ChartTransformPropsRegistrySingleton.js b/superset/assets/src/visualizations/core/registries/ChartTransformPropsRegistrySingleton.js
deleted file mode 100644
index a26fab58d5..0000000000
--- a/superset/assets/src/visualizations/core/registries/ChartTransformPropsRegistrySingleton.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Registry from '../../../modules/Registry';
-import makeSingleton from '../../../utils/makeSingleton';
-
-class ChartTransformPropsRegistry extends Registry {
-  constructor() {
-    super('ChartTransformProps');
-  }
-}
-
-const getInstance = makeSingleton(ChartTransformPropsRegistry);
-
-export default getInstance;
diff --git a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
index 49e37af2d2..c33b76d649 100644
--- a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
+++ b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
@@ -2,13 +2,15 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import AnimatableDeckGLContainer from './AnimatableDeckGLContainer';
 import Legend from '../Legend';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
 import { hexToRGB } from '../../modules/colors';
 import { getPlaySliderParams } from '../../modules/time';
 import sandboxedEval from '../../modules/sandbox';
 
+const { getScale } = CategoricalColorNamespace;
+
 function getCategories(fd, data) {
   const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
   const fixedColor = [c.r, c.g, c.b, 255 * c.a];
diff --git a/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js b/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js
index 067bfe2d89..159e9ca955 100644
--- a/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js
index 13db262073..5c943dd96c 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js
index 8e509060c4..83f5603a14 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js
index 9842b83c2a..7ade377d41 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js
index 5ff49bcb53..14c82af5fc 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js
index df18ec6f59..122c894d7c 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js
index 99c55ade92..886d93a60c 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js
index 47c3b60c52..f6800d6ef6 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js b/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js
index 5c8351dc95..3eaffbcdf7 100644
--- a/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js
+++ b/superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../../core/models/ChartPlugin';
-import ChartMetadata from '../../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 
diff --git a/superset/assets/src/visualizations/deckgl/utils.js b/superset/assets/src/visualizations/deckgl/utils.js
index 441af0f595..6ac770314e 100644
--- a/superset/assets/src/visualizations/deckgl/utils.js
+++ b/superset/assets/src/visualizations/deckgl/utils.js
@@ -1,5 +1,6 @@
 import d3 from 'd3';
-import getSequentialSchemeRegistry from '../../modules/colors/SequentialSchemeRegistrySingleton';
+import { extent } from 'd3-array';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
 import { colorScalerFactory, hexToRGB } from '../../modules/colors';
 
 export function getBreakPoints({
@@ -12,7 +13,7 @@ export function getBreakPoints({
     const numBuckets = formDataNumBuckets
       ? parseInt(formDataNumBuckets, 10)
       : 10;
-    const [minValue, maxValue] = d3.extent(features, d => d[metric]);
+    const [minValue, maxValue] = extent(features, d => d[metric]);
     const delta = (maxValue - minValue) / numBuckets;
     const precision = delta === 0
       ? 0
diff --git a/superset/assets/src/visualizations/nvd3/Area/AreaChartPlugin.js b/superset/assets/src/visualizations/nvd3/Area/AreaChartPlugin.js
index 2638734988..80a2055f6f 100644
--- a/superset/assets/src/visualizations/nvd3/Area/AreaChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Area/AreaChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../../../modules/AnnotationTypes';
diff --git a/superset/assets/src/visualizations/nvd3/Bar/BarChartPlugin.js b/superset/assets/src/visualizations/nvd3/Bar/BarChartPlugin.js
index 2faf567ed3..96a049a7ad 100644
--- a/superset/assets/src/visualizations/nvd3/Bar/BarChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Bar/BarChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../../../modules/AnnotationTypes';
diff --git a/superset/assets/src/visualizations/nvd3/BoxPlot/BoxPlotChartPlugin.js b/superset/assets/src/visualizations/nvd3/BoxPlot/BoxPlotChartPlugin.js
index baf45a0278..5d5059b0cf 100644
--- a/superset/assets/src/visualizations/nvd3/BoxPlot/BoxPlotChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/BoxPlot/BoxPlotChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/Bubble/BubbleChartPlugin.js b/superset/assets/src/visualizations/nvd3/Bubble/BubbleChartPlugin.js
index f00c52f014..db9329f644 100644
--- a/superset/assets/src/visualizations/nvd3/Bubble/BubbleChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Bubble/BubbleChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/Bullet/BulletChartPlugin.js b/superset/assets/src/visualizations/nvd3/Bullet/BulletChartPlugin.js
index 75b4c3852c..0199fba73c 100644
--- a/superset/assets/src/visualizations/nvd3/Bullet/BulletChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Bullet/BulletChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/Compare/CompareChartPlugin.js b/superset/assets/src/visualizations/nvd3/Compare/CompareChartPlugin.js
index e4a94e5c9c..b28f74a3f3 100644
--- a/superset/assets/src/visualizations/nvd3/Compare/CompareChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Compare/CompareChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/DistBar/DistBarChartPlugin.js b/superset/assets/src/visualizations/nvd3/DistBar/DistBarChartPlugin.js
index 3f7b09d146..f1e49ffb80 100644
--- a/superset/assets/src/visualizations/nvd3/DistBar/DistBarChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/DistBar/DistBarChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/DualLine/DualLineChartPlugin.js b/superset/assets/src/visualizations/nvd3/DualLine/DualLineChartPlugin.js
index ec249dea89..7191ebf858 100644
--- a/superset/assets/src/visualizations/nvd3/DualLine/DualLineChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/DualLine/DualLineChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/Line/LineChartPlugin.js b/superset/assets/src/visualizations/nvd3/Line/LineChartPlugin.js
index a7ba48aa54..9134b00c38 100644
--- a/superset/assets/src/visualizations/nvd3/Line/LineChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Line/LineChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../../../modules/AnnotationTypes';
diff --git a/superset/assets/src/visualizations/nvd3/LineMulti/LineMultiChartPlugin.js b/superset/assets/src/visualizations/nvd3/LineMulti/LineMultiChartPlugin.js
index 4f196fa452..9d6eeaa0a8 100644
--- a/superset/assets/src/visualizations/nvd3/LineMulti/LineMultiChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/LineMulti/LineMultiChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
diff --git a/superset/assets/src/visualizations/nvd3/LineMulti/adaptor.jsx b/superset/assets/src/visualizations/nvd3/LineMulti/adaptor.jsx
deleted file mode 100644
index 3b5c175d01..0000000000
--- a/superset/assets/src/visualizations/nvd3/LineMulti/adaptor.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import createAdaptor from '../../../utils/createAdaptor';
-import Component from './LineMulti';
-
-export default createAdaptor(Component);
diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
index 1267b422b8..b51f6652ac 100644
--- a/superset/assets/src/visualizations/nvd3/NVD3Vis.js
+++ b/superset/assets/src/visualizations/nvd3/NVD3Vis.js
@@ -5,10 +5,10 @@ import mathjs from 'mathjs';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import 'nvd3/build/nv.d3.min.css';
 
 import ANNOTATION_TYPES, { applyNativeColumns } from '../../modules/AnnotationTypes';
-import { getScale, getColor } from '../../modules/colors/CategoricalColorNamespace';
 import { formatDateVerbose } from '../../modules/dates';
 import { d3TimeFormatPreset, d3FormatPreset } from '../../modules/utils';
 import { isTruthy } from '../../utils/common';
@@ -38,6 +38,8 @@ import {
 } from './PropTypes';
 import './NVD3Vis.css';
 
+const { getColor, getScale } = CategoricalColorNamespace;
+
 // Limit on how large axes margins can grow as the chart window is resized
 const MAX_MARGIN_PAD = 30;
 const ANIMATION_TIME = 1000;
diff --git a/superset/assets/src/visualizations/nvd3/Pie/PieChartPlugin.js b/superset/assets/src/visualizations/nvd3/Pie/PieChartPlugin.js
index b74144517f..005a3696b8 100644
--- a/superset/assets/src/visualizations/nvd3/Pie/PieChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/Pie/PieChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/nvd3/TimePivot/TimePivotChartPlugin.js b/superset/assets/src/visualizations/nvd3/TimePivot/TimePivotChartPlugin.js
index 7c4d27940f..615794a9d4 100644
--- a/superset/assets/src/visualizations/nvd3/TimePivot/TimePivotChartPlugin.js
+++ b/superset/assets/src/visualizations/nvd3/TimePivot/TimePivotChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../../core/models/ChartPlugin';
-import ChartMetadata from '../../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/src/visualizations/presets/CommonChartPreset.js b/superset/assets/src/visualizations/presets/CommonChartPreset.js
index 2756c3da23..d71e855e6f 100644
--- a/superset/assets/src/visualizations/presets/CommonChartPreset.js
+++ b/superset/assets/src/visualizations/presets/CommonChartPreset.js
@@ -1,4 +1,4 @@
-import Preset from '../core/models/Preset';
+import { Preset } from '@superset-ui/core';
 import AreaChartPlugin from '../nvd3/Area/AreaChartPlugin';
 import BarChartPlugin from '../nvd3/Bar/BarChartPlugin';
 import BigNumberChartPlugin from '../BigNumber/BigNumberChartPlugin';
diff --git a/superset/assets/src/visualizations/presets/DeckGLChartPreset.js b/superset/assets/src/visualizations/presets/DeckGLChartPreset.js
index 1f55632b3f..e27b7e3cec 100644
--- a/superset/assets/src/visualizations/presets/DeckGLChartPreset.js
+++ b/superset/assets/src/visualizations/presets/DeckGLChartPreset.js
@@ -1,4 +1,4 @@
-import Preset from '../core/models/Preset';
+import { Preset } from '@superset-ui/core';
 import ArcChartPlugin from '../deckgl/layers/Arc/ArcChartPlugin';
 import GeoJsonChartPlugin from '../deckgl/layers/Geojson/GeojsonChartPlugin';
 import GridChartPlugin from '../deckgl/layers/Grid/GridChartPlugin';
diff --git a/superset/assets/src/visualizations/presets/HierarchyChartPreset.js b/superset/assets/src/visualizations/presets/HierarchyChartPreset.js
index b19bb83126..8483fa18b9 100644
--- a/superset/assets/src/visualizations/presets/HierarchyChartPreset.js
+++ b/superset/assets/src/visualizations/presets/HierarchyChartPreset.js
@@ -1,4 +1,4 @@
-import Preset from '../core/models/Preset';
+import { Preset } from '@superset-ui/core';
 import PartitionChartPlugin from '../Partition/PartitionChartPlugin';
 import SunburstChartPlugin from '../Sunburst/SunburstChartPlugin';
 import TreemapChartPlugin from '../Treemap/TreemapChartPlugin';
diff --git a/superset/assets/src/visualizations/presets/LegacyChartPreset.js b/superset/assets/src/visualizations/presets/LegacyChartPreset.js
index c5c06afdc8..bed3a0cb87 100644
--- a/superset/assets/src/visualizations/presets/LegacyChartPreset.js
+++ b/superset/assets/src/visualizations/presets/LegacyChartPreset.js
@@ -1,4 +1,4 @@
-import Preset from '../core/models/Preset';
+import { Preset } from '@superset-ui/core';
 import CommonChartPreset from './CommonChartPreset';
 import DeckGLChartPreset from './DeckGLChartPreset';
 import HierarchyChartPreset from './HierarchyChartPreset';
diff --git a/superset/assets/src/visualizations/presets/MapChartPreset.js b/superset/assets/src/visualizations/presets/MapChartPreset.js
index a45ba5cdb5..82ac98f51f 100644
--- a/superset/assets/src/visualizations/presets/MapChartPreset.js
+++ b/superset/assets/src/visualizations/presets/MapChartPreset.js
@@ -1,4 +1,4 @@
-import Preset from '../core/models/Preset';
+import { Preset } from '@superset-ui/core';
 import CountryMapChartPlugin from '../CountryMap/CountryMapChartPlugin';
 import MapBoxChartPlugin from '../MapBox/MapBoxChartPlugin';
 import WorldMapChartPlugin from '../WorldMap/WorldMapChartPlugin';
diff --git a/superset/assets/src/visualizations/wordcloud/WordCloud.js b/superset/assets/src/visualizations/wordcloud/WordCloud.js
index a165b01608..dccc1c36fb 100644
--- a/superset/assets/src/visualizations/wordcloud/WordCloud.js
+++ b/superset/assets/src/visualizations/wordcloud/WordCloud.js
@@ -1,7 +1,7 @@
 import d3 from 'd3';
 import PropTypes from 'prop-types';
 import cloudLayout from 'd3-cloud';
-import { getScale } from '../../modules/colors/CategoricalColorNamespace';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 
 const ROTATION = {
   square: () => Math.floor((Math.random() * 2)) * 90,
@@ -48,7 +48,7 @@ function WordCloud(element, props) {
     .fontWeight('bold')
     .fontSize(d => scale(d.size));
 
-  const colorFn = getScale(colorScheme).toFunction();
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme).toFunction();
 
   function draw(words) {
     chart.selectAll('*').remove();
diff --git a/superset/assets/src/visualizations/wordcloud/WordCloudChartPlugin.js b/superset/assets/src/visualizations/wordcloud/WordCloudChartPlugin.js
index 82db63d923..b82882080f 100644
--- a/superset/assets/src/visualizations/wordcloud/WordCloudChartPlugin.js
+++ b/superset/assets/src/visualizations/wordcloud/WordCloudChartPlugin.js
@@ -1,6 +1,5 @@
 import { t } from '@superset-ui/translation';
-import ChartPlugin from '../core/models/ChartPlugin';
-import ChartMetadata from '../core/models/ChartMetadata';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 
diff --git a/superset/assets/webpack.config.js b/superset/assets/webpack.config.js
index c37ad55a1e..52065e3601 100644
--- a/superset/assets/webpack.config.js
+++ b/superset/assets/webpack.config.js
@@ -112,7 +112,7 @@ const config = {
         default: false,
         major: {
           name: 'vendors-major',
-          test: /[\\/]node_modules\/(brace|react[-]dom|core[-]js|@superset[-]ui\/translation)[\\/]/,
+          test: /[\\/]node_modules\/(brace|react[-]dom|@superset[-]ui\/translation)[\\/]/,
         },
       },
     },
diff --git a/superset/assets/yarn.lock b/superset/assets/yarn.lock
index 9785972818..3f28667ed8 100644
--- a/superset/assets/yarn.lock
+++ b/superset/assets/yarn.lock
@@ -399,16 +399,42 @@
   dependencies:
     array-from "^2.1.1"
 
-"@superset-ui/connection@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@superset-ui/connection/-/connection-0.3.0.tgz#f659d8b74e88b64e7463c09e1a08fb89ac29c2b9"
+"@superset-ui/chart@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/chart/-/chart-0.5.0.tgz#1420ce7b6ac3bf1b06875e5f2541fa98505b5a9b"
+  dependencies:
+    "@superset-ui/core" "^0.3.0"
+    reselect "^4.0.0"
+
+"@superset-ui/color@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/color/-/color-0.5.0.tgz#3064bec063fdf43d568a39b4d9ded352d0aeed55"
+  dependencies:
+    "@superset-ui/core" "^0.5.0"
+    d3-scale "^2.1.2"
+
+"@superset-ui/connection@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/connection/-/connection-0.5.0.tgz#c80edb4eba760d18e9b545eb41a085c79384a25b"
   dependencies:
     "@babel/runtime" "^7.1.2"
     whatwg-fetch "^2.0.4"
 
-"@superset-ui/translation@^0.3.0":
+"@superset-ui/core@^0.3.0":
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@superset-ui/translation/-/translation-0.3.0.tgz#e0c1737739f61bcdaf5c5b15a80ceecc38a50e52"
+  resolved "https://registry.yarnpkg.com/@superset-ui/core/-/core-0.3.0.tgz#99b5281457201eb9781eab71ac8189a5ce3ccce4"
+  dependencies:
+    lodash "^4.17.11"
+
+"@superset-ui/core@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/core/-/core-0.5.0.tgz#8784465e312cac5015df28d8540d27a2fd6060ba"
+  dependencies:
+    lodash "^4.17.11"
+
+"@superset-ui/translation@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@superset-ui/translation/-/translation-0.5.0.tgz#d02af7be94ac6b9e48d3b09f9f1059b11b2d283d"
   dependencies:
     jed "^1.1.1"
 
@@ -3433,7 +3459,7 @@ d3-ease@1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
 
-d3-format@1, d3-format@^1.2.0:
+d3-format@1, d3-format@^1.2.0, d3-format@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"
 
@@ -3489,7 +3515,7 @@ d3-scale@^1.0.5, d3-scale@^1.0.6:
     d3-time "1"
     d3-time-format "2"
 
-d3-scale@^2.0.0:
+d3-scale@^2.0.0, d3-scale@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.1.2.tgz#4e932b7b60182aee9073ede8764c98423e5f9a94"
   dependencies:
@@ -3500,7 +3526,7 @@ d3-scale@^2.0.0:
     d3-time "1"
     d3-time-format "2"
 
-d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.3.0:
+d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.3.0, d3-selection@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.3.2.tgz#6e70a9df60801c8af28ac24d10072d82cbfdf652"
 
@@ -3514,7 +3540,7 @@ d3-svg-legend@^1.x:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/d3-svg-legend/-/d3-svg-legend-1.13.0.tgz#6217478c9add9d62cb333617e1961311a41a4db3"
 
-d3-time-format@2:
+d3-time-format@2, d3-time-format@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
   dependencies:


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org