adding a sport filter for stats graphs - #13

fittrackee_client/src/components/App.css

@@ -73,6 +73,17 @@ label {
   padding: 0;
 }
 
+.activity-label {
+  font-size: 0.8em;
+  color: #666
+}
+
+.activity-logo {
+  margin: 0 5px;
+  max-width: 20px;
+  max-height: 20px;
+}
+
 .activity-no-map {
   background-color: #eaeaea;
   color: #666666;
@@ -123,6 +134,10 @@ label {
   font-size: 0.9em;
 }
 
+.chart-activities {
+  margin-left: 60px;
+}
+
 .chart-filters {
   padding-bottom: 10px;
 }

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

@@ -25,14 +25,17 @@ class Statistics extends React.PureComponent {
   }
 
   render() {
-    const { sports, statistics, statsParams } = this.props
-    const stats = formatStats(statistics, sports, statsParams)
+    const { displayedSports, sports, statistics, statsParams } = this.props
+    const stats = formatStats(statistics, sports, statsParams, displayedSports)
     return (
       <>
         {Object.keys(statistics).length === 0 ? (
           'No workouts'
         ) : (
-          <StatsChart sports={sports} stats={stats} />
+          <StatsChart
+            sports={sports}
+            stats={stats}
+          />
           )}
       </>
     )

fittrackee_client/src/components/Statistics/index.jsx

@@ -8,24 +8,29 @@ import {
   subYears
 } from 'date-fns'
 import React from 'react'
+import { connect } from 'react-redux'
 
+import { activityColors } from '../../utils/activities'
 import Stats from '../Common/Stats'
 
 const durations = ['week', 'month', 'year']
 
-export default class Statistics extends React.Component {
+class Statistics extends React.Component {
   constructor(props, context) {
     super(props, context)
     const date = new Date()
     this.state = {
-      start: startOfMonth(subMonths(date, 11)),
-      end: endOfMonth(date),
-      duration: 'month',
-      type: 'by_time',
+      displayedSports: props.sports.map(sport => sport.id),
+      statsParams: {
+        start: startOfMonth(subMonths(date, 11)),
+        end: endOfMonth(date),
+        duration: 'month',
+        type: 'by_time',
+      }
     }
   }
 
-  handleOnChange(e) {
+  handleOnChangeDuration(e) {
     const duration = e.target.value
     const date = new Date()
     const start = duration === 'year'
@@ -38,11 +43,25 @@ export default class Statistics extends React.Component {
       : duration === 'week'
         ? endOfWeek(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() {
-    const { duration } = this.state
+    const { displayedSports, statsParams } = this.state
+    const { sports } = this.props
     return (
       <div className="container dashboard">
         <div className="card activity-card">
@@ -55,8 +74,8 @@ export default class Statistics extends React.Component {
                 <select
                   className="form-control input-lg"
                   name="duration"
-                  defaultValue={duration}
-                  onChange={e => this.handleOnChange(e)}
+                  defaultValue={statsParams.duration}
+                  onChange={e => this.handleOnChangeDuration(e)}
                 >
                   {durations.map(d => (
                     <option key={d} value={d}>
@@ -66,10 +85,34 @@ export default class Statistics extends React.Component {
                 </select>
               </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>
     )
   }
 }
+
+export default connect(
+  state => ({
+    sports: state.sports.data,
+  })
+)(Statistics)

fittrackee_client/src/utils/stats.js

@@ -74,7 +74,7 @@ const startDate = (duration, day) => {
 }
 
 export const formatStats = (
-  stats, sports, params
+  stats, sports, params, displayedSports
 ) => {
   const nbActivitiesStats = []
   const distanceStats = []
@@ -94,7 +94,9 @@ export const formatStats = (
     const dataDuration = { date: xAxis }
 
     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
         dataNbActivities[sportLabel] = stats[date][sportId].nb_activities
         dataDistance[sportLabel] = stats[date][sportId].total_distance