Client: checkbox for chart

This commit is contained in:
Sam 2018-05-29 11:35:52 +02:00
parent 1d3d357505
commit c1af957e50

View File

@ -13,6 +13,7 @@ class ActivityCharts extends React.Component {
super(props, context) super(props, context)
this.state = { this.state = {
displayDistance: true, displayDistance: true,
dataToHide: []
} }
} }
@ -40,6 +41,22 @@ class ActivityCharts extends React.Component {
}) })
} }
handleLegendChange (e) {
const { dataToHide } = this.state
const name = e.target.name // eslint-disable-line prefer-destructuring
if (dataToHide.find(d => d === name)) {
dataToHide.splice(dataToHide.indexOf(name), 1)
} else {
dataToHide.push(name)
}
this.setState({ dataToHide })
}
displayData (name) {
const { dataToHide } = this.state
return !dataToHide.find(d => d === name)
}
render() { render() {
const { chartData } = this.props const { chartData } = this.props
const { displayDistance } = this.state const { displayDistance } = this.state
@ -54,13 +71,15 @@ class ActivityCharts extends React.Component {
} }
return ( return (
<div className="container"> <div className="container">
{chartData && chartData.length > 0 ? (
<div>
<div className="row chart-radio"> <div className="row chart-radio">
<label className="radioLabel col-md-1"> <label className="radioLabel col-md-1">
<input <input
type="radio" type="radio"
name="distance" name="distance"
checked={displayDistance} checked={displayDistance}
onChange={event => this.handleRadioChange(event)} onChange={e => this.handleRadioChange(e)}
/> />
distance distance
</label> </label>
@ -69,13 +88,33 @@ class ActivityCharts extends React.Component {
type="radio" type="radio"
name="duration" name="duration"
checked={!displayDistance} checked={!displayDistance}
onChange={event => this.handleRadioChange(event)} onChange={e => this.handleRadioChange(e)}
/> />
duration duration
</label> </label>
</div> </div>
{chartData && chartData.length > 0 ? ( <div className="row chart-radio">
<div> <div className="col-md-5" />
<label className="radioLabel col-md-1">
<input
type="checkbox"
name="speed"
checked={this.displayData('speed')}
onChange={e => this.handleLegendChange(e)}
/>
speed
</label>
<label className="radioLabel col-md-1">
<input
type="checkbox"
name="elevation"
checked={this.displayData('elevation')}
onChange={e => this.handleLegendChange(e)}
/>
elevation
</label>
<div className="col-md-5" />
</div>
<div className="row chart"> <div className="row chart">
<ResponsiveContainer height={300}> <ResponsiveContainer height={300}>
<ComposedChart <ComposedChart
@ -105,6 +144,7 @@ class ActivityCharts extends React.Component {
}} }}
yAxisId="right" orientation="right" yAxisId="right" orientation="right"
/> />
{this.displayData('elevation') && (
<Area <Area
yAxisId="right" yAxisId="right"
type="linear" type="linear"
@ -113,6 +153,8 @@ class ActivityCharts extends React.Component {
stroke="#cccccc" stroke="#cccccc"
dot={false} dot={false}
/> />
)}
{this.displayData('speed') && (
<Line <Line
yAxisId="left" yAxisId="left"
type="linear" type="linear"
@ -121,6 +163,7 @@ class ActivityCharts extends React.Component {
strokeWidth={2} strokeWidth={2}
dot={false} dot={false}
/> />
)}
<Tooltip <Tooltip
labelFormatter={value => displayDistance labelFormatter={value => displayDistance
? `distance: ${value} km` ? `distance: ${value} km`