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

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

@@ -0,0 +1,129 @@
+/**
+ * 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/core';
+
+import parcoords from './vendor/parcoords/d3.parcoords';
+import divgrid from './vendor/parcoords/divgrid';
+import './vendor/parcoords/d3.parcoords.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;

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx

@@ -0,0 +1,47 @@
+/**
+ * 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 { styled, reactify } from '@superset-ui/core';
+import PropTypes from 'prop-types';
+import Component from './ParallelCoordinates';
+
+const ReactComponent = reactify(Component);
+
+const ParallelCoordianes = ({ className, ...otherProps }) => (
+  <div className={className}>
+    <ReactComponent {...otherProps} />
+  </div>
+);
+
+ParallelCoordianes.propTypes = {
+  className: PropTypes.string.isRequired,
+};
+
+export default styled(ParallelCoordianes)`
+  .superset-legacy-chart-parallel-coordinates {
+    div.grid {
+      overflow: auto;
+      div.row {
+        &:hover {
+          background-color: #ccc;
+        }
+      }
+    }
+  }
+`;

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/controlPanel.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 { ControlPanelConfig, sections } from '@superset-ui/chart-controls';
+
+const config: ControlPanelConfig = {
+  controlPanelSections: [
+    sections.legacyRegularTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['series'],
+        ['metrics'],
+        ['secondary_metric'],
+        ['adhoc_filters'],
+        ['limit', 'row_limit'],
+        ['timeseries_limit_metric'],
+        [
+          {
+            name: 'order_desc',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort Descending'),
+              default: true,
+              description: t('Whether to sort descending or ascending'),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Options'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'show_datatable',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Data Table'),
+              default: false,
+              renderTrigger: true,
+              description: t('Whether to display the interactive data table'),
+            },
+          },
+          {
+            name: 'include_series',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Include Series'),
+              renderTrigger: true,
+              default: false,
+              description: t('Include series name as an axis'),
+            },
+          },
+        ],
+        ['linear_color_scheme'],
+      ],
+    },
+  ],
+};
+
+export default config;

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/index.js

@@ -0,0 +1,45 @@
+/**
+ * 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({
+  category: t('Ranking'),
+  credits: ['https://syntagmatic.github.io/parallel-coordinates'],
+  description: t(
+    'Plots the individual metrics for each row in the data vertically and links them together as a line. This chart is useful for comparing multiple metrics across all of the samples or rows in the data.',
+  ),
+  name: t('Parallel Coordinates'),
+  tags: [t('Coordinates'), t('Directional'), t('Legacy'), t('Relational')],
+  thumbnail,
+  useLegacyApi: true,
+});
+
+export default class ParallelCoordinatesChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      loadChart: () => import('./ReactParallelCoordinates'),
+      metadata,
+      transformProps,
+      controlPanel,
+    });
+  }
+}

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/transformProps.js

@@ -0,0 +1,44 @@
+/**
+ * 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 {
+    includeSeries,
+    linearColorScheme,
+    metrics,
+    secondaryMetric,
+    series,
+    showDatatable,
+  } = formData;
+
+  return {
+    width,
+    height,
+    data: queriesData[0].data,
+    includeSeries,
+    linearColorScheme,
+    metrics: metrics.map(m => m.label || m),
+    colorMetric:
+      secondaryMetric && secondaryMetric.label
+        ? secondaryMetric.label
+        : secondaryMetric,
+    series,
+    showDatatable,
+  };
+}

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.css

@@ -0,0 +1,79 @@
+/* [LICENSE TBD] */
+.parcoords svg,
+.parcoords canvas {
+  font-size: 12px;
+  position: absolute;
+}
+.parcoords > canvas {
+  pointer-events: none;
+}
+
+.parcoords text.label {
+  font: 100%;
+  font-size: 12px;
+  cursor: drag;
+}
+
+.parcoords rect.background {
+  fill: transparent;
+}
+.parcoords rect.background:hover {
+  fill: rgba(120, 120, 120, 0.2);
+}
+.parcoords .resize rect {
+  fill: rgba(0, 0, 0, 0.1);
+}
+.parcoords rect.extent {
+  fill: rgba(255, 255, 255, 0.25);
+  stroke: rgba(0, 0, 0, 0.6);
+}
+.parcoords .axis line,
+.parcoords .axis path {
+  fill: none;
+  stroke: #222;
+  shape-rendering: crispEdges;
+}
+.parcoords canvas {
+  opacity: 1;
+  -moz-transition: opacity 0.3s;
+  -webkit-transition: opacity 0.3s;
+  -o-transition: opacity 0.3s;
+}
+.parcoords canvas.faded {
+  opacity: 0.25;
+}
+.parcoords {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: white;
+}
+
+/* data table styles */
+.parcoords .row,
+.parcoords .header {
+  clear: left;
+  font-size: 12px;
+  line-height: 18px;
+  height: 18px;
+  margin: 0px;
+}
+.parcoords .row:nth-child(odd) {
+  background: rgba(0, 0, 0, 0.05);
+}
+.parcoords .header {
+  font-weight: bold;
+}
+.parcoords .cell {
+  float: left;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100px;
+  height: 18px;
+}
+.parcoords .col-0 {
+  width: 180px;
+}

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/divgrid.js

@@ -0,0 +1,77 @@
+/* [LICENSE TBD] */
+/* eslint-disable */
+// from http://bl.ocks.org/3687826
+export default function (config) {
+  var columns = [];
+
+  var dg = function (selection) {
+    if (columns.length == 0) columns = d3.keys(selection.data()[0][0]);
+
+    // header
+    selection
+      .selectAll('.header')
+      .data([true])
+      .enter()
+      .append('div')
+      .attr('class', 'header');
+
+    var header = selection.select('.header').selectAll('.cell').data(columns);
+
+    header
+      .enter()
+      .append('div')
+      .attr('class', function (d, i) {
+        return 'col-' + i;
+      })
+      .classed('cell', true);
+
+    selection.selectAll('.header .cell').text(function (d) {
+      return d;
+    });
+
+    header.exit().remove();
+
+    // rows
+    var rows = selection.selectAll('.row').data(function (d) {
+      return d;
+    });
+
+    rows.enter().append('div').attr('class', 'row');
+
+    rows.exit().remove();
+
+    var cells = selection
+      .selectAll('.row')
+      .selectAll('.cell')
+      .data(function (d) {
+        return columns.map(function (col) {
+          return d[col];
+        });
+      });
+
+    // cells
+    cells
+      .enter()
+      .append('div')
+      .attr('class', function (d, i) {
+        return 'col-' + i;
+      })
+      .classed('cell', true);
+
+    cells.exit().remove();
+
+    selection.selectAll('.cell').text(function (d) {
+      return d;
+    });
+
+    return dg;
+  };
+
+  dg.columns = function (_) {
+    if (!arguments.length) return columns;
+    columns = _;
+    return this;
+  };
+
+  return dg;
+}