iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add storybook for missing chart and fix broken treemap (#1427)

This commit is contained in:
Stephen Liu 2021-10-26 18:51:54 +08:00 committed by Yongjie Zhao
parent 9b059b8127
commit 46b4eca280
7 changed files with 448 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/Stories.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
import { withKnobs } from '@storybook/addon-knobs';
import { EchartsGaugeChartPlugin } from '@superset-ui/plugin-chart-echarts';
import transformProps from '@superset-ui/plugin-chart-echarts/lib/Gauge/transformProps';
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
import { speed } from './data';
new EchartsGaugeChartPlugin().configure({ key: 'echarts-gauge' }).register();
getChartTransformPropsRegistry().registerValue('echarts-gauge', transformProps);
export default {
title: 'Chart Plugins/plugin-chart-echarts/Gauge',
decorators: [withKnobs, withResizableChartDemo],
};
export const Gauge = ({ width, height }) => {
return (
<SuperChart
chartType="echarts-gauge"
width={width}
height={height}
queriesData={[{ data: speed }]}
formData={{
columns: [],
groupby: ['name'],
metric: 'value',
}}
/>
);
};

6
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge/data.ts Normal file
View File

@ -0,0 +1,6 @@
export const speed = [
{
name: 'km/h',
value: 70,
},
];

34
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/Stories.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
import { withKnobs } from '@storybook/addon-knobs';
import { EchartsGraphChartPlugin } from '@superset-ui/plugin-chart-echarts';
import transformProps from '@superset-ui/plugin-chart-echarts/lib/Graph/transformProps';
import { basic } from './data';
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
new EchartsGraphChartPlugin().configure({ key: 'echarts-graph' }).register();
getChartTransformPropsRegistry().registerValue('echarts-graph', transformProps);
export default {
title: 'Chart Plugins/plugin-chart-echarts/Graph',
decorators: [withKnobs, withResizableChartDemo],
};
export const Graph = ({ width, height }) => {
return (
<SuperChart
chartType="echarts-graph"
width={width}
height={height}
queriesData={[{ data: basic }]}
formData={{
source: 'source',
target: 'target',
sourceCategory: 'sourceCategory',
targetCategory: 'targetCategory',
metric: 'value',
}}
/>
);
};

310
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph/data.ts Normal file
View File

@ -0,0 +1,310 @@
export const basic = [
{
source: '05/18/21 Live Demo',
target: '05/04/21 Live Demo',
value: 100,
sourceCategory: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '05/04/21 Live Demo',
target: '04/20/21 Live Demo',
value: 110,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '05/04/21 Live Demo',
target: '04/13/21 Live Demo',
value: 40,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '05/04/21 Live Demo',
target: '04/06/21 Live Demo',
value: 30,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '05/04/21 Live Demo',
target: '09/29/21 Live Demo',
value: 25,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '05/04/21 Live Demo',
target: '06/01/21 Live Demo',
value: 43,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '04/20/21 Live Demo',
target: '04/13/21 Live Demo',
value: 50,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '04/20/21 Live Demo',
target: '03/02/21 Meetup',
value: 40,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '04/20/21 Live Demo',
target: '06/01/21 Live Demo',
value: 58,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '04/20/21 Live Demo',
target: '03/25/21 Meetup',
value: 38,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '04/20/21 Live Demo',
target: '01/28/21 Meetup',
value: 34,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '04/13/21 Live Demo',
target: '04/06/21 Live Demo',
value: 34,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '04/13/21 Live Demo',
target: '09/29/21 Live Demo',
value: 56,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '04/06/21 Live Demo',
target: '09/29/21 Live Demo',
value: 77,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '04/13/21 Live Demo',
target: '03/02/21 Meetup',
value: 36,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '04/13/21 Live Demo',
target: '06/08/21 Live Demo',
value: 77,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '09/29/21 Live Demo',
target: '06/01/21 Live Demo',
value: 44,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '09/29/21 Live Demo',
target: '06/08/21 Live Demo',
value: 30,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '06/01/21 Live Demo',
target: '03/02/21 Meetup',
value: 67,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '06/01/21 Live Demo',
target: '03/25/21 Meetup',
value: 30,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '06/01/21 Live Demo',
target: '05/11/21 Meetup',
value: 52,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '06/01/21 Live Demo',
target: '06/08/21 Live Demo',
value: 43,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '06/01/21 Live Demo',
target: '01/28/21 Meetup',
value: 45,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '06/01/21 Live Demo',
target: '05/04/21 Live Demo',
value: 42,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '06/01/21 Live Demo',
target: '03/25/21 Meetup',
value: 32,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '03/02/21 Meetup',
target: '03/25/21 Meetup',
value: 23,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '03/02/21 Meetup',
target: '05/11/21 Meetup',
value: 43,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '03/02/21 Meetup',
target: '01/28/21 Meetup',
value: 33,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '03/02/21 Meetup',
target: '05/04/21 Live Demo',
value: 53,
category: 'Meetup',
targetCategory: 'Live Demo',
},
{
source: '03/02/21 Meetup',
target: '03/25/21 Meetup',
value: 55,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '03/25/21 Meetup',
target: '05/11/21 Meetup',
value: 33,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '03/25/21 Meetup',
target: '06/08/21 Live Demo',
value: 73,
category: 'Meetup',
targetCategory: 'Live Demo',
},
{
source: '03/25/21 Meetup',
target: '01/28/21 Meetup',
value: 63,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '03/25/21 Meetup',
target: '05/04/21 Live Demo',
value: 52,
category: 'Meetup',
targetCategory: 'Live Demo',
},
{
source: '03/25/21 Meetup',
target: '03/25/21 Meetup',
value: 51,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '05/11/21 Meetup',
target: '06/08/21 Live Demo',
value: 35,
category: 'Meetup',
targetCategory: 'Live Demo',
},
{
source: '05/11/21 Meetup',
target: '05/04/21 Live Demo',
value: 75,
category: 'Meetup',
targetCategory: 'Live Demo',
},
{
source: '05/11/21 Meetup',
target: '01/28/21 Meetup',
value: 65,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '06/08/21 Live Demo',
target: '01/28/21 Meetup',
value: 36,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '06/08/21 Live Demo',
target: '05/04/21 Live Demo',
value: 46,
category: 'Live Demo',
targetCategory: 'Live Demo',
},
{
source: '06/08/21 Live Demo',
target: '03/25/21 Meetup',
value: 26,
category: 'Live Demo',
targetCategory: 'Meetup',
},
{
source: '03/25/21 Meetup',
target: '05/04/21 Live Demo',
value: 78,
category: 'Meetup',
targetCategory: 'Live Demo',
},
{
source: '03/25/21 Meetup',
target: '03/25/21 Meetup',
value: 45,
category: 'Meetup',
targetCategory: 'Meetup',
},
{
source: '05/18/21 Live Demo',
target: '03/25/21 Meetup',
value: 65,
category: 'Live Demo',
targetCategory: 'Meetup',
},
];

47
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Stories.tsx Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
import { withKnobs } from '@storybook/addon-knobs';
import { EchartsRadarChartPlugin } from '@superset-ui/plugin-chart-echarts';
import transformProps from '@superset-ui/plugin-chart-echarts/lib/Radar/transformProps';
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
import { basic } from './data';
new EchartsRadarChartPlugin().configure({ key: 'echarts-radar' }).register();
getChartTransformPropsRegistry().registerValue('echarts-radar', transformProps);
export default {
title: 'Chart Plugins/plugin-chart-echarts/Radar',
decorators: [withKnobs, withResizableChartDemo],
};
export const Radar = ({ width, height }) => {
return (
<SuperChart
chartType="echarts-radar"
width={width}
height={height}
queriesData={[{ data: basic }]}
formData={{
columns: [],
groupby: ['Sales'],
metrics: [
'Sales',
'Administration',
'Information Technology',
'Customer Support',
'Development',
'Marketing',
],
columnConfig: {
Sales: { radarMetricMaxValue: 6500 },
Administration: { radarMetricMaxValue: 16000 },
'Information Technology': { radarMetricMaxValue: 30000 },
'Customer Support': { radarMetricMaxValue: 38000 },
Development: { radarMetricMaxValue: 52000 },
Marketing: { radarMetricMaxValue: 25000 },
},
}}
/>
);
};

18
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/data.ts Normal file
View File

@ -0,0 +1,18 @@
export const basic = [
{
Sales: 4200,
Administration: 3000,
'Information Technology': 20000,
'Customer Support': 35000,
Development: 50000,
Marketing: 18000,
},
{
Sales: 5000,
Administration: 14000,
'Information Technology': 28000,
'Customer Support': 26000,
Development: 42000,
Marketing: 21000,
},
];

2
superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/Stories.tsx
View File

@ -25,7 +25,7 @@ export const Treemap = ({ width, height }) => {
formData={{
colorScheme: 'supersetColors',
groupby: ['genre'],
metrics: ['count'],
metric: 'count',
showLabels: boolean('Show labels', true),
showUpperLabels: boolean('Show upperLabels', true),
labelType: select('Treemap label type', ['key', 'value', 'key_value'], 'key_value'),