SIP-32: Moving frontend code to the base of the repo (#9098)

* move assets out, get webpack dev working

* update docs to reference superset-frontend

* draw the rest of the owl

* fix docs

* fix webpack script

* rats

* correct docs

* fix tox dox

superset-frontend/src/visualizations/TimeTable/FormattedNumber.jsx

@@ -0,0 +1,43 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { formatNumber } from '@superset-ui/number-format';
+
+const propTypes = {
+  num: PropTypes.number,
+  format: PropTypes.string,
+};
+
+const defaultProps = {
+  num: 0,
+  format: undefined,
+};
+
+function FormattedNumber({ num, format }) {
+  if (format) {
+    return <span title={num}>{formatNumber(format, num)}</span>;
+  }
+  return <span>{num}</span>;
+}
+
+FormattedNumber.propTypes = propTypes;
+FormattedNumber.defaultProps = defaultProps;
+
+export default FormattedNumber;

superset-frontend/src/visualizations/TimeTable/SparklineCell.jsx

@@ -0,0 +1,204 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import {
+  Sparkline,
+  LineSeries,
+  PointSeries,
+  HorizontalReferenceLine,
+  VerticalReferenceLine,
+  WithTooltip,
+} from '@data-ui/sparkline';
+import { formatNumber } from '@superset-ui/number-format';
+import { getTextDimension } from '@superset-ui/dimension';
+
+const propTypes = {
+  className: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  data: PropTypes.array.isRequired,
+  ariaLabel: PropTypes.string,
+  numberFormat: PropTypes.string,
+  yAxisBounds: PropTypes.array,
+  showYAxis: PropTypes.bool,
+  renderTooltip: PropTypes.func,
+};
+const defaultProps = {
+  className: '',
+  width: 300,
+  height: 50,
+  ariaLabel: '',
+  numberFormat: undefined,
+  yAxisBounds: [null, null],
+  showYAxis: false,
+  renderTooltip() {
+    return <div />;
+  },
+};
+
+const MARGIN = {
+  top: 8,
+  right: 8,
+  bottom: 8,
+  left: 8,
+};
+const tooltipProps = {
+  style: {
+    opacity: 0.8,
+  },
+  offsetTop: 0,
+};
+
+function getSparklineTextWidth(text) {
+  return (
+    getTextDimension({
+      text,
+      style: {
+        fontSize: '12px',
+        fontWeight: 200,
+        letterSpacing: 0.4,
+      },
+    }).width + 5
+  );
+}
+
+function isValidBoundValue(value) {
+  return (
+    value !== null &&
+    value !== undefined &&
+    value !== '' &&
+    !Number.isNaN(value)
+  );
+}
+
+class SparklineCell extends React.Component {
+  renderHorizontalReferenceLine(value, label) {
+    return (
+      <HorizontalReferenceLine
+        reference={value}
+        labelPosition="right"
+        renderLabel={() => label}
+        stroke="#bbb"
+        strokeDasharray="3 3"
+        strokeWidth={1}
+      />
+    );
+  }
+
+  render() {
+    const {
+      width,
+      height,
+      data,
+      ariaLabel,
+      numberFormat,
+      yAxisBounds,
+      showYAxis,
+      renderTooltip,
+    } = this.props;
+
+    const yScale = {};
+    let hasMinBound = false;
+    let hasMaxBound = false;
+
+    if (yAxisBounds) {
+      const [minBound, maxBound] = yAxisBounds;
+      hasMinBound = isValidBoundValue(minBound);
+      if (hasMinBound) {
+        yScale.min = minBound;
+      }
+      hasMaxBound = isValidBoundValue(maxBound);
+      if (hasMaxBound) {
+        yScale.max = maxBound;
+      }
+    }
+
+    let min;
+    let max;
+    let minLabel;
+    let maxLabel;
+    let labelLength = 0;
+    if (showYAxis) {
+      const [minBound, maxBound] = yAxisBounds;
+      min = hasMinBound
+        ? minBound
+        : data.reduce((acc, current) => Math.min(acc, current), data[0]);
+      max = hasMaxBound
+        ? maxBound
+        : data.reduce((acc, current) => Math.max(acc, current), data[0]);
+
+      minLabel = formatNumber(numberFormat, min);
+      maxLabel = formatNumber(numberFormat, max);
+      labelLength = Math.max(
+        getSparklineTextWidth(minLabel),
+        getSparklineTextWidth(maxLabel),
+      );
+    }
+
+    const margin = {
+      ...MARGIN,
+      right: MARGIN.right + labelLength,
+    };
+
+    return (
+      <WithTooltip
+        tooltipProps={tooltipProps}
+        hoverStyles={null}
+        renderTooltip={renderTooltip}
+      >
+        {({ onMouseLeave, onMouseMove, tooltipData }) => (
+          <Sparkline
+            ariaLabel={ariaLabel}
+            width={width}
+            height={height}
+            margin={margin}
+            data={data}
+            onMouseLeave={onMouseLeave}
+            onMouseMove={onMouseMove}
+            {...yScale}
+          >
+            {showYAxis && this.renderHorizontalReferenceLine(min, minLabel)}
+            {showYAxis && this.renderHorizontalReferenceLine(max, maxLabel)}
+            <LineSeries showArea={false} stroke="#767676" />
+            {tooltipData && (
+              <VerticalReferenceLine
+                reference={tooltipData.index}
+                strokeDasharray="3 3"
+                strokeWidth={1}
+              />
+            )}
+            {tooltipData && (
+              <PointSeries
+                points={[tooltipData.index]}
+                fill="#767676"
+                strokeWidth={1}
+              />
+            )}
+          </Sparkline>
+        )}
+      </WithTooltip>
+    );
+  }
+}
+
+SparklineCell.propTypes = propTypes;
+SparklineCell.defaultProps = defaultProps;
+
+export default SparklineCell;

superset-frontend/src/visualizations/TimeTable/TimeTable.jsx

@@ -0,0 +1,305 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import Mustache from 'mustache';
+import { scaleLinear } from 'd3-scale';
+import { Table, Thead, Th, Tr, Td } from 'reactable-arc';
+import { formatNumber } from '@superset-ui/number-format';
+import { formatTime } from '@superset-ui/time-format';
+import moment from 'moment';
+
+import MetricOption from '../../components/MetricOption';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
+import FormattedNumber from './FormattedNumber';
+import SparklineCell from './SparklineCell';
+import './TimeTable.less';
+
+const ACCESSIBLE_COLOR_BOUNDS = ['#ca0020', '#0571b0'];
+
+function colorFromBounds(value, bounds, colorBounds = ACCESSIBLE_COLOR_BOUNDS) {
+  if (bounds) {
+    const [min, max] = bounds;
+    const [minColor, maxColor] = colorBounds;
+    if (min !== null && max !== null) {
+      const colorScale = scaleLinear()
+        .domain([min, (max + min) / 2, max])
+        .range([minColor, 'grey', maxColor]);
+      return colorScale(value);
+    } else if (min !== null) {
+      return value >= min ? maxColor : minColor;
+    } else if (max !== null) {
+      return value < max ? maxColor : minColor;
+    }
+  }
+  return null;
+}
+
+const propTypes = {
+  className: PropTypes.string,
+  height: PropTypes.number,
+  // Example
+  // {'2018-04-14 00:00:00': { 'SUM(metric_value)': 80031779.40047 }}
+  data: PropTypes.objectOf(PropTypes.objectOf(PropTypes.number)).isRequired,
+  columnConfigs: PropTypes.arrayOf(
+    PropTypes.shape({
+      colType: PropTypes.string,
+      comparisonType: PropTypes.string,
+      d3format: PropTypes.string,
+      key: PropTypes.string,
+      label: PropTypes.string,
+      timeLag: PropTypes.number,
+    }),
+  ).isRequired,
+  rows: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        label: PropTypes.string,
+      }),
+      PropTypes.shape({
+        metric_name: PropTypes.string,
+      }),
+    ]),
+  ).isRequired,
+  rowType: PropTypes.oneOf(['column', 'metric']).isRequired,
+  url: PropTypes.string,
+};
+const defaultProps = {
+  className: '',
+  height: undefined,
+  url: '',
+};
+
+class TimeTable extends React.PureComponent {
+  renderLeftCell(row) {
+    const { rowType, url } = this.props;
+    const context = { metric: row };
+    const fullUrl = url ? Mustache.render(url, context) : null;
+
+    if (rowType === 'column') {
+      const column = row;
+      if (fullUrl) {
+        return (
+          <a href={fullUrl} rel="noopener noreferrer" target="_blank">
+            {column.label}
+          </a>
+        );
+      }
+      return column.label;
+    }
+
+    const metric = row;
+    return (
+      <MetricOption
+        metric={metric}
+        url={fullUrl}
+        showFormula={false}
+        openInNewWindow
+      />
+    );
+  }
+
+  renderSparklineCell(valueField, column, entries) {
+    let sparkData;
+    if (column.timeRatio) {
+      // Period ratio sparkline
+      sparkData = [];
+      for (let i = column.timeRatio; i < entries.length; i++) {
+        const prevData = entries[i - column.timeRatio][valueField];
+        if (prevData && prevData !== 0) {
+          sparkData.push(entries[i][valueField] / prevData);
+        } else {
+          sparkData.push(null);
+        }
+      }
+    } else {
+      sparkData = entries.map(d => d[valueField]);
+    }
+
+    return (
+      <Td
+        column={column.key}
+        key={column.key}
+        value={sparkData[sparkData.length - 1]}
+      >
+        <SparklineCell
+          width={parseInt(column.width, 10) || 300}
+          height={parseInt(column.height, 10) || 50}
+          data={sparkData}
+          ariaLabel={`spark-${valueField}`}
+          numberFormat={column.d3format}
+          yAxisBounds={column.yAxisBounds}
+          showYAxis={column.showYAxis}
+          renderTooltip={({ index }) => (
+            <div>
+              <strong>{formatNumber(column.d3format, sparkData[index])}</strong>
+              <div>
+                {formatTime(
+                  column.dateFormat,
+                  moment.utc(entries[index].time).toDate(),
+                )}
+              </div>
+            </div>
+          )}
+        />
+      </Td>
+    );
+  }
+
+  renderValueCell(valueField, column, reversedEntries) {
+    const recent = reversedEntries[0][valueField];
+    let v;
+    let errorMsg;
+    if (column.colType === 'time') {
+      // Time lag ratio
+      const timeLag = column.timeLag || 0;
+      const totalLag = Object.keys(reversedEntries).length;
+      if (timeLag >= totalLag) {
+        errorMsg = `The time lag set at ${timeLag} is too large for the length of data at ${reversedEntries.length}. No data available.`;
+      } else {
+        v = reversedEntries[timeLag][valueField];
+      }
+      if (column.comparisonType === 'diff') {
+        v = recent - v;
+      } else if (column.comparisonType === 'perc') {
+        v = recent / v;
+      } else if (column.comparisonType === 'perc_change') {
+        v = recent / v - 1;
+      }
+      v = v || 0;
+    } else if (column.colType === 'contrib') {
+      // contribution to column total
+      v =
+        recent /
+        Object.keys(reversedEntries[0])
+          .map(k => (k !== 'time' ? reversedEntries[0][k] : null))
+          .reduce((a, b) => a + b);
+    } else if (column.colType === 'avg') {
+      // Average over the last {timeLag}
+      v =
+        reversedEntries
+          .map((k, i) => (i < column.timeLag ? k[valueField] : 0))
+          .reduce((a, b) => a + b) / column.timeLag;
+    }
+
+    const color = colorFromBounds(v, column.bounds);
+
+    return (
+      <Td
+        column={column.key}
+        key={column.key}
+        value={v}
+        style={
+          color && {
+            boxShadow: `inset 0px -2.5px 0px 0px ${color}`,
+            borderRight: '2px solid #fff',
+          }
+        }
+      >
+        {errorMsg ? (
+          <div>{errorMsg}</div>
+        ) : (
+          <div style={{ color }}>
+            <FormattedNumber num={v} format={column.d3format} />
+          </div>
+        )}
+      </Td>
+    );
+  }
+
+  renderRow(row, entries, reversedEntries) {
+    const { columnConfigs } = this.props;
+    const valueField = row.label || row.metric_name;
+    const leftCell = this.renderLeftCell(row);
+
+    return (
+      <Tr key={leftCell}>
+        <Td column="metric" data={leftCell}>
+          {leftCell}
+        </Td>
+        {columnConfigs.map(c =>
+          c.colType === 'spark'
+            ? this.renderSparklineCell(valueField, c, entries)
+            : this.renderValueCell(valueField, c, reversedEntries),
+        )}
+      </Tr>
+    );
+  }
+
+  render() {
+    const {
+      className,
+      height,
+      data,
+      columnConfigs,
+      rowType,
+      rows,
+    } = this.props;
+
+    const entries = Object.keys(data)
+      .sort()
+      .map(time => ({ ...data[time], time }));
+    const reversedEntries = entries.concat().reverse();
+
+    const defaultSort =
+      rowType === 'column' && columnConfigs.length
+        ? {
+            column: columnConfigs[0].key,
+            direction: 'desc',
+          }
+        : false;
+
+    return (
+      <div className={`time-table ${className}`} style={{ height }}>
+        <Table
+          className="table table-no-hover"
+          defaultSort={defaultSort}
+          sortBy={defaultSort}
+          sortable={columnConfigs.map(c => c.key)}
+        >
+          <Thead>
+            <Th column="metric">Metric</Th>
+            {columnConfigs.map((c, i) => (
+              <Th
+                key={c.key}
+                column={c.key}
+                width={c.colType === 'spark' ? '1%' : null}
+              >
+                {c.label}{' '}
+                {c.tooltip && (
+                  <InfoTooltipWithTrigger
+                    tooltip={c.tooltip}
+                    label={`tt-col-${i}`}
+                    placement="top"
+                  />
+                )}
+              </Th>
+            ))}
+          </Thead>
+          {rows.map(row => this.renderRow(row, entries, reversedEntries))}
+        </Table>
+      </div>
+    );
+  }
+}
+
+TimeTable.propTypes = propTypes;
+TimeTable.defaultProps = defaultProps;
+
+export default TimeTable;

superset-frontend/src/visualizations/TimeTable/TimeTable.less

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+.time-table {
+  overflow: auto;
+}

superset-frontend/src/visualizations/TimeTable/TimeTableChartPlugin.js

@@ -0,0 +1,38 @@
+/**
+ * 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({
+  name: t('Time-series Table'),
+  description: '',
+  thumbnail,
+});
+
+export default class TimeTableChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      metadata,
+      transformProps,
+      loadChart: () => import('./TimeTable.jsx'),
+    });
+  }
+}

superset-frontend/src/visualizations/TimeTable/transformProps.js

@@ -0,0 +1,62 @@
+/**
+ * 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 { columnCollection = [], groupby, metrics, url } = formData;
+  const { records, columns } = queryData.data;
+  const isGroupBy = groupby.length > 0;
+
+  // When there is a "group by",
+  // each row in the table is a database column
+  // Otherwise,
+  // each row in the table is a metric
+  let rows;
+  if (isGroupBy) {
+    rows = columns.map(column =>
+      typeof column === 'object' ? column : { label: column },
+    );
+  } else {
+    const metricMap = datasource.metrics.reduce((acc, current) => {
+      const map = acc;
+      map[current.metric_name] = current;
+      return map;
+    }, {});
+
+    rows = metrics.map(metric =>
+      typeof metric === 'object' ? metric : metricMap[metric],
+    );
+  }
+
+  // TODO: Better parse this from controls instead of mutative value here.
+  columnCollection.forEach(column => {
+    const c = column;
+    if (c.timeLag !== undefined && c.timeLag !== null && c.timeLag !== '') {
+      c.timeLag = parseInt(c.timeLag, 10);
+    }
+  });
+
+  return {
+    height,
+    data: records,
+    columnConfigs: columnCollection,
+    rows,
+    rowType: isGroupBy ? 'column' : 'metric',
+    url,
+  };
+}