Skip to content
This repository was archived by the owner on Jun 25, 2020. It is now read-only.

Commit 3370883

Browse files
mistercrunchmistercrunch
committed
feat: add new vis plugin Echarts scatter
1 parent 675d502 commit 3370883

File tree

8 files changed

+282
-0
lines changed

8 files changed

+282
-0
lines changed

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
## @superset-ui/legacy-plugin-chart-horizon
2+
3+
[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-horizon.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-horizon.svg?style=flat-square)
4+
[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-horizon&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-horizon)
5+
6+
This plugin provides Horizon for Superset.
7+
8+
### Usage
9+
10+
Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.
11+
12+
```js
13+
import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon';
14+
15+
new HorizonChartPlugin()
16+
.configure({ key: 'horizon' })
17+
.register();
18+
```
19+
20+
Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-horizon) for more details.
21+
22+
```js
23+
<SuperChart
24+
chartType="horizon"
25+
width={600}
26+
height={600}
27+
formData={...}
28+
queryData={{
29+
data: {...},
30+
}}
31+
/>
32+
```

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "@superset-ui/superset-ui-plugin-echarts-scatter",
3+
"version": "0.11.0",
4+
"description": "Superset Legacy Chart - Scatter",
5+
"sideEffects": [
6+
"*.css"
7+
],
8+
"main": "lib/index.js",
9+
"module": "esm/index.js",
10+
"files": [
11+
"esm",
12+
"lib"
13+
],
14+
"repository": {
15+
"type": "git",
16+
"url": "git+https://github.com/apache-superset/superset-ui-plugins.git"
17+
},
18+
"keywords": [
19+
"superset"
20+
],
21+
"author": "Superset",
22+
"license": "Apache-2.0",
23+
"bugs": {
24+
"url": "https://github.com/apache-superset/superset-ui-plugins/issues"
25+
},
26+
"homepage": "https://github.com/apache-superset/superset-ui-plugins#readme",
27+
"publishConfig": {
28+
"access": "public"
29+
},
30+
"dependencies": {
31+
"d3-array": "^2.0.3",
32+
"d3-scale": "^3.0.1",
33+
"echarts": "^4.2.1",
34+
"prop-types": "^15.6.2"
35+
},
36+
"peerDependencies": {
37+
"@superset-ui/chart": "^0.12.0",
38+
"@superset-ui/translation": "^0.12.0",
39+
"react": "^15 || ^16"
40+
}
41+
}

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
20+
.superset-legacy-chart-horizon {
21+
overflow: auto;
22+
position: relative;
23+
}
24+
25+
.superset-legacy-chart-horizon .horizon-row {
26+
border-bottom: solid 1px #ddd;
27+
border-top: 0px;
28+
padding: 0px;
29+
margin: 0px;
30+
}
31+
32+
.superset-legacy-chart-horizon .horizon-row span.title {
33+
position: absolute;
34+
color: #333;
35+
font-size: 0.8em;
36+
margin: 0;
37+
text-shadow: 1px 1px rgba(255, 255, 255, 0.75);
38+
}

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.jsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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+
/* eslint-disable sort-keys */
20+
import React from 'react';
21+
import { reactify } from '@superset-ui/chart';
22+
import d3 from 'd3';
23+
import PropTypes from 'prop-types';
24+
import { extent as d3Extent } from 'd3-array';
25+
import echarts from 'echarts';
26+
import './EchartsScatterChart.css';
27+
28+
const propTypes = {
29+
className: PropTypes.string,
30+
width: PropTypes.number,
31+
height: PropTypes.number,
32+
data: PropTypes.arrayOf(
33+
PropTypes.shape({
34+
key: PropTypes.arrayOf(PropTypes.string),
35+
values: PropTypes.arrayOf(
36+
PropTypes.shape({
37+
y: PropTypes.number,
38+
}),
39+
),
40+
}),
41+
).isRequired,
42+
};
43+
const defaultProps = {
44+
className: '',
45+
width: 800,
46+
seriesHeight: 20,
47+
colorScale: 'series',
48+
mode: 'offset',
49+
offsetX: 0,
50+
};
51+
52+
function EchartsScatterChart(elem, props) {
53+
const { width, height, data, xAxisLabel, yAxisLabel } = props;
54+
elem.style.width = width;
55+
elem.style.height = height;
56+
const echart = echarts.init(elem);
57+
echart.setOption({
58+
tooltip: {},
59+
xAxis: {
60+
splitLine: {
61+
lineStyle: {
62+
type: 'dashed',
63+
},
64+
},
65+
name: xAxisLabel,
66+
nameLocation: 'middle',
67+
nameGap: 20,
68+
scale: true,
69+
},
70+
legend: {
71+
right: -10,
72+
},
73+
yAxis: {
74+
splitLine: {
75+
lineStyle: {
76+
type: 'dashed',
77+
},
78+
},
79+
name: yAxisLabel,
80+
nameLocation: 'middle',
81+
nameGap: 20,
82+
scale: true,
83+
},
84+
series: data.map(series => ({
85+
name: series.key,
86+
type: 'scatter',
87+
data: series.values.map(d => ({
88+
value: [d.sum__SP_DYN_LE00_IN, d.sum__SP_RUR_TOTL_ZS],
89+
symbolSize: Math.sqrt(d.sum__SP_POP_TOTL) / 500,
90+
label: d.country,
91+
})),
92+
})),
93+
});
94+
}
95+
96+
EchartsScatterChart.propTypes = propTypes;
97+
EchartsScatterChart.defaultProps = defaultProps;
98+
99+
export default reactify(EchartsScatterChart);

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/src/images/thumbnail.png

24.3 KB
Loading

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/src/images/thumbnailLarge.png

161 KB
Loading

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/src/index.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 { t } from '@superset-ui/translation';
20+
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
21+
import transformProps from './transformProps';
22+
import thumbnail from './images/thumbnail.png';
23+
24+
const metadata = new ChartMetadata({
25+
credits: ['https://echarts.apache.org'],
26+
description: '',
27+
name: t('EchartsScatter Chart'),
28+
thumbnail,
29+
useLegacyApi: true,
30+
});
31+
32+
export default class EchartsScatterChartPlugin extends ChartPlugin {
33+
constructor() {
34+
super({
35+
loadChart: () => import('./EchartsScatterChart'),
36+
metadata,
37+
transformProps,
38+
});
39+
}
40+
}

Diff for: ‎packages/superset-ui-plugin-echarts-scatter/src/transformProps.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
export default function transformProps(chartProps) {
20+
const { height, width, formData, queryData } = chartProps;
21+
const { horizonColorScale, seriesHeight, xAxisLabel, yAxisLabel } = formData;
22+
23+
return {
24+
colorScale: horizonColorScale,
25+
data: queryData.data,
26+
seriesHeight: parseInt(seriesHeight, 10),
27+
width,
28+
height,
29+
xAxisLabel,
30+
yAxisLabel,
31+
};
32+
}

0 commit comments

Comments
 (0)