API & Client: minor fix

This commit is contained in:
Sam 2018-05-28 23:37:53 +02:00
parent 66343c16b8
commit 1ac669e6e6
2 changed files with 64 additions and 50 deletions

View File

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

View File

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