[explore-v2] hook up ExploreViewContainer to state and add specs (#1300)

* add getParams func to common

* get data from redux state

* specs for chart container and explore view container

caravel/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -1,41 +1,17 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import { Panel } from 'react-bootstrap';
 import TimeSeriesLineChart from './charts/TimeSeriesLineChart';
 import moment from 'moment';
 
 const propTypes = {
-  viz: PropTypes.shape({
-    data: PropTypes.array.isRequired,
-    form_data: PropTypes.shape({
-      viz_type: PropTypes.string.isRequired,
-      slice_name: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
+  data: PropTypes.array.isRequired,
+  sliceName: PropTypes.string.isRequired,
+  vizType: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
 };
 
-export default class ChartContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      params: this.getParamsFromUrl(),
-      data: props.viz.data,
-      label1: 'Label 1',
-    };
-  }
-
-  getParamsFromUrl() {
-    const hash = window.location.search;
-    const params = hash.split('?')[1].split('&');
-    const newParams = {};
-    params.forEach((p) => {
-      const value = p.split('=')[1].replace(/\+/g, ' ');
-      const key = p.split('=')[0];
-      newParams[key] = value;
-    });
-    return newParams;
-  }
-
+class ChartContainer extends React.Component {
   formatDates(values) {
     const newValues = values.map(function (val) {
       return {
@@ -48,8 +24,7 @@ export default class ChartContainer extends React.Component {
 
   isLineViz() {
     // todo(alanna) generalize this check and map to charts
-    const vizType = this.props.viz.form_data.viz_type;
-    return vizType === 'line';
+    return this.props.vizType === 'line';
   }
 
   render() {
@@ -58,13 +33,14 @@ export default class ChartContainer extends React.Component {
         <Panel
           style={{ height: this.props.height }}
           header={
-            <div className="panel-title">{this.props.viz.form_data.slice_name}</div>
+            <div className="panel-title">{this.props.sliceName}</div>
           }
         >
           {this.isLineViz() &&
             <TimeSeriesLineChart
-              data={this.state.data}
-              label1="Label 1"
+              data={this.props.data}
+              xAxisLabel="xAxisLabel"
+              yAxisLabel="yAxisLabel"
             />
           }
         </Panel>
@@ -74,3 +50,17 @@ export default class ChartContainer extends React.Component {
 }
 
 ChartContainer.propTypes = propTypes;
+
+function mapStateToProps(state) {
+  return {
+    data: state.viz.data,
+    sliceName: state.sliceName,
+    vizType: state.viz.formData.vizType,
+  };
+}
+
+function mapDispatchToProps() {
+  return {};
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChartContainer);

caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -1,14 +1,8 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import ChartContainer from './ChartContainer';
 import ControlPanelsContainer from './ControlPanelsContainer';
 import QueryAndSaveButtons from './QueryAndSaveButtons';
 
-const propTypes = {
-  data: PropTypes.shape({
-    viz: PropTypes.object.isRequired,
-  }).isRequired,
-};
-
 export default class ExploreViewContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -42,7 +36,6 @@ export default class ExploreViewContainer extends React.Component {
           </div>
           <div className="col-sm-8">
             <ChartContainer
-              viz={this.props.data.viz}
               height={this.state.height}
             />
           </div>
@@ -51,5 +44,3 @@ export default class ExploreViewContainer extends React.Component {
     );
   }
 }
-
-ExploreViewContainer.propTypes = propTypes;

caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx

@@ -7,7 +7,8 @@ import Legend from './Legend';
 
 const propTypes = {
   data: PropTypes.array.isRequired,
-  label1: PropTypes.string.isRequired,
+  xAxisLabel: PropTypes.string.isRequired,
+  yAxisLabel: PropTypes.string.isRequired,
 };
 
 export default class TimeSeriesLineChart extends React.Component {
@@ -44,12 +45,12 @@ export default class TimeSeriesLineChart extends React.Component {
         >
           {this.renderLines()}
           <V.VictoryAxis
-            label={this.props.label1}
+            label={this.props.yAxisLabel}
             orientation="left"
           />
           <V.VictoryAxis
             dependentAxis
-            label={'label needed'}
+            label={this.props.xAxisLabel}
             orientation="bottom"
             tickValues={this.props.data[0].values.map((d) => d.x)}
             tickFormat={(x) => moment(new Date(x)).format('YYYY')}