Modifications based on comments

apache · Sep 28, 2016 · 6ad3bf7 · 6ad3bf7
1 parent ee61d17
commit 6ad3bf7
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 126 deletions.
diff --git a/caravel/assets/javascripts/explorev2/actions/exploreActions.js b/caravel/assets/javascripts/explorev2/actions/exploreActions.js
@@ -19,8 +19,8 @@ export const SET_TIME_STAMP = 'SET_TIME_STAMP';
 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_SET_WHERE_CLAUSE';
-export const SET_HAVING_CLAUSE = 'SET_SET_HAVING_CLAUSE';
+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';
@@ -68,9 +68,7 @@ export function setFormOpts(datasourceId, datasourceType) {
     const timeGrainOpts = [];
 
     if (datasourceId) {
-      const params = [];
-      params.push(`datasource_id=${datasourceId}`);
-      params.push(`datasource_type=${datasourceType}`);
+      const params = [`datasource_id=${datasourceId}`, `datasource_type=${datasourceType}`];
       const url = '/caravel/fetch_datasource_metadata?' + params.join('&');
 
       $.get(url, (data, status) => {

diff --git a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx
@@ -3,7 +3,22 @@ import Select from 'react-select';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
-import { VIZ_TYPES } from '../../../utils/common';
+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() {
@@ -30,7 +45,7 @@ class ChartControl extends React.Component {
           <div className="row">
             <Select
               name="select-datasource"
-              placeholder={'Select a datasource'}
+              placeholder="Select a datasource"
               options={this.props.datasources.map((d) => ({ value: d[0], label: d[1] }))}
               value={this.props.datasourceId}
               autosize={false}
@@ -41,7 +56,7 @@ class ChartControl extends React.Component {
           <div className="row">
             <Select
               name="select-viztype"
-              placeholder={'Select a viz type'}
+              placeholder="Select a viz type"
               options={VIZ_TYPES}
               value={this.props.vizType}
               autosize={false}
@@ -54,20 +69,8 @@ class ChartControl extends React.Component {
   }
 }
 
-ChartControl.propTypes = {
-  actions: React.PropTypes.object,
-  datasources: React.PropTypes.array,
-  datasourceId: React.PropTypes.number,
-  datasourceType: React.PropTypes.string,
-  vizType: React.PropTypes.string,
-};
-
-ChartControl.defaultProps = {
-  datasources: [],
-  datasourceId: null,
-  datasourceType: null,
-  vizType: null,
-};
+ChartControl.propTypes = propTypes;
+ChartControl.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {

diff --git a/caravel/assets/javascripts/explorev2/components/Filters.jsx b/caravel/assets/javascripts/explorev2/components/Filters.jsx
@@ -7,6 +7,17 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import shortid from 'shortid';
 
+const propTypes = {
+  actions: React.PropTypes.object,
+  filterColumnOpts: React.PropTypes.array,
+  filters: React.PropTypes.array,
+};
+
+const defaultProps = {
+  filterColumnOpts: [],
+  filters: [],
+};
+
 class Filters extends React.Component {
   constructor(props) {
     super(props);
@@ -43,7 +54,7 @@ class Filters extends React.Component {
           className="row"
           multi={false}
           name="select-column"
-          placeholder={'Select column'}
+          placeholder="Select column"
           options={this.props.filterColumnOpts}
           value={filter.field}
           autosize={false}
@@ -54,7 +65,7 @@ class Filters extends React.Component {
             className="col-sm-3"
             multi={false}
             name="select-op"
-            placeholder={'Select operator'}
+            placeholder="Select operator"
             options={this.state.opOpts.map((o) => ({ value: o, label: o }))}
             value={filter.op}
             autosize={false}
@@ -97,16 +108,9 @@ class Filters extends React.Component {
   }
 }
 
-Filters.propTypes = {
-  actions: React.PropTypes.object,
-  filterColumnOpts: React.PropTypes.array,
-  filters: React.PropTypes.array,
-};
+Filters.propTypes = propTypes;
 
-Filters.defaultProps = {
-  filterColumnOpts: [],
-  filters: [],
-};
+Filters.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {

diff --git a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx
@@ -4,6 +4,21 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 
+const propTypes = {
+  actions: React.PropTypes.object,
+  metricsOpts: React.PropTypes.array,
+  metrics: React.PropTypes.array,
+  groupByColumnOpts: React.PropTypes.array,
+  groupByColumns: React.PropTypes.array,
+};
+
+const defaultProps = {
+  metricsOpts: [],
+  metrics: [],
+  groupByColumnOpts: [],
+  groupByColumns: [],
+};
+
 class GroupBy extends React.Component {
   changeColumns(groupByColumnOpts) {
     this.props.actions.setGroupByColumns(groupByColumnOpts);
@@ -21,7 +36,7 @@ class GroupBy extends React.Component {
             <Select
               multi
               name="select-time-column"
-              placeholder={'Select groupby columns'}
+              placeholder="Select groupby columns"
               options={this.props.groupByColumnOpts}
               value={this.props.groupByColumns}
               autosize={false}
@@ -33,7 +48,7 @@ class GroupBy extends React.Component {
             <Select
               multi
               name="select-since"
-              placeholder={'Select metrics'}
+              placeholder="Select metrics"
               options={this.props.metricsOpts}
               value={this.props.metrics}
               autosize={false}
@@ -46,20 +61,8 @@ class GroupBy extends React.Component {
   }
 }
 
-GroupBy.propTypes = {
-  actions: React.PropTypes.object,
-  metricsOpts: React.PropTypes.array,
-  metrics: React.PropTypes.array,
-  groupByColumnOpts: React.PropTypes.array,
-  groupByColumns: React.PropTypes.array,
-};
-
-GroupBy.defaultProps = {
-  metricsOpts: [],
-  metrics: [],
-  groupByColumnOpts: [],
-  groupByColumns: [],
-};
+GroupBy.propTypes = propTypes;
+GroupBy.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {

diff --git a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx
@@ -3,6 +3,10 @@ import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
 
+const propTypes = {
+  actions: React.PropTypes.object,
+};
+
 class SqlClause extends React.Component {
   changeWhere(whereClause) {
     this.props.actions.setWhereClause(whereClause);
@@ -39,12 +43,7 @@ class SqlClause extends React.Component {
   }
 }
 
-SqlClause.propTypes = {
-  actions: React.PropTypes.object,
-};
-
-SqlClause.defaultProps = {
-};
+SqlClause.propTypes = propTypes;
 
 function mapStateToProps() {
   return {};

diff --git a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx
@@ -3,20 +3,28 @@ import Select from 'react-select';
 import { bindActionCreators } from 'redux';
 import * as actions from '../actions/exploreActions';
 import { connect } from 'react-redux';
+import { sinceOptions, untilOptions } from '../constants';
 
-const sinceOptions = ['1 hour ago', '12 hours ago', '1 day ago',
-  '7 days ago', '28 days ago', '90 days ago', '1 year ago'];
-const untilOptions = ['now', '1 day ago', '7 days ago',
-  '28 days ago', '90 days ago', '1 year ago'];
+const propTypes = {
+  actions: React.PropTypes.object,
+  timeColumnOpts: React.PropTypes.array,
+  timeColumn: React.PropTypes.string,
+  timeGrainOpts: React.PropTypes.array,
+  timeGrain: React.PropTypes.string,
+  since: React.PropTypes.string,
+  until: React.PropTypes.string,
+};
+
+const defaultProps = {
+  timeColumnOpts: [],
+  timeColumn: null,
+  timeGrainOpts: [],
+  timeGrain: null,
+  since: null,
+  until: null,
+};
 
 class TimeFilter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sinceOptions,
-      untilOptions,
-    };
-  }
   changeTimeColumn(timeColumnOpt) {
     const val = (timeColumnOpt) ? timeColumnOpt.value : null;
     this.props.actions.setTimeColumn(val);
@@ -43,7 +51,7 @@ class TimeFilter extends React.Component {
             <Select
               className="col-sm-6"
               name="select-time-column"
-              placeholder={'Select a time column'}
+              placeholder="Select a time column"
               options={this.props.timeColumnOpts}
               value={this.props.timeColumn}
               autosize={false}
@@ -52,7 +60,7 @@ class TimeFilter extends React.Component {
             <Select
               className="col-sm-6"
               name="select-time-grain"
-              placeholder={'Select a time grain'}
+              placeholder="Select a time grain"
               options={this.props.timeGrainOpts}
               value={this.props.timeGrain}
               autosize={false}
@@ -64,7 +72,7 @@ class TimeFilter extends React.Component {
             <Select
               className="col-sm-6"
               name="select-since"
-              placeholder={'Select Since Time'}
+              placeholder="Select Since Time"
               options={sinceOptions.map((s) => ({ value: s, label: s }))}
               value={this.props.since}
               autosize={false}
@@ -73,7 +81,7 @@ class TimeFilter extends React.Component {
             <Select
               className="col-sm-6"
               name="select-until"
-              placeholder={'Select Until Time'}
+              placeholder="Select Until Time"
               options={untilOptions.map((u) => ({ value: u, label: u }))}
               value={this.props.until}
               autosize={false}
@@ -86,24 +94,8 @@ class TimeFilter extends React.Component {
   }
 }
 
-TimeFilter.propTypes = {
-  actions: React.PropTypes.object,
-  timeColumnOpts: React.PropTypes.array,
-  timeColumn: React.PropTypes.string,
-  timeGrainOpts: React.PropTypes.array,
-  timeGrain: React.PropTypes.string,
-  since: React.PropTypes.string,
-  until: React.PropTypes.string,
-};
-
-TimeFilter.defaultProps = {
-  timeColumnOpts: [],
-  timeColumn: null,
-  timeGrainOpts: [],
-  timeGrain: null,
-  since: null,
-  until: null,
-};
+TimeFilter.propTypes = propTypes;
+TimeFilter.defaultProps = defaultProps;
 
 function mapStateToProps(state) {
   return {

diff --git a/caravel/assets/javascripts/explorev2/constants.js b/caravel/assets/javascripts/explorev2/constants.js
@@ -0,0 +1,35 @@
+export const VIZ_TYPES = [
+  { value: 'dist_bar', label: 'Distribution - Bar Chart', requiresTime: false },
+  { value: 'pie', label: 'Pie Chart', requiresTime: false },
+  { value: 'line', label: 'Time Series - Line Chart', requiresTime: true },
+  { value: 'bar', label: 'Time Series - Bar Chart', requiresTime: true },
+  { value: 'compare', label: 'Time Series - Percent Change', requiresTime: true },
+  { value: 'area', label: 'Time Series - Stacked', requiresTime: true },
+  { value: 'table', label: 'Table View', requiresTime: false },
+  { value: 'markup', label: 'Markup', requiresTime: false },
+  { value: 'pivot_table', label: 'Pivot Table', requiresTime: false },
+  { value: 'separator', label: 'Separator', requiresTime: false },
+  { value: 'word_cloud', label: 'Word Cloud', requiresTime: false },
+  { value: 'treemap', label: 'Treemap', requiresTime: false },
+  { value: 'cal_heatmap', label: 'Calendar Heatmap', requiresTime: true },
+  { value: 'box_plot', label: 'Box Plot', requiresTime: false },
+  { value: 'bubble', label: 'Bubble Chart', requiresTime: false },
+  { value: 'big_number', label: 'Big Number with Trendline', requiresTime: false },
+  { value: 'bubble', label: 'Bubble Chart', requiresTime: false },
+  { value: 'histogram', label: 'Histogram', requiresTime: false },
+  { value: 'sunburst', label: 'Sunburst', requiresTime: false },
+  { value: 'sankey', label: 'Sankey', requiresTime: false },
+  { value: 'directed_force', label: 'Directed Force Layout', requiresTime: false },
+  { value: 'world_map', label: 'World Map', requiresTime: false },
+  { value: 'filter_box', label: 'Filter Box', requiresTime: false },
+  { value: 'iframe', label: 'iFrame', requiresTime: false },
+  { value: 'para', label: 'Parallel Coordinates', requiresTime: false },
+  { value: 'heatmap', label: 'Heatmap', requiresTime: false },
+  { value: 'horizon', label: 'Horizon', requiresTime: false },
+  { value: 'mapbox', label: 'Mapbox', requiresTime: false },
+];
+
+export const sinceOptions = ['1 hour ago', '12 hours ago', '1 day ago',
+  '7 days ago', '28 days ago', '90 days ago', '1 year ago'];
+export const untilOptions = ['now', '1 day ago', '7 days ago',
+  '28 days ago', '90 days ago', '1 year ago'];