diff --git a/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx b/caravel/assets/javascripts/explorev2/components/ChartContainer.jsx
index 698d6a7cee..18780f5e5a 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 0541237f19..a61fef48b4 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 defbd9065f..11e26ffc88 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 a3ef614da9..5387d6e2f8 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 0000000000..42f4148328
--- /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 0000000000..dd795f1715
--- /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 44c37e5a83..f851ae4994 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;
+}