diff --git a/mpwo_client/src/components/App.css b/mpwo_client/src/components/App.css
index 3f72fc1b..636ce365 100644
--- a/mpwo_client/src/components/App.css
+++ b/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 {
diff --git a/mpwo_client/src/components/Dashboard/Statistics.jsx b/mpwo_client/src/components/Dashboard/Statistics.jsx
index ea7f67bf..2007226d 100644
--- a/mpwo_client/src/components/Dashboard/Statistics.jsx
+++ b/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,72 +34,79 @@ 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 (
This month
-
- {data === [] ? (
- 'No activities'
+
+ {Object.keys(statistics).length === 0 ? (
+ 'No activities!'
) : (
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+
+ displayedData === 'distance'
+ ? `${value} km`
+ : displayedData === 'duration'
+ ? format(new Date(value * 1000), 'HH:mm')
+ : value
+ }
+ />
{sports.map((s, i) => (
displayedData === 'duration'
+ ? format(new Date(value * 1000), 'HH:mm')
+ : value
+ }
stackId="a"
- fill={colors[i]}
+ fill={activityColors[i]}
+ unit={displayedData === 'distance' ? ' km' : ''}
/>
))}
diff --git a/mpwo_client/src/utils.js b/mpwo_client/src/utils.js
index 70753a97..fb39c7ad 100644
--- a/mpwo_client/src/utils.js
+++ b/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 => {