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