diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json index 63ad11e48c6f..cfe0eeec2f5f 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/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", diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumber/BigNumberStories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumber/BigNumberStories.tsx index d0efddf0a0eb..d21e0dfb3831 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumber/BigNumberStories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/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 = () => ( diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumberTotal/BigNumberTotalStories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumberTotal/BigNumberTotalStories.tsx index 9707b9b83fdf..c13811332b86 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/big-number/BigNumberTotal/BigNumberTotalStories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/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 = () => ( diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx similarity index 79% rename from superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.jsx rename to superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx index 196598c4e715..7264ad402128 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/Stories.tsx @@ -1,7 +1,6 @@ -/* 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'; @@ -9,7 +8,7 @@ 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 = () => ( diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/data.js b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/data.ts similarity index 100% rename from superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/data.js rename to superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar/data.ts diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/Stories.tsx new file mode 100644 index 000000000000..beddc3d7cab6 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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 = () => ( + +); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/data.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/data.ts new file mode 100644 index 000000000000..d30e55873102 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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'], +}; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx index 4554338edbb0..00c3cef8ba00 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/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 = () => ( diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/README.md b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/README.md new file mode 100644 index 000000000000..eb257a39669b --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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 + +``` \ No newline at end of file diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/package.json new file mode 100644 index 000000000000..05f9809d6cc7 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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" + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.css new file mode 100644 index 000000000000..581518f8c180 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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; +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/Chord.js new file mode 100644 index 000000000000..e1d1e49ad572 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/ReactChord.js new file mode 100644 index 000000000000..df070e7cc50b --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/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); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/images/thumbnail.png new file mode 100644 index 000000000000..18df6a72a71c Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/images/thumbnail.png differ diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/images/thumbnailLarge.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/images/thumbnailLarge.png new file mode 100644 index 000000000000..a4a30b6aebc6 Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/images/thumbnailLarge.png differ diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/index.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/index.js new file mode 100644 index 000000000000..28a6dd260440 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/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://github.com/d3/d3-chord'], + description: '', + name: t('Chord Diagram'), + thumbnail, + useLegacyApi: true, +}); + +export default class ChordChartPlugin extends ChartPlugin { + constructor() { + super({ + loadChart: () => import('./ReactChord'), + metadata, + transformProps, + }); + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/transformProps.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/transformProps.js new file mode 100644 index 000000000000..ad2bf54520d0 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/transformProps.js @@ -0,0 +1,30 @@ +/** + * 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 { width, height, formData, queryData } = chartProps; + const { yAxisFormat, colorScheme } = formData; + + return { + colorScheme, + data: queryData.data, + height, + numberFormat: yAxisFormat, + width, + }; +}