| import React from 'react'; |
| import { text, select } from '@storybook/addon-knobs'; |
| import { SuperChart, ChartDataProvider, SupersetClient } from '@superset-ui/core'; |
| import Expandable from './Expandable'; |
| import VerifyCORS, { renderError } from './VerifyCORS'; |
| |
| export default function createQueryStory({ |
| choices, |
| }: { |
| choices: { |
| [key: string]: { |
| chartType: string; |
| formData: { |
| [key: string]: any; |
| }; |
| }; |
| }; |
| }) { |
| const keys = Object.keys(choices); |
| const story = () => { |
| 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(/"/g, '"'))} |
| > |
| {({ loading, payload, error }) => { |
| if (loading) return <div>Loading!</div>; |
| |
| 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 |
| queriesData={payload.queriesData} |
| /> |
| <br /> |
| <Expandable expandableWhat="payload"> |
| <pre style={{ fontSize: 11 }}>{JSON.stringify(payload, null, 2)}</pre> |
| </Expandable> |
| </> |
| ); |
| |
| return null; |
| }} |
| </ChartDataProvider> |
| )} |
| </VerifyCORS> |
| </div> |
| ); |
| }; |
| story.parameters = { |
| chromatic: { disable: true }, |
| }; |
| return story; |
| } |