refactor(monorepo): move superset-ui to superset(stage 2) (#17552)

superset-frontend/plugins/legacy-plugin-chart-force-directed/CHANGELOG.md

@@ -0,0 +1,27 @@
+<!--
+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.
+-->
+
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.18.0](https://github.com/apache-superset/superset-ui/compare/v0.17.87...v0.18.0) (2021-08-30)
+
+**Note:** Version bump only for package @superset-ui/legacy-plugin-chart-force-directed

superset-frontend/plugins/legacy-plugin-chart-force-directed/README.md

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

superset-frontend/plugins/legacy-plugin-chart-force-directed/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@superset-ui/legacy-plugin-chart-force-directed",
+  "version": "0.18.25",
+  "description": "Superset Legacy Chart - Force-directed Graph",
+  "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.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@superset-ui/chart-controls": "0.18.25",
+    "@superset-ui/core": "0.18.25",
+    "d3": "^3.5.17",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  }
+}

superset-frontend/plugins/legacy-plugin-chart-force-directed/src/ForceDirected.js

@@ -0,0 +1,176 @@
+/**
+ * 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 react/sort-prop-types, func-names, no-param-reassign */
+import d3 from 'd3';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      source: PropTypes.string,
+      target: PropTypes.string,
+      value: PropTypes.number,
+    }),
+  ),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  linkLength: PropTypes.number,
+  charge: PropTypes.number,
+};
+
+/* Modified from http://bl.ocks.org/d3noob/5141278 */
+function ForceDirected(element, props) {
+  const { data, width, height, linkLength = 200, charge = -500 } = props;
+  const div = d3.select(element);
+  div.classed('superset-legacy-chart-force-directed', true);
+
+  const links = data;
+  const nodes = {};
+  // Compute the distinct nodes from the links.
+  links.forEach(link => {
+    link.source =
+      nodes[link.source] ||
+      (nodes[link.source] = {
+        name: link.source,
+      });
+    link.target =
+      nodes[link.target] ||
+      (nodes[link.target] = {
+        name: link.target,
+      });
+    link.value = Number(link.value);
+
+    const targetName = link.target.name;
+    const sourceName = link.source.name;
+
+    if (nodes[targetName].total === undefined) {
+      nodes[targetName].total = link.value;
+    }
+    if (nodes[sourceName].total === undefined) {
+      nodes[sourceName].total = 0;
+    }
+    if (nodes[targetName].max === undefined) {
+      nodes[targetName].max = 0;
+    }
+    if (link.value > nodes[targetName].max) {
+      nodes[targetName].max = link.value;
+    }
+    if (nodes[targetName].min === undefined) {
+      nodes[targetName].min = 0;
+    }
+    if (link.value > nodes[targetName].min) {
+      nodes[targetName].min = link.value;
+    }
+
+    nodes[targetName].total += link.value;
+  });
+
+  /* eslint-disable no-use-before-define */
+  // add the curvy lines
+  function tick() {
+    path.attr('d', d => {
+      const dx = d.target.x - d.source.x;
+      const dy = d.target.y - d.source.y;
+      const dr = Math.sqrt(dx * dx + dy * dy);
+
+      return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
+    });
+
+    node.attr('transform', d => `translate(${d.x},${d.y})`);
+  }
+  /* eslint-enable no-use-before-define */
+
+  const force = d3.layout
+    .force()
+    .nodes(d3.values(nodes))
+    .links(links)
+    .size([width, height])
+    .linkDistance(linkLength)
+    .charge(charge)
+    .on('tick', tick)
+    .start();
+
+  div.selectAll('*').remove();
+  const svg = div.append('svg').attr('width', width).attr('height', height);
+
+  // build the arrow.
+  svg
+    .append('svg:defs')
+    .selectAll('marker')
+    .data(['end']) // Different link/path types can be defined here
+    .enter()
+    .append('svg:marker') // This section adds in the arrows
+    .attr('id', String)
+    .attr('viewBox', '0 -5 10 10')
+    .attr('refX', 15)
+    .attr('refY', -1.5)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 6)
+    .attr('orient', 'auto')
+    .append('svg:path')
+    .attr('d', 'M0,-5L10,0L0,5');
+
+  const edgeScale = d3.scale.linear().range([0.1, 0.5]);
+  // add the links and the arrows
+  const path = svg
+    .append('svg:g')
+    .selectAll('path')
+    .data(force.links())
+    .enter()
+    .append('svg:path')
+    .attr('class', 'link')
+    .style('opacity', d => edgeScale(d.value / d.target.max))
+    .attr('marker-end', 'url(#end)');
+
+  // define the nodes
+  const node = svg
+    .selectAll('.node')
+    .data(force.nodes())
+    .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('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]);
+
+  node.append('circle').attr('r', d => circleScale(Math.sqrt(d.total)));
+
+  // add the text
+  node
+    .append('text')
+    .attr('x', 6)
+    .attr('dy', '.35em')
+    .text(d => d.name);
+}
+
+ForceDirected.displayName = 'ForceDirected';
+ForceDirected.propTypes = propTypes;
+
+export default ForceDirected;

superset-frontend/plugins/legacy-plugin-chart-force-directed/src/ReactForceDirected.jsx

@@ -0,0 +1,56 @@
+/**
+ * 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 React from 'react';
+import { reactify, styled } from '@superset-ui/core';
+import PropTypes from 'prop-types';
+import Component from './ForceDirected';
+
+const ReactComponent = reactify(Component);
+
+const ForceDirected = ({ className, ...otherProps }) => (
+  <div className={className}>
+    <ReactComponent {...otherProps} />
+  </div>
+);
+
+ForceDirected.propTypes = {
+  className: PropTypes.string.isRequired,
+};
+
+export default styled(ForceDirected)`
+  .superset-legacy-chart-force-directed {
+    path.link {
+      fill: none;
+      stroke: #000;
+      stroke-width: 1.5px;
+    }
+    circle {
+      fill: #ccc;
+      stroke: #000;
+      stroke-width: 1.5px;
+      stroke-opacity: 1;
+      opacity: 0.75;
+    }
+    text {
+      fill: #000;
+      font: 10px sans-serif;
+      pointer-events: none;
+    }
+  }
+`;

superset-frontend/plugins/legacy-plugin-chart-force-directed/src/controlPanel.ts

@@ -0,0 +1,108 @@
+/**
+ * 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/core';
+import { formatSelectOptions, sections } from '@superset-ui/chart-controls';
+
+export default {
+  controlPanelSections: [
+    sections.legacyRegularTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['groupby'],
+        ['metric'],
+        ['adhoc_filters'],
+        ['row_limit'],
+        [
+          {
+            name: 'sort_by_metric',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort by metric'),
+              description: t(
+                'Whether to sort results by the selected metric in descending order.',
+              ),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'link_length',
+            config: {
+              type: 'SelectControl',
+              renderTrigger: true,
+              freeForm: true,
+              label: t('Link Length'),
+              default: '200',
+              choices: formatSelectOptions([
+                '10',
+                '25',
+                '50',
+                '75',
+                '100',
+                '150',
+                '200',
+                '250',
+              ]),
+              description: t('Link length in the force layout'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'charge',
+            config: {
+              type: 'SelectControl',
+              renderTrigger: true,
+              freeForm: true,
+              label: t('Charge'),
+              default: '-500',
+              choices: formatSelectOptions([
+                '-50',
+                '-75',
+                '-100',
+                '-150',
+                '-200',
+                '-250',
+                '-500',
+                '-1000',
+                '-2500',
+                '-5000',
+              ]),
+              description: t('Charge in the force layout'),
+            },
+          },
+        ],
+      ],
+    },
+  ],
+  controlOverrides: {
+    groupby: {
+      label: t('Source / Target'),
+      description: t('Choose a source and a target'),
+    },
+  },
+};

superset-frontend/plugins/legacy-plugin-chart-force-directed/src/index.js

@@ -0,0 +1,41 @@
+/**
+ * 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, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+import controlPanel from './controlPanel';
+
+const metadata = new ChartMetadata({
+  credits: ['http://bl.ocks.org/d3noob/5141278'],
+  description: '',
+  name: t('Force-directed Graph'),
+  thumbnail,
+  useLegacyApi: true,
+});
+
+export default class ForceDirectedChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      loadChart: () => import('./ReactForceDirected'),
+      metadata,
+      transformProps,
+      controlPanel,
+    });
+  }
+}

superset-frontend/plugins/legacy-plugin-chart-force-directed/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, queriesData } = chartProps;
+  const { charge, linkLength } = formData;
+
+  return {
+    charge,
+    data: queriesData[0].data,
+    height,
+    linkLength,
+    width,
+  };
+}

superset-frontend/plugins/legacy-plugin-chart-force-directed/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "declarationDir": "lib",
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "exclude": [
+    "lib",
+    "test"
+  ],
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src/**/*",
+    "types/**/*",
+    "../../types/**/*"
+  ],
+  "references": [
+    {
+      "path": "../../packages/superset-ui-chart-controls"
+    },
+    {
+      "path": "../../packages/superset-ui-core"
+    }
+  ]
+}