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

View File

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

View File

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