Client - display workout chart with dark mode colors when enabled

This commit is contained in:
Sam 2023-12-16 21:41:29 +01:00
parent e587babe78
commit bebf1dab9f
3 changed files with 105 additions and 9 deletions

View File

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

View File

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

View File

@ -21,7 +21,7 @@ describe('getDatasets', () => {
datasets: { datasets: {
speed: { speed: {
label: 'vitesse', label: 'vitesse',
backgroundColor: ['#FFFFFF'], backgroundColor: ['transparent'],
borderColor: ['#8884d8'], borderColor: ['#8884d8'],
borderWidth: 2, borderWidth: 2,
data: [], data: [],
@ -81,7 +81,7 @@ describe('getDatasets', () => {
datasets: { datasets: {
speed: { speed: {
label: 'speed', label: 'speed',
backgroundColor: ['#FFFFFF'], backgroundColor: ['transparent'],
borderColor: ['#8884d8'], borderColor: ['#8884d8'],
borderWidth: 2, borderWidth: 2,
data: [2.89, 20.64, 13.03], data: [2.89, 20.64, 13.03],
@ -145,7 +145,7 @@ describe('getDatasets', () => {
datasets: { datasets: {
speed: { speed: {
label: 'speed', label: 'speed',
backgroundColor: ['#FFFFFF'], backgroundColor: ['transparent'],
borderColor: ['#8884d8'], borderColor: ['#8884d8'],
borderWidth: 2, borderWidth: 2,
data: [1.8, 12.83, 8.1], 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', () => { describe('getDonutDatasets', () => {
const testparams = [ const testparams = [
{ {