feat: migrate legacy-plugin-chart-chord (#365)

* docs: update storybook

* fix: import

* fix: import

* fix: import

packages/superset-ui-demo/package.json

@@ -39,6 +39,8 @@
     "@superset-ui/chart": "0.12.14",
     "@superset-ui/color": "0.12.15",
     "@superset-ui/connection": "0.12.14",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.12.14",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-sankey": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-sunburst": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-table": "0.12.14",

packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumber/BigNumberStories.tsx

@@ -55,7 +55,7 @@ function withNulls(origData: object[], nullPosition: number = 3) {
 }
 
 export default {
-  title: 'Legacy Chart Presets|big-number',
+  title: 'Legacy Chart Plugins|legacy-preset-big-number/BigNumber',
 };
 
 export const basicWithTrendline = () => (

packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumberTotal/BigNumberTotalStories.tsx

@@ -24,7 +24,7 @@ import data from './data';
 new BigNumberTotalChartPlugin().configure({ key: 'big-number-total' }).register();
 
 export default {
-  title: 'Legacy Preset|big-number',
+  title: 'Legacy Chart Plugins|legacy-preset-big-number/BigNumberTotal',
 };
 
 export const totalBasic = () => (

packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.jsx → packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx

@@ -1,15 +1,14 @@
-/* eslint-disable sort-keys, no-magic-numbers */
 import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
-import CalendarChartPlugin from '../../../../../../plugins/legacy-plugin-chart-calendar';
+import CalendarChartPlugin from '@superset-ui/legacy-plugin-chart-calendar';
 import data from './data';
 // eslint-disable-next-line import/extensions
 import dummyDatasource from '../../../shared/dummyDatasource';
 
 new CalendarChartPlugin().configure({ key: 'calendar' }).register();
 
 export default {
-  title: 'Legacy Chart Plugins|CalendarChartPlugin',
+  title: 'Legacy Chart Plugins|legacy-plugin-chart-calendar',
 };
 
 export const basic = () => (

packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/Stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord';
+import data from './data';
+
+new ChordChartPlugin().configure({ key: 'chord' }).register();
+
+export default {
+  title: 'Legacy Chart Plugins|legacy-plugin-chart-chord',
+};
+
+export const basic = () => (
+  <SuperChart
+    chartType="chord"
+    width={400}
+    height={400}
+    queryData={{ data }}
+    formData={{
+      colorScheme: 'd3Category10',
+      yAxisFormat: '.2f',
+    }}
+  />
+);

packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/data.ts

@@ -0,0 +1,12 @@
+/* eslint-disable sort-keys, no-magic-numbers */
+export default {
+  matrix: [
+    [381, 16, 14, 5, 4, 6],
+    [29, 535, 132, 20, 21, 16],
+    [22, 18, 1, 3, 0, 214],
+    [3, 4, 462, 152, 132, 0],
+    [16, 32, 299, 123, 146, 1],
+    [22, 83, 53, 21, 22, 6],
+  ],
+  nodes: ['Hong Kong', 'Tokyo', 'Taipei', 'Beijing', 'Bangkok', 'Jakarta', 'Singapore'],
+};

packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx

@@ -65,7 +65,7 @@ function loadData(props: SuperChartProps, pageSize = 50, targetSize = 2042) {
 }
 
 export default {
-  title: 'Legacy Chart Plugins|table',
+  title: 'Legacy Chart Plugins|legacy-plugin-chart-table',
 };
 
 export const basic = () => (

plugins/legacy-plugin-chart-chord/README.md

@@ -0,0 +1,32 @@
+## @superset-ui/legacy-plugin-chart-chord
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-chord.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-chord.svg?style=flat-square)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-chord&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-chord)
+
+This plugin provides Chord Diagram 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 ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord';
+
+new ChordChartPlugin()
+  .configure({ key: 'chord' })
+  .register();
+```
+
+Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-chord) for more details.
+
+```js
+<SuperChart
+  chartType="chord"
+  width={600}
+  height={600}
+  formData={...}
+  queryData={{
+    data: {...},
+  }}
+/>
+```

plugins/legacy-plugin-chart-chord/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@superset-ui/legacy-plugin-chart-chord",
+  "version": "0.11.15",
+  "description": "Superset Legacy Chart - Chord Diagram",
+  "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": "^3.5.17",
+    "prop-types": "^15.6.2"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.12.0",
+    "@superset-ui/color": "^0.12.0",
+    "@superset-ui/number-format": "^0.12.0",
+    "@superset-ui/translation": "^0.12.0"
+  }
+}

plugins/legacy-plugin-chart-chord/src/Chord.css

@@ -0,0 +1,36 @@
+/**
+ * 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-chord svg #circle circle {
+  fill: none;
+  pointer-events: all;
+}
+
+.superset-legacy-chart-chord svg .group path {
+  fill-opacity: 0.6;
+}
+
+.superset-legacy-chart-chord svg path.chord {
+  stroke: #000;
+  stroke-width: 0.25px;
+}
+
+.superset-legacy-chart-chord svg #circle:hover path.fade {
+  opacity: 0.2;
+}

plugins/legacy-plugin-chart-chord/src/Chord.js

@@ -0,0 +1,138 @@
+/**
+ * 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 no-param-reassign, react/sort-prop-types */
+import d3 from 'd3';
+import PropTypes from 'prop-types';
+import { CategoricalColorNamespace } from '@superset-ui/color';
+import { getNumberFormatter } from '@superset-ui/number-format';
+import './Chord.css';
+
+const propTypes = {
+  data: PropTypes.shape({
+    matrix: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+    nodes: PropTypes.arrayOf(PropTypes.string),
+  }),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  colorScheme: PropTypes.string,
+  numberFormat: PropTypes.string,
+};
+
+function Chord(element, props) {
+  const { data, width, height, numberFormat, colorScheme } = props;
+
+  element.innerHTML = '';
+
+  const div = d3.select(element);
+  div.classed('superset-legacy-chart-chord', true);
+  const { nodes, matrix } = data;
+  const f = getNumberFormatter(numberFormat);
+  const colorFn = CategoricalColorNamespace.getScale(colorScheme);
+
+  const outerRadius = Math.min(width, height) / 2 - 10;
+  const innerRadius = outerRadius - 24;
+
+  let chord;
+
+  const arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);
+
+  const layout = d3.layout
+    .chord()
+    .padding(0.04)
+    .sortSubgroups(d3.descending)
+    .sortChords(d3.descending);
+
+  const path = d3.svg.chord().radius(innerRadius);
+
+  const svg = div
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .on('mouseout', () => chord.classed('fade', false))
+    .append('g')
+    .attr('id', 'circle')
+    .attr('transform', `translate(${width / 2}, ${height / 2})`);
+
+  svg.append('circle').attr('r', outerRadius);
+
+  // Compute the chord layout.
+  layout.matrix(matrix);
+
+  const group = svg
+    .selectAll('.group')
+    .data(layout.groups)
+    .enter()
+    .append('g')
+    .attr('class', 'group')
+    .on('mouseover', (d, i) => {
+      chord.classed('fade', p => p.source.index !== i && p.target.index !== i);
+    });
+
+  // Add a mouseover title.
+  group.append('title').text((d, i) => `${nodes[i]}: ${f(d.value)}`);
+
+  // Add the group arc.
+  const groupPath = group
+    .append('path')
+    .attr('id', (d, i) => `group${i}`)
+    .attr('d', arc)
+    .style('fill', (d, i) => colorFn(nodes[i]));
+
+  // Add a text label.
+  const groupText = group.append('text').attr('x', 6).attr('dy', 15);
+
+  groupText
+    .append('textPath')
+    .attr('xlink:href', (d, i) => `#group${i}`)
+    .text((d, i) => nodes[i]);
+  // Remove the labels that don't fit. :(
+  groupText
+    .filter(function filter(d, i) {
+      return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength();
+    })
+    .remove();
+
+  // Add the chords.
+  chord = svg
+    .selectAll('.chord')
+    .data(layout.chords)
+    .enter()
+    .append('path')
+    .attr('class', 'chord')
+    .on('mouseover', d => {
+      chord.classed('fade', p => p !== d);
+    })
+    .style('fill', d => colorFn(nodes[d.source.index]))
+    .attr('d', path);
+
+  // Add an elaborate mouseover title for each chord.
+  chord
+    .append('title')
+    .text(
+      d =>
+        `${nodes[d.source.index]} → ${nodes[d.target.index]}: ${f(d.source.value)}\n${
+          nodes[d.target.index]
+        } → ${nodes[d.source.index]}: ${f(d.target.value)}`,
+    );
+}
+
+Chord.displayName = 'Chord';
+Chord.propTypes = propTypes;
+
+export default Chord;

plugins/legacy-plugin-chart-chord/src/ReactChord.js

@@ -0,0 +1,22 @@
+/**
+ * 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 { reactify } from '@superset-ui/chart';
+import Component from './Chord';
+
+export default reactify(Component);