Client - display converted distance in stats charts

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