display stats depending on duration - #13

This commit is contained in:
Sam 2019-01-04 11:51:06 +01:00
parent cd39f46270
commit 3d4ad8da81
3 changed files with 58 additions and 3 deletions

View File

@ -123,6 +123,10 @@ label {
font-size: 0.9em; font-size: 0.9em;
} }
.chart-filters {
padding-bottom: 10px;
}
.chart-info { .chart-info {
font-size: 0.8em; font-size: 0.8em;
font-style: italic; font-style: italic;

View File

@ -9,12 +9,21 @@ import StatsChart from './StatsChart'
class Statistics extends React.PureComponent { class Statistics extends React.PureComponent {
componentDidMount() { componentDidMount() {
this.props.loadMonthActivities( this.props.loadActivities(
this.props.user.id, this.props.user.id,
this.props.statsParams, this.props.statsParams,
) )
} }
componentDidUpdate(prevProps) {
if (this.props.statsParams !== prevProps.statsParams) {
this.props.loadActivities(
this.props.user.id,
this.props.statsParams,
)
}
}
render() { render() {
const { sports, statistics, statsParams } = this.props const { sports, statistics, statsParams } = this.props
const stats = formatStats(statistics, sports, statsParams) const stats = formatStats(statistics, sports, statsParams)
@ -37,7 +46,7 @@ export default connect(
user: state.user, user: state.user,
}), }),
dispatch => ({ dispatch => ({
loadMonthActivities: (userId, data) => { loadActivities: (userId, data) => {
const dateFormat = 'YYYY-MM-DD' const dateFormat = 'YYYY-MM-DD'
const params = { const params = {
from: format(data.start, dateFormat), from: format(data.start, dateFormat),

View File

@ -1,8 +1,17 @@
import { endOfMonth, startOfMonth, subMonths } from 'date-fns' import {
endOfMonth,
endOfWeek,
endOfYear,
startOfMonth,
startOfYear,
subMonths,
subYears
} from 'date-fns'
import React from 'react' import React from 'react'
import Stats from '../Common/Stats' import Stats from '../Common/Stats'
const durations = ['week', 'month', 'year']
export default class Statistics extends React.Component { export default class Statistics extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -16,7 +25,24 @@ export default class Statistics extends React.Component {
} }
} }
handleOnChange(e) {
const duration = e.target.value
const date = new Date()
const start = duration === 'year'
? startOfYear(subYears(date, 9))
: duration === 'week'
? startOfMonth(subMonths(date, 2))
: startOfMonth(subMonths(date, 11))
const end = duration === 'year'
? endOfYear(date)
: duration === 'week'
? endOfWeek(date)
: endOfMonth(date)
this.setState({ duration, end, start })
}
render() { render() {
const { duration } = this.state
return ( return (
<div className="container dashboard"> <div className="container dashboard">
<div className="card activity-card"> <div className="card activity-card">
@ -24,6 +50,22 @@ export default class Statistics extends React.Component {
Statistics Statistics
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="chart-filters row">
<div className="col-md-3">
<select
className="form-control input-lg"
name="duration"
defaultValue={duration}
onChange={e => this.handleOnChange(e)}
>
{durations.map(d => (
<option key={d} value={d}>
{d}
</option>
))}
</select>
</div>
</div>
<Stats statsParams={this.state} /> <Stats statsParams={this.state} />
</div> </div>
</div> </div>