Client - display converted distance in stats charts

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

@@ -40,6 +40,10 @@
         type: Boolean,
         required: true,
       },
+      useImperialUnits: {
+        type: Boolean,
+        required: true,
+      },
     },
     setup(props) {
       const { t } = useI18n()
@@ -80,7 +84,12 @@
             ticks: {
               maxTicksLimit: 6,
               callback: function (value) {
-                return formatTooltipValue(props.displayedData, +value, false)
+                return formatTooltipValue(
+                  props.displayedData,
+                  +value,
+                  props.useImperialUnits,
+                  false
+                )
               },
             },
             afterFit: function (scale: LayoutItem) {
@@ -108,7 +117,12 @@
                 .reduce((total, value) => getSum(total, value), 0)
               return context.datasetIndex ===
                 props.displayedSportIds.length - 1 && total > 0
-                ? formatTooltipValue(props.displayedData, total, false)
+                ? formatTooltipValue(
+                    props.displayedData,
+                    total,
+                    props.useImperialUnits,
+                    false
+                  )
                 : null
             },
           },
@@ -132,7 +146,8 @@
                 if (context.parsed.y !== null) {
                   label += formatTooltipValue(
                     props.displayedData,
-                    context.parsed.y
+                    context.parsed.y,
+                    props.useImperialUnits
                   )
                 }
                 return label
@@ -144,7 +159,11 @@
                 })
                 return (
                   `${t('common.TOTAL')}: ` +
-                  formatTooltipValue(props.displayedData, sum)
+                  formatTooltipValue(
+                    props.displayedData,
+                    sum,
+                    props.useImperialUnits
+                  )
                 )
               },
             },

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

@@ -58,6 +58,7 @@
         :displayedData="displayedData"
         :displayedSportIds="displayedSportIds"
         :fullStats="fullStats"
+        :useImperialUnits="user.imperial_units"
       />
     </div>
   </div>
@@ -134,7 +135,8 @@
           props.user.weekm,
           props.sports,
           props.displayedSportIds,
-          statistics.value
+          statistics.value,
+          props.user.imperial_units
         )
       )
 

fittrackee_client/src/utils/statistics.ts

@@ -25,6 +25,7 @@ import {
 } from '@/types/statistics'
 import { incrementDate, getStartDate } from '@/utils/dates'
 import { sportColors } from '@/utils/sports'
+import { convertDistance, units } from '@/utils/units'
 
 const dateFormats: Record<string, Record<string, string>> = {
   week: {
@@ -94,12 +95,35 @@ export const getDatasets = (displayedSports: ISport[]): TStatisticsDatasets => {
   return datasets
 }
 
+export const convertStatsValue = (
+  datasetKey: TStatisticsDatasetKeys,
+  value: number,
+  useImperialUnits: boolean
+): number => {
+  switch (datasetKey) {
+    case 'total_distance':
+    case 'total_ascent':
+    case 'total_descent': {
+      const unitFrom = datasetKey === 'total_distance' ? 'km' : 'm'
+      const unitTo = useImperialUnits ? units[unitFrom].defaultTarget : unitFrom
+      return useImperialUnits
+        ? convertDistance(value, unitFrom, unitTo, 2)
+        : value
+    }
+    default:
+    case 'nb_workouts':
+    case 'total_duration':
+      return value
+  }
+}
+
 export const formatStats = (
   params: IStatisticsDateParams,
   weekStartingMonday: boolean,
   sports: ISport[],
   displayedSportsId: number[],
-  apiStats: TStatisticsFromApi
+  apiStats: TStatisticsFromApi,
+  useImperialUnits: boolean
 ): IStatisticsChartData => {
   const dayKeys = getDateKeys(params, weekStartingMonday)
   const dateFormat = dateFormats[params.duration]
@@ -123,7 +147,11 @@ export const formatStats = (
           apiStats !== {} &&
             date in apiStats &&
             sportsId[dataset.label] in apiStats[date]
-            ? apiStats[date][sportsId[dataset.label]][datasetKey]
+            ? convertStatsValue(
+                datasetKey,
+                apiStats[date][sportsId[dataset.label]][datasetKey],
+                useImperialUnits
+              )
             : 0
         )
       })

fittrackee_client/src/utils/tooltip.ts

@@ -1,19 +1,23 @@
 import { TStatisticsDatasetKeys } from '@/types/statistics'
 import { formatDuration } from '@/utils/duration'
+import { units } from '@/utils/units'
 
 export const formatTooltipValue = (
   displayedData: TStatisticsDatasetKeys,
   value: number,
+  useImperialUnits: boolean,
   formatWithUnits = true
 ): string => {
+  const unitFrom = 'km'
+  const unitTo = useImperialUnits ? units[unitFrom].defaultTarget : unitFrom
   switch (displayedData) {
     case 'total_duration':
       return formatDuration(value, formatWithUnits)
     case 'total_distance':
-      return value.toFixed(2) + ' km'
+      return `${value.toFixed(2)} ${unitTo}`
     case 'total_ascent':
     case 'total_descent':
-      return (value / 1000).toFixed(2) + ' km'
+      return `${(value / 1000).toFixed(2)} ${unitTo}`
     default:
       return value.toString()
   }