From 920d3894d63b60200fd7b539dbe510481e3d6b32 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Wed, 14 Aug 2019 10:21:17 -0700 Subject: [PATCH] feat: add control panel support to chart plugin (#203) --- packages/superset-ui-chart/src/index.ts | 3 ++ .../src/models/ChartControlPanel.ts | 1 + .../src/models/ChartPlugin.ts | 15 ++++++++- .../ChartControlPanelRegistrySingleton.ts | 12 +++++++ packages/superset-ui-chart/test/index.test.js | 2 ++ .../test/models/ChartPlugin.test.tsx | 33 ++++++++++++++++--- 6 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 packages/superset-ui-chart/src/models/ChartControlPanel.ts create mode 100644 packages/superset-ui-chart/src/registries/ChartControlPanelRegistrySingleton.ts diff --git a/packages/superset-ui-chart/src/index.ts b/packages/superset-ui-chart/src/index.ts index b4e9eaf8350b..a009146aa49c 100644 --- a/packages/superset-ui-chart/src/index.ts +++ b/packages/superset-ui-chart/src/index.ts @@ -11,6 +11,9 @@ export { default as getChartBuildQueryRegistry, } from './registries/ChartBuildQueryRegistrySingleton'; export { default as getChartComponentRegistry } from './registries/ChartComponentRegistrySingleton'; +export { + default as getChartControlPanelRegistry, +} from './registries/ChartControlPanelRegistrySingleton'; export { default as getChartMetadataRegistry } from './registries/ChartMetadataRegistrySingleton'; export { default as getChartTransformPropsRegistry, diff --git a/packages/superset-ui-chart/src/models/ChartControlPanel.ts b/packages/superset-ui-chart/src/models/ChartControlPanel.ts new file mode 100644 index 000000000000..9900cab73468 --- /dev/null +++ b/packages/superset-ui-chart/src/models/ChartControlPanel.ts @@ -0,0 +1 @@ +export type ChartControlPanel = { [key: string]: any }; diff --git a/packages/superset-ui-chart/src/models/ChartPlugin.ts b/packages/superset-ui-chart/src/models/ChartPlugin.ts index 688639d4f2bc..4433ff1a105f 100644 --- a/packages/superset-ui-chart/src/models/ChartPlugin.ts +++ b/packages/superset-ui-chart/src/models/ChartPlugin.ts @@ -5,10 +5,16 @@ import ChartMetadata from './ChartMetadata'; import getChartMetadataRegistry from '../registries/ChartMetadataRegistrySingleton'; import getChartBuildQueryRegistry from '../registries/ChartBuildQueryRegistrySingleton'; import getChartComponentRegistry from '../registries/ChartComponentRegistrySingleton'; +import getChartControlPanelRegistry from '../registries/ChartControlPanelRegistrySingleton'; import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton'; import { BuildQueryFunction, TransformProps } from '../types/TransformFunction'; +import { ChartControlPanel } from './ChartControlPanel'; -const IDENTITY = (x: any) => x; +function IDENTITY(x: T) { + return x; +} + +const EMPTY = {}; export type PromiseOrValue = Promise | T; export type PromiseOrValueLoader = () => PromiseOrValue; @@ -29,6 +35,8 @@ interface ChartPluginConfig { Chart?: ChartType; /** Use loadChart for dynamic import (lazy-loading) */ loadChart?: PromiseOrValueLoader>; + /** Control panel configuration object */ + controlPanel?: ChartControlPanel; } /** @@ -48,6 +56,7 @@ function sanitizeLoader( } export default class ChartPlugin extends Plugin { + controlPanel: ChartControlPanel; metadata: ChartMetadata; loadBuildQuery?: PromiseOrValueLoader>; loadTransformProps: PromiseOrValueLoader; @@ -63,7 +72,9 @@ export default class ChartPlugin extend loadTransformProps, Chart, loadChart, + controlPanel = EMPTY, } = config; + this.controlPanel = controlPanel; this.metadata = metadata; this.loadBuildQuery = (loadBuildQuery && sanitizeLoader(loadBuildQuery)) || @@ -84,6 +95,7 @@ export default class ChartPlugin extend const { key = isRequired('config.key') } = this.config; getChartMetadataRegistry().registerValue(key, this.metadata); getChartComponentRegistry().registerLoader(key, this.loadChart); + getChartControlPanelRegistry().registerValue(key, this.controlPanel); getChartTransformPropsRegistry().registerLoader(key, this.loadTransformProps); if (this.loadBuildQuery) { getChartBuildQueryRegistry().registerLoader(key, this.loadBuildQuery); @@ -96,6 +108,7 @@ export default class ChartPlugin extend const { key = isRequired('config.key') } = this.config; getChartMetadataRegistry().remove(key); getChartComponentRegistry().remove(key); + getChartControlPanelRegistry().remove(key); getChartTransformPropsRegistry().remove(key); getChartBuildQueryRegistry().remove(key); diff --git a/packages/superset-ui-chart/src/registries/ChartControlPanelRegistrySingleton.ts b/packages/superset-ui-chart/src/registries/ChartControlPanelRegistrySingleton.ts new file mode 100644 index 000000000000..e689fb9b0b3f --- /dev/null +++ b/packages/superset-ui-chart/src/registries/ChartControlPanelRegistrySingleton.ts @@ -0,0 +1,12 @@ +import { Registry, makeSingleton } from '@superset-ui/core'; +import { ChartControlPanel } from '../models/ChartControlPanel'; + +class ChartControlPanelRegistry extends Registry { + constructor() { + super({ name: 'ChartControlPanel' }); + } +} + +const getInstance = makeSingleton(ChartControlPanelRegistry); + +export default getInstance; diff --git a/packages/superset-ui-chart/test/index.test.js b/packages/superset-ui-chart/test/index.test.js index e365a9e81813..c70620088a46 100644 --- a/packages/superset-ui-chart/test/index.test.js +++ b/packages/superset-ui-chart/test/index.test.js @@ -6,6 +6,7 @@ import { createLoadableRenderer, getChartBuildQueryRegistry, getChartComponentRegistry, + getChartControlPanelRegistry, getChartMetadataRegistry, getChartTransformPropsRegistry, reactify, @@ -21,6 +22,7 @@ describe('index', () => { createLoadableRenderer, getChartBuildQueryRegistry, getChartComponentRegistry, + getChartControlPanelRegistry, getChartMetadataRegistry, getChartTransformPropsRegistry, reactify, diff --git a/packages/superset-ui-chart/test/models/ChartPlugin.test.tsx b/packages/superset-ui-chart/test/models/ChartPlugin.test.tsx index 863c1f3789a8..471cd535be0a 100644 --- a/packages/superset-ui-chart/test/models/ChartPlugin.test.tsx +++ b/packages/superset-ui-chart/test/models/ChartPlugin.test.tsx @@ -10,6 +10,7 @@ import { getChartComponentRegistry, getChartTransformPropsRegistry, getChartBuildQueryRegistry, + getChartControlPanelRegistry, } from '../../src'; describe('ChartPlugin', () => { @@ -25,6 +26,8 @@ describe('ChartPlugin', () => { queries: [{ granularity: 'day' }], }); + const controlPanel = { abc: 1 }; + it('exists', () => { expect(ChartPlugin).toBeDefined(); }); @@ -131,6 +134,23 @@ describe('ChartPlugin', () => { expect(fn(PROPS)).toEqual({ field2: 2 }); }); }); + describe('controlPanel', () => { + it('takes controlPanel from input', () => { + const plugin = new ChartPlugin({ + metadata, + Chart: FakeChart, + controlPanel, + }); + expect(plugin.controlPanel).toBe(controlPanel); + }); + it('defaults to empty object', () => { + const plugin = new ChartPlugin({ + metadata, + Chart: FakeChart, + }); + expect(plugin.controlPanel).toEqual({}); + }); + }); }); describe('.register()', () => { @@ -141,6 +161,7 @@ describe('ChartPlugin', () => { metadata, Chart: FakeChart, buildQuery, + controlPanel, }); }); @@ -154,6 +175,7 @@ describe('ChartPlugin', () => { expect(getChartComponentRegistry().get('cd')).toBe(FakeChart); expect(getChartTransformPropsRegistry().has('cd')).toEqual(true); expect(getChartBuildQueryRegistry().get('cd')).toBe(buildQuery); + expect(getChartControlPanelRegistry().get('cd')).toBe(controlPanel); }); it('does not register buildQuery when it is not specified in the ChartPlugin', () => { new ChartPlugin({ @@ -177,6 +199,7 @@ describe('ChartPlugin', () => { metadata, Chart: FakeChart, buildQuery, + controlPanel, }); }); @@ -190,11 +213,13 @@ describe('ChartPlugin', () => { expect(getChartComponentRegistry().get('def')).toBe(FakeChart); expect(getChartTransformPropsRegistry().has('def')).toEqual(true); expect(getChartBuildQueryRegistry().get('def')).toBe(buildQuery); + expect(getChartControlPanelRegistry().get('def')).toBe(controlPanel); plugin.unregister(); - expect(getChartMetadataRegistry().has('def')).toEqual(false); - expect(getChartComponentRegistry().has('def')).toEqual(false); - expect(getChartTransformPropsRegistry().has('def')).toEqual(false); - expect(getChartBuildQueryRegistry().has('def')).toEqual(false); + expect(getChartMetadataRegistry().has('def')).toBeFalsy(); + expect(getChartComponentRegistry().has('def')).toBeFalsy(); + expect(getChartTransformPropsRegistry().has('def')).toBeFalsy(); + expect(getChartBuildQueryRegistry().has('def')).toBeFalsy(); + expect(getChartControlPanelRegistry().has('def')).toBeFalsy(); }); it('returns itself', () => { expect(plugin.configure({ key: 'xyz' }).unregister()).toBe(plugin);