diff --git a/packages/superset-ui-plugin-echarts-scatter/README.md b/packages/superset-ui-plugin-echarts-scatter/README.md new file mode 100644 index 000000000..378dc8217 --- /dev/null +++ b/packages/superset-ui-plugin-echarts-scatter/README.md @@ -0,0 +1,32 @@ +## @superset-ui/legacy-plugin-chart-horizon + +[![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) +[![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) + +This plugin provides Horizon for Superset. + +### Usage + +Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app. + +```js +import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon'; + +new HorizonChartPlugin() + .configure({ key: 'horizon' }) + .register(); +``` + +Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-horizon) for more details. + +```js + +``` \ No newline at end of file diff --git a/packages/superset-ui-plugin-echarts-scatter/package.json b/packages/superset-ui-plugin-echarts-scatter/package.json new file mode 100644 index 000000000..bc5def639 --- /dev/null +++ b/packages/superset-ui-plugin-echarts-scatter/package.json @@ -0,0 +1,41 @@ +{ + "name": "@superset-ui/superset-ui-plugin-echarts-scatter", + "version": "0.11.0", + "description": "Superset Legacy Chart - Scatter", + "sideEffects": [ + "*.css" + ], + "main": "lib/index.js", + "module": "esm/index.js", + "files": [ + "esm", + "lib" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/apache-superset/superset-ui-plugins.git" + }, + "keywords": [ + "superset" + ], + "author": "Superset", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/apache-superset/superset-ui-plugins/issues" + }, + "homepage": "https://github.com/apache-superset/superset-ui-plugins#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "d3-array": "^2.0.3", + "d3-scale": "^3.0.1", + "echarts": "^4.2.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "@superset-ui/chart": "^0.12.0", + "@superset-ui/translation": "^0.12.0", + "react": "^15 || ^16" + } +} diff --git a/packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.css b/packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.css new file mode 100644 index 000000000..a45550b3e --- /dev/null +++ b/packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.css @@ -0,0 +1,38 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.superset-legacy-chart-horizon { + overflow: auto; + position: relative; +} + +.superset-legacy-chart-horizon .horizon-row { + border-bottom: solid 1px #ddd; + border-top: 0px; + padding: 0px; + margin: 0px; +} + +.superset-legacy-chart-horizon .horizon-row span.title { + position: absolute; + color: #333; + font-size: 0.8em; + margin: 0; + text-shadow: 1px 1px rgba(255, 255, 255, 0.75); +} diff --git a/packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.jsx b/packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.jsx new file mode 100644 index 000000000..e5b2bd613 --- /dev/null +++ b/packages/superset-ui-plugin-echarts-scatter/src/EchartsScatterChart.jsx @@ -0,0 +1,99 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +/* eslint-disable sort-keys */ +import React from 'react'; +import { reactify } from '@superset-ui/chart'; +import d3 from 'd3'; +import PropTypes from 'prop-types'; +import { extent as d3Extent } from 'd3-array'; +import echarts from 'echarts'; +import './EchartsScatterChart.css'; + +const propTypes = { + className: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + data: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.arrayOf(PropTypes.string), + values: PropTypes.arrayOf( + PropTypes.shape({ + y: PropTypes.number, + }), + ), + }), + ).isRequired, +}; +const defaultProps = { + className: '', + width: 800, + seriesHeight: 20, + colorScale: 'series', + mode: 'offset', + offsetX: 0, +}; + +function EchartsScatterChart(elem, props) { + const { width, height, data, xAxisLabel, yAxisLabel } = props; + elem.style.width = width; + elem.style.height = height; + const echart = echarts.init(elem); + echart.setOption({ + tooltip: {}, + xAxis: { + splitLine: { + lineStyle: { + type: 'dashed', + }, + }, + name: xAxisLabel, + nameLocation: 'middle', + nameGap: 20, + scale: true, + }, + legend: { + right: -10, + }, + yAxis: { + splitLine: { + lineStyle: { + type: 'dashed', + }, + }, + name: yAxisLabel, + nameLocation: 'middle', + nameGap: 20, + scale: true, + }, + series: data.map(series => ({ + name: series.key, + type: 'scatter', + data: series.values.map(d => ({ + label: d.country, + value: [d.sum__SP_DYN_LE00_IN, d.sum__SP_RUR_TOTL_ZS], + symbolSize: Math.sqrt(d.sum__SP_POP_TOTL) / 500, + })), + })), + }); +} + +EchartsScatterChart.propTypes = propTypes; +EchartsScatterChart.defaultProps = defaultProps; + +export default reactify(EchartsScatterChart); diff --git a/packages/superset-ui-plugin-echarts-scatter/src/images/thumbnail.png b/packages/superset-ui-plugin-echarts-scatter/src/images/thumbnail.png new file mode 100644 index 000000000..f927b7659 Binary files /dev/null and b/packages/superset-ui-plugin-echarts-scatter/src/images/thumbnail.png differ diff --git a/packages/superset-ui-plugin-echarts-scatter/src/images/thumbnailLarge.png b/packages/superset-ui-plugin-echarts-scatter/src/images/thumbnailLarge.png new file mode 100644 index 000000000..a5d4bf3ec Binary files /dev/null and b/packages/superset-ui-plugin-echarts-scatter/src/images/thumbnailLarge.png differ diff --git a/packages/superset-ui-plugin-echarts-scatter/src/index.js b/packages/superset-ui-plugin-echarts-scatter/src/index.js new file mode 100644 index 000000000..dc0e64e71 --- /dev/null +++ b/packages/superset-ui-plugin-echarts-scatter/src/index.js @@ -0,0 +1,40 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { t } from '@superset-ui/translation'; +import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; +import transformProps from './transformProps'; +import thumbnail from './images/thumbnail.png'; + +const metadata = new ChartMetadata({ + credits: ['https://echarts.apache.org'], + description: '', + name: t('EchartsScatter Chart'), + thumbnail, + useLegacyApi: true, +}); + +export default class EchartsScatterChartPlugin extends ChartPlugin { + constructor() { + super({ + loadChart: () => import('./EchartsScatterChart'), + metadata, + transformProps, + }); + } +} diff --git a/packages/superset-ui-plugin-echarts-scatter/src/transformProps.js b/packages/superset-ui-plugin-echarts-scatter/src/transformProps.js new file mode 100644 index 000000000..4d2d80d5c --- /dev/null +++ b/packages/superset-ui-plugin-echarts-scatter/src/transformProps.js @@ -0,0 +1,32 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +export default function transformProps(chartProps) { + const { height, width, formData, queryData } = chartProps; + const { horizonColorScale, seriesHeight, xAxisLabel, yAxisLabel } = formData; + + return { + colorScale: horizonColorScale, + data: queryData.data, + seriesHeight: parseInt(seriesHeight, 10), + width, + height, + xAxisLabel, + yAxisLabel, + }; +}