feat(legacy-plugin-chart-pivot-table): migrate from another repo

packages/superset-ui-demo/package.json

@@ -48,6 +48,7 @@
     "@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-partition": "^0.11.15",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^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-pivot-table/Stories.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import PivotTableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+new PivotTableChartPlugin().configure({ key: 'pivot-table' }).register();
+
+export default {
+  title: 'Legacy Chart Plugins|legacy-plugin-chart-pivot-table',
+};
+
+const datasource = {
+  columnFormats: {},
+  verboseMap: {
+    sum__num: 'sum__num',
+  },
+};
+
+export const basic = () => (
+  <SuperChart
+    chartType="pivot-table"
+    width={400}
+    height={400}
+    datasource={datasource}
+    queryData={{
+      data: {
+        columns: [
+          ['sum__num', 'other'],
+          ['sum__num', 'All'],
+        ],
+        html:
+          '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>803607</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>673992</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>749686</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>587540</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>548044</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
+      },
+    }}
+    formData={{
+      groupby: ['name'],
+      numberFormat: '.3s',
+    }}
+  />
+);
+
+export const withNull = () => (
+  <SuperChart
+    chartType="pivot-table"
+    width={400}
+    height={400}
+    datasource={datasource}
+    queryData={{
+      data: {
+        columns: [
+          ['sum__num', 'other'],
+          ['sum__num', 'All'],
+        ],
+        html:
+          '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>null</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>null</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>null</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
+      },
+    }}
+    formData={{
+      groupby: ['name'],
+      numberFormat: '.3s',
+    }}
+  />
+);

plugins/legacy-plugin-chart-pivot-table/README.md

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

plugins/legacy-plugin-chart-pivot-table/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@superset-ui/legacy-plugin-chart-pivot-table",
+  "version": "0.11.15",
+  "description": "Superset Legacy Chart - Pivot Table",
+  "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",
+    "datatables.net-bs": "^1.10.15",
+    "prop-types": "^15.6.2"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.12.0",
+    "@superset-ui/number-format": "^0.12.0",
+    "@superset-ui/translation": "^0.12.0"
+  }
+}

plugins/legacy-plugin-chart-pivot-table/src/PivotTable.js

@@ -0,0 +1,113 @@
+/**
+ * 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 dt from 'datatables.net-bs';
+import PropTypes from 'prop-types';
+import { formatNumber } from '@superset-ui/number-format';
+import fixTableHeight from './utils/fixTableHeight';
+import 'datatables.net-bs/css/dataTables.bootstrap.css';
+
+if (window.$) {
+  dt(window, window.$);
+}
+const $ = window.$ || dt.$;
+
+const propTypes = {
+  data: PropTypes.shape({
+    // TODO: replace this with raw data in SIP-6
+    html: PropTypes.string,
+    columns: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    ),
+  }),
+  height: PropTypes.number,
+  columnFormats: PropTypes.objectOf(PropTypes.string),
+  numberFormat: PropTypes.string,
+  numGroups: PropTypes.number,
+  verboseMap: PropTypes.objectOf(PropTypes.string),
+};
+
+function PivotTable(element, props) {
+  const { data, height, columnFormats, numberFormat, numGroups, verboseMap } = props;
+
+  const { html, columns } = data;
+  const container = element;
+  const $container = $(element);
+
+  // queryData data is a string of html with a single table element
+  container.innerHTML = html;
+
+  const cols = Array.isArray(columns[0]) ? columns.map(col => col[0]) : columns;
+
+  // jQuery hack to set verbose names in headers
+  // eslint-disable-next-line func-name-matching
+  const replaceCell = function replace() {
+    const s = $(this)[0].textContent;
+    $(this)[0].textContent = verboseMap[s] || s;
+  };
+  $container.find('thead tr:first th').each(replaceCell);
+  $container.find('thead tr th:first-child').each(replaceCell);
+
+  // jQuery hack to format number
+  $container.find('tbody tr').each(function eachRow() {
+    $(this)
+      .find('td')
+      .each(function each(i) {
+        const metric = cols[i];
+        const format = columnFormats[metric] || numberFormat || '.3s';
+        const tdText = $(this)[0].textContent;
+        if (!Number.isNaN(tdText) && tdText !== '' && tdText.trim().toLowerCase() !== 'null') {
+          $(this)[0].textContent = formatNumber(format, tdText);
+          $(this).attr('data-sort', tdText);
+        }
+      });
+  });
+
+  if (numGroups === 1) {
+    // When there is only 1 group by column,
+    // we use the DataTable plugin to make the header fixed.
+    // The plugin takes care of the scrolling so we don't need
+    // overflow: 'auto' on the table.
+    container.style.overflow = 'hidden';
+    const table = $container.find('table').DataTable({
+      paging: false,
+      searching: false,
+      bInfo: false,
+      scrollY: `${height}px`,
+      scrollCollapse: true,
+      scrollX: true,
+    });
+    table
+      .column('-1')
+      .order('desc')
+      .draw();
+    fixTableHeight($container.find('.dataTables_wrapper'), height);
+  } else {
+    // When there is more than 1 group by column we just render the table, without using
+    // the DataTable plugin, so we need to handle the scrolling ourselves.
+    // In this case the header is not fixed.
+    container.style.overflow = 'auto';
+    container.style.height = `${height + 10}px`;
+  }
+}
+
+PivotTable.displayName = 'PivotTable';
+PivotTable.propTypes = propTypes;
+
+export default PivotTable;

plugins/legacy-plugin-chart-pivot-table/src/ReactPivotTable.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 './PivotTable';
+
+export default reactify(Component);

plugins/legacy-plugin-chart-pivot-table/src/index.js

@@ -0,0 +1,39 @@
+/**
+ * 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({
+  description: '',
+  name: t('Pivot Table'),
+  thumbnail,
+  useLegacyApi: true,
+});
+
+export default class PivotTableChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      loadChart: () => import('./ReactPivotTable.js'),
+      metadata,
+      transformProps,
+    });
+  }
+}

plugins/legacy-plugin-chart-pivot-table/src/transformProps.js

@@ -0,0 +1,32 @@
+/**
+ * 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 { height, datasource, formData, queryData } = chartProps;
+  const { groupby, numberFormat } = formData;
+  const { columnFormats, verboseMap } = datasource;
+
+  return {
+    height,
+    data: queryData.data,
+    columnFormats,
+    numGroups: groupby.length,
+    numberFormat,
+    verboseMap,
+  };
+}

plugins/legacy-plugin-chart-pivot-table/src/utils/fixTableHeight.js

@@ -0,0 +1,13 @@
+/**
+ * Fix the height of the table body of a DataTable with scrollY set
+ */
+export default function fixTableHeight($tableDom, height) {
+  const headHeight = $tableDom.find('.dataTables_scrollHead').height();
+  const filterHeight = $tableDom.find('.dataTables_filter').height() || 0;
+  const pageLengthHeight = $tableDom.find('.dataTables_length').height() || 0;
+  const paginationHeight = $tableDom.find('.dataTables_paginate').height() || 0;
+  const controlsHeight = pageLengthHeight > filterHeight ? pageLengthHeight : filterHeight;
+  $tableDom
+    .find('.dataTables_scrollBody')
+    .css('max-height', height - headHeight - controlsHeight - paginationHeight);
+}