Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client: chart update - fix #9

Browse Source
This commit is contained in:
Sam 2018-06-07 12:42:30 +02:00
parent 30f112c094
commit 1fce13b9d0
3 changed files with 68 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mpwo_client/src/components/App.css
View File

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

101
mpwo_client/src/components/Dashboard/Statistics.jsx
View File

@ -6,7 +6,7 @@ import {
} from 'recharts' } from 'recharts'
import { getStats } from '../../actions/stats' import { getStats } from '../../actions/stats'
import { formatStats } from '../../utils' import { activityColors, formatStats } from '../../utils'
class Statistics extends React.Component { class Statistics extends React.Component {
@ -34,72 +34,79 @@ class Statistics extends React.Component {
}) })
} }
render() { render() {
const { sports, statistics } = this.props const { sports, statistics } = this.props
const { displayedData, end, start } = this.state const { displayedData, end, start } = this.state
const data = []
const stats = formatStats(statistics, sports, start, end) const stats = formatStats(statistics, sports, start, end)
const colors = [
'#55a8a3',
'#98C3A9',
'#D0838A',
'#ECC77E',
'#926692',
'#929292'
]
return ( return (
<div className="card activity-card"> <div className="card activity-card">
<div className="card-header"> <div className="card-header">
This month This month
</div> </div>
<div className="card-body chart-month"> <div className="card-body">
{data === [] ? ( {Object.keys(statistics).length === 0 ? (
'No activities' 'No activities!'
) : ( ) : (
<div> <div className="chart-month">
<div className="row chart-radio"> <div className="row chart-radio">
<label className="radioLabel col"> <label className="radioLabel col">
<input <input
type="radio" type="radio"
name="distance" name="distance"
checked={displayedData === 'distance'} checked={displayedData === 'distance'}
onChange={e => this.handleRadioChange(e)} onChange={e => this.handleRadioChange(e)}
/> />
distance distance
</label> </label>
<label className="radioLabel col"> <label className="radioLabel col">
<input <input
type="radio" type="radio"
name="duration" name="duration"
checked={displayedData === 'duration'} checked={displayedData === 'duration'}
onChange={e => this.handleRadioChange(e)} onChange={e => this.handleRadioChange(e)}
/> />
duration duration
</label> </label>
<label className="radioLabel col"> <label className="radioLabel col">
<input <input
type="radio" type="radio"
name="activities" name="activities"
checked={displayedData === 'activities'} checked={displayedData === 'activities'}
onChange={e => this.handleRadioChange(e)} onChange={e => this.handleRadioChange(e)}
/> />
activities activities
</label> </label>
</div> </div>
<ResponsiveContainer height={300}> <ResponsiveContainer height={300}>
<BarChart <BarChart
data={stats[displayedData]} data={stats[displayedData]}
margin={{ top: 15, bottom: 15 }}
> >
<XAxis dataKey="date" /> <XAxis
<YAxis /> 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 /> <Tooltip />
{sports.map((s, i) => ( {sports.map((s, i) => (
<Bar <Bar
key={s.id} key={s.id}
dataKey={s.label} dataKey={s.label}
formatter={value => displayedData === 'duration'
? format(new Date(value * 1000), 'HH:mm')
: value
}
stackId="a" stackId="a"
fill={colors[i]} fill={activityColors[i]}
unit={displayedData === 'distance' ? ' km' : ''}
/> />
))} ))}
</BarChart> </BarChart>

16
mpwo_client/src/utils.js
View File

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