mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -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 reactify } from './components/reactify';
|
||||
export { default as SuperChart } from './components/SuperChartShell';
|
||||
export { default as SuperChart } from './components/SuperChart';
|
||||
|
||||
export {
|
||||
default as getChartBuildQueryRegistry,
|
||||
|
@ -6,7 +6,7 @@ jest.mock('resize-observer-polyfill');
|
||||
// @ts-ignore
|
||||
import { triggerResizeObserver } from 'resize-observer-polyfill';
|
||||
import ErrorBoundary from 'react-error-boundary';
|
||||
import { ChartProps, SuperChart } from '../../src';
|
||||
import { SuperChart } from '../../src';
|
||||
import RealSuperChart from '../../src/components/SuperChart';
|
||||
import { ChartKeys, DiligentChartPlugin, BuggyChartPlugin } from './MockChartPlugins';
|
||||
import promiseTimeout from './promiseTimeout';
|
||||
@ -97,47 +97,15 @@ describe('SuperChart', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('supports multiple way of specifying chartProps', () => {
|
||||
it('chartProps is instanceof ChartProps', () => {
|
||||
const wrapper = mount(
|
||||
<SuperChart
|
||||
chartType={ChartKeys.DILIGENT}
|
||||
chartProps={new ChartProps({ width: 20, height: 20 })}
|
||||
/>,
|
||||
);
|
||||
it('passes the props to renderer correctly', () => {
|
||||
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, 20, 20);
|
||||
});
|
||||
});
|
||||
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);
|
||||
});
|
||||
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} />);
|
||||
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(() => {
|
||||
const renderedWrapper = wrapper.render();
|
||||
expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
|
Loading…
Reference in New Issue
Block a user