Client - improve charts axis contrast
This commit is contained in:
parent
58489aedfb
commit
a05ae3e99b
@ -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
|
||||
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user