[explore v2] fix explorev2 chart errors (#1277)

* fix prototypes and arrow function

* only show line chart if viz type is line

* split render lines function

* fix arrow-body linter
This commit is contained in:
Alanna Scott 2016-10-06 13:07:27 -07:00 committed by vera-liu
parent 5c5b393f2f
commit 8a5f050f6c
2 changed files with 24 additions and 17 deletions

View File

@ -5,12 +5,13 @@ import moment from 'moment';
const propTypes = { const propTypes = {
viz: PropTypes.shape({ viz: PropTypes.shape({
data: PropTypes.object.isRequired, data: PropTypes.array.isRequired,
form_data: PropTypes.shape({ form_data: PropTypes.shape({
slice_name: PropTypes.object.isRequired, viz_type: PropTypes.string.isRequired,
slice_name: PropTypes.string.isRequired,
}).isRequired, }).isRequired,
}).isRequired, }).isRequired,
height: PropTypes.number.isRequired, height: PropTypes.string.isRequired,
}; };
export default class ChartContainer extends React.Component { export default class ChartContainer extends React.Component {
@ -45,6 +46,12 @@ export default class ChartContainer extends React.Component {
return newValues; return newValues;
} }
isLineViz() {
// todo(alanna) generalize this check and map to charts
const vizType = this.props.viz.form_data.viz_type;
return vizType === 'line';
}
render() { render() {
return ( return (
<div className="chart-container"> <div className="chart-container">
@ -54,10 +61,12 @@ export default class ChartContainer extends React.Component {
<div className="panel-title">{this.props.viz.form_data.slice_name}</div> <div className="panel-title">{this.props.viz.form_data.slice_name}</div>
} }
> >
<TimeSeriesLineChart {this.isLineViz() &&
data={this.state.data} <TimeSeriesLineChart
label1="Label 1" data={this.state.data}
/> label1="Label 1"
/>
}
</Panel> </Panel>
</div> </div>
); );

View File

@ -26,16 +26,14 @@ export default class TimeSeriesLineChart extends React.Component {
} }
renderLines() { renderLines() {
return this.props.data.map(function (d) { return this.props.data.map((d) => (
return ( <V.VictoryLine
<V.VictoryLine key={d.key}
key={d.key} data={d.values}
data={d.values} interpolation="cardinal"
interpolation="cardinal" style={{ data: { stroke: this.keysToColorsMap[d.key] } }}
style={{ data: { stroke: this.keysToColorsMap[d.key] } }} />
/> ));
);
});
} }
render() { render() {