feat: add control panel support to chart plugin (apache#203)

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,

packages/superset-ui-chart/src/models/ChartControlPanel.ts

@@ -0,0 +1 @@
+export type ChartControlPanel = { [key: string]: any };

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<T>(x: T) {
+  return x;
+}
+
+const EMPTY = {};
 
 export type PromiseOrValue<T> = Promise<T> | T;
 export type PromiseOrValueLoader<T> = () => PromiseOrValue<T>;
@@ -29,6 +35,8 @@ interface ChartPluginConfig<T extends QueryFormData> {
   Chart?: ChartType;
   /** Use loadChart for dynamic import (lazy-loading) */
   loadChart?: PromiseOrValueLoader<ValueOrModuleWithValue<ChartType>>;
+  /** Control panel configuration object */
+  controlPanel?: ChartControlPanel;
 }
 
 /**
@@ -48,6 +56,7 @@ function sanitizeLoader<T>(
 }
 
 export default class ChartPlugin<T extends QueryFormData = QueryFormData> extends Plugin {
+  controlPanel: ChartControlPanel;
   metadata: ChartMetadata;
   loadBuildQuery?: PromiseOrValueLoader<BuildQueryFunction<T>>;
   loadTransformProps: PromiseOrValueLoader<TransformProps>;
@@ -63,7 +72,9 @@ export default class ChartPlugin<T extends QueryFormData = QueryFormData> 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<T extends QueryFormData = QueryFormData> 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<T extends QueryFormData = QueryFormData> extend
     const { key = isRequired('config.key') } = this.config;
     getChartMetadataRegistry().remove(key);
     getChartComponentRegistry().remove(key);
+    getChartControlPanelRegistry().remove(key);
     getChartTransformPropsRegistry().remove(key);
     getChartBuildQueryRegistry().remove(key);
 

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<ChartControlPanel, ChartControlPanel> {
+  constructor() {
+    super({ name: 'ChartControlPanel' });
+  }
+}
+
+const getInstance = makeSingleton(ChartControlPanelRegistry);
+
+export default getInstance;

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,

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);