Client - customize chart tooltip (wip)

fittrackee_client/src/utils/duration.ts

@@ -0,0 +1,20 @@
+export const formatDuration = (
+  totalSeconds: number,
+  formatWithUnits = false
+): string => {
+  let days = '0'
+  if (formatWithUnits) {
+    days = String(Math.floor(totalSeconds / 86400))
+    totalSeconds %= 86400
+  }
+  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0')
+  totalSeconds %= 3600
+  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0')
+  const seconds = String(totalSeconds % 60).padStart(2, '0')
+  if (formatWithUnits) {
+    return `${days === '0' ? '' : `${days}d `}${
+      hours === '00' ? '' : `${hours}h `
+    }${minutes}m ${seconds}s`
+  }
+  return `${hours === '00' ? '' : `${hours}:`}${minutes}:${seconds}`
+}

fittrackee_client/src/utils/statistics.ts

@@ -19,7 +19,11 @@ const dateFormats: genericObject = {
   year: 'yyyy',
 }
 
-const data: TDatasetKeys[] = ['nb_workouts', 'total_duration', 'total_distance']
+export const datasetKeys: TDatasetKeys[] = [
+  'nb_workouts',
+  'total_duration',
+  'total_distance',
+]
 
 export const getDateKeys = (
   params: IStatisticsDateParams,
@@ -95,7 +99,7 @@ export const formatStats = (
   dayKeys.map((key) => {
     const date: string = format(key, dateFormat)
     labels.push(date)
-    data.map((datasetKey) => {
+    datasetKeys.map((datasetKey) => {
       datasets[datasetKey].map((dataset) => {
         dataset.data.push(
           apiStats !== {} &&

fittrackee_client/src/utils/tooltip.ts

@@ -0,0 +1,13 @@
+import { TDatasetKeys } from '@/types/statistics'
+import { formatDuration } from '@/utils/duration'
+
+export const formatTooltipValue = (
+  displayedData: TDatasetKeys,
+  value: number
+): string => {
+  return displayedData === 'total_duration'
+    ? formatDuration(value, true)
+    : displayedData === 'total_distance'
+    ? value.toFixed(2) + ' km'
+    : value.toString()
+}