mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
feat: deprecate old SuperChart API that accepts chartProps (#202)
BREAKING CHANGE: No longer accept chartProps as a single prop in <SuperChart>. Developers must specify each field in chartProps individually.
This commit is contained in:
parent
9decd815ec
commit
0fb91c0e6b
@ -1,65 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import SuperChart, { Props as SuperChartProps } from './SuperChart';
|
|
||||||
import ChartProps, { ChartPropsConfig } from '../models/ChartProps';
|
|
||||||
|
|
||||||
/** SuperChart Props for version 0.11 and below has chartProps */
|
|
||||||
type ClassicProps = Omit<
|
|
||||||
SuperChartProps,
|
|
||||||
| 'annotationData'
|
|
||||||
| 'datasource'
|
|
||||||
| 'filters'
|
|
||||||
| 'formData'
|
|
||||||
| 'payload'
|
|
||||||
| 'onAddFilter'
|
|
||||||
| 'onError'
|
|
||||||
| 'setControlValue'
|
|
||||||
| 'setTooltip'
|
|
||||||
| 'width'
|
|
||||||
| 'height'
|
|
||||||
> & {
|
|
||||||
chartProps: ChartProps | ChartPropsConfig;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Props = ClassicProps | SuperChartProps;
|
|
||||||
|
|
||||||
const SuperChartShell = React.forwardRef<SuperChart, Props>((props, ref) => {
|
|
||||||
if ('chartProps' in props) {
|
|
||||||
const { chartProps, ...rest } = props;
|
|
||||||
|
|
||||||
const {
|
|
||||||
annotationData,
|
|
||||||
datasource,
|
|
||||||
filters,
|
|
||||||
formData,
|
|
||||||
payload,
|
|
||||||
onAddFilter,
|
|
||||||
onError,
|
|
||||||
setControlValue,
|
|
||||||
setTooltip,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
} = chartProps;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SuperChart
|
|
||||||
ref={ref}
|
|
||||||
{...rest}
|
|
||||||
annotationData={annotationData}
|
|
||||||
datasource={datasource}
|
|
||||||
filters={filters}
|
|
||||||
formData={formData}
|
|
||||||
payload={payload}
|
|
||||||
onAddFilter={onAddFilter}
|
|
||||||
onError={onError}
|
|
||||||
setControlValue={setControlValue}
|
|
||||||
setTooltip={setTooltip}
|
|
||||||
width={width}
|
|
||||||
height={height}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return <SuperChart ref={ref} {...props} />;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default SuperChartShell;
|
|
@ -5,7 +5,7 @@ export { default as ChartProps } from './models/ChartProps';
|
|||||||
|
|
||||||
export { default as createLoadableRenderer } from './components/createLoadableRenderer';
|
export { default as createLoadableRenderer } from './components/createLoadableRenderer';
|
||||||
export { default as reactify } from './components/reactify';
|
export { default as reactify } from './components/reactify';
|
||||||
export { default as SuperChart } from './components/SuperChartShell';
|
export { default as SuperChart } from './components/SuperChart';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
default as getChartBuildQueryRegistry,
|
default as getChartBuildQueryRegistry,
|
||||||
|
@ -6,7 +6,7 @@ jest.mock('resize-observer-polyfill');
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { triggerResizeObserver } from 'resize-observer-polyfill';
|
import { triggerResizeObserver } from 'resize-observer-polyfill';
|
||||||
import ErrorBoundary from 'react-error-boundary';
|
import ErrorBoundary from 'react-error-boundary';
|
||||||
import { ChartProps, SuperChart } from '../../src';
|
import { SuperChart } from '../../src';
|
||||||
import RealSuperChart from '../../src/components/SuperChart';
|
import RealSuperChart from '../../src/components/SuperChart';
|
||||||
import { ChartKeys, DiligentChartPlugin, BuggyChartPlugin } from './MockChartPlugins';
|
import { ChartKeys, DiligentChartPlugin, BuggyChartPlugin } from './MockChartPlugins';
|
||||||
import promiseTimeout from './promiseTimeout';
|
import promiseTimeout from './promiseTimeout';
|
||||||
@ -97,47 +97,15 @@ describe('SuperChart', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('supports multiple way of specifying chartProps', () => {
|
it('passes the props to renderer correctly', () => {
|
||||||
it('chartProps is instanceof ChartProps', () => {
|
const wrapper = mount(
|
||||||
const wrapper = mount(
|
<SuperChart chartType={ChartKeys.DILIGENT} width={101} height={118} formData={{ abc: 1 }} />,
|
||||||
<SuperChart
|
);
|
||||||
chartType={ChartKeys.DILIGENT}
|
|
||||||
chartProps={new ChartProps({ width: 20, height: 20 })}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
return promiseTimeout(() => {
|
return promiseTimeout(() => {
|
||||||
const renderedWrapper = wrapper.render();
|
const renderedWrapper = wrapper.render();
|
||||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
||||||
expectDimension(renderedWrapper, 20, 20);
|
expectDimension(renderedWrapper, 101, 118);
|
||||||
});
|
|
||||||
});
|
|
||||||
it('chartProps is ChartPropsConfig', () => {
|
|
||||||
const wrapper = mount(
|
|
||||||
<SuperChart chartType={ChartKeys.DILIGENT} chartProps={{ width: 201, height: 202 }} />,
|
|
||||||
);
|
|
||||||
|
|
||||||
return promiseTimeout(() => {
|
|
||||||
const renderedWrapper = wrapper.render();
|
|
||||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
|
||||||
expectDimension(renderedWrapper, 201, 202);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('fields of chartProps are listed as props of SuperChart', () => {
|
|
||||||
const wrapper = mount(
|
|
||||||
<SuperChart
|
|
||||||
chartType={ChartKeys.DILIGENT}
|
|
||||||
width={101}
|
|
||||||
height={118}
|
|
||||||
formData={{ abc: 1 }}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
return promiseTimeout(() => {
|
|
||||||
const renderedWrapper = wrapper.render();
|
|
||||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
|
||||||
expectDimension(renderedWrapper, 101, 118);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -191,33 +159,6 @@ describe('SuperChart', () => {
|
|||||||
const wrapper = mount(<SuperChart chartType={ChartKeys.DILIGENT} debounceTime={1} />);
|
const wrapper = mount(<SuperChart chartType={ChartKeys.DILIGENT} debounceTime={1} />);
|
||||||
triggerResizeObserver();
|
triggerResizeObserver();
|
||||||
|
|
||||||
return promiseTimeout(() => {
|
|
||||||
const renderedWrapper = wrapper.render();
|
|
||||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
|
||||||
expectDimension(renderedWrapper, 300, 400);
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
it('works when width and height are inside chartProps', () => {
|
|
||||||
const wrapper = mount(
|
|
||||||
<SuperChart
|
|
||||||
chartType={ChartKeys.DILIGENT}
|
|
||||||
debounceTime={1}
|
|
||||||
chartProps={{ width: 123, height: 456 }}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
return promiseTimeout(() => {
|
|
||||||
const renderedWrapper = wrapper.render();
|
|
||||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
|
||||||
expectDimension(renderedWrapper, 123, 456);
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
it('works when there is chartProps but still no width and height', () => {
|
|
||||||
const wrapper = mount(
|
|
||||||
<SuperChart chartType={ChartKeys.DILIGENT} debounceTime={1} chartProps={{}} />,
|
|
||||||
);
|
|
||||||
triggerResizeObserver();
|
|
||||||
|
|
||||||
return promiseTimeout(() => {
|
return promiseTimeout(() => {
|
||||||
const renderedWrapper = wrapper.render();
|
const renderedWrapper = wrapper.render();
|
||||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
Loading…
Reference in New Issue
Block a user