superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From grace...@apache.org
Subject [incubator-superset] branch master updated: chart style options get their own tab (#4482)
Date Thu, 01 Mar 2018 22:24:12 GMT
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 <gabe.lyons@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.

Mime
View raw message