Client - improve charts axis contrast

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

@@ -6,13 +6,16 @@
 
 <script setup lang="ts">
   import type { ChartOptions, LayoutItem } from 'chart.js'
-  import { computed, toRefs } from 'vue'
+  import { computed, type ComputedRef, toRefs } from 'vue'
   import { Bar } from 'vue-chartjs'
   import { useI18n } from 'vue-i18n'
+  import { useStore } from 'vuex'
 
+  import { ROOT_STORE } from '@/store/constants'
   import type { IChartDataset } from '@/types/chart'
   import type { TStatisticsDatasetKeys } from '@/types/statistics'
   import { formatTooltipValue } from '@/utils/tooltip'
+  import { chartsColors } from '@/utils/workouts'
 
   interface Props {
     datasets: IChartDataset[]
@@ -32,8 +35,23 @@
     useImperialUnits,
   } = toRefs(props)
 
+  const store = useStore()
   const { t } = useI18n()
 
+  const darkMode: ComputedRef<boolean | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
+  )
+  const lineColors = computed(() => ({
+    color: darkMode.value
+      ? chartsColors.darkMode.line
+      : chartsColors.ligthMode.line,
+  }))
+  const textColors = computed(() => ({
+    color: darkMode.value
+      ? chartsColors.darkMode.text
+      : chartsColors.ligthMode.text,
+  }))
+
   const chartData = computed(() => ({
     labels: labels.value,
     // workaround to avoid dataset modification
@@ -53,12 +71,23 @@
         stacked: true,
         grid: {
           drawOnChartArea: false,
+          ...lineColors.value,
+        },
+        border: {
+          ...lineColors.value,
+        },
+        ticks: {
+          ...textColors.value,
         },
       },
       y: {
         stacked: displayedData.value !== 'average_speed',
         grid: {
           drawOnChartArea: false,
+          ...lineColors.value,
+        },
+        border: {
+          ...lineColors.value,
         },
         ticks: {
           maxTicksLimit: 6,
@@ -71,6 +100,7 @@
               getUnit(displayedData.value)
             )
           },
+          ...textColors.value,
         },
         afterFit: function (scale: LayoutItem) {
           scale.width = fullStats.value ? 90 : 60

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

@@ -71,7 +71,7 @@
     TCoordinates,
   } from '@/types/workouts'
   import { units } from '@/utils/units'
-  import { getDatasets } from '@/utils/workouts'
+  import { chartsColors, getDatasets } from '@/utils/workouts'
 
   interface Props {
     authUser: IAuthUserProfile
@@ -117,6 +117,17 @@
   const coordinates: ComputedRef<TCoordinates[]> = computed(
     () => datasets.value.coordinates
   )
+  const lineColors = computed(() => ({
+    color: darkMode.value
+      ? chartsColors.darkMode.line
+      : chartsColors.ligthMode.line,
+  }))
+  const textColors = computed(() => ({
+    color: darkMode.value
+      ? chartsColors.darkMode.text
+      : chartsColors.ligthMode.text,
+  }))
+
   const options = computed<ChartOptions<'line'>>(() => ({
     responsive: true,
     maintainAspectRatio: false,
@@ -130,6 +141,10 @@
       x: {
         grid: {
           drawOnChartArea: false,
+          ...lineColors.value,
+        },
+        border: {
+          ...lineColors.value,
         },
         ticks: {
           count: 10,
@@ -138,6 +153,7 @@
               ? Number(value).toFixed(2)
               : formatDuration(value)
           },
+          ...textColors.value,
         },
         type: 'linear',
         bounds: 'data',
@@ -146,16 +162,25 @@
           text: displayDistance.value
             ? t('workouts.DISTANCE') + ` (${fromKmUnit})`
             : t('workouts.DURATION'),
+          ...textColors.value,
         },
       },
       ySpeed: {
         grid: {
           drawOnChartArea: false,
+          ...lineColors.value,
+        },
+        border: {
+          ...lineColors.value,
         },
         position: 'left',
         title: {
           display: true,
           text: t('workouts.SPEED') + ` (${fromKmUnit}/h)`,
+          ...textColors.value,
+        },
+        ticks: {
+          ...textColors.value,
         },
       },
       yElevation: {
@@ -163,11 +188,19 @@
         display: hasElevation.value,
         grid: {
           drawOnChartArea: false,
+          ...lineColors.value,
+        },
+        border: {
+          ...lineColors.value,
         },
         position: 'right',
         title: {
           display: true,
           text: t('workouts.ELEVATION') + ` (${fromMUnit})`,
+          ...textColors.value,
+        },
+        ticks: {
+          ...textColors.value,
         },
       },
     },

fittrackee_client/src/utils/workouts.ts

@@ -7,6 +7,18 @@ import type {
 } from '@/types/workouts'
 import { convertStatsDistance } from '@/utils/units'
 
+export const chartsColors = {
+  ligthMode: {
+    // default chartjs values
+    text: '#666',
+    line: 'rgba(0, 0, 0, 0.1)',
+  },
+  darkMode: {
+    text: '#a1a1a1',
+    line: '#3f3f3f',
+  },
+}
+
 export const getDatasets = (
   chartData: IWorkoutApiChartData[],
   t: CallableFunction,