Client: chart update (area instead of line for elevation)

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

@@ -2,7 +2,7 @@ import { format } from 'date-fns'
 import React from 'react'
 import { connect } from 'react-redux'
 import {
-   Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
+   Area, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis
 } from 'recharts'
 
 import { getActivityChartData } from '../../../actions/activities'
@@ -75,7 +75,7 @@ class ActivityCharts extends React.Component {
         </div>
         <div className="row chart">
           <ResponsiveContainer height={300}>
-            <LineChart
+            <ComposedChart
               data={chartData}
               margin={{ top: 15, right: 30, left: 20, bottom: 15 }}
             >
@@ -97,28 +97,31 @@ class ActivityCharts extends React.Component {
                 label={{ value: 'altitude (m)', angle: -90, position: 'right' }}
                 yAxisId="right" orientation="right"
               />
+              <Area
+                yAxisId="right"
+                type="linear"
+                dataKey="elevation"
+                fill="#e5e5e5"
+                stroke="#cccccc"
+                dot={false}
+              />
               <Line
                 yAxisId="left"
                 type="linear"
                 dataKey="speed"
                 stroke="#8884d8"
-                dot={false}
-              />
-              <Line
-                yAxisId="right"
-                type="linear"
-                dataKey="elevation"
-                stroke="#808080"
+                strokeWidth={2}
                 dot={false}
               />
               <Tooltip
                 labelFormatter={value => displayDistance
-                                ? `${value} km`
-                                : format(value, 'HH:mm:ss')}
+                                ? `distance: ${value} km`
+                                : `duration: ${format(value, 'HH:mm:ss')}`}
               />
-            </LineChart>
+            </ComposedChart>
           </ResponsiveContainer>
         </div>
+        <div className="chart-info">data from gpx, without any cleaning</div>
       </div>
     )
   }

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

@@ -95,6 +95,7 @@ class ActivityDisplay extends React.Component {
                       <div className="card-body">
                         <div className="row">
                           <div className="col">
+                            <div className="chart-title">Chart</div>
                             <ActivityCharts activity={activity} />
                           </div>
                         </div>

mpwo_client/src/components/App.css

@@ -100,6 +100,11 @@ input, textarea {
   font-size: 0.9em;
 }
 
+.chart-info {
+  font-size: 0.8em;
+  font-style: italic;
+}
+
 .chart-radio {
   display: flex;
   font-size: 0.8em;
@@ -113,6 +118,11 @@ input, textarea {
   margin-right: 10px;
 }
 
+.chart-title {
+  font-size: 1.1em;
+  margin-bottom: 10px;
+}
+
 .custom-modal {
   background-color: #fff;
   border-radius: 5px;