mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
bugfix: improve 'Time Table' (#6959)
* [WiP] debugging and improving 'Time Table' closes https://github.com/apache/incubator-superset/issues/6948 * Lint * Remove passing down props from CollectionControl * Declarative passthrough of props * remove console.error
This commit is contained in:
parent
14647fc2ed
commit
9b4f5ad8e1
@ -44,6 +44,7 @@ const propTypes = {
|
||||
isFloat: PropTypes.bool,
|
||||
isInt: PropTypes.bool,
|
||||
controlName: PropTypes.string.isRequired,
|
||||
passthroughProps: PropTypes.arrayOf(PropTypes.string),
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
@ -55,6 +56,7 @@ const defaultProps = {
|
||||
keyAccessor: o => o.key,
|
||||
value: [],
|
||||
addTooltip: 'Add an item',
|
||||
passthroughProps: [],
|
||||
};
|
||||
const SortableListGroupItem = SortableElement(ListGroupItem);
|
||||
const SortableListGroup = SortableContainer(ListGroup);
|
||||
@ -84,6 +86,13 @@ export default class CollectionControl extends React.Component {
|
||||
return <div className="text-muted">{this.props.placeholder}</div>;
|
||||
}
|
||||
const Control = controlMap[this.props.controlName];
|
||||
|
||||
// Creating an object to pass the selected props to the children
|
||||
const passthroughPropsObj = {};
|
||||
this.props.passthroughProps.forEach((k) => {
|
||||
passthroughPropsObj[k] = this.props[k];
|
||||
});
|
||||
|
||||
return (
|
||||
<SortableListGroup
|
||||
useDragHandle
|
||||
@ -101,7 +110,7 @@ export default class CollectionControl extends React.Component {
|
||||
</div>
|
||||
<div className="pull-left">
|
||||
<Control
|
||||
{...this.props}
|
||||
{...passthroughPropsObj}
|
||||
{...o}
|
||||
onChange={this.onChange.bind(this, i)}
|
||||
/>
|
||||
|
@ -22,6 +22,7 @@ import {
|
||||
Row, Col, FormControl, OverlayTrigger, Popover,
|
||||
} from 'react-bootstrap';
|
||||
import Select from 'react-select';
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
import InfoTooltipWithTrigger from '../../../components/InfoTooltipWithTrigger';
|
||||
import BoundsControl from './BoundsControl';
|
||||
@ -102,9 +103,9 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
<Popover id="ts-col-popo" title="Column Configuration">
|
||||
<div style={{ width: 300 }}>
|
||||
{this.formRow(
|
||||
'Label',
|
||||
'The column header label',
|
||||
'time-lag',
|
||||
t('Label'),
|
||||
t('The column header label'),
|
||||
'row-label',
|
||||
<FormControl
|
||||
value={this.state.label}
|
||||
onChange={this.onTextInputChange.bind(this, 'label')}
|
||||
@ -113,8 +114,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.formRow(
|
||||
'Tooltip',
|
||||
'Column header tooltip',
|
||||
t('Tooltip'),
|
||||
t('Column header tooltip'),
|
||||
'col-tooltip',
|
||||
<FormControl
|
||||
value={this.state.tooltip}
|
||||
@ -124,8 +125,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.formRow(
|
||||
'Type',
|
||||
'Type of comparison, value difference or percentage',
|
||||
t('Type'),
|
||||
t('Type of comparison, value difference or percentage'),
|
||||
'col-type',
|
||||
<Select
|
||||
value={this.state.colType}
|
||||
@ -136,8 +137,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
)}
|
||||
<hr />
|
||||
{this.state.colType === 'spark' && this.formRow(
|
||||
'Width',
|
||||
'Width of the sparkline',
|
||||
t('Width'),
|
||||
t('Width of the sparkline'),
|
||||
'spark-width',
|
||||
<FormControl
|
||||
value={this.state.width}
|
||||
@ -147,8 +148,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.state.colType === 'spark' && this.formRow(
|
||||
'Height',
|
||||
'Height of the sparkline',
|
||||
t('Height'),
|
||||
t('Height of the sparkline'),
|
||||
'spark-width',
|
||||
<FormControl
|
||||
value={this.state.height}
|
||||
@ -158,8 +159,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{['time', 'avg'].indexOf(this.state.colType) >= 0 && this.formRow(
|
||||
'Time Lag',
|
||||
'Number of periods to compare against',
|
||||
t('Time Lag'),
|
||||
t('Number of periods to compare against'),
|
||||
'time-lag',
|
||||
<FormControl
|
||||
value={this.state.timeLag}
|
||||
@ -169,19 +170,19 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{['spark'].indexOf(this.state.colType) >= 0 && this.formRow(
|
||||
'Time Ratio',
|
||||
'Number of periods to ratio against',
|
||||
t('Time Ratio'),
|
||||
t('Number of periods to ratio against'),
|
||||
'time-ratio',
|
||||
<FormControl
|
||||
value={this.state.timeRatio}
|
||||
onChange={this.onTextInputChange.bind(this, 'timeRatio')}
|
||||
bsSize="small"
|
||||
placeholder="Time Lag"
|
||||
placeholder="Time Ratio"
|
||||
/>,
|
||||
)}
|
||||
{this.state.colType === 'time' && this.formRow(
|
||||
'Type',
|
||||
'Type of comparison, value difference or percentage',
|
||||
t('Type'),
|
||||
t('Type of comparison, value difference or percentage'),
|
||||
'comp-type',
|
||||
<Select
|
||||
value={this.state.comparisonType}
|
||||
@ -191,9 +192,9 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.state.colType === 'spark' && this.formRow(
|
||||
'Show Y-axis',
|
||||
(
|
||||
'Show Y-axis on the sparkline. Will display the manually set min/max if set or min/max values in the data otherwise.'
|
||||
t('Show Y-axis'),
|
||||
t(
|
||||
'Show Y-axis on the sparkline. Will display the manually set min/max if set or min/max values in the data otherwise.',
|
||||
),
|
||||
'show-y-axis-bounds',
|
||||
<CheckboxControl
|
||||
@ -202,9 +203,9 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.state.colType === 'spark' && this.formRow(
|
||||
'Y-axis bounds',
|
||||
(
|
||||
'Manually set min/max values for the y-axis.'
|
||||
t('Y-axis bounds'),
|
||||
t(
|
||||
'Manually set min/max values for the y-axis.',
|
||||
),
|
||||
'y-axis-bounds',
|
||||
<BoundsControl
|
||||
@ -213,11 +214,11 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.state.colType !== 'spark' && this.formRow(
|
||||
'Color bounds',
|
||||
(
|
||||
t('Color bounds'),
|
||||
t(
|
||||
`Number bounds used for color encoding from red to blue.
|
||||
Reverse the numbers for blue to red. To get pure red or blue,
|
||||
you can enter either only min or max.`
|
||||
you can enter either only min or max.`,
|
||||
),
|
||||
'bounds',
|
||||
<BoundsControl
|
||||
@ -226,8 +227,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.formRow(
|
||||
'Number format',
|
||||
'Optional d3 number format string',
|
||||
t('Number format'),
|
||||
t('Optional d3 number format string'),
|
||||
'd3-format',
|
||||
<FormControl
|
||||
value={this.state.d3format}
|
||||
@ -237,8 +238,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
||||
/>,
|
||||
)}
|
||||
{this.state.colType === 'spark' && this.formRow(
|
||||
'Date format',
|
||||
'Optional d3 date format string',
|
||||
t('Date format'),
|
||||
t('Optional d3 date format string'),
|
||||
'date-format',
|
||||
<FormControl
|
||||
value={this.state.dateFormat}
|
||||
|
@ -41,6 +41,7 @@ export default {
|
||||
description: t(
|
||||
"Templated link, it's possible to include {{ metric }} " +
|
||||
'or other values coming from the controls.'),
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -2322,6 +2322,7 @@ export const controls = {
|
||||
description: t('Filter configuration for the filter box'),
|
||||
validators: [],
|
||||
controlName: 'FilterBoxItemControl',
|
||||
passthroughProps: ['datasource'],
|
||||
mapStateToProps: ({ datasource }) => ({ datasource }),
|
||||
},
|
||||
|
||||
|
@ -50,6 +50,9 @@ export default function getClientErrorObject(response) {
|
||||
resolve({ ...response, error: errorText });
|
||||
});
|
||||
});
|
||||
} else if (typeof (response) === 'object' && Object.keys(response).length === 0) {
|
||||
// Weird empty object that can get converted to string
|
||||
resolve({ ...response, error: String(response) });
|
||||
} else {
|
||||
// fall back to Response.statusText or generic error of we cannot read the response
|
||||
resolve({ ...response, error: response.statusText || t('An error occurred') });
|
||||
|
Loading…
Reference in New Issue
Block a user