[explore-v2] setup, basic layout, control panels, v2 url (#1233)

* Explore control panel - Chart control, TimeFilter, GroupBy, Filters (#1205) * create structure for new forked explore view (#1099) * create structure for new forked explore view * update component name * add bootstrap data pattern * remove console.log * Associate version to entry files (#1060) * Associate version to entry files * Modified path joins for configs * Made changes based on comments * Created store and reducers (#1108) * Created store and reducers * Added spec * Modifications based on comments * Explore control panel components: Chart control, Time filter, SQL, GroupBy and Filters * Modifications based on comments * accommodate old and new explore urls * move bootstrap data up in scope * fix code climate issues * fix long lines * fix syntax error
2026-04-22 01:24:43 +00:00 · 2016-10-03 22:47:39 -07:00
parent d8638dbcf3
commit e6e902e8df
20 changed files with 1292 additions and 1 deletions
--- a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
+++ b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import Select from 'react-select';
+import { bindActionCreators } from 'redux';
+import * as actions from '../actions/exploreActions';
+import { connect } from 'react-redux';
+import { VIZ_TYPES } from '../constants';
+
+const propTypes = {
+  actions: React.PropTypes.object,
+  datasources: React.PropTypes.array,
+  datasourceId: React.PropTypes.number,
+  datasourceType: React.PropTypes.string,
+  vizType: React.PropTypes.string,
+};
+
+const defaultProps = {
+  datasources: [],
+  datasourceId: null,
+  datasourceType: null,
+  vizType: null,
+};
+
+class ChartControl extends React.Component {
+  componentWillMount() {
+    if (this.props.datasourceId) {
+      this.props.actions.setFormOpts(this.props.datasourceId, this.props.datasourceType);
+    }
+  }
+  changeDatasource(datasourceOpt) {
+    const val = (datasourceOpt) ? datasourceOpt.value : null;
+    this.props.actions.setDatasource(val);
+    this.props.actions.resetFormData();
+    this.props.actions.setFormOpts(val, this.props.datasourceType);
+  }
+  changeViz(vizOpt) {
+    const val = (vizOpt) ? vizOpt.value : null;
+    this.props.actions.setVizType(val);
+  }
+  render() {
+    return (
+      <div className="panel space-1">
+        <div className="panel-header">Chart Options</div>
+        <div className="panel-body">
+          <h5 className="section-heading">Datasource</h5>
+          <div className="row">
+            <Select
+              name="select-datasource"
+              placeholder="Select a datasource"
+              options={this.props.datasources.map((d) => ({ value: d[0], label: d[1] }))}
+              value={this.props.datasourceId}
+              autosize={false}
+              onChange={this.changeDatasource.bind(this)}
+            />
+          </div>
+          <h5 className="section-heading">Viz Type</h5>
+          <div className="row">
+            <Select
+              name="select-viztype"
+              placeholder="Select a viz type"
+              options={VIZ_TYPES}
+              value={this.props.vizType}
+              autosize={false}
+              onChange={this.changeViz.bind(this)}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ChartControl.propTypes = propTypes;
+ChartControl.defaultProps = defaultProps;
+
+function mapStateToProps(state) {
+  return {
+    datasources: state.datasources,
+    datasourceId: state.datasourceId,
+    datasourceType: state.datasourceType,
+    vizType: state.vizType,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ChartControl);