From bebf1dab9f71956713c19ebc8505208c6bf511f9 Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 16 Dec 2023 21:41:29 +0100 Subject: [PATCH] Client - display workout chart with dark mode colors when enabled --- .../WorkoutDetail/WorkoutChart/index.vue | 13 ++- fittrackee_client/src/utils/workouts.ts | 11 +-- .../tests/unit/utils/workouts.spec.ts | 90 ++++++++++++++++++- 3 files changed, 105 insertions(+), 9 deletions(-) diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue index 352ec5d6..63d64cb1 100644 --- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue +++ b/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 = computed( + () => store.getters[ROOT_STORE.GETTERS.DARK_MODE] + ) const displayDistance = ref(true) const beginElevationAtZero = ref(authUser.value.start_elevation_at_zero) const datasets: ComputedRef = 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 diff --git a/fittrackee_client/src/utils/workouts.ts b/fittrackee_client/src/utils/workouts.ts index 3f6d451e..a67d8416 100644 --- a/fittrackee_client/src/utils/workouts.ts +++ b/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'], - borderColor: ['#8884d8'], + backgroundColor: ['transparent'], + borderColor: [useDarkMode ? '#5f5c97' : '#8884d8'], borderWidth: 2, data: [], yAxisID: 'ySpeed', }, elevation: { label: t('workouts.ELEVATION'), - backgroundColor: ['#e5e5e5'], - borderColor: ['#cccccc'], + backgroundColor: [useDarkMode ? '#303030' : '#e5e5e5'], + borderColor: [useDarkMode ? '#222222' : '#cccccc'], borderWidth: 1, fill: true, data: [], diff --git a/fittrackee_client/tests/unit/utils/workouts.spec.ts b/fittrackee_client/tests/unit/utils/workouts.spec.ts index b1afef26..86736a3b 100644 --- a/fittrackee_client/tests/unit/utils/workouts.spec.ts +++ b/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 = [ {