67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
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 = {
|
|
data: PropTypes.array.isRequired,
|
|
sliceName: PropTypes.string.isRequired,
|
|
vizType: PropTypes.string.isRequired,
|
|
height: PropTypes.string.isRequired,
|
|
};
|
|
|
|
class ChartContainer extends React.Component {
|
|
formatDates(values) {
|
|
const newValues = values.map(function (val) {
|
|
return {
|
|
x: moment(new Date(val.x)).format('MMM D'),
|
|
y: val.y,
|
|
};
|
|
});
|
|
return newValues;
|
|
}
|
|
|
|
isLineViz() {
|
|
// todo(alanna) generalize this check and map to charts
|
|
return this.props.vizType === 'line';
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="chart-container">
|
|
<Panel
|
|
style={{ height: this.props.height }}
|
|
header={
|
|
<div className="panel-title">{this.props.sliceName}</div>
|
|
}
|
|
>
|
|
{this.isLineViz() &&
|
|
<TimeSeriesLineChart
|
|
data={this.props.data}
|
|
xAxisLabel="xAxisLabel"
|
|
yAxisLabel="yAxisLabel"
|
|
/>
|
|
}
|
|
</Panel>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
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);
|