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 => {