Skip to content

Commit f3ce6d7

Browse files
stephenLYZzhaoyongjie
stephenLYZ
authored and
zhaoyongjie
committed
feat(plugin-chart-echarts): Echarts Treemap (apache#1094)
* feat(plugin-chart-echarts): add echarts treemap plugin * fix(plugin-chart-echarts): add sort descending * fix(plugin-chart-echarts): add label position and set clear before setOption * fix(plugin-chart-echarts): metric -> metrics * fix(plugin-chart-echarts): change thumbnail. * fix(plugin-chart-echarts): fix treemap transformProps test * fix(plugin-chart-echarts): clear nouse types * fix(plugin-chart-echarts): storybook data * fix(plugin-chart-echarts): remove features * fix(plugin-chart-echarts): add forceClear * fix(plugin-chart-echarts): change storybook data * fix(plugin-chart-echarts): enhancements * fix(plugin-chart-echarts): enhancements for color and fix ci
1 parent 59d6505 commit f3ce6d7

File tree

16 files changed

+771
-1
lines changed

16 files changed

+771
-1
lines changed

‎superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/preview.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { addParameters, addDecorator } from '@storybook/react';
22
import { jsxDecorator } from 'storybook-addon-jsx';
33
import categoricalD3 from '@superset-ui/core/lib/color/colorSchemes/categorical/d3';
4+
import categoricalSuperset from '@superset-ui/core/lib/color/colorSchemes/categorical/superset';
45
import sequentialCommon from '@superset-ui/core/lib/color/colorSchemes/sequential/common';
56
import sequentialD3 from '@superset-ui/core/lib/color/colorSchemes/sequential/d3';
67
import {
@@ -55,7 +56,7 @@ configure();
5556

5657
// Register color schemes
5758
const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
58-
[categoricalD3].forEach(group => {
59+
[categoricalD3, categoricalSuperset].forEach(group => {
5960
group.forEach(scheme => {
6061
categoricalSchemeRegistry.registerValue(scheme.id, scheme);
6162
});

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
3+
import { boolean, withKnobs, select } from '@storybook/addon-knobs';
4+
import { EchartsTreemapChartPlugin } from '@superset-ui/plugin-chart-echarts';
5+
import transformProps from '@superset-ui/plugin-chart-echarts/lib/Treemap/transformProps';
6+
import data from './data';
7+
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
8+
9+
new EchartsTreemapChartPlugin().configure({ key: 'echarts-treemap' }).register();
10+
11+
getChartTransformPropsRegistry().registerValue('echarts-treemap', transformProps);
12+
13+
export default {
14+
title: 'Chart Plugins|plugin-chart-echarts/Treemap',
15+
decorators: [withKnobs, withResizableChartDemo],
16+
};
17+
18+
export const Treemap = ({ width, height }) => {
19+
return (
20+
<SuperChart
21+
chartType="echarts-treemap"
22+
width={width}
23+
height={height}
24+
queriesData={[{ data }]}
25+
formData={{
26+
colorScheme: 'supersetColors',
27+
groupby: ['gender', 'name'],
28+
metrics: ['count', 'MIN(num_boys)'],
29+
showLabels: boolean('Show labels', true),
30+
showUpperLabels: boolean('Show upperLabels', true),
31+
labelType: select('Treemap label type', ['key', 'value', 'key_value'], 'key_value'),
32+
}}
33+
/>
34+
);
35+
};

‎superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/data.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
export default [
2+
{
3+
genre: 'Action',
4+
count: 3315,
5+
},
6+
{
7+
genre: 'Adventure',
8+
count: 1286,
9+
},
10+
{
11+
genre: 'Fighting',
12+
count: 848,
13+
},
14+
{
15+
genre: 'Misc',
16+
count: 1739,
17+
},
18+
{
19+
genre: 'Platform',
20+
count: 886,
21+
},
22+
{
23+
genre: 'Puzzle',
24+
count: 582,
25+
},
26+
{
27+
genre: 'Racing',
28+
count: 1249,
29+
},
30+
{
31+
genre: 'Role-Playing',
32+
count: 1487,
33+
},
34+
{
35+
genre: 'Shooter',
36+
count: 1310,
37+
},
38+
{
39+
genre: 'Simulation',
40+
count: 866,
41+
},
42+
{
43+
genre: 'Sports',
44+
count: 2346,
45+
},
46+
{
47+
genre: 'Strategy',
48+
count: 681,
49+
},
50+
];

‎superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import React from 'react';
20+
import { EchartsProps } from '../types';
21+
import Echart from '../components/Echart';
22+
23+
export default function EchartsTreemap({ height, width, echartOptions }: EchartsProps) {
24+
return <Echart height={height} width={width} echartOptions={echartOptions} forceClear />;
25+
}

‎superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/buildQuery.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import { buildQueryContext, QueryFormData } from '@superset-ui/core';
20+
21+
export default function buildQuery(formData: QueryFormData) {
22+
return buildQueryContext(formData, baseQueryObject => [
23+
{
24+
...baseQueryObject,
25+
},
26+
]);
27+
}

‎superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/**
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import React from 'react';
20+
import { t } from '@superset-ui/core';
21+
import {
22+
ControlPanelConfig,
23+
D3_FORMAT_DOCS,
24+
D3_FORMAT_OPTIONS,
25+
D3_TIME_FORMAT_OPTIONS,
26+
sections,
27+
} from '@superset-ui/chart-controls';
28+
import { DEFAULT_FORM_DATA } from './types';
29+
import { LABEL_POSITION } from '../constants';
30+
31+
const {
32+
labelType,
33+
labelPosition,
34+
numberFormat,
35+
showLabels,
36+
showUpperLabels,
37+
dateFormat,
38+
} = DEFAULT_FORM_DATA;
39+
40+
const config: ControlPanelConfig = {
41+
controlPanelSections: [
42+
sections.legacyRegularTime,
43+
{
44+
label: t('Query'),
45+
expanded: true,
46+
controlSetRows: [
47+
['groupby'],
48+
['metrics'],
49+
['row_limit'],
50+
['timeseries_limit_metric'],
51+
[
52+
{
53+
name: 'order_desc',
54+
config: {
55+
type: 'CheckboxControl',
56+
label: t('Sort Descending'),
57+
default: true,
58+
description: t('Whether to sort descending or ascending'),
59+
},
60+
},
61+
],
62+
['adhoc_filters'],
63+
],
64+
},
65+
{
66+
label: t('Chart Options'),
67+
expanded: true,
68+
controlSetRows: [
69+
['color_scheme'],
70+
[<h1 className="section-header">{t('Labels')}</h1>],
71+
[
72+
{
73+
name: 'show_labels',
74+
config: {
75+
type: 'CheckboxControl',
76+
label: t('Show Labels'),
77+
renderTrigger: true,
78+
default: showLabels,
79+
description: t('Whether to display the labels.'),
80+
},
81+
},
82+
],
83+
[
84+
{
85+
name: 'show_upper_labels',
86+
config: {
87+
type: 'CheckboxControl',
88+
label: t('Show Upper Labels'),
89+
renderTrigger: true,
90+
default: showUpperLabels,
91+
description: t('Show labels when the node has children.'),
92+
},
93+
},
94+
],
95+
[
96+
{
97+
name: 'label_type',
98+
config: {
99+
type: 'SelectControl',
100+
label: t('Label Type'),
101+
default: labelType,
102+
renderTrigger: true,
103+
choices: [
104+
['Key', 'Key'],
105+
['value', 'Value'],
106+
['key_value', 'Category and Value'],
107+
],
108+
description: t('What should be shown on the label?'),
109+
},
110+
},
111+
],
112+
[
113+
{
114+
name: 'label_position',
115+
config: {
116+
type: 'SelectControl',
117+
freeForm: false,
118+
label: t('Label position'),
119+
renderTrigger: true,
120+
choices: LABEL_POSITION,
121+
default: labelPosition,
122+
description: D3_FORMAT_DOCS,
123+
},
124+
},
125+
],
126+
[
127+
{
128+
name: 'number_format',
129+
config: {
130+
type: 'SelectControl',
131+
freeForm: true,
132+
label: t('Number format'),
133+
renderTrigger: true,
134+
default: numberFormat,
135+
choices: D3_FORMAT_OPTIONS,
136+
description: `${t('D3 format syntax: https://github.com/d3/d3-format. ')} ${t(
137+
'Only applies when "Label Type" is set to show values.',
138+
)}`,
139+
},
140+
},
141+
],
142+
[
143+
{
144+
name: 'date_format',
145+
config: {
146+
type: 'SelectControl',
147+
freeForm: true,
148+
label: t('Date format'),
149+
renderTrigger: true,
150+
choices: D3_TIME_FORMAT_OPTIONS,
151+
default: dateFormat,
152+
description: D3_FORMAT_DOCS,
153+
},
154+
},
155+
],
156+
],
157+
},
158+
],
159+
};
160+
161+
export default config;

‎superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/images/thumbnail.png

163 KB
Loading

‎superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/index.ts

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regardin
6+
* g copyright ownership. The ASF licenses this file
7+
* to you under the Apache License, Version 2.0 (the
8+
* "License"); you may not use this file except in compliance
9+
* with the License. You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing,
14+
* software distributed under the License is distributed on an
15+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
* KIND, either express or implied. See the License for the
17+
* specific language governing permissions and limitations
18+
* under the License.
19+
*/
20+
import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
21+
import buildQuery from './buildQuery';
22+
import controlPanel from './controlPanel';
23+
import transformProps from './transformProps';
24+
import thumbnail from './images/thumbnail.png';
25+
import { EchartsTreemapChartProps, EchartsTreemapFormData } from './types';
26+
27+
export default class EchartsTreemapChartPlugin extends ChartPlugin<
28+
EchartsTreemapFormData,
29+
EchartsTreemapChartProps
30+
> {
31+
/**
32+
* The constructor is used to pass relevant metadata and callbacks that get
33+
* registered in respective registries that are used throughout the library
34+
* and application. A more thorough description of each property is given in
35+
* the respective imported file.
36+
*
37+
* It is worth noting that `buildQuery` and is optional, and only needed for
38+
* advanced visualizations that require either post processing operations
39+
* (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
40+
*/
41+
constructor() {
42+
super({
43+
buildQuery,
44+
controlPanel,
45+
loadChart: () => import('./EchartsTreemap'),
46+
metadata: new ChartMetadata({
47+
credits: ['https://echarts.apache.org'],
48+
description: 'Treemap (Apache ECharts)',
49+
name: t('Treemap'),
50+
thumbnail,
51+
}),
52+
transformProps,
53+
});
54+
}
55+
}

0 commit comments

Comments
 (0)