mirror of
https://github.com/apache/superset.git
synced 2024-09-20 04:29:47 -04:00
38b8db8051
* Carapal react mockup This is really just a mock up written in React to try different components. It could become scaffolding to build a prototype, or not. * Merging in Alanna's theme tweaks for SQL lab * Tweak the display of the alert message in navbar * Sketching the middleware refresh for Queries * Adjustments * Implement timer sync. * CTAS * Refactor the queries to be stored as a dict. (#994) * Download csv endpoint. (#992) * CSV download engdpoint. * Use lower case booleans. * Replcate loop with the object lookup by key. * First changes for the sync * Address comments * Fix query deletions. Update only the queries from the store. * Sync queries using tmp_id. * simplify * Fix the tests in the carapal. (#1023) * Sync queries using tmp_id. * Fix the unit tests * Bux fixes. Pass 2. * Tweakin' & linting * Adding alpha label to the SQL LAb navbar entry * Fixing the python unit tests
171 lines
5.3 KiB
JavaScript
171 lines
5.3 KiB
JavaScript
import React from 'react';
|
|
import { Button, Col, Modal } from 'react-bootstrap';
|
|
|
|
import { connect } from 'react-redux';
|
|
import { bindActionCreators } from 'redux';
|
|
import * as Actions from '../actions';
|
|
|
|
import Select from 'react-select';
|
|
import { Table } from 'reactable';
|
|
import shortid from 'shortid';
|
|
|
|
class VisualizeModal extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
chartType: 'line',
|
|
datasourceName: shortid.generate(),
|
|
columns: {},
|
|
};
|
|
}
|
|
changeChartType(option) {
|
|
this.setState({ chartType: (option) ? option.value : null });
|
|
}
|
|
mergedColumns() {
|
|
const columns = Object.assign({}, this.state.columns);
|
|
if (this.props.query && this.props.query.results.columns) {
|
|
this.props.query.results.columns.forEach((col) => {
|
|
if (columns[col] === undefined) {
|
|
columns[col] = {};
|
|
}
|
|
});
|
|
}
|
|
return columns;
|
|
}
|
|
visualize() {
|
|
const vizOptions = {
|
|
chartType: this.state.chartType,
|
|
datasourceName: this.state.datasourceName,
|
|
columns: this.state.columns,
|
|
sql: this.props.query.sql,
|
|
dbId: this.props.query.dbId,
|
|
};
|
|
window.open('/caravel/sqllab_viz/?data=' + JSON.stringify(vizOptions));
|
|
}
|
|
changeDatasourceName(event) {
|
|
this.setState({ datasourceName: event.target.value });
|
|
}
|
|
changeCheckbox(attr, col, event) {
|
|
let columns = this.mergedColumns();
|
|
const column = Object.assign({}, columns[col], { [attr]: event.target.checked });
|
|
columns = Object.assign({}, columns, { [col]: column });
|
|
this.setState({ columns });
|
|
}
|
|
changeAggFunction(col, option) {
|
|
let columns = this.mergedColumns();
|
|
const val = (option) ? option.value : null;
|
|
const column = Object.assign({}, columns[col], { agg: val });
|
|
columns = Object.assign({}, columns, { [col]: column });
|
|
this.setState({ columns });
|
|
}
|
|
render() {
|
|
if (!(this.props.query)) {
|
|
return <div />;
|
|
}
|
|
const tableData = this.props.query.results.columns.map((col) => ({
|
|
column: col,
|
|
is_dimension: (
|
|
<input
|
|
type="checkbox"
|
|
onChange={this.changeCheckbox.bind(this, 'is_dim', col)}
|
|
checked={(this.state.columns[col]) ? this.state.columns[col].is_dim : false}
|
|
className="form-control"
|
|
/>
|
|
),
|
|
is_date: (
|
|
<input
|
|
type="checkbox"
|
|
className="form-control"
|
|
onChange={this.changeCheckbox.bind(this, 'is_date', col)}
|
|
checked={(this.state.columns[col]) ? this.state.columns[col].is_date : false}
|
|
/>
|
|
),
|
|
agg_func: (
|
|
<Select
|
|
options={[
|
|
{ value: 'sum', label: 'SUM(x)' },
|
|
{ value: 'min', label: 'MIN(x)' },
|
|
{ value: 'max', label: 'MAX(x)' },
|
|
{ value: 'avg', label: 'AVG(x)' },
|
|
{ value: 'count_distinct', label: 'COUNT(DISTINCT x)' },
|
|
]}
|
|
onChange={this.changeAggFunction.bind(this, col)}
|
|
value={(this.state.columns[col]) ? this.state.columns[col].agg : null}
|
|
/>
|
|
),
|
|
}));
|
|
const modal = (
|
|
<div className="VisualizeModal">
|
|
<Modal show={this.props.show} onHide={this.props.onHide}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>
|
|
Visualize <span className="alert alert-danger">under construction</span>
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<div className="row">
|
|
<Col md={6}>
|
|
Chart Type
|
|
<Select
|
|
name="select-chart-type"
|
|
placeholder="[Chart Type]"
|
|
options={[
|
|
{ value: 'line', label: 'Time Series - Line Chart' },
|
|
{ value: 'bar', label: 'Time Series - Bar Chart' },
|
|
{ value: 'bar_dist', label: 'Distribution - Bar Chart' },
|
|
{ value: 'pie', label: 'Pie Chart' },
|
|
]}
|
|
value={this.state.chartType}
|
|
autosize={false}
|
|
onChange={this.changeChartType.bind(this)}
|
|
/>
|
|
</Col>
|
|
<Col md={6}>
|
|
Datasource Name
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="datasource name"
|
|
onChange={this.changeDatasourceName.bind(this)}
|
|
value={this.state.datasourceName}
|
|
/>
|
|
</Col>
|
|
</div>
|
|
<hr />
|
|
<Table
|
|
className="table table-condensed"
|
|
columns={['column', 'is_dimension', 'is_date', 'agg_func']}
|
|
data={tableData}
|
|
/>
|
|
<Button
|
|
onClick={this.visualize.bind(this)}
|
|
bsStyle="primary"
|
|
>
|
|
Visualize
|
|
</Button>
|
|
</Modal.Body>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
return modal;
|
|
}
|
|
}
|
|
VisualizeModal.propTypes = {
|
|
query: React.PropTypes.object,
|
|
show: React.PropTypes.boolean,
|
|
onHide: React.PropTypes.function,
|
|
};
|
|
VisualizeModal.defaultProps = {
|
|
show: false,
|
|
};
|
|
|
|
function mapStateToProps() {
|
|
return {};
|
|
}
|
|
function mapDispatchToProps(dispatch) {
|
|
return {
|
|
actions: bindActionCreators(Actions, dispatch),
|
|
};
|
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(VisualizeModal);
|