Skip to content

Commit

Permalink
feat: migrate chart plugins (#375)
Browse files Browse the repository at this point in the history
* feat(legacy-plugin-chart-rose): migrate package and lint

* feat(legacy-plugin-chart-sankey): migrate

* feat(legacy-plugin-chart-sankey-loop): migrate

* feat(legacy-plugin-chart-sunburst): migrate and lint

* feat(legacy-plugin-chart-treemap): migrate

* feat(legacy-plugin-chart-world-map): migrate

* docs: update storybooks

* feat(legacy-plugin-chart-force-directed): migrate and lint

* feat(legacy-plugin-chart-map-box): migrate and lint

* feat(legacy-plugin-chart-histogram): migrate and lint

* docs: update storybooks
  • Loading branch information
kristw authored and zhaoyongjie committed Nov 26, 2021
1 parent 2bd63d9 commit 81ca3b9
Show file tree
Hide file tree
Showing 124 changed files with 1,052 additions and 479 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,24 @@
"@superset-ui/connection": "0.12.19",
"@superset-ui/legacy-plugin-chart-calendar": "0.12.20",
"@superset-ui/legacy-plugin-chart-chord": "0.12.20",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.11.15",
"@superset-ui/legacy-plugin-chart-heatmap": "0.12.20",
"@superset-ui/legacy-plugin-chart-histogram": "^0.11.17",
"@superset-ui/legacy-plugin-chart-horizon": "0.12.20",
"@superset-ui/legacy-plugin-chart-iframe": "0.12.20",
"@superset-ui/legacy-plugin-chart-map-box": "^0.11.15",
"@superset-ui/legacy-plugin-chart-markup": "0.12.20",
"@superset-ui/legacy-plugin-chart-paired-t-test": "0.12.20",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "0.12.20",
"@superset-ui/legacy-plugin-chart-partition": "0.12.20",
"@superset-ui/legacy-plugin-chart-pivot-table": "0.12.20",
"@superset-ui/legacy-plugin-chart-rose": "^0.11.15",
"@superset-ui/legacy-plugin-chart-sankey": "^0.11.15",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.11.15",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.11.15",
"@superset-ui/legacy-plugin-chart-table": "0.12.20",
"@superset-ui/legacy-plugin-chart-treemap": "^0.11.15",
"@superset-ui/legacy-plugin-chart-world-map": "^0.11.15",
"@superset-ui/legacy-plugin-chart-word-cloud": "^0.11.15",
"@superset-ui/legacy-preset-chart-big-number": "0.12.20",
"@superset-ui/number-format": "0.12.19",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import ForceDirectedChartPlugin from '@superset-ui/legacy-plugin-chart-force-directed';
import data from './data';

new ForceDirectedChartPlugin().configure({ key: 'force-directed' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-force-directed',
};

export const basic = () => (
<SuperChart chartType="force-directed" width={400} height={400} queryData={{ data }} />
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import HistogramChartPlugin from '@superset-ui/legacy-plugin-chart-histogram';
import data from './data';

new HistogramChartPlugin().configure({ key: 'histogram' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-histogram',
};

export const basic = () => (
<SuperChart
chartType="histogram"
width={400}
height={400}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
globalOpacity: 1,
linkLength: 15, // binCount
normalized: false,
xAxisLabel: 'Score',
yAxisLabel: 'Count',
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import MapBoxChartPlugin from '@superset-ui/legacy-plugin-chart-map-box';
import data from './data';

new MapBoxChartPlugin().configure({ key: 'map-box' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-map-box',
};

export const basic = () => (
<SuperChart
chartType="map-box"
width={400}
height={400}
queryData={{ data }}
formData={{
allColumnsX: 'LON',
allColumnsY: 'LAT',
clusteringRadius: '60',
globalOpacity: 1,
mapboxColor: 'rgb(0, 122, 135)',
mapboxLabel: [],
mapboxStyle: 'mapbox://styles/mapbox/light-v9',
pandasAggfunc: 'sum',
pointRadius: 'Auto',
pointRadiusUnit: 'Pixels',
renderWhileDragging: true,
viewportLatitude: 37.78711146014447,
viewportLongitude: -122.37633433151713,
viewportZoom: 10.026425338292782,
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* eslint-disable no-magic-numbers, sort-keys */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import RoseChartPlugin from '@superset-ui/legacy-plugin-chart-rose';
import data from './data';

new RoseChartPlugin().configure({ key: 'rose' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-rose',
};

export const basic = () => (
<SuperChart
chartType="rose"
width={400}
height={400}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
dateTimeFormat: '%Y-%m-%d',
numberFormat: '.3s',
richTooltip: true,
roseAreaProportion: false,
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import SankeyLoopChartPlugin from '@superset-ui/legacy-plugin-chart-sankey-loop';
import data from './data';

new SankeyLoopChartPlugin().configure({ key: 'sankey-loop' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-sankey-loop',
};

export const basic = () => (
<SuperChart
chartType="sankey-loop"
width={400}
height={400}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import SankeyChartPlugin from '@superset-ui/legacy-plugin-chart-sankey';
import data from './data';

new SankeyChartPlugin().configure({ key: 'sankey' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-sankey',
};

export const basic = () => (
<SuperChart
chartType="sankey"
width={400}
height={400}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import SunburstChartPlugin from '@superset-ui/legacy-plugin-chart-sunburst';
import data from './data';

new SunburstChartPlugin().configure({ key: 'sunburst' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-sunburst',
};

export const basic = () => (
<SuperChart
chartType="sunburst"
width={400}
height={400}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
metric: 'sum__SP_POP_TOTL',
secondaryMetric: 'sum__SP_RUR_TOTL',
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* eslint-disable no-magic-numbers, sort-keys */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import TreemapChartPlugin from '@superset-ui/legacy-plugin-chart-treemap';
import data from './data';

new TreemapChartPlugin().configure({ key: 'treemap' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-treemap',
};

export const basic = () => (
<SuperChart
chartType="treemap"
width={400}
height={400}
queryData={{ data }}
formData={{
colorScheme: 'd3Category10',
numberFormat: '.3s',
treeMapRatio: 1.618033988749895,
}}
/>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* eslint-disable no-magic-numbers, sort-keys */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import WorldMapChartPlugin from '@superset-ui/legacy-plugin-chart-world-map';
import data from './data';

new WorldMapChartPlugin().configure({ key: 'world-map' }).register();

export default {
title: 'Legacy Chart Plugins|legacy-plugin-chart-world-map',
};

export const basic = () => (
<SuperChart
chartType="world-map"
width={400}
height={400}
queryData={{ data }}
formData={{
maxBubbleSize: '25',
showBubbles: true,
}}
/>
);
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,7 @@ function ForceDirected(element, props) {
.start();

div.selectAll('*').remove();
const svg = div
.append('svg')
.attr('width', width)
.attr('height', height);
const svg = div.append('svg').attr('width', width).attr('height', height);

// build the arrow.
svg
Expand Down Expand Up @@ -149,35 +146,20 @@ function ForceDirected(element, props) {
.enter()
.append('g')
.attr('class', 'node')
.on('mouseenter', function() {
d3.select(this)
.select('circle')
.transition()
.style('stroke-width', 5);

d3.select(this)
.select('text')
.transition()
.style('font-size', 25);
.on('mouseenter', function () {
d3.select(this).select('circle').transition().style('stroke-width', 5);

d3.select(this).select('text').transition().style('font-size', 25);
})
.on('mouseleave', function() {
d3.select(this)
.select('circle')
.transition()
.style('stroke-width', 1.5);
d3.select(this)
.select('text')
.transition()
.style('font-size', 12);
.on('mouseleave', function () {
d3.select(this).select('circle').transition().style('stroke-width', 1.5);
d3.select(this).select('text').transition().style('font-size', 12);
})
.call(force.drag);

// add the nodes
const ext = d3.extent(d3.values(nodes), d => Math.sqrt(d.total));
const circleScale = d3.scale
.linear()
.domain(ext)
.range([3, 30]);
const circleScale = d3.scale.linear().domain(ext).range([3, 30]);

node.append('circle').attr('r', d => circleScale(Math.sqrt(d.total)));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ class ScatterPlotGlowOverlay extends React.PureComponent {
if (location.get('properties').get('cluster')) {
let clusterLabel = clusterLabelMap[i];
// eslint-disable-next-line no-restricted-properties, unicorn/prefer-exponentiation-operator
const scaledRadius = roundDecimal(Math.pow(clusterLabel / maxLabel, 0.5) * radius, 1);
const scaledRadius = roundDecimal((clusterLabel / maxLabel) ** 0.5 * radius, 1);
const fontHeight = roundDecimal(scaledRadius * 0.5, 1);
const [x, y] = pixelRounded;
const gradient = ctx.createRadialGradient(x, y, scaledRadius, x, y, 0);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function kmToPixels(kilometers, latitude, zoomLevel) {
const latitudeRad = latitude * (Math.PI / 180);
// Seems like the zoomLevel is off by one
// eslint-disable-next-line no-restricted-properties, unicorn/prefer-exponentiation-operator
const kmPerPixel = (EARTH_CIRCUMFERENCE_KM * Math.cos(latitudeRad)) / Math.pow(2, zoomLevel + 9);
const kmPerPixel = (EARTH_CIRCUMFERENCE_KM * Math.cos(latitudeRad)) / 2 ** (zoomLevel + 9);

return roundDecimal(kilometers / kmPerPixel, 2);
}
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,9 @@ function Rose(element, props) {
const tooltip = nv.models.tooltip();
const state = { disabled: datum[times[0]].map(() => false) };

const svg = div
.append('svg')
.attr('width', width)
.attr('height', height);
const svg = div.append('svg').attr('width', width).attr('height', height);

const g = svg
.append('g')
.attr('class', 'rose')
.append('g');
const g = svg.append('g').attr('class', 'rose').append('g');

const legendWrap = g.append('g').attr('class', 'legendWrap');

Expand Down Expand Up @@ -151,15 +145,9 @@ function Rose(element, props) {
const mini = 0.075;

const centerTranslate = `translate(${width / 2},${roseHeight / 2 + margin.top})`;
const roseWrap = g
.append('g')
.attr('transform', centerTranslate)
.attr('class', 'roseWrap');
const roseWrap = g.append('g').attr('transform', centerTranslate).attr('class', 'roseWrap');

const labelsWrap = g
.append('g')
.attr('transform', centerTranslate)
.attr('class', 'labelsWrap');
const labelsWrap = g.append('g').attr('transform', centerTranslate).attr('class', 'labelsWrap');

const groupLabelsWrap = g
.append('g')
Expand Down

0 comments on commit 81ca3b9

Please sign in to comment.