Client - [PR84/93] display elevation on statistics

fittrackee_client/src/components/Common/StatsChart/index.vue

@@ -32,6 +32,24 @@
           />
           {{ $t('workouts.WORKOUT', 2) }}
         </label>
+        <label v-if="fullStats">
+          <input
+            type="radio"
+            name="total_ascent"
+            :checked="displayedData === 'total_ascent'"
+            @click="updateDisplayData"
+          />
+          {{ $t('workouts.ASCENT') }}
+        </label>
+        <label v-if="fullStats">
+          <input
+            type="radio"
+            name="total_descent"
+            :checked="displayedData === 'total_descent'"
+            @click="updateDisplayData"
+          />
+          {{ $t('workouts.DESCENT') }}
+        </label>
       </div>
       <Chart
         v-if="labels.length > 0"

fittrackee_client/src/types/statistics.ts

@@ -22,6 +22,8 @@ export type TStatisticsDatasetKeys =
   | 'nb_workouts'
   | 'total_duration'
   | 'total_distance'
+  | 'total_ascent'
+  | 'total_descent'
 
 export type TStatistics = {
   [key in TStatisticsDatasetKeys]: number

fittrackee_client/src/utils/statistics.ts

@@ -45,6 +45,8 @@ export const datasetKeys: TStatisticsDatasetKeys[] = [
   'nb_workouts',
   'total_duration',
   'total_distance',
+  'total_ascent',
+  'total_descent',
 ]
 
 export const getDateKeys = (
@@ -78,12 +80,16 @@ export const getDatasets = (displayedSports: ISport[]): TStatisticsDatasets => {
     nb_workouts: [],
     total_distance: [],
     total_duration: [],
+    total_ascent: [],
+    total_descent: [],
   }
   displayedSports.map((sport) => {
     const color = sportColors[sport.label]
     datasets.nb_workouts.push(getStatisticsChartDataset(sport.label, color))
     datasets.total_distance.push(getStatisticsChartDataset(sport.label, color))
     datasets.total_duration.push(getStatisticsChartDataset(sport.label, color))
+    datasets.total_ascent.push(getStatisticsChartDataset(sport.label, color))
+    datasets.total_descent.push(getStatisticsChartDataset(sport.label, color))
   })
   return datasets
 }

fittrackee_client/src/utils/tooltip.ts

@@ -6,9 +6,15 @@ export const formatTooltipValue = (
   value: number,
   formatWithUnits = true
 ): string => {
-  return displayedData === 'total_duration'
-    ? formatDuration(value, formatWithUnits)
-    : displayedData === 'total_distance'
-    ? value.toFixed(2) + ' km'
-    : value.toString()
+  switch (displayedData) {
+    case 'total_duration':
+      return formatDuration(value, formatWithUnits)
+    case 'total_distance':
+      return value.toFixed(2) + ' km'
+    case 'total_ascent':
+    case 'total_descent':
+      return (value / 1000).toFixed(2) + ' km'
+    default:
+      return value.toString()
+  }
 }

fittrackee_client/tests/unit/utils/statistics.spec.ts

@@ -218,6 +218,40 @@ describe('getDatasets', () => {
           data: [],
         },
       ],
+      total_ascent: [
+        {
+          label: 'Cycling (Sport)',
+          backgroundColor: ['#4c9792'],
+          data: [],
+        },
+        {
+          label: 'Cycling (Transport)',
+          backgroundColor: ['#88af98'],
+          data: [],
+        },
+        {
+          label: 'Hiking',
+          backgroundColor: ['#bb757c'],
+          data: [],
+        },
+      ],
+      total_descent: [
+        {
+          label: 'Cycling (Sport)',
+          backgroundColor: ['#4c9792'],
+          data: [],
+        },
+        {
+          label: 'Cycling (Transport)',
+          backgroundColor: ['#88af98'],
+          data: [],
+        },
+        {
+          label: 'Hiking',
+          backgroundColor: ['#bb757c'],
+          data: [],
+        },
+      ],
     }
     assert.deepEqual(getDatasets(sports), expected)
   })
@@ -244,6 +278,20 @@ describe('getDatasets', () => {
           data: [],
         },
       ],
+      total_ascent: [
+        {
+          label: 'Cycling (Transport)',
+          backgroundColor: ['#88af98'],
+          data: [],
+        },
+      ],
+      total_descent: [
+        {
+          label: 'Cycling (Transport)',
+          backgroundColor: ['#88af98'],
+          data: [],
+        },
+      ],
     }
     assert.deepEqual(getDatasets([sports[1]]), expected)
   })
@@ -263,6 +311,8 @@ describe('formatStats', () => {
         nb_workouts: [],
         total_distance: [],
         total_duration: [],
+        total_ascent: [],
+        total_descent: [],
       },
     }
     assert.deepEqual(
@@ -302,6 +352,20 @@ describe('formatStats', () => {
             data: [0, 0, 0],
           },
         ],
+        total_ascent: [
+          {
+            label: 'Cycling (Transport)',
+            backgroundColor: ['#88af98'],
+            data: [0, 0, 0],
+          },
+        ],
+        total_descent: [
+          {
+            label: 'Cycling (Transport)',
+            backgroundColor: ['#88af98'],
+            data: [0, 0, 0],
+          },
+        ],
       },
     }
     assert.deepEqual(
@@ -317,6 +381,8 @@ describe('formatStats', () => {
           nb_workouts: 1,
           total_distance: 10,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 100,
         },
       },
       '2021-06': {
@@ -324,11 +390,15 @@ describe('formatStats', () => {
           nb_workouts: 1,
           total_distance: 15,
           total_duration: 3500,
+          total_ascent: 250,
+          total_descent: 150,
         },
         2: {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 200,
         },
       },
       '2021-07': {
@@ -336,6 +406,8 @@ describe('formatStats', () => {
           nb_workouts: 2,
           total_distance: 12,
           total_duration: 5000,
+          total_ascent: 100,
+          total_descent: 100,
         },
       },
     }
@@ -350,6 +422,8 @@ describe('formatStats', () => {
         nb_workouts: [],
         total_distance: [],
         total_duration: [],
+        total_ascent: [],
+        total_descent: [],
       },
     }
     assert.deepEqual(
@@ -365,6 +439,8 @@ describe('formatStats', () => {
           nb_workouts: 1,
           total_distance: 10,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 100,
         },
       },
       '2021-06': {
@@ -372,11 +448,15 @@ describe('formatStats', () => {
           nb_workouts: 1,
           total_distance: 15,
           total_duration: 3500,
+          total_ascent: 250,
+          total_descent: 150,
         },
         2: {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 200,
         },
       },
       '2021-07': {
@@ -384,6 +464,8 @@ describe('formatStats', () => {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 100,
+          total_descent: 100,
         },
       },
     }
@@ -416,6 +498,20 @@ describe('formatStats', () => {
             data: [3000, 3500, 0],
           },
         ],
+        total_ascent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [150, 250, 0],
+          },
+        ],
+        total_descent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [100, 150, 0],
+          },
+        ],
       },
     }
     assert.deepEqual(
@@ -433,6 +529,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 10,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 100,
         },
       },
       '2021': {
@@ -440,11 +538,15 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 15,
           total_duration: 3500,
+          total_ascent: 250,
+          total_descent: 150,
         },
         2: {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 200,
         },
       },
       '2022': {
@@ -452,6 +554,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 100,
+          total_descent: 100,
         },
       },
     }
@@ -484,6 +588,20 @@ describe('formatStats (duration)', () => {
             data: [3000, 3500],
           },
         ],
+        total_ascent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [150, 250],
+          },
+        ],
+        total_descent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [100, 150],
+          },
+        ],
       },
     }
     assert.deepEqual(
@@ -498,6 +616,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 10,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 100,
         },
       },
       '2021': {
@@ -505,11 +625,15 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 15,
           total_duration: 3500,
+          total_ascent: 250,
+          total_descent: 150,
         },
         2: {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 200,
         },
       },
       '2022': {
@@ -517,6 +641,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 100,
+          total_descent: 100,
         },
       },
     }
@@ -549,6 +675,20 @@ describe('formatStats (duration)', () => {
             data: [3000, 3500],
           },
         ],
+        total_ascent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [150, 250],
+          },
+        ],
+        total_descent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [100, 150],
+          },
+        ],
       },
     }
     assert.deepEqual(
@@ -564,6 +704,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 10,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 100,
         },
       },
       '2021-10-10': {
@@ -571,11 +713,15 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 15,
           total_duration: 3500,
+          total_ascent: 250,
+          total_descent: 150,
         },
         2: {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 200,
         },
       },
       '2021-10-17': {
@@ -583,6 +729,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 100,
+          total_descent: 100,
         },
       },
     }
@@ -615,6 +763,20 @@ describe('formatStats (duration)', () => {
             data: [3000, 3500, 0],
           },
         ],
+        total_ascent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [150, 250, 0],
+          },
+        ],
+        total_descent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [100, 150, 0],
+          },
+        ],
       },
     }
     assert.deepEqual(
@@ -630,6 +792,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 10,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 100,
         },
       },
       '2021-10-11': {
@@ -637,11 +801,15 @@ describe('formatStats (duration)', () => {
           nb_workouts: 1,
           total_distance: 15,
           total_duration: 3500,
+          total_ascent: 250,
+          total_descent: 150,
         },
         2: {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 150,
+          total_descent: 200,
         },
       },
       '2021-10-18': {
@@ -649,6 +817,8 @@ describe('formatStats (duration)', () => {
           nb_workouts: 2,
           total_distance: 20,
           total_duration: 3000,
+          total_ascent: 100,
+          total_descent: 100,
         },
       },
     }
@@ -681,6 +851,20 @@ describe('formatStats (duration)', () => {
             data: [3000, 3500, 0],
           },
         ],
+        total_ascent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [150, 250, 0],
+          },
+        ],
+        total_descent: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [100, 150, 0],
+          },
+        ],
       },
     }
     assert.deepEqual(

fittrackee_client/tests/unit/utils/tooltip.spec.ts

@@ -8,20 +8,32 @@ describe('formatTooltipValue', () => {
     {
       description: 'returns 3 if input is workouts count',
       inputDisplayedData: datasetKeys[0], // 'nb_workouts'
-      inputValue: 3,
-      expectedResult: '3',
+      inputValue: 30,
+      expectedResult: '30',
     },
     {
       description: 'returns 00m:03s if input is total duration',
       inputDisplayedData: datasetKeys[1], // 'total_duration'
-      inputValue: 3,
-      expectedResult: '00m 03s',
+      inputValue: 30,
+      expectedResult: '00m 30s',
     },
     {
-      description: 'returns 3.00 if input is total distance',
+      description: 'returns 3.00 km if input is total distance',
       inputDisplayedData: datasetKeys[2], // 'total_distance'
-      inputValue: 3,
-      expectedResult: '3.00 km',
+      inputValue: 30,
+      expectedResult: '30.00 km',
+    },
+    {
+      description: 'returns 0.003 km if input is total ascent',
+      inputDisplayedData: datasetKeys[3], // 'total_distance'
+      inputValue: 30,
+      expectedResult: '0.03 km',
+    },
+    {
+      description: 'returns 0.003 km if input is total descent',
+      inputDisplayedData: datasetKeys[4], // 'total_distance'
+      inputValue: 30,
+      expectedResult: '0.03 km',
     },
   ]
 
@@ -43,20 +55,32 @@ describe('formatTooltipValue (formatWithUnits = false)', () => {
     {
       description: 'returns 3 if input is workouts count',
       inputDisplayedData: datasetKeys[0], // 'nb_workouts'
-      inputValue: 3,
-      expectedResult: '3',
+      inputValue: 30,
+      expectedResult: '30',
     },
     {
       description: 'returns 00:03 if input is total duration',
       inputDisplayedData: datasetKeys[1], // 'total_duration'
-      inputValue: 3,
-      expectedResult: '00:03',
+      inputValue: 30,
+      expectedResult: '00:30',
     },
     {
-      description: 'returns 3.00 if input is total distance',
+      description: 'returns 3.00 km if input is total distance',
       inputDisplayedData: datasetKeys[2], // 'total_distance'
-      inputValue: 3,
-      expectedResult: '3.00 km',
+      inputValue: 30,
+      expectedResult: '30.00 km',
+    },
+    {
+      description: 'returns 0.003 km if input is total ascent',
+      inputDisplayedData: datasetKeys[3], // 'total_distance'
+      inputValue: 30,
+      expectedResult: '0.03 km',
+    },
+    {
+      description: 'returns 0.003 km if input is total descent',
+      inputDisplayedData: datasetKeys[4], // 'total_distance'
+      inputValue: 30,
+      expectedResult: '0.03 km',
     },
   ]