pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-19 12:09:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: deprecate old SuperChart API that accepts chartProps (#202)

Browse Source 
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:
Krist Wongsuphasawat 2019-08-14 10:08:46 -07:00 committed by Yongjie Zhao
parent 9decd815ec
commit 0fb91c0e6b
3 changed files with 10 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/components/SuperChartShell.tsx
View File

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

2
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/src/index.ts
View File

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

77
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/SuperChartShell.test.tsx → superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart/test/components/SuperChart.test.tsx
View File

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