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
This commit is contained in:
Krist Wongsuphasawat
2018-10-26 11:38:30 -07:00
committed by Chris Williams
parent 9580103c22
commit 5c02e3199b
45 changed files with 526 additions and 2681 deletions

View File

@@ -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: {},
},
getFilters: () => ({}),
removeFilter() {},
addFilter() {},
width: () => 0,
height: () => 0,
};
const basePayload = {
data: {
records: [
{ gender: 'boy', count: 39245 },
{ gender: 'girl', count: 36446 },
],
columns: ['gender', 'count'],
onAddFilter() {},
payload: {
data: {
records: [
{ gender: 'boy', count: 39245 },
{ gender: 'girl', count: 36446 },
],
columns: ['gender', 'count'],
},
},
};
it('renders into a container', () => {
const PAYLOAD2 = {
data: {
records: [
{ gender: 'boy', count: 39245, 'SUM(sum_boys)': 48133355 },
{ gender: 'girl', count: 36446, 'SUM(sum_boys)': 0 },
],
columns: ['gender', 'count', 'SUM(sum_boys)'],
},
};
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 into a container', () => {
expect($container.children()).toHaveLength(0);
Table(container, transformProps(BASE_CHART_PROPS));
expect($container.children()).toHaveLength(1);
});
it('renders header and body datatables in container', () => {
$('body').html(div);
const container = $(baseSlice.selector);
expect($container.find('.dataTable')).toHaveLength(0);
Table(container, transformProps(BASE_CHART_PROPS));
expect($container.find('.dataTable')).toHaveLength(2);
expect(container.find('.dataTable')).toHaveLength(0);
tableVis(baseSlice, basePayload);
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);
});
});