Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
fix: add query storybook back
Browse files Browse the repository at this point in the history
  • Loading branch information
@kristw
kristw committed Apr 27, 2020
1 parent 03cbbaf commit 967da8f
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 142 deletions.
144 changes: 68 additions & 76 deletions packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,74 @@
// import React from 'react';
// import { text, select } from '@storybook/addon-knobs';
// import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
// import { SupersetClient } from '@superset-ui/connection';
// import Expandable from './Expandable';
// import VerifyCORS, { renderError } from './VerifyCORS';
import React from 'react';
import { text, select } from '@storybook/addon-knobs';
import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
import { SupersetClient } from '@superset-ui/connection';
import Expandable from './Expandable';
import VerifyCORS, { renderError } from './VerifyCORS';

// export default function createQueryStory({
// choices,
// storyName = 'Queries',
// storyPath = '',
// }: {
// choices: {
// [key: string]: {
// chartType: string;
// formData: {
// [key: string]: any;
// };
// };
// };
// storyName: string;
// storyPath: string;
// }) {
// const keys = Object.keys(choices);
export default function createQueryStory({
choices,
}: {
choices: {
[key: string]: {
chartType: string;
formData: {
[key: string]: any;
};
};
};
}) {
const keys = Object.keys(choices);

// return {
// renderStory: () => {
// const host = text('Set Superset App host for CORS request', 'localhost:8088');
// const mode = select('Choose mode:', keys, keys[0]);
// const { formData: presetFormData, chartType } = choices[mode];
// const width = text('Vis width', '400');
// const height = text('Vis height', '400');
// const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));
return () => {
const host = text('Set Superset App host for CORS request', 'localhost:8088');
const mode = select('Choose mode:', keys, keys[0]);
const { formData: presetFormData, chartType } = choices[mode];
const width = text('Vis width', '400');
const height = text('Vis height', '400');
const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));

// return (
// <div style={{ margin: 16 }}>
// <VerifyCORS host={host}>
// {() => (
// <ChartDataProvider
// client={SupersetClient}
// formData={JSON.parse(formData.replace(/&quot;/g, '"'))}
// >
// {({ loading, payload, error }) => {
// if (loading) return <div>Loading!</div>;
return (
<div style={{ margin: 16 }}>
<VerifyCORS host={host}>
{() => (
<ChartDataProvider
client={SupersetClient}
formData={JSON.parse(formData.replace(/&quot;/g, '"'))}
>
{({ loading, payload, error }) => {
if (loading) return <div>Loading!</div>;

// if (error) return renderError(error);
if (error) return renderError(error);

// if (payload)
// return (
// <>
// <SuperChart
// chartType={chartType}
// width={width}
// height={height}
// formData={payload.formData}
// // @TODO fix typing
// // all vis's now expect objects but api/v1/ returns an array
// queryData={
// Array.isArray(payload.queryData)
// ? payload.queryData[0]
// : payload.queryData
// }
// />
// <br />
// <Expandable expandableWhat="payload">
// <pre style={{ fontSize: 11 }}>{JSON.stringify(payload, null, 2)}</pre>
// </Expandable>
// </>
// );
if (payload)
return (
<>
<SuperChart
chartType={chartType}
width={width}
height={height}
formData={payload.formData}
// @TODO fix typing
// all vis's now expect objects but api/v1/ returns an array
queryData={
Array.isArray(payload.queryData)
? payload.queryData[0]
: payload.queryData
}
/>
<br />
<Expandable expandableWhat="payload">
<pre style={{ fontSize: 11 }}>{JSON.stringify(payload, null, 2)}</pre>
</Expandable>
</>
);

// return null;
// }}
// </ChartDataProvider>
// )}
// </VerifyCORS>
// </div>
// );
// },
// storyName,
// storyPath,
// };
// }
return null;
}}
</ChartDataProvider>
)}
</VerifyCORS>
</div>
);
};
}
1 change: 1 addition & 0 deletions packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ export { default as withLabelFlush } from './stories/flush';
export { default as withMissingData } from './stories/missing';
export { default as legacyShim } from './stories/legacy';
export { default as withTimeShift } from './stories/timeShift';
export { default as query } from './stories/query';
129 changes: 63 additions & 66 deletions packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
// /* eslint-disable sort-keys */
// import { LINE_PLUGIN_TYPE, LINE_PLUGIN_LEGACY_TYPE } from '../constants';
// import createQueryStory from '../../../../../shared/components/createQueryStory';
import { LINE_PLUGIN_TYPE, LINE_PLUGIN_LEGACY_TYPE } from '../constants';
import createQueryStory from '../../../../../shared/components/createQueryStory';

// export default createQueryStory({
// choices: {
// 'Line Chart - Legacy API': {
// chartType: LINE_PLUGIN_LEGACY_TYPE,
// formData: {
// datasource: '3__table',
// viz_type: 'line',
// url_params: {},
// granularity_sqla: 'ds',
// time_grain_sqla: 'P1D',
// time_range: '100 years ago : now',
// metrics: ['sum__num'],
// adhoc_filters: [],
// groupby: [],
// limit: 25,
// row_limit: 50000,
// },
// },
// 'Line Chart - /api/v1/query': {
// chartType: LINE_PLUGIN_TYPE,
// formData: {
// viz_type: LINE_PLUGIN_TYPE,
// datasource: '3__table',
// granularity_sqla: 'ds',
// time_grain_sqla: 'P1D',
// time_range: '100 years ago : now',
// metrics: ['sum__num'],
// limit: 25,
// row_limit: 50000,
// encoding: {
// x: {
// field: '__timestamp',
// type: 'temporal',
// format: '%Y',
// scale: {
// type: 'time',
// },
// axis: {
// title: 'Time',
// },
// },
// y: {
// field: 'sum__num',
// type: 'quantitative',
// scale: {
// type: 'linear',
// },
// axis: {
// title: 'Number of Babies',
// },
// },
// stroke: {
// field: 'gender',
// type: 'nominal',
// legend: true,
// },
// },
// },
// },
// },
// storyName: 'Queries',
// storyPath: 'preset-chart-xy|LineChartPlugin',
// })
export default createQueryStory({
choices: {
'Line Chart - Legacy API': {
chartType: LINE_PLUGIN_LEGACY_TYPE,
formData: {
datasource: '3__table',
viz_type: 'line',
url_params: {},
granularity_sqla: 'ds',
time_grain_sqla: 'P1D',
time_range: '100 years ago : now',
metrics: ['sum__num'],
adhoc_filters: [],
groupby: [],
limit: 25,
row_limit: 50000,
},
},
'Line Chart - /api/v1/query': {
chartType: LINE_PLUGIN_TYPE,
formData: {
viz_type: LINE_PLUGIN_TYPE,
datasource: '3__table',
granularity_sqla: 'ds',
time_grain_sqla: 'P1D',
time_range: '100 years ago : now',
metrics: ['sum__num'],
limit: 25,
row_limit: 50000,
encoding: {
x: {
field: '__timestamp',
type: 'temporal',
format: '%Y',
scale: {
type: 'time',
},
axis: {
title: 'Time',
},
},
y: {
field: 'sum__num',
type: 'quantitative',
scale: {
type: 'linear',
},
axis: {
title: 'Number of Babies',
},
},
stroke: {
field: 'gender',
type: 'nominal',
legend: true,
},
},
},
},
},
});

0 comments on commit 967da8f

Please sign in to comment.