display stats depending on duration - #13
This commit is contained in:
parent
cd39f46270
commit
3d4ad8da81
@ -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;
|
||||||
|
@ -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),
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user