From e87e3a4487ffc426e25c1895dee0b43f7ff4bd7e Mon Sep 17 00:00:00 2001 From: GabeLoins Date: Mon, 26 Feb 2018 10:57:33 -0800 Subject: [PATCH] chart style options get their own tab --- .../components/ControlPanelsContainer.jsx | 97 ++++++++++++------- .../javascripts/explore/stores/controls.jsx | 4 + .../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 915a04f283f15..71e2bc1032871 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 ( + + {section.controlSetRows.map((controlSets, i) => ( + ( + controlName && + ctrls[controlName] && + + ))} + /> + ))} + + ); + } + 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 (
@@ -64,40 +113,16 @@ class ControlPanelsContainer extends React.Component { /> } - {this.sectionsToRender().map((section) => { - const hasErrors = section.controlSetRows.some(rows => rows.some(s => ( - ctrls[s] && - ctrls[s].validationErrors && - (ctrls[s].validationErrors.length > 0) - ))); - return ( - - {section.controlSetRows.map((controlSets, i) => ( - ( - controlName && - ctrls[controlName] && - - ))} - /> - ))} - ); - })} + + + {querySectionsToRender.map(this.renderControlPanelSection)} + + {displaySectionsToRender.length > 0 && + + {displaySectionsToRender.map(this.renderControlPanelSection)} + + } +
); diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx index 22b8b32365cb0..428f9da6d01c4 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 3135b2613dc72..7b2add681135b 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'], @@ -686,16 +699,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'], @@ -879,6 +893,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['treemap_ratio'], @@ -927,6 +942,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['whisker_options'], @@ -948,6 +964,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['show_legend', null], @@ -961,6 +978,7 @@ export const visTypes = { }, { label: t('X Axis'), + expanded: true, controlSetRows: [ ['x_axis_label', 'left_margin'], ['x', 'x_axis_format'], @@ -969,6 +987,7 @@ export const visTypes = { }, { label: t('Y Axis'), + expanded: true, controlSetRows: [ ['y_axis_label', 'bottom_margin'], ['y', 'y_axis_format'], @@ -999,6 +1018,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['metric'], ['ranges', 'range_labels'], @@ -1021,6 +1041,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['compare_lag', 'compare_suffix'], ['y_axis_format', null], @@ -1046,6 +1067,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['subheader'], ['y_axis_format'], @@ -1072,6 +1094,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ['link_length'], @@ -1105,6 +1128,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ], @@ -1143,6 +1167,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['color_scheme'], ], @@ -1196,6 +1221,7 @@ export const visTypes = { }, { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['y_axis_format', null], ['color_scheme'], @@ -1407,6 +1433,7 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), + expanded: true, controlSetRows: [ ['series_height', 'horizon_color_scale'], ], @@ -1555,7 +1582,7 @@ export const visTypes = { sections.NVD3TimeSeries[0], { label: t('Chart Options'), - expanded: false, + expanded: true, controlSetRows: [ ['color_scheme'], ['number_format', 'date_time_format'],