QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement SuperChart and enable the chart plugins (#6154)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

81
superset/assets/spec/javascripts/chart/Chart_spec.jsx
View File

@@ -1,81 +0,0 @@
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import { chart as initChart } from '../../../src/chart/chartReducer';
import Chart from '../../../src/chart/Chart';
import ChartBody from '../../../src/chart/ChartBody';
import Loading from '../../../src/components/Loading';
describe('Chart', () => {
const chart = {
...initChart,
queryResponse: {
form_data: {},
error: null,
status: 'success',
},
};
const mockedProps = {
...chart,
id: 223,
containerId: 'slice-container-223',
datasource: {},
formData: {},
vizType: 'pie',
height: 300,
width: 400,
actions: {
runQuery: () => {},
},
};
let wrapper;
beforeEach(() => {
wrapper = shallow(
<Chart {...mockedProps} />,
);
});
describe('renderVis', () => {
let stub;
beforeEach(() => {
stub = sinon.stub(wrapper.instance(), 'renderVis');
});
afterEach(() => {
stub.restore();
});
it('should not call when loading', () => {
const prevProp = wrapper.props();
wrapper.setProps({
height: 100,
});
wrapper.instance().componentDidUpdate(prevProp);
expect(stub.callCount).toBe(0);
});
it('should call after chart stop loading', () => {
const prevProp = wrapper.props();
wrapper.setProps({
chartStatus: 'success',
});
wrapper.instance().componentDidUpdate(prevProp);
expect(stub.callCount).toBe(1);
});
it('should call after resize', () => {
wrapper.setProps({
chartStatus: 'rendered',
height: 100,
});
expect(stub.callCount).toBe(1);
});
});
describe('render', () => {
it('should render ChartBody after loading is completed', () => {
expect(wrapper.find(Loading)).toHaveLength(1);
expect(wrapper.find(ChartBody)).toHaveLength(0);
});
});
});

6
superset/assets/spec/javascripts/dashboard/components/gridComponents/Chart_spec.jsx
View File

@@ -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);
});
});

128
superset/assets/spec/javascripts/visualizations/table_spec.jsx
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);
});
});