start and end dates can be updated on stats graph

fittrackee_client/src/components/Common/Stats/CustomLabel.jsx

@@ -2,8 +2,14 @@ import React from 'react'
 
 import { formatValue } from '../../../utils/stats'
 
+/**
+ * @return {null}
+ */
 export default function CustomLabel (props) {
   const { displayedData, x, y, width, value } = props
+  if (!value) {
+    return null
+  }
   const radius = 10
   const formattedValue = formatValue(displayedData, value)
 

fittrackee_client/src/components/Common/Stats/StatsChart.jsx

@@ -79,6 +79,9 @@ export default class StatsCharts extends React.PureComponent {
             />
             {sports.map((s, i) => (
               <Bar
+                // disable for now due to problems  w/ CustomLabel
+                // see https://github.com/recharts/recharts/issues/829
+                isAnimationActive={false}
                 key={s.id}
                 dataKey={s.label}
                 stackId="a"

fittrackee_client/src/components/Common/Stats/index.jsx

@@ -30,8 +30,10 @@ class Statistics extends React.PureComponent {
   }
 
   render() {
-    const { displayedSports, sports, statistics, statsParams } = this.props
+    const {
-    if (Object.keys(statistics).length === 0) {
+      displayedSports, sports, statistics, statsParams, displayEmpty
+    } = this.props
+    if (!displayEmpty && Object.keys(statistics).length === 0) {
       return 'No workouts'
     }
     const stats = formatStats(statistics, sports, statsParams, displayedSports)

fittrackee_client/src/components/Dashboard/Statistics.jsx

@@ -23,7 +23,7 @@ export default class Statistics extends React.Component {
           This month
         </div>
         <div className="card-body">
-          <Stats statsParams={this.state} />
+          <Stats displayEmpty={false} statsParams={this.state} />
         </div>
       </div>
     )

fittrackee_client/src/components/Statistics/index.jsx

@@ -4,7 +4,12 @@ import {
   endOfYear,
   startOfMonth,
   startOfYear,
+  startOfWeek,
+  addMonths,
+  addWeeks,
+  addYears,
   subMonths,
+  subWeeks,
   subYears
 } from 'date-fns'
 import React from 'react'
@@ -70,6 +75,37 @@ class Statistics extends React.Component {
     }
   }
 
+  handleOnClickArrows(forward) {
+    const { start, end, duration } = this.state.statsParams
+    let newStart, newEnd
+    if (forward) {
+      newStart = duration === 'year'
+        ? startOfYear(subYears(start, 1))
+        : duration === 'week'
+          ? startOfWeek(subWeeks(start, 1))
+          : startOfMonth(subMonths(start, 1))
+      newEnd = duration === 'year'
+        ? endOfYear(subYears(end, 1))
+        : duration === 'week'
+          ? endOfWeek(subWeeks(end, 1))
+          : endOfMonth(subMonths(end, 1))
+    } else {
+      newStart = duration === 'year'
+        ? startOfYear(addYears(start, 1))
+        : duration === 'week'
+          ? startOfWeek(addWeeks(start, 1))
+          : startOfMonth(addMonths(start, 1))
+      newEnd = duration === 'year'
+        ? endOfYear(addYears(end, 1))
+        : duration === 'week'
+          ? endOfWeek(addWeeks(end, 1))
+          : endOfMonth(addMonths(end, 1))
+    }
+    this.setState({ statsParams:
+      { duration, end: newEnd, start: newStart, type: 'by_time' }
+    })
+  }
+
   render() {
     const { displayedSports, statsParams } = this.state
     const { sports } = this.props
@@ -81,6 +117,15 @@ class Statistics extends React.Component {
           </div>
           <div className="card-body">
             <div className="chart-filters row">
+              <div className="col">
+                <p className="text-center">
+                  <i
+                    className="fa fa-chevron-left"
+                    aria-hidden="true"
+                    onClick={() => this.handleOnClickArrows(true)}
+                  />
+                </p>
+              </div>
               <div className="col-md-3">
                 <select
                   className="form-control input-lg"
@@ -95,8 +140,18 @@ class Statistics extends React.Component {
                   ))}
                 </select>
               </div>
+              <div className="col">
+                <p className="text-center">
+                  <i
+                    className="fa fa-chevron-right"
+                    aria-hidden="true"
+                    onClick={() => this.handleOnClickArrows(false)}
+                  />
+                </p>
+                </div>
             </div>
             <Stats
+              displayEmpty
               displayedSports={displayedSports}
               statsParams={statsParams}
             />