Client - display workout chart with dark mode colors when enabled

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue

@@ -59,8 +59,10 @@
   import type { ComputedRef } from 'vue'
   import { Line } from 'vue-chartjs'
   import { useI18n } from 'vue-i18n'
+  import { useStore } from 'vuex'
 
   import { htmlLegendPlugin } from '@/components/Workout/WorkoutDetail/WorkoutChart/legend'
+  import { ROOT_STORE } from '@/store/constants'
   import type { TUnit } from '@/types/units'
   import type { IAuthUserProfile } from '@/types/user'
   import type {
@@ -79,13 +81,22 @@
 
   const emit = defineEmits(['getCoordinates'])
 
+  const store = useStore()
   const { t } = useI18n()
 
   const { authUser, workoutData } = toRefs(props)
+  const darkMode: ComputedRef<boolean | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
+  )
   const displayDistance = ref(true)
   const beginElevationAtZero = ref(authUser.value.start_elevation_at_zero)
   const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
-    getDatasets(workoutData.value.chartData, t, authUser.value.imperial_units)
+    getDatasets(
+      workoutData.value.chartData,
+      t,
+      authUser.value.imperial_units,
+      darkMode.value !== false
+    )
   )
   const hasElevation = computed(
     () => datasets.value && datasets.value.datasets.elevation.data.length > 0

fittrackee_client/src/utils/workouts.ts

@@ -10,21 +10,22 @@ import { convertStatsDistance } from '@/utils/units'
 export const getDatasets = (
   chartData: IWorkoutApiChartData[],
   t: CallableFunction,
-  useImperialUnits: boolean
+  useImperialUnits: boolean,
+  useDarkMode: boolean = false
 ): IWorkoutChartData => {
   const datasets: TWorkoutDatasets = {
     speed: {
       label: t('workouts.SPEED'),
-      backgroundColor: ['#FFFFFF'],
+      backgroundColor: ['transparent'],
-      borderColor: ['#8884d8'],
+      borderColor: [useDarkMode ? '#5f5c97' : '#8884d8'],
       borderWidth: 2,
       data: [],
       yAxisID: 'ySpeed',
     },
     elevation: {
       label: t('workouts.ELEVATION'),
-      backgroundColor: ['#e5e5e5'],
+      backgroundColor: [useDarkMode ? '#303030' : '#e5e5e5'],
-      borderColor: ['#cccccc'],
+      borderColor: [useDarkMode ? '#222222' : '#cccccc'],
       borderWidth: 1,
       fill: true,
       data: [],

fittrackee_client/tests/unit/utils/workouts.spec.ts

@@ -21,7 +21,7 @@ describe('getDatasets', () => {
         datasets: {
           speed: {
             label: 'vitesse',
-            backgroundColor: ['#FFFFFF'],
+            backgroundColor: ['transparent'],
             borderColor: ['#8884d8'],
             borderWidth: 2,
             data: [],
@@ -81,7 +81,7 @@ describe('getDatasets', () => {
         datasets: {
           speed: {
             label: 'speed',
-            backgroundColor: ['#FFFFFF'],
+            backgroundColor: ['transparent'],
             borderColor: ['#8884d8'],
             borderWidth: 2,
             data: [2.89, 20.64, 13.03],
@@ -145,7 +145,7 @@ describe('getDatasets', () => {
         datasets: {
           speed: {
             label: 'speed',
-            backgroundColor: ['#FFFFFF'],
+            backgroundColor: ['transparent'],
             borderColor: ['#8884d8'],
             borderWidth: 2,
             data: [1.8, 12.83, 8.1],
@@ -183,6 +183,90 @@ describe('getDatasets', () => {
   })
 })
 
+describe('getDatasets with dark mode', () => {
+  const testparams = [
+    {
+      description: 'it returns dark mode color',
+      inputParams: {
+        charData: [],
+        locale: 'fr',
+        useImperialUnits: false,
+        useDarkMode: true,
+      },
+      expected: {
+        distance_labels: [],
+        duration_labels: [],
+        datasets: {
+          speed: {
+            label: 'vitesse',
+            backgroundColor: ['transparent'],
+            borderColor: ['#5f5c97'],
+            borderWidth: 2,
+            data: [],
+            yAxisID: 'ySpeed',
+          },
+          elevation: {
+            label: 'altitude',
+            backgroundColor: ['#303030'],
+            borderColor: ['#222222'],
+            borderWidth: 1,
+            fill: true,
+            data: [],
+            yAxisID: 'yElevation',
+          },
+        },
+        coordinates: [],
+      },
+    },
+    {
+      description: 'it returns light mode color',
+      inputParams: {
+        charData: [],
+        locale: 'fr',
+        useImperialUnits: false,
+        useDarkMode: false,
+      },
+      expected: {
+        distance_labels: [],
+        duration_labels: [],
+        datasets: {
+          speed: {
+            label: 'vitesse',
+            backgroundColor: ['transparent'],
+            borderColor: ['#8884d8'],
+            borderWidth: 2,
+            data: [],
+            yAxisID: 'ySpeed',
+          },
+          elevation: {
+            label: 'altitude',
+            backgroundColor: ['#e5e5e5'],
+            borderColor: ['#cccccc'],
+            borderWidth: 1,
+            fill: true,
+            data: [],
+            yAxisID: 'yElevation',
+          },
+        },
+        coordinates: [],
+      },
+    },
+  ]
+  testparams.map((testParams) => {
+    it(testParams.description, () => {
+      locale.value = testParams.inputParams.locale
+      expect(
+        getDatasets(
+          testParams.inputParams.charData,
+          t,
+          testParams.inputParams.useImperialUnits,
+          testParams.inputParams.useDarkMode
+        )
+      ).toStrictEqual(testParams.expected)
+    })
+  })
+})
+
 describe('getDonutDatasets', () => {
   const testparams = [
     {