API & Client: minor fix
This commit is contained in:
parent
66343c16b8
commit
1ac669e6e6
@ -202,7 +202,9 @@ def get_chart_data(gpx_file):
|
|||||||
)
|
)
|
||||||
distance = 0 if distance is None else distance
|
distance = 0 if distance is None else distance
|
||||||
distance += previous_distance
|
distance += previous_distance
|
||||||
speed = round((segment.get_speed(point_idx) / 1000)*3600, 2)
|
speed = (round((segment.get_speed(point_idx) / 1000)*3600, 2)
|
||||||
|
if segment.get_speed(point_idx) is not None
|
||||||
|
else 0)
|
||||||
chart_data.append({
|
chart_data.append({
|
||||||
'distance': round(distance / 1000, 2),
|
'distance': round(distance / 1000, 2),
|
||||||
'duration': point.time_difference(first_point),
|
'duration': point.time_difference(first_point),
|
||||||
|
@ -43,6 +43,7 @@ class ActivityCharts extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const { chartData } = this.props
|
const { chartData } = this.props
|
||||||
const { displayDistance } = this.state
|
const { displayDistance } = this.state
|
||||||
|
const xInterval = chartData ? parseInt(chartData.length / 10, 10) : 0
|
||||||
let xDataKey, xScale
|
let xDataKey, xScale
|
||||||
if (displayDistance) {
|
if (displayDistance) {
|
||||||
xDataKey = 'distance'
|
xDataKey = 'distance'
|
||||||
@ -73,55 +74,66 @@ class ActivityCharts extends React.Component {
|
|||||||
duration
|
duration
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="row chart">
|
{chartData && chartData.length > 0 ? (
|
||||||
<ResponsiveContainer height={300}>
|
<div>
|
||||||
<ComposedChart
|
<div className="row chart">
|
||||||
data={chartData}
|
<ResponsiveContainer height={300}>
|
||||||
margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
|
<ComposedChart
|
||||||
>
|
data={chartData}
|
||||||
<XAxis
|
margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
|
||||||
allowDecimals={false}
|
>
|
||||||
dataKey={xDataKey}
|
<XAxis
|
||||||
label={{ value: xDataKey, offset: 0, position: 'bottom' }}
|
allowDecimals={false}
|
||||||
scale={xScale}
|
dataKey={xDataKey}
|
||||||
tickFormatter={value => displayDistance
|
label={{ value: xDataKey, offset: 0, position: 'bottom' }}
|
||||||
? value
|
scale={xScale}
|
||||||
: format(value, 'HH:mm:ss')}
|
interval={xInterval}
|
||||||
type="number"
|
tickFormatter={value => displayDistance
|
||||||
/>
|
? value
|
||||||
<YAxis
|
: format(value, 'HH:mm:ss')}
|
||||||
label={{ value: 'speed (km/h)', angle: -90, position: 'left' }}
|
type="number"
|
||||||
yAxisId="left"
|
/>
|
||||||
/>
|
<YAxis
|
||||||
<YAxis
|
label={{
|
||||||
label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
|
value: 'speed (km/h)', angle: -90, position: 'left'
|
||||||
yAxisId="right" orientation="right"
|
}}
|
||||||
/>
|
yAxisId="left"
|
||||||
<Area
|
/>
|
||||||
yAxisId="right"
|
<YAxis
|
||||||
type="linear"
|
label={{
|
||||||
dataKey="elevation"
|
value: 'altitude (m)', angle: -90, position: 'right'
|
||||||
fill="#e5e5e5"
|
}}
|
||||||
stroke="#cccccc"
|
yAxisId="right" orientation="right"
|
||||||
dot={false}
|
/>
|
||||||
/>
|
<Area
|
||||||
<Line
|
yAxisId="right"
|
||||||
yAxisId="left"
|
type="linear"
|
||||||
type="linear"
|
dataKey="elevation"
|
||||||
dataKey="speed"
|
fill="#e5e5e5"
|
||||||
stroke="#8884d8"
|
stroke="#cccccc"
|
||||||
strokeWidth={2}
|
dot={false}
|
||||||
dot={false}
|
/>
|
||||||
/>
|
<Line
|
||||||
<Tooltip
|
yAxisId="left"
|
||||||
labelFormatter={value => displayDistance
|
type="linear"
|
||||||
? `distance: ${value} km`
|
dataKey="speed"
|
||||||
: `duration: ${format(value, 'HH:mm:ss')}`}
|
stroke="#8884d8"
|
||||||
/>
|
strokeWidth={2}
|
||||||
</ComposedChart>
|
dot={false}
|
||||||
</ResponsiveContainer>
|
/>
|
||||||
</div>
|
<Tooltip
|
||||||
<div className="chart-info">data from gpx, without any cleaning</div>
|
labelFormatter={value => displayDistance
|
||||||
|
? `distance: ${value} km`
|
||||||
|
: `duration: ${format(value, 'HH:mm:ss')}`}
|
||||||
|
/>
|
||||||
|
</ComposedChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
<div className="chart-info">data from gpx, without any cleaning</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'No data to display'
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user