Client: checkbox for chart
This commit is contained in:
parent
1d3d357505
commit
c1af957e50
@ -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`
|
||||||
|
Loading…
Reference in New Issue
Block a user