[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')}

caravel/assets/javascripts/explorev2/index.jsx

@@ -18,6 +18,7 @@ const bootstrappedState = Object.assign(initialState, {
   datasourceType: bootstrapData.datasource_type,
   sliceName: bootstrapData.viz.form_data.slice_name,
   viz: {
+    data: bootstrapData.viz.data,
     formData: {
       sliceId: bootstrapData.viz.form_data.slice_id,
       vizType: bootstrapData.viz.form_data.viz_type,
@@ -39,9 +40,7 @@ const store = createStore(exploreReducer, bootstrappedState,
 
 ReactDOM.render(
   <Provider store={store}>
-    <ExploreViewContainer
-      data={bootstrapData}
-    />
+    <ExploreViewContainer />
   </Provider>,
   exploreViewContainer
 );

caravel/assets/spec/javascripts/explorev2/components/ChartContainer_spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import ChartContainer from '../../../../javascripts/explorev2/components/ChartContainer';
+
+describe('ChartContainer', () => {
+  const mockProps = {
+    data: [
+      {
+        classed: '',
+        key: 'Label 1',
+        values: [
+          {
+            x: -158766400000,
+            y: 57,
+          },
+          {
+            x: -156766400000,
+            y: 157,
+          },
+          {
+            x: -157766400000,
+            y: 257,
+          },
+        ],
+      },
+    ],
+    sliceName: 'Trend Line',
+    vizType: 'line',
+    height: '500px',
+  };
+
+  it('renders when vizType is line', () => {
+    expect(
+      React.isValidElement(<ChartContainer {...mockProps} />)
+    ).to.equal(true);
+  });
+});

caravel/assets/spec/javascripts/explorev2/components/ExploreViewContainer_spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import ExploreViewContainer
+  from '../../../../javascripts/explorev2/components/ExploreViewContainer';
+import QueryAndSaveButtons
+  from '../../../../javascripts/explorev2/components/QueryAndSaveButtons';
+import ControlPanelsContainer
+  from '../../../../javascripts/explorev2/components/ControlPanelsContainer';
+import ChartContainer
+  from '../../../../javascripts/explorev2/components/ChartContainer';
+
+describe('ExploreViewContainer', () => {
+  it('renders', () => {
+    expect(
+      React.isValidElement(<ExploreViewContainer />)
+    ).to.equal(true);
+  });
+
+  it('renders QueryAndSaveButtons', () => {
+    const wrapper = shallow(<ExploreViewContainer />);
+    expect(wrapper.find(QueryAndSaveButtons)).to.have.length(1);
+  });
+
+  it('renders ControlPanelsContainer', () => {
+    const wrapper = shallow(<ExploreViewContainer />);
+    expect(wrapper.find(ControlPanelsContainer)).to.have.length(1);
+  });
+
+  it('renders ChartContainer', () => {
+    const wrapper = shallow(<ExploreViewContainer />);
+    expect(wrapper.find(ChartContainer)).to.have.length(1);
+  });
+});

caravel/assets/utils/common.js

@@ -41,3 +41,15 @@ export function getParamFromQuery(query, param) {
 export function getLink(baseUrl, params) {
   return baseUrl + '?' + params.join('&');
 }
+
+export function 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;
+}