mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
feat: migrate legacy-plugin-chart-chord (#365)
* docs: update storybook * fix: import * fix: import * fix: import
This commit is contained in:
parent
b491361b10
commit
d36b36ecfc
@ -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",
|
||||
|
@ -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 = () => (
|
||||
|
@ -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 = () => (
|
||||
|
@ -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 = () => (
|
@ -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',
|
||||
}}
|
||||
/>
|
||||
);
|
@ -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'],
|
||||
};
|
@ -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 = () => (
|
||||
|
@ -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: {...},
|
||||
}}
|
||||
/>
|
||||
```
|
@ -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"
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
@ -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);
|
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
After Width: | Height: | Size: 398 KiB |
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
@ -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,
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue
Block a user