feat(legacy-plugin-chart-parallel-coordinates): migrate from another …

…repo

packages/superset-ui-demo/package.json

@@ -46,6 +46,7 @@
     "@superset-ui/legacy-plugin-chart-iframe": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-markup": "^0.11.15",
     "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.11.15",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^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.18",

packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-parallel-coordinates/Stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
+import data from './data';
+
+new ParallelCoordinatesChartPlugin().configure({ key: 'parallel-coordinates' }).register();
+
+export default {
+  title: 'Legacy Chart Plugins|legacy-plugin-chart-parallel-coordinates',
+};
+
+export const basic = () => (
+  <SuperChart
+    chartType="parallel-coordinates"
+    width={400}
+    height={400}
+    queryData={{ data }}
+    formData={{
+      includeSeries: false,
+      linearColorScheme: 'schemeRdYlBu',
+      metrics: ['sum__SP_POP_TOTL', 'sum__SP_RUR_TOTL_ZS', 'sum__SH_DYN_AIDS'],
+      secondaryMetric: 'sum__SP_POP_TOTL',
+      series: 'country_name',
+      showDatatable: false,
+    }}
+  />
+);

packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-parallel-coordinates/data.ts

@@ -0,0 +1,62 @@
+export default [
+  {
+    country_name: 'China',
+    sum__SP_POP_TOTL: 1344130000.0,
+    sum__SP_RUR_TOTL_ZS: 49.427,
+    sum__SH_DYN_AIDS: 0.0,
+  },
+  {
+    country_name: 'India',
+    sum__SP_POP_TOTL: 1247446011.0,
+    sum__SP_RUR_TOTL_ZS: 68.724,
+    sum__SH_DYN_AIDS: 0.0,
+  },
+  {
+    country_name: 'United States',
+    sum__SP_POP_TOTL: 311721632.0,
+    sum__SP_RUR_TOTL_ZS: 19.06,
+    sum__SH_DYN_AIDS: 0.0,
+  },
+  {
+    country_name: 'Indonesia',
+    sum__SP_POP_TOTL: 244808254.0,
+    sum__SP_RUR_TOTL_ZS: 49.288,
+    sum__SH_DYN_AIDS: 540000.0,
+  },
+  {
+    country_name: 'Brazil',
+    sum__SP_POP_TOTL: 200517584.0,
+    sum__SP_RUR_TOTL_ZS: 15.377,
+    sum__SH_DYN_AIDS: 0.0,
+  },
+  {
+    country_name: 'Pakistan',
+    sum__SP_POP_TOTL: 173669648.0,
+    sum__SP_RUR_TOTL_ZS: 62.993,
+    sum__SH_DYN_AIDS: 52000.0,
+  },
+  {
+    country_name: 'Nigeria',
+    sum__SP_POP_TOTL: 163770669.0,
+    sum__SP_RUR_TOTL_ZS: 55.638,
+    sum__SH_DYN_AIDS: 3000000.0,
+  },
+  {
+    country_name: 'Bangladesh',
+    sum__SP_POP_TOTL: 153405612.0,
+    sum__SP_RUR_TOTL_ZS: 68.775,
+    sum__SH_DYN_AIDS: 7800.0,
+  },
+  {
+    country_name: 'Russian Federation',
+    sum__SP_POP_TOTL: 142960868.0,
+    sum__SP_RUR_TOTL_ZS: 26.268,
+    sum__SH_DYN_AIDS: 0.0,
+  },
+  {
+    country_name: 'Japan',
+    sum__SP_POP_TOTL: 127817277.0,
+    sum__SP_RUR_TOTL_ZS: 8.752,
+    sum__SH_DYN_AIDS: 0.0,
+  },
+];

plugins/legacy-plugin-chart-parallel-coordinates/README.md

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

plugins/legacy-plugin-chart-parallel-coordinates/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@superset-ui/legacy-plugin-chart-parallel-coordinates",
+  "version": "0.11.15",
+  "description": "Superset Legacy Chart - Parallel Coordinates",
+  "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/translation": "^0.12.0"
+  }
+}

plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.css

@@ -0,0 +1,25 @@
+/**
+ * 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-parallel-coordinates div.grid {
+  overflow: auto;
+}
+
+.superset-legacy-chart-parallel-coordinates .grid div.row:hover {
+  background-color: #ccc;
+}

plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.js

@@ -0,0 +1,128 @@
+/**
+ * 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 */
+import d3 from 'd3';
+import PropTypes from 'prop-types';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
+
+import parcoords from './vendor/parcoords/d3.parcoords';
+import divgrid from './vendor/parcoords/divgrid';
+import './vendor/parcoords/d3.parcoords.css';
+import './ParallelCoordinates.css';
+
+const propTypes = {
+  // Standard tabular data [{ fieldName1: value1, fieldName2: value2 }]
+  data: PropTypes.arrayOf(PropTypes.object),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  colorMetric: PropTypes.string,
+  includeSeries: PropTypes.bool,
+  linearColorScheme: PropTypes.string,
+  metrics: PropTypes.arrayOf(PropTypes.string),
+  series: PropTypes.string,
+  showDatatable: PropTypes.bool,
+};
+
+function ParallelCoordinates(element, props) {
+  const {
+    data,
+    width,
+    height,
+    colorMetric,
+    includeSeries,
+    linearColorScheme,
+    metrics,
+    series,
+    showDatatable,
+  } = props;
+
+  const cols = includeSeries ? [series].concat(metrics) : metrics;
+
+  const ttypes = {};
+  ttypes[series] = 'string';
+  metrics.forEach(v => {
+    ttypes[v] = 'number';
+  });
+
+  const colorScale = colorMetric
+    ? getSequentialSchemeRegistry()
+        .get(linearColorScheme)
+        .createLinearScale(d3.extent(data, d => d[colorMetric]))
+    : () => 'grey';
+  const color = d => colorScale(d[colorMetric]);
+  const container = d3.select(element).classed('superset-legacy-chart-parallel-coordinates', true);
+  container.selectAll('*').remove();
+  const effHeight = showDatatable ? height / 2 : height;
+
+  const div = container
+    .append('div')
+    .style('height', `${effHeight}px`)
+    .classed('parcoords', true);
+
+  const chart = parcoords()(div.node())
+    .width(width)
+    .color(color)
+    .alpha(0.5)
+    .composite('darken')
+    .height(effHeight)
+    .data(data)
+    .dimensions(cols)
+    .types(ttypes)
+    .render()
+    .createAxes()
+    .shadows()
+    .reorderable()
+    .brushMode('1D-axes');
+
+  if (showDatatable) {
+    // create data table, row hover highlighting
+    const grid = divgrid();
+    container
+      .append('div')
+      .style('height', `${effHeight}px`)
+      .datum(data)
+      .call(grid)
+      .classed('parcoords grid', true)
+      .selectAll('.row')
+      .on({
+        mouseover(d) {
+          chart.highlight([d]);
+        },
+        mouseout: chart.unhighlight,
+      });
+    // update data table on brush event
+    chart.on('brush', d => {
+      d3.select('.grid')
+        .datum(d)
+        .call(grid)
+        .selectAll('.row')
+        .on({
+          mouseover(dd) {
+            chart.highlight([dd]);
+          },
+          mouseout: chart.unhighlight,
+        });
+    });
+  }
+}
+
+ParallelCoordinates.displayName = 'ParallelCoordinates';
+ParallelCoordinates.propTypes = propTypes;
+
+export default ParallelCoordinates;

plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.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 './ParallelCoordinates';
+
+export default reactify(Component);

plugins/legacy-plugin-chart-parallel-coordinates/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://syntagmatic.github.io/parallel-coordinates'],
+  description: '',
+  name: t('Parallel Coordinates'),
+  thumbnail,
+  useLegacyApi: true,
+});
+
+export default class ParallelCoordinatesChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      loadChart: () => import('./ReactParallelCoordinates.js'),
+      metadata,
+      transformProps,
+    });
+  }
+}