Client: display chart w/ duration or distance for x axis

This commit is contained in:
Sam 2018-05-28 17:07:08 +02:00
parent 681ea6643d
commit 4219393341
2 changed files with 107 additions and 38 deletions

View File

@ -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>
)
}

View File

@ -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;