feat: add new vis plugin Echarts scatter

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
+<SuperChart
+  chartType="horizon"
+  width={600}
+  height={600}
+  formData={...}
+  queryData={{
+    data: {...},
+  }}
+/>
+```

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"
+  }
+}

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);
+}

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);

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,
+    });
+  }
+}

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,
+  };
+}