Client: display chart w/ duration or distance for x axis
This commit is contained in:
parent
681ea6643d
commit
4219393341
@ -9,6 +9,13 @@ import { getActivityChartData } from '../../../actions/activities'
|
||||
|
||||
|
||||
class ActivityCharts extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
displayDistance: true,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.loadActivityData(this.props.activity.id)
|
||||
}
|
||||
@ -24,49 +31,94 @@ class ActivityCharts extends React.Component {
|
||||
this.props.loadActivityData(null)
|
||||
}
|
||||
|
||||
handleRadioChange (changeEvent) {
|
||||
this.setState({
|
||||
displayDistance:
|
||||
changeEvent.target.name === 'distance'
|
||||
? changeEvent.target.value
|
||||
: !changeEvent.target.value
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { chartData } = this.props
|
||||
const { displayDistance } = this.state
|
||||
let xDataKey, xScale
|
||||
if (displayDistance) {
|
||||
xDataKey = 'distance'
|
||||
xScale = 'linear'
|
||||
} else {
|
||||
xDataKey = 'duration'
|
||||
xScale = 'time'
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<ResponsiveContainer height={300}>
|
||||
<LineChart
|
||||
data={chartData}
|
||||
margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
|
||||
>
|
||||
<XAxis
|
||||
dataKey="duration"
|
||||
label={{ value: 'duration', offset: 0, position: 'bottom' }}
|
||||
scale="time"
|
||||
tickFormatter={time => format(time, 'HH:mm:ss')}
|
||||
type="number"
|
||||
<div className="container">
|
||||
<div className="row chart-radio">
|
||||
<label className="radioLabel col-md-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="distance"
|
||||
checked={displayDistance}
|
||||
onChange={event => this.handleRadioChange(event)}
|
||||
/>
|
||||
<YAxis
|
||||
label={{ value: 'speed (km/h)', angle: -90, position: 'left' }}
|
||||
yAxisId="left"
|
||||
distance
|
||||
</label>
|
||||
<label className="radioLabel col-md-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="duration"
|
||||
checked={!displayDistance}
|
||||
onChange={event => this.handleRadioChange(event)}
|
||||
/>
|
||||
<YAxis
|
||||
label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
|
||||
yAxisId="right" orientation="right"
|
||||
/>
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="linear"
|
||||
dataKey="speed"
|
||||
stroke="#8884d8"
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="linear"
|
||||
dataKey="elevation"
|
||||
stroke="#808080"
|
||||
dot={false}
|
||||
/>
|
||||
<Tooltip
|
||||
labelFormatter={time => format(time, 'HH:mm:ss')}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
duration
|
||||
</label>
|
||||
</div>
|
||||
<div className="row chart">
|
||||
<ResponsiveContainer height={300}>
|
||||
<LineChart
|
||||
data={chartData}
|
||||
margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
|
||||
>
|
||||
<XAxis
|
||||
allowDecimals={false}
|
||||
dataKey={xDataKey}
|
||||
label={{ value: xDataKey, offset: 0, position: 'bottom' }}
|
||||
scale={xScale}
|
||||
tickFormatter={value => displayDistance
|
||||
? value
|
||||
: format(value, 'HH:mm:ss')}
|
||||
type="number"
|
||||
/>
|
||||
<YAxis
|
||||
label={{ value: 'speed (km/h)', angle: -90, position: 'left' }}
|
||||
yAxisId="left"
|
||||
/>
|
||||
<YAxis
|
||||
label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
|
||||
yAxisId="right" orientation="right"
|
||||
/>
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="linear"
|
||||
dataKey="speed"
|
||||
stroke="#8884d8"
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
yAxisId="right"
|
||||
type="linear"
|
||||
dataKey="elevation"
|
||||
stroke="#808080"
|
||||
dot={false}
|
||||
/>
|
||||
<Tooltip
|
||||
labelFormatter={value => displayDistance
|
||||
? `${value} km`
|
||||
: format(value, 'HH:mm:ss')}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -96,6 +96,23 @@ input, textarea {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chart {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.chart-radio {
|
||||
display: flex;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.chart-radio label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chart-radio input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.custom-modal {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
|
Loading…
Reference in New Issue
Block a user