From 9f8461b9659240e80099a167b998f4934b969870 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Tue, 18 Jun 2019 15:48:55 -0700 Subject: [PATCH] feat: store reference to container and update bindings (#180) * feat: store reference to container * fix: minor adjustment * feat: forward ref from shell to superchart --- .../src/components/SuperChart.tsx | 10 ++ .../src/components/SuperChartCore.tsx | 150 +++++++++--------- .../src/components/SuperChartShell.tsx | 9 +- 3 files changed, 89 insertions(+), 80 deletions(-) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/SuperChart.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/SuperChart.tsx index 58238d96edbf..f3cd7fbdc7bd 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/SuperChart.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/SuperChart.tsx @@ -30,8 +30,17 @@ type PropsWithDefault = Props & Readonly; export default class SuperChart extends React.PureComponent { static defaultProps = defaultProps; + /** + * SuperChart's core + */ + core?: SuperChartCore | null; + private createChartProps = ChartProps.createSelector(); + private setRef = (core: SuperChartCore | null) => { + this.core = core; + }; + renderChart(width: number, height: number) { const { id, @@ -50,6 +59,7 @@ export default class SuperChart extends React.PureComponent { const chart = ( { static defaultProps = defaultProps; - processChartProps: (input: { - chartProps: ChartProps; - preTransformProps?: PreTransformProps; - transformProps?: TransformProps; - postTransformProps?: PostTransformProps; - }) => any; - - createLoadableRenderer: (input: { - chartType: string; - overrideTransformProps?: TransformProps; - }) => LoadableRenderer | (() => null); - - constructor(props: Props) { - super(props); - - this.renderChart = this.renderChart.bind(this); - this.renderLoading = this.renderLoading.bind(this); - - // memoized function so it will not recompute - // and return previous value - // unless one of - // - preTransformProps - // - transformProps - // - postTransformProps - // - chartProps - // is changed. - this.processChartProps = createSelector( - input => input.preTransformProps, - input => input.transformProps, - input => input.postTransformProps, - input => input.chartProps, - (pre = IDENTITY, transform = IDENTITY, post = IDENTITY, chartProps) => - post(transform(pre(chartProps))), - ); - - const componentRegistry = getChartComponentRegistry(); - const transformPropsRegistry = getChartTransformPropsRegistry(); - - // memoized function so it will not recompute - // and return previous value - // unless one of - // - chartType - // - overrideTransformProps - // is changed. - this.createLoadableRenderer = createSelector( - input => input.chartType, - input => input.overrideTransformProps, - (chartType, overrideTransformProps) => { - if (chartType) { - const Renderer = createLoadableRenderer({ - loader: { - Chart: () => componentRegistry.getAsPromise(chartType), - transformProps: overrideTransformProps - ? () => Promise.resolve(overrideTransformProps) - : () => transformPropsRegistry.getAsPromise(chartType), - }, - loading: (loadingProps: LoadingProps) => this.renderLoading(loadingProps, chartType), - render: this.renderChart, - }); - - // Trigger preloading. - Renderer.preload(); - - return Renderer; - } - - return EMPTY; - }, - ); - } - - renderChart(loaded: LoadedModules, props: RenderProps) { + /** + * The HTML element that wraps all chart content + */ + container?: HTMLElement | null; + + /** + * memoized function so it will not recompute + * and return previous value + * unless one of + * - preTransformProps + * - transformProps + * - postTransformProps + * - chartProps + * is changed. + */ + processChartProps = createSelector( + (input: { + chartProps: ChartProps; + preTransformProps?: PreTransformProps; + transformProps?: TransformProps; + postTransformProps?: PostTransformProps; + }) => input.preTransformProps, + input => input.transformProps, + input => input.postTransformProps, + input => input.chartProps, + (pre = IDENTITY, transform = IDENTITY, post = IDENTITY, chartProps) => + post(transform(pre(chartProps))), + ); + + /** + * memoized function so it will not recompute + * and return previous value + * unless one of + * - chartType + * - overrideTransformProps + * is changed. + */ + private createLoadableRenderer = createSelector( + (input: { chartType: string; overrideTransformProps?: TransformProps }) => input.chartType, + input => input.overrideTransformProps, + (chartType, overrideTransformProps) => { + if (chartType) { + const Renderer = createLoadableRenderer({ + loader: { + Chart: () => getChartComponentRegistry().getAsPromise(chartType), + transformProps: overrideTransformProps + ? () => Promise.resolve(overrideTransformProps) + : () => getChartTransformPropsRegistry().getAsPromise(chartType), + }, + loading: (loadingProps: LoadingProps) => this.renderLoading(loadingProps, chartType), + render: this.renderChart, + }); + + // Trigger preloading. + Renderer.preload(); + + return Renderer; + } + + return EMPTY; + }, + ); + + private renderChart = (loaded: LoadedModules, props: RenderProps) => { const { Chart, transformProps } = loaded; const { chartProps, preTransformProps, postTransformProps } = props; @@ -143,9 +135,9 @@ export default class SuperChartCore extends React.PureComponent { })} /> ); - } + }; - renderLoading(loadingProps: LoadingProps, chartType: string) { + private renderLoading = (loadingProps: LoadingProps, chartType: string) => { const { error } = loadingProps; if (error) { @@ -159,7 +151,11 @@ export default class SuperChartCore extends React.PureComponent { } return null; - } + }; + + private setRef = (container: HTMLElement | null) => { + this.container = container; + }; render() { const { @@ -195,7 +191,7 @@ export default class SuperChartCore extends React.PureComponent { } return ( -
+
((props, ref) => { if ('chartProps' in props) { const { chartProps, ...rest } = props; @@ -42,6 +42,7 @@ export default function SuperChartShell(props: Props) { return ( ; -} + return ; +}); + +export default SuperChartShell;