You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by gr...@apache.org on 2018/03/01 22:24:12 UTC
[incubator-superset] branch master updated: chart style options get
their own tab (#4482)
This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 79bb54a chart style options get their own tab (#4482)
79bb54a is described below
commit 79bb54a173c895ca439480f08388f27533eee33d
Author: Gabe Lyons <ga...@airbnb.com>
AuthorDate: Thu Mar 1 14:24:09 2018 -0800
chart style options get their own tab (#4482)
---
.../explore/components/ControlPanelsContainer.jsx | 97 ++++++++++++++--------
.../assets/javascripts/explore/stores/controls.jsx | 4 +
.../assets/javascripts/explore/stores/visTypes.js | 47 ++++++++---
3 files changed, 102 insertions(+), 46 deletions(-)
diff --git a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
index 915a04f..71e2bc1 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
+++ b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
@@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
-import { Alert } from 'react-bootstrap';
+import { Alert, Tab, Tabs } from 'react-bootstrap';
import visTypes, { sectionsToRender } from '../stores/visTypes';
import ControlPanelSection from './ControlPanelSection';
import ControlRow from './ControlRow';
@@ -26,6 +26,7 @@ class ControlPanelsContainer extends React.Component {
super(props);
this.removeAlert = this.removeAlert.bind(this);
this.getControlData = this.getControlData.bind(this);
+ this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
}
getControlData(controlName) {
const control = this.props.controls[controlName];
@@ -49,8 +50,56 @@ class ControlPanelsContainer extends React.Component {
removeAlert() {
this.props.actions.removeControlPanelAlert();
}
- render() {
+ renderControlPanelSection(section) {
const ctrls = this.props.controls;
+ const hasErrors = section.controlSetRows.some(rows => rows.some(s => (
+ ctrls[s] &&
+ ctrls[s].validationErrors &&
+ (ctrls[s].validationErrors.length > 0)
+ )));
+ return (
+ <ControlPanelSection
+ key={section.label}
+ label={section.label}
+ startExpanded={section.expanded}
+ hasErrors={hasErrors}
+ description={section.description}
+ >
+ {section.controlSetRows.map((controlSets, i) => (
+ <ControlRow
+ key={`controlsetrow-${i}`}
+ className="control-row"
+ controls={controlSets.map(controlName => (
+ controlName &&
+ ctrls[controlName] &&
+ <Control
+ name={controlName}
+ key={`control-${controlName}`}
+ value={this.props.form_data[controlName]}
+ validationErrors={ctrls[controlName].validationErrors}
+ actions={this.props.actions}
+ {...this.getControlData(controlName)}
+ />
+ ))}
+ />
+ ))}
+ </ControlPanelSection>
+ );
+ }
+ render() {
+ const allSectionsToRender = this.sectionsToRender();
+ const querySectionsToRender = [];
+ const displaySectionsToRender = [];
+ allSectionsToRender.forEach((section) => {
+ if (section.controlSetRows.some(rows => rows.some(
+ control => controls[control] && !controls[control].renderTrigger,
+ ))) {
+ querySectionsToRender.push(section);
+ } else {
+ displaySectionsToRender.push(section);
+ }
+ });
+
return (
<div className="scrollbar-container">
<div className="scrollbar-content">
@@ -64,40 +113,16 @@ class ControlPanelsContainer extends React.Component {
/>
</Alert>
}
- {this.sectionsToRender().map((section) => {
- const hasErrors = section.controlSetRows.some(rows => rows.some(s => (
- ctrls[s] &&
- ctrls[s].validationErrors &&
- (ctrls[s].validationErrors.length > 0)
- )));
- return (
- <ControlPanelSection
- key={section.label}
- label={section.label}
- startExpanded={section.expanded}
- hasErrors={hasErrors}
- description={section.description}
- >
- {section.controlSetRows.map((controlSets, i) => (
- <ControlRow
- key={`controlsetrow-${i}`}
- className="control-row"
- controls={controlSets.map(controlName => (
- controlName &&
- ctrls[controlName] &&
- <Control
- name={controlName}
- key={`control-${controlName}`}
- value={this.props.form_data[controlName]}
- validationErrors={ctrls[controlName].validationErrors}
- actions={this.props.actions}
- {...this.getControlData(controlName)}
- />
- ))}
- />
- ))}
- </ControlPanelSection>);
- })}
+ <Tabs id="controlSections">
+ <Tab eventKey="query" title="Data">
+ {querySectionsToRender.map(this.renderControlPanelSection)}
+ </Tab>
+ {displaySectionsToRender.length > 0 &&
+ <Tab eventKey="display" title="Style">
+ {displaySectionsToRender.map(this.renderControlPanelSection)}
+ </Tab>
+ }
+ </Tabs>
</div>
</div>
);
diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx
index a15333e..5e2c44e 100644
--- a/superset/assets/javascripts/explore/stores/controls.jsx
+++ b/superset/assets/javascripts/explore/stores/controls.jsx
@@ -229,6 +229,7 @@ export const controls = {
stacked_style: {
type: 'SelectControl',
label: t('Stacked Style'),
+ renderTrigger: true,
choices: [
['stack', 'stack'],
['stream', 'stream'],
@@ -389,6 +390,7 @@ export const controls = {
type: 'CheckboxControl',
label: t('Sort Bars'),
default: false,
+ renderTrigger: true,
description: t('Sort bars by x labels.'),
},
@@ -846,6 +848,7 @@ export const controls = {
treemap_ratio: {
type: 'TextControl',
label: t('Ratio'),
+ renderTrigger: true,
isFloat: true,
default: 0.5 * (1 + Math.sqrt(5)), // d3 default, golden ratio
description: t('Target aspect ratio for treemap tiles.'),
@@ -1183,6 +1186,7 @@ export const controls = {
type: 'SelectControl',
label: t('Label Type'),
default: 'key',
+ renderTrigger: true,
choices: [
['key', 'Category Name'],
['value', 'Value'],
diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js
index a41b81b..df00bc5 100644
--- a/superset/assets/javascripts/explore/stores/visTypes.js
+++ b/superset/assets/javascripts/explore/stores/visTypes.js
@@ -59,7 +59,7 @@ export const sections = {
['metrics'],
['groupby'],
['limit', 'timeseries_limit_metric'],
- ['order_desc', null],
+ ['order_desc', 'contribution'],
],
},
{
@@ -104,18 +104,19 @@ export const visTypes = {
['groupby'],
['columns'],
['row_limit'],
+ ['contribution'],
],
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['show_legend', 'show_bar_value'],
['bar_stacked', 'order_bars'],
['y_axis_format', 'bottom_margin'],
['x_axis_label', 'y_axis_label'],
- ['reduce_x_ticks', 'contribution'],
- ['show_controls'],
+ ['reduce_x_ticks', 'show_controls'],
],
},
],
@@ -144,6 +145,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['pie_label_type'],
['donut', 'show_legend'],
@@ -162,15 +164,17 @@ export const visTypes = {
sections.NVD3TimeSeries[0],
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['show_brush', 'show_legend'],
['rich_tooltip', 'show_markers'],
- ['line_interpolation', 'contribution'],
+ ['line_interpolation'],
],
},
{
label: t('X Axis'),
+ expanded: true,
controlSetRows: [
['x_axis_label', 'bottom_margin'],
['x_axis_showminmax', 'x_axis_format'],
@@ -178,6 +182,7 @@ export const visTypes = {
},
{
label: t('Y Axis'),
+ expanded: true,
controlSetRows: [
['y_axis_label', 'left_margin'],
['y_axis_showminmax', 'y_log_scale'],
@@ -217,6 +222,7 @@ export const visTypes = {
},
{
label: t('X Axis'),
+ expanded: true,
controlSetRows: [
['x_axis_label', 'bottom_margin'],
['x_axis_showminmax', 'x_axis_format'],
@@ -224,6 +230,7 @@ export const visTypes = {
},
{
label: t('Y Axis'),
+ expanded: true,
controlSetRows: [
['y_axis_label', 'left_margin'],
['y_axis_showminmax', 'y_log_scale'],
@@ -245,6 +252,7 @@ export const visTypes = {
controlPanelSections: [
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['x_axis_format'],
@@ -252,12 +260,14 @@ export const visTypes = {
},
{
label: t('Y Axis 1'),
+ expanded: true,
controlSetRows: [
['metric', 'y_axis_format'],
],
},
{
label: t('Y Axis 2'),
+ expanded: true,
controlSetRows: [
['metric_2', 'y_axis_2_format'],
],
@@ -287,16 +297,18 @@ export const visTypes = {
sections.NVD3TimeSeries[0],
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['show_brush', 'show_legend', 'show_bar_value'],
- ['rich_tooltip', 'contribution'],
- ['line_interpolation', 'bar_stacked'],
- ['bottom_margin', 'show_controls'],
+ ['rich_tooltip', 'bar_stacked'],
+ ['line_interpolation', 'show_controls'],
+ ['bottom_margin'],
],
},
{
label: t('Axes'),
+ expanded: true,
controlSetRows: [
['x_axis_format', 'y_axis_format'],
['x_axis_showminmax', 'reduce_x_ticks'],
@@ -322,6 +334,7 @@ export const visTypes = {
sections.NVD3TimeSeries[0],
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['x_axis_format', 'y_axis_format'],
@@ -698,16 +711,17 @@ export const visTypes = {
sections.NVD3TimeSeries[0],
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['show_brush', 'show_legend'],
['line_interpolation', 'stacked_style'],
['color_scheme'],
- ['rich_tooltip', 'contribution'],
- ['show_controls', null],
+ ['rich_tooltip', 'show_controls'],
],
},
{
label: t('Axes'),
+ expanded: true,
controlSetRows: [
['x_axis_format', 'x_axis_showminmax'],
['y_axis_format', 'y_axis_bounds'],
@@ -891,6 +905,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['treemap_ratio'],
@@ -939,6 +954,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['whisker_options'],
@@ -960,6 +976,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['show_legend', null],
@@ -973,6 +990,7 @@ export const visTypes = {
},
{
label: t('X Axis'),
+ expanded: true,
controlSetRows: [
['x_axis_label', 'left_margin'],
['x', 'x_axis_format'],
@@ -981,6 +999,7 @@ export const visTypes = {
},
{
label: t('Y Axis'),
+ expanded: true,
controlSetRows: [
['y_axis_label', 'bottom_margin'],
['y', 'y_axis_format'],
@@ -1011,6 +1030,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['metric'],
['ranges', 'range_labels'],
@@ -1033,6 +1053,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['compare_lag', 'compare_suffix'],
['y_axis_format', null],
@@ -1058,6 +1079,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['subheader'],
['y_axis_format'],
@@ -1084,6 +1106,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
['link_length'],
@@ -1117,6 +1140,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
],
@@ -1155,6 +1179,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['color_scheme'],
],
@@ -1208,6 +1233,7 @@ export const visTypes = {
},
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['y_axis_format', null],
['color_scheme'],
@@ -1419,6 +1445,7 @@ export const visTypes = {
sections.NVD3TimeSeries[0],
{
label: t('Chart Options'),
+ expanded: true,
controlSetRows: [
['series_height', 'horizon_color_scale'],
],
@@ -1567,7 +1594,7 @@ export const visTypes = {
sections.NVD3TimeSeries[0],
{
label: t('Chart Options'),
- expanded: false,
+ expanded: true,
controlSetRows: [
['color_scheme'],
['number_format', 'date_time_format'],
--
To stop receiving notification emails like this one, please contact
graceguo@apache.org.