chart style options get their own tab (#4482)
This commit is contained in:
Gabe Lyons
Grace Guo
parent
3a58dc7ecf
commit
79bb54a173
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
Loading…
Reference in New Issue