Implement SuperChart and enable the chart plugins (#6154)

* setup plugin and add SuperChart

* Integrate SuperChart into Chart.jsx

* Add vizType as class name

* Remove .slice_container

* add snakeCase to sanitize class name

* Remove old code to load charts

* Fix supportedAnnotationTypes

* Update AnnotationTypes, remove unnecessary imports and dependency from VIZ_TYPES

* remove index.js and update unit test

* resolve tree map issue

* fix issue with annotation types

* fix proptypes

* add )

* address a few comments

* create bound functions

* bound more functions

* add reselect

* use reselect for chartprops

* improve performance with reselect

* remove unused props

* Remove getFilters() and update table test

* Remove unused code

* Delete adaptors

* switch to react-loadable

* Rewrite with reloadable

* Add timeout back

* remove loading

* update table unit test

* remove pastDelay

superset/assets/package.json

@@ -104,6 +104,7 @@
     "react-dom": "^16.4.1",
     "react-gravatar": "^2.6.1",
     "react-hot-loader": "^4.3.6",
+    "react-loadable": "^5.5.0",
     "react-map-gl": "^3.0.4",
     "react-markdown": "^3.3.0",
     "react-redux": "^5.0.2",
@@ -122,6 +123,7 @@
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.1.0",
     "redux-undo": "^1.0.0-beta9-9-7",
+    "reselect": "^4.0.0",
     "shortid": "^2.2.6",
     "sprintf-js": "^1.1.1",
     "srcdoc-polyfill": "^1.0.0",

superset/assets/spec/javascripts/dashboard/components/gridComponents/Chart_spec.jsx

@@ -78,10 +78,4 @@ describe('Chart', () => {
     wrapper.instance().addFilter();
     expect(addFilter.callCount).toBe(1);
   });
-
-  it('should return props.filters when its getFilters method is called', () => {
-    const filters = { column: ['value'] };
-    const wrapper = setup({ filters });
-    expect(wrapper.instance().getFilters()).toBe(filters);
-  });
 });

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

@@ -1,100 +1,100 @@
 import $ from 'jquery';
 import '../../helpers/shim';
-import tableVis from '../../../src/visualizations/Table/adaptor';
+import Table from '../../../src/visualizations/Table/Table';
+import transformProps from '../../../src/visualizations/Table/transformProps';
 
 describe('table viz', () => {
-  const div = '<div id="slice-container"><div class="dataTables_wrapper"></div></div>';
-  const baseSlice = {
-    selector: '#slice-container',
+  const div = '<div id="slice-container"></div>';
+  const BASE_CHART_PROPS = {
+    height: 100,
+    datasource: {
+      verboseMap: {},
+    },
+    filters: {},
     formData: {
       metrics: ['count'],
-      timeseries_limit_metric: null,
+      timeseriesLimitMetric: null,
     },
-    datasource: {
-      verbose_map: {},
+    onAddFilter() {},
+    payload: {
+      data: {
+        records: [
+          { gender: 'boy', count: 39245 },
+          { gender: 'girl', count: 36446 },
+        ],
+        columns: ['gender', 'count'],
+      },
     },
-    getFilters: () => ({}),
-    removeFilter() {},
-    addFilter() {},
-    width: () => 0,
-    height: () => 0,
   };
-  const basePayload = {
+
+  const PAYLOAD2 = {
     data: {
       records: [
-        { gender: 'boy', count: 39245 },
-        { gender: 'girl', count: 36446 },
+        { gender: 'boy', count: 39245, 'SUM(sum_boys)': 48133355 },
+        { gender: 'girl', count: 36446, 'SUM(sum_boys)': 0 },
       ],
-      columns: ['gender', 'count'],
+      columns: ['gender', 'count', 'SUM(sum_boys)'],
     },
   };
 
-  it('renders into a container', () => {
+  let container;
+  let $container;
+
+  beforeEach(() => {
     $('body').html(div);
-    const container = $(baseSlice.selector);
-    expect(container).toHaveLength(1);
+    container = document.getElementById('slice-container');
+    $container = $(container);
   });
 
-  it('renders header and body datatables in container', () => {
-    $('body').html(div);
-    const container = $(baseSlice.selector);
+  it('renders into a container', () => {
+    expect($container.children()).toHaveLength(0);
+    Table(container, transformProps(BASE_CHART_PROPS));
+    expect($container.children()).toHaveLength(1);
+  });
 
-    expect(container.find('.dataTable')).toHaveLength(0);
-    tableVis(baseSlice, basePayload);
-    expect(container.find('.dataTable')).toHaveLength(2);
+  it('renders header and body datatables in container', () => {
+    expect($container.find('.dataTable')).toHaveLength(0);
+    Table(container, transformProps(BASE_CHART_PROPS));
+    expect($container.find('.dataTable')).toHaveLength(2);
 
-    const tableHeader = container.find('.dataTable')[0];
+    const tableHeader = $container.find('.dataTable')[0];
     expect($(tableHeader).find('thead tr')).toHaveLength(1);
     expect($(tableHeader).find('th')).toHaveLength(2);
 
-    const tableBody = container.find('.dataTable')[1];
+    const tableBody = $container.find('.dataTable')[1];
     expect($(tableBody).find('tbody tr')).toHaveLength(2);
     expect($(tableBody).find('th')).toHaveLength(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 chartProps = {
+      ...BASE_CHART_PROPS,
+      formData: {
+        ...BASE_CHART_PROPS.formData,
+        timeseriesLimitMetric: {
+          label: 'SUM(sum_boys)',
+        },
       },
+      payload: PAYLOAD2,
     };
-    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];
+    Table(container, transformProps(chartProps));
+    const tableHeader = $container.find('.dataTable')[0];
     expect($(tableHeader).find('th')).toHaveLength(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)'],
+    const chartProps = {
+      ...BASE_CHART_PROPS,
+      formData: {
+        ...BASE_CHART_PROPS.formData,
+        timeseriesLimitMetric: [],
       },
+      payload: PAYLOAD2,
     };
-    tableVis(slice, payload);
 
-    const container = $(slice.selector);
-    const tableBody = container.find('.dataTable')[1];
+    Table(container, transformProps(chartProps));
+    const tableBody = $container.find('.dataTable')[1];
     expect($(tableBody).find('th')).toHaveLength(3);
   });
 });