More goodness

caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Modal } from 'react-bootstrap';
+import { Alert, Button, Grid, Row, Col, Modal } from 'react-bootstrap';
 
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -7,65 +7,145 @@ import * as Actions from '../actions';
 
 import Select from 'react-select';
 import { Table } from 'reactable';
+import shortid from 'shortid';
+
+const $ = require('jquery');
 
 class VisualizeModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      chartType: null,
+      chartType: 'line',
+      datasourceName: shortid.generate(),
+      columns: {},
     };
   }
-  changeChartType(event) {
-    this.setState({ chartType: event.target.value });
+  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,
+    };
+    window.open('/caravel/sqllab_viz/?' + $.param(vizOptions));
+  }
+  changeDatasourceName(event) {
+    this.setState({ datasourceName: event.target.value });
+  }
+  changeCheckbox(attr, col, event) {
+    console.log([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: option.value });
+    columns = Object.assign({}, columns, { [col]: column });
+    this.setState({ columns });
   }
   render() {
+    console.log(this.state);
     if (!(this.props.query)) {
       return <div />;
     }
-    const cols = this.props.query.results.columns;
+    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 (mock)</Modal.Title>
+            <Modal.Title>
+              Visualize <span className="alert alert-danger">under construction</span>
+            </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <Alert bsStyle="danger">Not functional - Work in progress!</Alert>
-            <div>
-              <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)}
-              />
-              <Table
-                className="table table-condensed"
-                columns={['column', 'is_dimension', 'is_date', 'agg_func']}
-                data={cols.map((col) => ({
-                  column: col,
-                  is_dimension: <input type="checkbox" className="form-control" />,
-                  is_date: <input type="checkbox" className="form-control" />,
-                  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)' },
-                      ]}
-                    />
-                  ),
-                }))}
-              />
+            <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>