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 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
|
||||||
|
@ -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: [],
|
||||||
|
@ -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 = [
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user