feat: migrate chart plugins (#375)

* 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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json

@@ -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",

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-force-directed/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-histogram/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-rose/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey-loop/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sunburst/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-treemap/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-world-map/Stories.tsx

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

superset-frontend/temporary_superset_ui/superset-ui/temporary-plugins/superset-ui-legacy-plugin-chart-force-directed/src/ForceDirected.js → superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-force-directed/src/ForceDirected.js

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

superset-frontend/temporary_superset_ui/superset-ui/temporary-plugins/superset-ui-legacy-plugin-chart-map-box/src/ScatterPlotGlowOverlay.jsx → superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-map-box/src/ScatterPlotGlowOverlay.jsx

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

superset-frontend/temporary_superset_ui/superset-ui/temporary-plugins/superset-ui-legacy-plugin-chart-map-box/src/utils/geo.js → superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-map-box/src/utils/geo.js

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

superset-frontend/temporary_superset_ui/superset-ui/temporary-plugins/superset-ui-legacy-plugin-chart-rose/src/Rose.js → superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-rose/src/Rose.js

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