Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Put formData in store #1281

Merged
merged 4 commits into from
Oct 7, 2016
Merged

Put formData in store #1281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd0d335
Put formData in store
vera-liu Oct 7, 2016
be5020c
Reform actions and reducers
vera-liu Oct 7, 2016
184134e
Maded modifications based on comments:
vera-liu Oct 7, 2016
16865f3
Merge branch 'master' into vliu_restructure_store
vera-liu Oct 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 5 additions & 65 deletions caravel/assets/javascripts/explorev2/actions/exploreActions.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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