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

This commit is contained in:
Krist Wongsuphasawat 2019-08-14 10:21:17 -07:00 committed by Yongjie Zhao
parent 0fb91c0e6b
commit a7a12c79a2
6 changed files with 61 additions and 5 deletions

View File

@ -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,

View File

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

View File

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

View File

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

View File

@ -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,

View File

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