API & Client: minor fix

mpwo_api/mpwo_api/activities/utils.py

@@ -202,7 +202,9 @@ def get_chart_data(gpx_file):
                         )
             distance = 0 if distance is None else 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({
                 'distance': round(distance / 1000, 2),
                 'duration': point.time_difference(first_point),

mpwo_client/src/components/Activities/ActivityDisplay/ActivityCharts.jsx

@@ -43,6 +43,7 @@ class ActivityCharts extends React.Component {
   render() {
     const { chartData } = this.props
     const { displayDistance } = this.state
+    const xInterval = chartData ? parseInt(chartData.length / 10, 10) : 0
     let xDataKey, xScale
     if (displayDistance) {
       xDataKey = 'distance'
@@ -73,6 +74,8 @@ class ActivityCharts extends React.Component {
             duration
           </label>
         </div>
+        {chartData && chartData.length > 0 ? (
+          <div>
             <div className="row chart">
               <ResponsiveContainer height={300}>
                 <ComposedChart
@@ -84,17 +87,22 @@ class ActivityCharts extends React.Component {
                     dataKey={xDataKey}
                     label={{ value: xDataKey, offset: 0, position: 'bottom' }}
                     scale={xScale}
+                    interval={xInterval}
                     tickFormatter={value => displayDistance
                                             ? value
                                             : format(value, 'HH:mm:ss')}
                     type="number"
                   />
                   <YAxis
-                label={{ value: 'speed (km/h)', angle: -90, position: 'left' }}
+                    label={{
+                      value: 'speed (km/h)', angle: -90, position: 'left'
+                    }}
                     yAxisId="left"
                   />
                   <YAxis
-                label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
+                    label={{
+                      value: 'altitude (m)', angle: -90, position: 'right'
+                    }}
                     yAxisId="right" orientation="right"
                   />
                   <Area
@@ -123,6 +131,10 @@ class ActivityCharts extends React.Component {
             </div>
             <div className="chart-info">data from gpx, without any cleaning</div>
           </div>
+        ) : (
+          'No data to display'
+        )}
+      </div>
     )
   }
 }