Client: chart update - fix #9

mpwo_client/src/components/App.css

@@ -121,7 +121,7 @@ input, textarea {
 
 .chart-radio {
   display: flex;
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 
 .chart-radio label {

mpwo_client/src/components/Dashboard/Statistics.jsx

@@ -6,7 +6,7 @@ import {
 } from 'recharts'
 
 import { getStats } from '../../actions/stats'
-import { formatStats } from '../../utils'
+import { activityColors, formatStats } from '../../utils'
 
 
 class Statistics extends React.Component {
@@ -34,30 +34,20 @@ class Statistics extends React.Component {
     })
   }
 
-
   render() {
     const { sports, statistics } = this.props
     const { displayedData, end, start } = this.state
-    const data = []
     const stats = formatStats(statistics, sports, start, end)
-    const colors = [
-      '#55a8a3',
-      '#98C3A9',
-      '#D0838A',
-      '#ECC77E',
-      '#926692',
-      '#929292'
-    ]
     return (
       <div className="card activity-card">
         <div className="card-header">
           This month
         </div>
-        <div className="card-body chart-month">
-          {data === [] ? (
-            'No activities'
+        <div className="card-body">
+          {Object.keys(statistics).length === 0 ? (
+            'No activities!'
           ) : (
-            <div>
+            <div className="chart-month">
               <div className="row chart-radio">
                 <label className="radioLabel col">
                   <input
@@ -90,16 +80,33 @@ class Statistics extends React.Component {
               <ResponsiveContainer height={300}>
                 <BarChart
                   data={stats[displayedData]}
+                  margin={{ top: 15, bottom: 15 }}
                 >
-                  <XAxis dataKey="date" />
-                  <YAxis />
+                  <XAxis
+                    dataKey="date"
+                    interval={0} // to force to display all ticks
+                    label={{ value: 'date', offset: 0, position: 'bottom' }}
+                  />
+                  <YAxis
+                    tickFormatter={value => displayedData === 'distance'
+                      ? `${value} km`
+                      : displayedData === 'duration'
+                        ? format(new Date(value * 1000), 'HH:mm')
+                        : value
+                    }
+                  />
                   <Tooltip />
                   {sports.map((s, i) => (
                     <Bar
                       key={s.id}
                       dataKey={s.label}
+                      formatter={value => displayedData === 'duration'
+                        ? format(new Date(value * 1000), 'HH:mm')
+                        : value
+                      }
                       stackId="a"
-                      fill={colors[i]}
+                      fill={activityColors[i]}
+                      unit={displayedData === 'distance' ? ' km' : ''}
                     />
                   ))}
                 </BarChart>

mpwo_client/src/utils.js

@@ -5,6 +5,15 @@ export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
 export const thunderforestApiKey = `${
   process.env.REACT_APP_THUNDERFOREST_API_KEY
 }`
+export const activityColors = [
+  '#55a8a3',
+  '#98C3A9',
+  '#D0838A',
+  '#ECC77E',
+  '#926692',
+  '#929292',
+  '#428bca',
+]
 
 export const isLoggedIn = () => !!window.localStorage.authToken
 
@@ -117,9 +126,10 @@ export const formatStats = (stats, sports, startDate, endDate) => {
        day = addDays(day, 7)
   ) {
     const date = format(day, 'YYYY-MM-DD')
-    const dataNbActivities = { date }
-    const dataDistance = { date }
-    const dataDuration = { date }
+    const xAxis = format(day, 'DD/MM')
+    const dataNbActivities = { date: xAxis }
+    const dataDistance = { date: xAxis }
+    const dataDuration = { date: xAxis }
 
     if (stats[date]) {
       Object.keys(stats[date]).map(sportId => {