mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
Get sections to render when switching datasource (#1660)
* Get sections to render when switching datasource - Move sectionsToRender in store and use is for defaultFormData - Change some SelectField to FreeFormSelect according to forms.py * Solved the css not found problem in staging * Fixed js tests
This commit is contained in:
parent
bdae570a69
commit
6b80f5bb35
@ -105,8 +105,8 @@ export function changeFilterValue(filter, value) {
|
||||
}
|
||||
|
||||
export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';
|
||||
export function setFieldValue(key, value, label) {
|
||||
return { type: SET_FIELD_VALUE, key, value, label };
|
||||
export function setFieldValue(datasource_type, key, value, label) {
|
||||
return { type: SET_FIELD_VALUE, datasource_type, key, value, label };
|
||||
}
|
||||
|
||||
export const UPDATE_CHART = 'UPDATE_CHART';
|
||||
|
@ -182,12 +182,14 @@ class ChartContainer extends React.Component {
|
||||
/>
|
||||
</Alert>
|
||||
}
|
||||
{!this.props.isChartLoading &&
|
||||
<div
|
||||
{this.props.isChartLoading ?
|
||||
(<img alt="loading" width="25" src="/static/assets/images/loading.gif" />)
|
||||
:
|
||||
(<div
|
||||
id={this.props.containerId}
|
||||
ref={(ref) => { this.chartContainerRef = ref; }}
|
||||
className={this.props.viz_type}
|
||||
/>
|
||||
/>)
|
||||
}
|
||||
</Panel>
|
||||
</div>
|
||||
|
@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux';
|
||||
import * as actions from '../actions/exploreActions';
|
||||
import { connect } from 'react-redux';
|
||||
import { Panel, Alert } from 'react-bootstrap';
|
||||
import { visTypes, commonControlPanelSections } from '../stores/store';
|
||||
import { visTypes, sectionsToRender } from '../stores/store';
|
||||
import ControlPanelSection from './ControlPanelSection';
|
||||
import FieldSetRow from './FieldSetRow';
|
||||
|
||||
@ -37,17 +37,11 @@ class ControlPanelsContainer extends React.Component {
|
||||
}
|
||||
|
||||
onChange(name, value, label) {
|
||||
this.props.actions.setFieldValue(name, value, label);
|
||||
this.props.actions.setFieldValue(this.props.datasource_type, name, value, label);
|
||||
}
|
||||
|
||||
sectionsToRender() {
|
||||
const viz = visTypes[this.props.form_data.viz_type];
|
||||
const timeSection = this.props.datasource_type === 'table' ?
|
||||
commonControlPanelSections.sqlaTimeSeries : commonControlPanelSections.druidTimeSeries;
|
||||
const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
|
||||
const sectionsToRender = [datasourceAndVizType].concat(
|
||||
viz.controlPanelSections, timeSection, sqlClause);
|
||||
return sectionsToRender;
|
||||
return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type);
|
||||
}
|
||||
|
||||
fieldOverrides() {
|
||||
|
@ -69,7 +69,8 @@ export const exploreReducer = function (state, action) {
|
||||
},
|
||||
[actions.SET_FIELD_VALUE]() {
|
||||
const newFormData = action.key === 'datasource' ?
|
||||
defaultFormData(state.viz.form_data.viz_type) : Object.assign({}, state.viz.form_data);
|
||||
defaultFormData(state.viz.form_data.viz_type, action.datasource_type) :
|
||||
Object.assign({}, state.viz.form_data);
|
||||
if (action.key === 'datasource') {
|
||||
newFormData.datasource_name = action.label;
|
||||
newFormData.slice_id = state.viz.form_data.slice_id;
|
||||
|
@ -1,3 +1,4 @@
|
||||
/* eslint camelcase: 0 */
|
||||
import { formatSelectOptionsForRange, formatSelectOptions } from '../../modules/utils';
|
||||
|
||||
export const fieldTypes = [
|
||||
@ -969,7 +970,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
druid_time_origin: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Origin',
|
||||
choices: [
|
||||
['', 'default'],
|
||||
@ -981,7 +982,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
bottom_margin: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Bottom Margin',
|
||||
choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
|
||||
default: 'auto',
|
||||
@ -989,7 +990,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
granularity: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Time Granularity',
|
||||
default: 'one day',
|
||||
choices: formatSelectOptions([
|
||||
@ -1030,7 +1031,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
link_length: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Link Length',
|
||||
default: '200',
|
||||
choices: formatSelectOptions(['10', '25', '50', '75', '100', '150', '200', '250']),
|
||||
@ -1089,7 +1090,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
resample_how: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Resample How',
|
||||
default: null,
|
||||
choices: formatSelectOptions(['', 'mean', 'sum', 'median']),
|
||||
@ -1097,7 +1098,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
resample_fillmethod: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Resample Fill Method',
|
||||
default: null,
|
||||
choices: formatSelectOptions(['', 'ffill', 'bfill']),
|
||||
@ -1105,7 +1106,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
since: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Since',
|
||||
default: '7 days ago',
|
||||
choices: formatSelectOptions([
|
||||
@ -1123,7 +1124,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
until: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Until',
|
||||
default: 'now',
|
||||
choices: formatSelectOptions([
|
||||
@ -1137,14 +1138,14 @@ export const fields = {
|
||||
},
|
||||
|
||||
max_bubble_size: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Max Bubble Size',
|
||||
default: '25',
|
||||
choices: formatSelectOptions(['5', '10', '15', '25', '50', '75', '100']),
|
||||
},
|
||||
|
||||
whisker_options: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Whisker/outlier options',
|
||||
default: 'Tukey',
|
||||
description: 'Determines how whiskers and outliers are calculated.',
|
||||
@ -1164,7 +1165,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
number_format: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Number format',
|
||||
default: D3_TIME_FORMAT_OPTIONS[0],
|
||||
choices: D3_TIME_FORMAT_OPTIONS,
|
||||
@ -1172,14 +1173,14 @@ export const fields = {
|
||||
},
|
||||
|
||||
row_limit: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Row limit',
|
||||
default: null,
|
||||
choices: formatSelectOptions(ROW_LIMIT_OPTIONS),
|
||||
},
|
||||
|
||||
limit: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Series limit',
|
||||
choices: formatSelectOptions(SERIES_LIMITS),
|
||||
default: 50,
|
||||
@ -1305,7 +1306,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
table_timestamp_format: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'Table Timestamp Format',
|
||||
default: 'smart_date',
|
||||
choices: TIME_STAMP_OPTIONS,
|
||||
@ -1657,7 +1658,7 @@ export const fields = {
|
||||
},
|
||||
|
||||
mapbox_color: {
|
||||
type: 'SelectField',
|
||||
type: 'FreeFormSelectField',
|
||||
label: 'RGB Color',
|
||||
default: 'rgb(0, 122, 135)',
|
||||
choices: [
|
||||
@ -1672,16 +1673,24 @@ export const fields = {
|
||||
},
|
||||
};
|
||||
|
||||
export function defaultFormData(vizType = 'table') {
|
||||
export function sectionsToRender(vizType, datasourceType) {
|
||||
const viz = visTypes[vizType];
|
||||
const timeSection = datasourceType === 'table' ?
|
||||
commonControlPanelSections.sqlaTimeSeries : commonControlPanelSections.druidTimeSeries;
|
||||
const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
|
||||
const sections = [datasourceAndVizType].concat(
|
||||
viz.controlPanelSections, timeSection, sqlClause);
|
||||
return sections;
|
||||
}
|
||||
|
||||
export function defaultFormData(vizType = 'table', datasourceType = 'table') {
|
||||
const data = {
|
||||
slice_name: null,
|
||||
slice_id: null,
|
||||
datasource_name: null,
|
||||
};
|
||||
const { datasourceAndVizType, sqlClause } = commonControlPanelSections;
|
||||
const viz = visTypes[vizType];
|
||||
const sectionsToRender = [datasourceAndVizType].concat(viz.controlPanelSections, sqlClause);
|
||||
sectionsToRender.forEach((section) => {
|
||||
const sections = sectionsToRender(vizType, datasourceType);
|
||||
sections.forEach((section) => {
|
||||
section.fieldSetRows.forEach((fieldSetRow) => {
|
||||
fieldSetRow.forEach((k) => {
|
||||
data[k] = fields[k].default;
|
||||
|
@ -7,11 +7,12 @@ import { exploreReducer } from '../../../javascripts/explorev2/reducers/exploreR
|
||||
describe('reducers', () => {
|
||||
it('sets correct field value given a key and value', () => {
|
||||
const newState = exploreReducer(
|
||||
initialState('dist_bar'), actions.setFieldValue('x_axis_label', 'x'));
|
||||
initialState('dist_bar'), actions.setFieldValue('table', 'x_axis_label', 'x'));
|
||||
expect(newState.viz.form_data.x_axis_label).to.equal('x');
|
||||
});
|
||||
it('toggles a boolean field value given only a key', () => {
|
||||
const newState = exploreReducer(initialState('dist_bar'), actions.setFieldValue('show_legend'));
|
||||
const newState = exploreReducer(initialState('dist_bar'),
|
||||
actions.setFieldValue('table', 'show_legend'));
|
||||
expect(newState.viz.form_data.show_legend).to.equal(false);
|
||||
});
|
||||
});
|
||||
|
@ -9,7 +9,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/explorev2/explorev2.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/explorev2.css">
|
||||
<div
|
||||
id="js-explore-view-container"
|
||||
data-bootstrap="{{ bootstrap_data }}"
|
||||
|
Loading…
Reference in New Issue
Block a user