Client - improve charts axis contrast

This commit is contained in:
Sam 2023-12-20 10:05:28 +01:00
parent 58489aedfb
commit a05ae3e99b
3 changed files with 77 additions and 2 deletions

View File

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

View File

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

View File

@ -7,6 +7,18 @@ import type {
} from '@/types/workouts' } from '@/types/workouts'
import { convertStatsDistance } from '@/utils/units' 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 = ( export const getDatasets = (
chartData: IWorkoutApiChartData[], chartData: IWorkoutApiChartData[],
t: CallableFunction, t: CallableFunction,