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()
+  }
 }