Skip to content

Commit

Permalink
Put formData in store (#1281)
Browse files Browse the repository at this point in the history 
* Put formData in store

* Reform actions and reducers

* Maded modifications based on comments:
  • Loading branch information
@vera-liu
vera-liu authored Oct 7, 2016
1 parent 3384e75 commit b7d1f78
Show file tree
Hide file tree
Showing 13 changed files with 279 additions and 386 deletions.
70 changes: 5 additions & 65 deletions caravel/assets/javascripts/explorev2/actions/exploreActions.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,13 @@
const $ = window.$ = require('jquery');
export const SET_DATASOURCE = 'SET_DATASOURCE';
export const SET_VIZTYPE = 'SET_VIZTYPE';
export const SET_TIME_COLUMN_OPTS = 'SET_TIME_COLUMN_OPTS';
export const SET_TIME_GRAIN_OPTS = 'SET_TIME_GRAIN_OPTS';
export const SET_TIME_COLUMN = 'SET_TIME_COLUMN';
export const SET_TIME_GRAIN = 'SET_TIME_GRAIN';
export const SET_SINCE = 'SET_SINCE';
export const SET_UNTIL = 'SET_UNTIL';
export const SET_GROUPBY_COLUMNS = 'SET_GROUPBY_COLUMNS';
export const SET_GROUPBY_COLUMN_OPTS = 'SET_GROUPBY_COLUMN_OPTS';
export const SET_METRICS = 'SET_METRICS';
export const SET_METRICS_OPTS = 'SET_METRICS_OPTS';
export const SET_COLUMN_OPTS = 'SET_COLUMN_OPTS';
export const SET_NOT_GROUPBY_COLUMNS = 'SET_NOT_GROUPBY_COLUMNS';
export const SET_ORDERING_OPTS = 'SET_ORDERING_OPTS';
export const SET_ORDERINGS = 'SET_ORDERINGS';
export const SET_TIME_STAMP_FORMAT = 'SET_TIME_STAMP_FORMAT';
export const SET_ROW_LIMIT = 'SET_ROW_LIMIT';
export const TOGGLE_SEARCHBOX = 'TOGGLE_SEARCHBOX';
export const SET_FILTER_COLUMN_OPTS = 'SET_FILTER_COLUMN_OPTS';
export const SET_WHERE_CLAUSE = 'SET_WHERE_CLAUSE';
export const SET_HAVING_CLAUSE = 'SET_HAVING_CLAUSE';
export const ADD_FILTER = 'ADD_FILTER';
export const SET_FILTER = 'SET_FILTER';
export const REMOVE_FILTER = 'REMOVE_FILTER';
Expand All @@ -30,6 +17,7 @@ export const CHANGE_FILTER_VALUE = 'CHANGE_FILTER_VALUE';
export const RESET_FORM_DATA = 'RESET_FORM_DATA';
export const CLEAR_ALL_OPTS = 'CLEAR_ALL_OPTS';
export const SET_DATASOURCE_TYPE = 'SET_DATASOURCE_TYPE';
export const SET_FORM_DATA = 'SET_FORM_DATA';

export function setTimeColumnOpts(timeColumnOpts) {
return { type: SET_TIME_COLUMN_OPTS, timeColumnOpts };
Expand Down Expand Up @@ -131,62 +119,10 @@ export function setDatasource(datasourceId) {
return { type: SET_DATASOURCE, datasourceId };
}

export function setVizType(vizType) {
return { type: SET_VIZTYPE, vizType };
}

export function setTimeColumn(timeColumn) {
return { type: SET_TIME_COLUMN, timeColumn };
}

export function setTimeGrain(timeGrain) {
return { type: SET_TIME_GRAIN, timeGrain };
}

export function setSince(since) {
return { type: SET_SINCE, since };
}

export function setUntil(until) {
return { type: SET_UNTIL, until };
}

export function setGroupByColumns(groupByColumns) {
return { type: SET_GROUPBY_COLUMNS, groupByColumns };
}

export function setMetrics(metrics) {
return { type: SET_METRICS, metrics };
}

export function setNotGroupByColumns(columns) {
return { type: SET_NOT_GROUPBY_COLUMNS, columns };
}

export function setOrderings(orderings) {
return { type: SET_ORDERINGS, orderings };
}

export function setTimeStampFormat(timeStampFormat) {
return { type: SET_TIME_STAMP_FORMAT, timeStampFormat };
}

export function setRowLimit(rowLimit) {
return { type: SET_ROW_LIMIT, rowLimit };
}

export function toggleSearchBox(searchBox) {
return { type: TOGGLE_SEARCHBOX, searchBox };
}

export function setWhereClause(whereClause) {
return { type: SET_WHERE_CLAUSE, whereClause };
}

export function setHavingClause(havingClause) {
return { type: SET_HAVING_CLAUSE, havingClause };
}

export function addFilter(filter) {
return { type: ADD_FILTER, filter };
}
Expand All @@ -206,3 +142,7 @@ export function changeFilterOp(filter, op) {
export function changeFilterValue(filter, value) {
return { type: CHANGE_FILTER_VALUE, filter, value };
}

export function setFormData(key, value) {
return { type: SET_FORM_DATA, key, value };
}
10 changes: 5 additions & 5 deletions caravel/assets/javascripts/explorev2/components/ChartControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ class ChartControl extends React.Component {
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);
changeViz(opt) {
const val = opt ? opt.value : null;
this.props.actions.setFormData('vizType', val);
}
render() {
return (
<div className="panel space-1">
<div className="panel">
<div className="panel-header">Chart Options</div>
<div className="panel-body">
<h5 className="section-heading">Datasource</h5>
Expand Down Expand Up @@ -77,7 +77,7 @@ function mapStateToProps(state) {
datasources: state.datasources,
datasourceId: state.datasourceId,
datasourceType: state.datasourceType,
vizType: state.vizType,
vizType: state.viz.formData.vizType,
};
}

Expand Down
2 changes: 1 addition & 1 deletion caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ ControlPanelsContainer.defaultProps = defaultProps;

function mapStateToProps(state) {
return {
vizType: state.vizType,
vizType: state.viz.formData.vizType,
};
}

Expand Down
72 changes: 29 additions & 43 deletions caravel/assets/javascripts/explorev2/components/GroupBy.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
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 SelectArray from './SelectArray';

const propTypes = {
actions: React.PropTypes.object,
Expand All @@ -19,57 +19,43 @@ const defaultProps = {
groupByColumns: [],
};

class GroupBy extends React.Component {
changeColumns(groupByColumns) {
this.props.actions.setGroupByColumns(groupByColumns);
}
changeMetrics(metrics) {
this.props.actions.setMetrics(metrics);
}
render() {
return (
<div className="panel space-1">
<div className="panel-header">GroupBy</div>
<div className="panel-body">
<div className="row">
<h5 className="section-heading">GroupBy Column</h5>
<Select
multi
name="select-time-column"
placeholder="Select groupby columns"
options={this.props.groupByColumnOpts}
value={this.props.groupByColumns}
autosize={false}
onChange={this.changeColumns.bind(this)}
/>
</div>
<div className="row">
<h5 className="section-heading">Metrics</h5>
<Select
multi
name="select-since"
placeholder="Select metrics"
options={this.props.metricsOpts}
value={this.props.metrics}
autosize={false}
onChange={this.changeMetrics.bind(this)}
/>
</div>
</div>
const GroupBy = (props) => {
const selects = [
{
key: 'groupByColumns',
title: 'Group By',
options: props.groupByColumnOpts,
value: props.groupByColumns,
multi: true,
width: '12',
},
{
key: 'metrics',
title: 'Metrics',
options: props.metricsOpts,
value: props.metrics,
multi: true,
width: '12',
}];
return (
<div className="panel">
<div className="panel-header">GroupBy</div>
<div className="panel-body">
<SelectArray selectArray={selects} />
</div>
);
}
}
</div>
);
};

GroupBy.propTypes = propTypes;
GroupBy.defaultProps = defaultProps;

function mapStateToProps(state) {
return {
metricsOpts: state.metricsOpts,
metrics: state.metrics,
metrics: state.viz.formData.metrics,
groupByColumnOpts: state.groupByColumnOpts,
groupByColumns: state.groupByColumns,
groupByColumns: state.viz.formData.groupByColumns,
};
}

Expand Down
72 changes: 29 additions & 43 deletions caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Select from 'react-select';
import SelectArray from './SelectArray';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/exploreActions';
import { connect } from 'react-redux';
Expand All @@ -19,57 +19,43 @@ const defaultProps = {
orderings: [],
};

class NotGroupBy extends React.Component {
changeColumns(columns) {
this.props.actions.setNotGroupByColumns(columns);
}
changeOrderings(orderings) {
this.props.actions.setOrderings(orderings);
}
render() {
return (
<div className="panel space-1">
<div className="panel-header">Not GroupBy</div>
<div className="panel-body">
<div className="row">
<h5 className="section-heading">Columns</h5>
<Select
multi
name="select-column"
placeholder="Select columns"
options={this.props.columnOpts}
value={this.props.columns}
autosize={false}
onChange={this.changeColumns.bind(this)}
/>
</div>
<div className="row">
<h5 className="section-heading">Orderings</h5>
<Select
multi
name="select-orderings"
placeholder="Select orderings"
options={this.props.orderingOpts}
value={this.props.orderings}
autosize={false}
onChange={this.changeOrderings.bind(this)}
/>
</div>
</div>
const NotGroupBy = (props) => {
const selects = [
{
key: 'columns',
title: 'Columns',
options: props.columnOpts,
value: props.columns,
multi: true,
width: '12',
},
{
key: 'orderings',
title: 'Orderings',
options: props.orderingOpts,
value: props.orderings,
multi: true,
width: '12',
}];
return (
<div className="panel">
<div className="panel-header">Not GroupBy</div>
<div className="panel-body">
<SelectArray selectArray={selects} />
</div>
);
}
}
</div>
);
};

NotGroupBy.propTypes = propTypes;
NotGroupBy.defaultProps = defaultProps;

function mapStateToProps(state) {
return {
columnOpts: state.columnOpts,
columns: state.columns,
columns: state.viz.formData.columns,
orderingOpts: state.orderingOpts,
orderings: state.orderings,
orderings: state.viz.formData.orderings,
};
}

Expand Down
Loading

0 comments on commit b7d1f78

Please sign in to comment.