Client - display workout chart with dark mode colors when enabled
This commit is contained in:
parent
e587babe78
commit
bebf1dab9f
@ -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
|
||||
|
@ -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: [],
|
||||
|
@ -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 = [
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user