From fe66557bbb4848feed762e859abcd5884d72d369 Mon Sep 17 00:00:00 2001 From: Alanna Scott Date: Mon, 10 Oct 2016 13:46:00 -0700 Subject: [PATCH] [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 --- .../explorev2/components/ChartContainer.jsx | 58 ++++++++----------- .../components/ExploreViewContainer.jsx | 11 +--- .../components/charts/TimeSeriesLineChart.jsx | 7 ++- .../assets/javascripts/explorev2/index.jsx | 5 +- .../components/ChartContainer_spec.js | 39 +++++++++++++ .../components/ExploreViewContainer_spec.js | 36 ++++++++++++ caravel/assets/utils/common.js | 12 ++++ 7 files changed, 118 insertions(+), 50 deletions(-) create mode 100644 caravel/assets/spec/javascripts/explorev2/components/ChartContainer_spec.js create mode 100644 caravel/assets/spec/javascripts/explorev2/components/ExploreViewContainer_spec.js diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx index 698d6a7ceed67..18780f5e5adb2 100644 --- a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx +++ b/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 { {this.props.viz.form_data.slice_name} +
{this.props.sliceName}
} > {this.isLineViz() && } @@ -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); diff --git a/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx index 0541237f19799..a61fef48b4cbc 100644 --- a/caravel/assets/javascripts/explorev2/components/ExploreViewContainer.jsx +++ b/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 {
@@ -51,5 +44,3 @@ export default class ExploreViewContainer extends React.Component { ); } } - -ExploreViewContainer.propTypes = propTypes; diff --git a/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx b/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx index defbd9065f1a9..11e26ffc88d30 100644 --- a/caravel/assets/javascripts/explorev2/components/charts/TimeSeriesLineChart.jsx +++ b/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()} d.x)} tickFormat={(x) => moment(new Date(x)).format('YYYY')} diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx index a3ef614da9545..5387d6e2f8173 100644 --- a/caravel/assets/javascripts/explorev2/index.jsx +++ b/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( - + , exploreViewContainer ); diff --git a/caravel/assets/spec/javascripts/explorev2/components/ChartContainer_spec.js b/caravel/assets/spec/javascripts/explorev2/components/ChartContainer_spec.js new file mode 100644 index 0000000000000..42f4148328637 --- /dev/null +++ b/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() + ).to.equal(true); + }); +}); diff --git a/caravel/assets/spec/javascripts/explorev2/components/ExploreViewContainer_spec.js b/caravel/assets/spec/javascripts/explorev2/components/ExploreViewContainer_spec.js new file mode 100644 index 0000000000000..dd795f171507d --- /dev/null +++ b/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() + ).to.equal(true); + }); + + it('renders QueryAndSaveButtons', () => { + const wrapper = shallow(); + expect(wrapper.find(QueryAndSaveButtons)).to.have.length(1); + }); + + it('renders ControlPanelsContainer', () => { + const wrapper = shallow(); + expect(wrapper.find(ControlPanelsContainer)).to.have.length(1); + }); + + it('renders ChartContainer', () => { + const wrapper = shallow(); + expect(wrapper.find(ChartContainer)).to.have.length(1); + }); +}); diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js index 44c37e5a833aa..f851ae499440d 100644 --- a/caravel/assets/utils/common.js +++ b/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; +}