Cherry-picks: Update more chart types and css output optimization.

CONTRIBUTING.md

@@ -258,23 +258,52 @@ To parse and generate bundled files for superset, run either of the
 following commands. The `dev` flag will keep the npm script running and
 re-run it upon any changes within the assets directory.
 
-```
+```bash
 # Copies a conf file from the frontend to the backend
 npm run sync-backend
 
 # Compiles the production / optimized js & css
 npm run prod
 
-# Start a web server that manages and updates your assets as you modify them
+# Start a watcher that rebundle your assets as you modify them
 npm run dev
+
+# Start a web server that manages and updates your assets as you modify them
+npm run dev-server
 ```
 
-For every development session you will have to start a flask dev server
-as well as an npm watcher
+For every development session you will have to
 
-```
+1. Start a flask dev server
+
+```bash
+superset runserver -d
+# or specify port
 superset runserver -d -p 8081
-npm run dev
+```
+
+2. Start webpack dev server
+
+```bash
+npm run dev-server
+```
+
+This will start `webpack-dev-server` at port 9000 and you can access Superset at localhost:9000.
+By default, `webpack-dev-server` is configured for flask running at port 8088.
+
+If you start flask server at another port (e.g. 8081), you have to pass an extra argument
+`supersetPort` to `webpack-dev-server`
+
+```bash
+npm run dev-server -- --supersetPort=8081
+```
+
+You can also specify port for `webpack-dev-server`
+
+```bash
+npm run dev-server -- --port=9001
+# or with both dev-server port and superset port
+npm run dev-server -- --port=9001 --supersetPort=8081
 ```
 
 #### Upgrading npm packages

superset/assets/package.json

@@ -12,6 +12,7 @@
     "test:one": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js",
     "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --compilers babel-core/register --require spec/helpers/browser.js --require ignore-styles 'spec/**/*_spec.*'",
     "dev": "webpack --mode=development --colors --progress --debug --watch",
+    "dev-server": "webpack-dev-server --mode=development --progress",
     "prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
     "build": "webpack --mode=production --colors --progress",
     "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
@@ -44,9 +45,13 @@
   "homepage": "http://superset.apache.org/",
   "dependencies": {
     "@data-ui/event-flow": "^0.0.54",
+    "@data-ui/histogram": "^0.0.64",
     "@data-ui/sparkline": "^0.0.54",
+    "@data-ui/theme": "^0.0.62",
     "@data-ui/xy-chart": "^0.0.61",
-    "@vx/responsive": "0.0.153",
+    "@vx/legend": "^0.0.170",
+    "@vx/responsive": "0.0.172",
+    "@vx/scale": "^0.0.165",
     "babel-register": "^6.24.1",
     "bootstrap": "^3.3.6",
     "bootstrap-slider": "^10.0.0",
@@ -154,8 +159,10 @@
     "less": "^2.6.1",
     "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.4.0",
-    "mocha": "^3.2.0",
+    "minimist": "^1.2.0",
+    "mocha": "^3.5.3",
     "npm-check-updates": "^2.14.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "po2json": "^0.4.5",
     "prettier": "^1.12.1",
     "react-addons-test-utils": "^15.6.2",
@@ -169,6 +176,7 @@
     "webpack": "^4.6.0",
     "webpack-assets-manifest": "^3.0.1",
     "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.7",
     "webpack-sources": "^1.1.0"
   }
 }

superset/assets/spec/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+  }
+}

superset/assets/spec/helpers/browser.js

@@ -30,6 +30,10 @@ global.navigator = {
   appName: 'Netscape',
 };
 
+// Fix `Option is not defined`
+// https://stackoverflow.com/questions/39501589/jsdom-option-is-not-defined-when-running-my-mocha-test
+global.Option = window.Option;
+
 // Configuration copied from https://github.com/sinonjs/sinon/issues/657
 // allowing for sinon.fakeServer to work
 

superset/assets/spec/javascripts/visualizations/table_spec.jsx

@@ -0,0 +1,101 @@
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import $ from 'jquery';
+import '../../helpers/browser';
+import tableVis from '../../../src/visualizations/table';
+
+describe('table viz', () => {
+  const div = '<div id="slice-container"><div class="dataTables_wrapper"></div></div>';
+  const baseSlice = {
+    selector: '#slice-container',
+    formData: {
+      metrics: ['count'],
+      timeseries_limit_metric: null,
+    },
+    datasource: {
+      verbose_map: {},
+    },
+    getFilters: () => ({}),
+    removeFilter() {},
+    addFilter() {},
+    height: () => 0,
+  };
+  const basePayload = {
+    data: {
+      records: [
+        { gender: 'boy', count: 39245 },
+        { gender: 'girl', count: 36446 },
+      ],
+      columns: ['gender', 'count'],
+    },
+  };
+
+  it('renders into a container', () => {
+    $('body').html(div);
+    const container = $(baseSlice.selector);
+    expect(container.length).to.equal(1);
+  });
+
+  it('renders header and body datatables in container', () => {
+    $('body').html(div);
+    const container = $(baseSlice.selector);
+
+    expect(container.find('.dataTable').length).to.equal(0);
+    tableVis(baseSlice, basePayload);
+    expect(container.find('.dataTable').length).to.equal(2);
+
+    const tableHeader = container.find('.dataTable')[0];
+    expect($(tableHeader).find('thead tr').length).to.equal(1);
+    expect($(tableHeader).find('th').length).to.equal(2);
+
+    const tableBody = container.find('.dataTable')[1];
+    expect($(tableBody).find('tbody tr').length).to.equal(2);
+    expect($(tableBody).find('th').length).to.equal(2);
+  });
+
+  it('hides the sort by column', () => {
+    $('body').html(div);
+    const slice = { ...baseSlice };
+    slice.formData = { ...baseSlice.formData,
+      timeseries_limit_metric: {
+        label: 'SUM(sum_boys)',
+      },
+    };
+    const payload = {
+      data: {
+        records: [
+          { gender: 'boy', count: 39245, 'SUM(sum_boys)': 48133355 },
+          { gender: 'girl', count: 36446, 'SUM(sum_boys)': 0 },
+        ],
+        columns: ['gender', 'count', 'SUM(sum_boys)'],
+      },
+    };
+    tableVis(slice, payload);
+
+    const container = $(slice.selector);
+    const tableHeader = container.find('.dataTable')[0];
+    expect($(tableHeader).find('th').length).to.equal(2);
+  });
+
+  it('works with empty list for sort by', () => {
+    $('body').html(div);
+    const slice = { ...baseSlice };
+    slice.formData = { ...baseSlice.formData,
+      timeseries_limit_metric: [],
+    };
+    const payload = {
+      data: {
+        records: [
+          { gender: 'boy', count: 39245, 'SUM(sum_boys)': 48133355 },
+          { gender: 'girl', count: 36446, 'SUM(sum_boys)': 0 },
+        ],
+        columns: ['gender', 'count', 'SUM(sum_boys)'],
+      },
+    };
+    tableVis(slice, payload);
+
+    const container = $(slice.selector);
+    const tableBody = container.find('.dataTable')[1];
+    expect($(tableBody).find('th').length).to.equal(3);
+  });
+});

superset/assets/src/chart/Chart.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'react-bootstrap';
 
-import { d3format } from '../modules/utils';
 import ChartBody from './ChartBody';
 import Loading from '../components/Loading';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger';
@@ -167,21 +166,10 @@ class Chart extends React.PureComponent {
     );
   }
 
-  d3format(col, number) {
-    const { datasource } = this.props;
-    const format = (datasource.column_formats && datasource.column_formats[col]) || '0.3s';
-
-    return d3format(format, number);
-  }
-
   error(e) {
     this.props.actions.chartRenderingFailed(e, this.props.chartId);
   }
 
-  verboseMetricName(metric) {
-    return this.props.datasource.verbose_map[metric] || metric;
-  }
-
   renderTooltip() {
     if (this.state.tooltip) {
       return (

superset/assets/src/explore/visTypes.jsx

@@ -756,7 +756,8 @@ export const visTypes = {
       {
         label: t('Arc'),
         controlSetRows: [
-          ['color_picker', null],
+          ['color_picker', 'legend_position'],
+          ['dimension', 'color_scheme'],
           ['stroke_width', null],
         ],
       },
@@ -770,6 +771,16 @@ export const visTypes = {
         ],
       },
     ],
+    controlOverrides: {
+      dimension: {
+        label: t('Categorical Color'),
+        description: t('Pick a dimension from which categorical colors are defined'),
+      },
+      size: {
+        validators: [],
+      },
+      time_grain_sqla: timeGrainSqlaAnimationOverrides,
+    },
   },
 
   deck_scatter: {