Client - improve calendar display on desktop and mobile (wip)

fittrackee_client/src/utils/sports.ts

@@ -1,4 +1,5 @@
 import { ISport } from '@/types/sports'
+import { IWorkout } from '@/types/workouts'
 
 export const sportColors: Record<string, string> = {
   'Cycling (Sport)': '#55A8A3',
@@ -9,6 +10,12 @@ export const sportColors: Record<string, string> = {
   Walking: '#929292',
 }
 
+export const sportIdColors = (sports: ISport[]): Record<number, string> => {
+  const colors: Record<number, string> = {}
+  sports.map((sport) => (colors[sport.id] = sportColors[sport.label]))
+  return colors
+}
+
 const sortSports = (a: ISport, b: ISport): number => {
   const sportALabel = a.label.toLowerCase()
   const sportBLabel = b.label.toLowerCase()
@@ -27,3 +34,9 @@ export const translateSports = (
       label: t(`sports.${sport.label}.LABEL`),
     }))
     .sort(sortSports)
+
+export const getSportImg = (workout: IWorkout, sports: ISport[]): string => {
+  return sports
+    .filter((sport) => sport.id === workout.sport_id)
+    .map((sport) => sport.img)[0]
+}

fittrackee_client/src/utils/workouts.ts

@@ -1,4 +1,5 @@
 import {
+  IWorkout,
   IWorkoutApiChartData,
   IWorkoutChartData,
   TCoordinates,
@@ -42,3 +43,27 @@ export const getDatasets = (
 
   return { distance_labels, duration_labels, datasets, coordinates }
 }
+
+export const getDonutDatasets = (
+  workouts: IWorkout[]
+): Record<number, Record<string, number>> => {
+  const total = workouts.length
+  if (total === 0) {
+    return {}
+  }
+
+  const datasets: Record<number, Record<string, number>> = {}
+  workouts.map((workout) => {
+    if (!datasets[workout.sport_id]) {
+      datasets[workout.sport_id] = {
+        count: 0,
+        percentage: 0,
+      }
+    }
+    datasets[workout.sport_id].count += 1
+    datasets[workout.sport_id].percentage =
+      datasets[workout.sport_id].count / total
+  })
+
+  return datasets
+}