adding a sport filter for stats graphs - #13
This commit is contained in:
parent
3d4ad8da81
commit
a13d00d5d9
@ -73,6 +73,17 @@ label {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.activity-label {
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-logo {
|
||||||
|
margin: 0 5px;
|
||||||
|
max-width: 20px;
|
||||||
|
max-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.activity-no-map {
|
.activity-no-map {
|
||||||
background-color: #eaeaea;
|
background-color: #eaeaea;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
@ -123,6 +134,10 @@ label {
|
|||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chart-activities {
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-filters {
|
.chart-filters {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
@ -25,14 +25,17 @@ class Statistics extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { sports, statistics, statsParams } = this.props
|
const { displayedSports, sports, statistics, statsParams } = this.props
|
||||||
const stats = formatStats(statistics, sports, statsParams)
|
const stats = formatStats(statistics, sports, statsParams, displayedSports)
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{Object.keys(statistics).length === 0 ? (
|
{Object.keys(statistics).length === 0 ? (
|
||||||
'No workouts'
|
'No workouts'
|
||||||
) : (
|
) : (
|
||||||
<StatsChart sports={sports} stats={stats} />
|
<StatsChart
|
||||||
|
sports={sports}
|
||||||
|
stats={stats}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -8,24 +8,29 @@ import {
|
|||||||
subYears
|
subYears
|
||||||
} from 'date-fns'
|
} from 'date-fns'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
|
||||||
|
import { activityColors } from '../../utils/activities'
|
||||||
import Stats from '../Common/Stats'
|
import Stats from '../Common/Stats'
|
||||||
|
|
||||||
const durations = ['week', 'month', 'year']
|
const durations = ['week', 'month', 'year']
|
||||||
|
|
||||||
export default class Statistics extends React.Component {
|
class Statistics extends React.Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
super(props, context)
|
super(props, context)
|
||||||
const date = new Date()
|
const date = new Date()
|
||||||
this.state = {
|
this.state = {
|
||||||
start: startOfMonth(subMonths(date, 11)),
|
displayedSports: props.sports.map(sport => sport.id),
|
||||||
end: endOfMonth(date),
|
statsParams: {
|
||||||
duration: 'month',
|
start: startOfMonth(subMonths(date, 11)),
|
||||||
type: 'by_time',
|
end: endOfMonth(date),
|
||||||
|
duration: 'month',
|
||||||
|
type: 'by_time',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOnChange(e) {
|
handleOnChangeDuration(e) {
|
||||||
const duration = e.target.value
|
const duration = e.target.value
|
||||||
const date = new Date()
|
const date = new Date()
|
||||||
const start = duration === 'year'
|
const start = duration === 'year'
|
||||||
@ -38,11 +43,25 @@ export default class Statistics extends React.Component {
|
|||||||
: duration === 'week'
|
: duration === 'week'
|
||||||
? endOfWeek(date)
|
? endOfWeek(date)
|
||||||
: endOfMonth(date)
|
: endOfMonth(date)
|
||||||
this.setState({ duration, end, start })
|
this.setState({ statsParams:
|
||||||
|
{ duration, end, start, type: 'by_time' }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
handleOnChangeSports(sportId) {
|
||||||
|
const { displayedSports } = this.state
|
||||||
|
if (displayedSports.includes(sportId)) {
|
||||||
|
this.setState({
|
||||||
|
displayedSports: displayedSports.filter(s => s !== sportId)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.setState({ displayedSports: displayedSports.concat([sportId]) })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { duration } = this.state
|
const { displayedSports, statsParams } = this.state
|
||||||
|
const { sports } = this.props
|
||||||
return (
|
return (
|
||||||
<div className="container dashboard">
|
<div className="container dashboard">
|
||||||
<div className="card activity-card">
|
<div className="card activity-card">
|
||||||
@ -55,8 +74,8 @@ export default class Statistics extends React.Component {
|
|||||||
<select
|
<select
|
||||||
className="form-control input-lg"
|
className="form-control input-lg"
|
||||||
name="duration"
|
name="duration"
|
||||||
defaultValue={duration}
|
defaultValue={statsParams.duration}
|
||||||
onChange={e => this.handleOnChange(e)}
|
onChange={e => this.handleOnChangeDuration(e)}
|
||||||
>
|
>
|
||||||
{durations.map(d => (
|
{durations.map(d => (
|
||||||
<option key={d} value={d}>
|
<option key={d} value={d}>
|
||||||
@ -66,10 +85,34 @@ export default class Statistics extends React.Component {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Stats statsParams={this.state} />
|
<Stats
|
||||||
|
displayedSports={displayedSports}
|
||||||
|
statsParams={statsParams}
|
||||||
|
/>
|
||||||
|
<div className="row chart-activities">
|
||||||
|
{sports.map(sport => (
|
||||||
|
<label className="col activity-label" key={sport.id}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={displayedSports.includes(sport.id)}
|
||||||
|
name={sport.label}
|
||||||
|
onChange={() => this.handleOnChangeSports(sport.id)}
|
||||||
|
/>
|
||||||
|
<span style={{ color: activityColors[sport.id - 1] }}>
|
||||||
|
{` ${sport.label}`}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
state => ({
|
||||||
|
sports: state.sports.data,
|
||||||
|
})
|
||||||
|
)(Statistics)
|
||||||
|
@ -74,7 +74,7 @@ const startDate = (duration, day) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const formatStats = (
|
export const formatStats = (
|
||||||
stats, sports, params
|
stats, sports, params, displayedSports
|
||||||
) => {
|
) => {
|
||||||
const nbActivitiesStats = []
|
const nbActivitiesStats = []
|
||||||
const distanceStats = []
|
const distanceStats = []
|
||||||
@ -94,7 +94,9 @@ export const formatStats = (
|
|||||||
const dataDuration = { date: xAxis }
|
const dataDuration = { date: xAxis }
|
||||||
|
|
||||||
if (stats[date]) {
|
if (stats[date]) {
|
||||||
Object.keys(stats[date]).map(sportId => {
|
Object.keys(stats[date]).filter(
|
||||||
|
sportId => displayedSports ? displayedSports.includes(+sportId) : true
|
||||||
|
).map(sportId => {
|
||||||
const sportLabel = sports.filter(s => s.id === +sportId)[0].label
|
const sportLabel = sports.filter(s => s.id === +sportId)[0].label
|
||||||
dataNbActivities[sportLabel] = stats[date][sportId].nb_activities
|
dataNbActivities[sportLabel] = stats[date][sportId].nb_activities
|
||||||
dataDistance[sportLabel] = stats[date][sportId].total_distance
|
dataDistance[sportLabel] = stats[date][sportId].total_distance
|
||||||
|
Loading…
Reference in New Issue
Block a user