[explore] improve metric(s) and groupby(s) controls (#2921)

* [explore] improve metric(s) and groupby(s) controls

- surface verbose_name, description & expression in controls
- [table viz] surface verbose name in table header

* Fixing tests

* Addressing comments

* Fixing tests (once more)
This commit is contained in:
Maxime Beauchemin
2017-06-09 11:29:55 -07:00
committed by GitHub
parent 34f381bc25
commit 16141ecb94
14 changed files with 275 additions and 29 deletions

View File

@@ -69,14 +69,15 @@ class ChartContainer extends React.PureComponent {
getMockedSliceObject() {
const props = this.props;
const getHeight = () => {
const headerHeight = this.props.standalone ? 0 : 100;
const headerHeight = props.standalone ? 0 : 100;
return parseInt(props.height, 10) - headerHeight;
};
return {
viewSqlQuery: this.props.queryResponse.query,
viewSqlQuery: props.queryResponse.query,
containerId: props.containerId,
datasource: props.datasource,
selector: this.state.selector,
formData: this.props.formData,
formData: props.formData,
container: {
html: (data) => {
// this should be a callback to clear the contents of the slice container
@@ -128,10 +129,9 @@ class ChartContainer extends React.PureComponent {
},
data: {
csv_endpoint: getExploreUrl(this.props.formData, 'csv'),
json_endpoint: getExploreUrl(this.props.formData, 'json'),
standalone_endpoint: getExploreUrl(
this.props.formData, 'standalone'),
csv_endpoint: getExploreUrl(props.formData, 'csv'),
json_endpoint: getExploreUrl(props.formData, 'json'),
standalone_endpoint: getExploreUrl(props.formData, 'standalone'),
},
};
@@ -308,6 +308,7 @@ function mapStateToProps(state) {
chartStatus: state.chartStatus,
chartUpdateEndTime: state.chartUpdateEndTime,
chartUpdateStartTime: state.chartUpdateStartTime,
datasource: state.datasource,
column_formats: state.datasource ? state.datasource.column_formats : null,
containerId: state.slice ? `slice-container-${state.slice.slice_id}` : 'slice-container',
formData,

View File

@@ -15,6 +15,10 @@ const propTypes = {
onChange: PropTypes.func,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
showHeader: PropTypes.bool,
optionRenderer: PropTypes.func,
valueRenderer: PropTypes.func,
valueKey: PropTypes.string,
options: PropTypes.array,
};
const defaultProps = {
@@ -27,6 +31,9 @@ const defaultProps = {
multi: false,
onChange: () => {},
showHeader: true,
optionRenderer: opt => opt.label,
valueRenderer: opt => opt.label,
valueKey: 'value',
};
export default class SelectControl extends React.PureComponent {
@@ -42,14 +49,17 @@ export default class SelectControl extends React.PureComponent {
}
}
onChange(opt) {
let optionValue = opt ? opt.value : null;
let optionValue = opt ? opt[this.props.valueKey] : null;
// if multi, return options values as an array
if (this.props.multi) {
optionValue = opt ? opt.map(o => o.value) : null;
optionValue = opt ? opt.map(o => o[this.props.valueKey]) : null;
}
this.props.onChange(optionValue);
}
getOptions(props) {
if (props.options) {
return props.options;
}
// Accepts different formats of input
const options = props.choices.map((c) => {
let option;
@@ -94,11 +104,13 @@ export default class SelectControl extends React.PureComponent {
placeholder: `Select (${this.state.options.length})`,
options: this.state.options,
value: this.props.value,
valueKey: this.props.valueKey,
autosize: false,
clearable: this.props.clearable,
isLoading: this.props.isLoading,
onChange: this.onChange,
optionRenderer: opt => opt.label,
optionRenderer: this.props.optionRenderer,
valueRenderer: this.props.valueRenderer,
};
// Tab, comma or Enter will trigger a new option created for FreeFormSelect
const selectWrap = this.props.freeForm ?