Client - move to vue-chartjs + refacto

This commit is contained in:
Sam 2023-11-12 10:45:39 +01:00
parent 473d0aca53
commit e4d4ffb3e8
5 changed files with 277 additions and 327 deletions

View File

@ -35,7 +35,7 @@
"sanitize-html": "^2.11.0", "sanitize-html": "^2.11.0",
"snarkdown": "^2.0.0", "snarkdown": "^2.0.0",
"vue": "^3.3.8", "vue": "^3.3.8",
"vue-chart-3": "^3.1.8", "vue-chartjs": "^5.2.0",
"vue-fullscreen": "^3.1.1", "vue-fullscreen": "^3.1.1",
"vue-i18n": "^9.6.5", "vue-i18n": "^9.6.5",
"vue-router": "^4.2.5", "vue-router": "^4.2.5",

View File

@ -1,220 +1,200 @@
<template> <template>
<div class="chart"> <div class="chart">
<BarChart v-bind="barChartProps" class="bar-chart" /> <Bar :data="chartData" :options="options" class="bar-chart" />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import type { ChartOptions, LayoutItem } from 'chart.js' import type { ChartOptions, LayoutItem } from 'chart.js'
import { computed, defineComponent } from 'vue' import { computed, toRefs } from 'vue'
import type { PropType } from 'vue' import { Bar } from 'vue-chartjs'
import { BarChart, useBarChart } from 'vue-chart-3'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
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'
export default defineComponent({ interface Props {
name: 'Chart', datasets: IChartDataset[]
components: { labels: unknown[]
BarChart, displayedData: TStatisticsDatasetKeys
}, displayedSportIds: number[]
props: { fullStats: boolean
datasets: { useImperialUnits: boolean
type: Object as PropType<IChartDataset[]>, }
required: true, const props = defineProps<Props>()
}, const {
labels: { datasets,
type: Object as PropType<unknown[]>, labels,
required: true, displayedData,
}, displayedSportIds,
displayedData: { fullStats,
type: String as PropType<TStatisticsDatasetKeys>, useImperialUnits,
required: true, } = toRefs(props)
},
displayedSportIds: { const { t } = useI18n()
type: Array as PropType<number[]>,
required: true, const chartData = computed(() => ({
}, labels: labels.value,
fullStats: { // workaround to avoid dataset modification
type: Boolean, datasets: JSON.parse(JSON.stringify(datasets.value)),
required: true, }))
}, const options = computed<ChartOptions<'bar'>>(() => ({
useImperialUnits: { responsive: true,
type: Boolean, maintainAspectRatio: true,
required: true, animation: false,
layout: {
padding: {
top: fullStats.value ? 40 : 22,
}, },
}, },
setup(props) { scales: {
const { t } = useI18n() x: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any stacked: true,
function getNumber(value: any): number { grid: {
return isNaN(value) ? 0 : +value drawOnChartArea: false,
} },
// eslint-disable-next-line @typescript-eslint/no-explicit-any },
function getSum(total: any, value: any): number { y: {
return getNumber(total) + getNumber(value) stacked: displayedData.value !== 'average_speed',
} grid: {
function getUnit(displayedData: string) { drawOnChartArea: false,
return ['total_ascent', 'total_descent'].includes(displayedData) },
? 'm' ticks: {
: 'km' maxTicksLimit: 6,
} callback: function (value) {
const chartData = computed(() => ({ return formatTooltipValue(
labels: props.labels, displayedData.value,
// workaround to avoid dataset modification +value,
datasets: JSON.parse(JSON.stringify(props.datasets)), useImperialUnits.value,
})) false,
const options = computed<ChartOptions<'bar'>>(() => ({ getUnit(displayedData.value)
responsive: true, )
maintainAspectRatio: true,
animation: false,
layout: {
padding: {
top: props.fullStats ? 40 : 22,
}, },
}, },
scales: { afterFit: function (scale: LayoutItem) {
x: { scale.width = fullStats.value ? 90 : 60
stacked: true, },
grid: { },
drawOnChartArea: false, },
}, plugins: {
}, datalabels: {
y: { anchor: 'end',
stacked: props.displayedData !== 'average_speed', align: 'end',
grid: { color: function (context) {
drawOnChartArea: false, return displayedData.value === 'average_speed' &&
}, context.dataset.backgroundColor
ticks: { ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
maxTicksLimit: 6, // @ts-ignore
callback: function (value) { context.dataset.backgroundColor[0]
return formatTooltipValue( : '#666666'
props.displayedData, },
+value, rotation: function (context) {
props.useImperialUnits, return fullStats.value && context.chart.chartArea.width < 580
? 310
: 0
},
display: function (context) {
return fullStats.value && context.chart.chartArea.width < 300
? false
: displayedData.value === 'average_speed'
? displayedSportIds.value.length == 1
? 'auto'
: false
: true
},
formatter: function (value, context) {
if (displayedData.value === 'average_speed') {
return formatTooltipValue(
displayedData.value,
value,
useImperialUnits.value,
false
)
} else {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const total: number = context.chart.data.datasets
.map((d) => d.data[context.dataIndex])
.reduce((total, value) => getSum(total, value), 0)
return context.datasetIndex ===
displayedSportIds.value.length - 1 && total > 0
? formatTooltipValue(
displayedData.value,
total,
useImperialUnits.value,
false, false,
getUnit(props.displayedData) getUnit(displayedData.value)
) )
}, : null
}, }
afterFit: function (scale: LayoutItem) { },
scale.width = props.fullStats ? 90 : 60 },
}, legend: {
display: false,
},
tooltip: {
interaction: {
intersect: true,
mode: 'index',
position:
displayedData.value === 'average_speed' ? 'nearest' : 'average',
},
filter: function (tooltipItem) {
return tooltipItem.formattedValue !== '0'
},
callbacks: {
label: function (context) {
let label = t(`sports.${context.dataset.label}.LABEL`) || ''
if (label) {
label += ': '
}
if (context.parsed.y !== null) {
label += formatTooltipValue(
displayedData.value,
context.parsed.y,
useImperialUnits.value,
true,
getUnit(displayedData.value)
)
}
return label
},
footer: function (tooltipItems) {
if (displayedData.value === 'average_speed') {
return ''
}
let sum = 0
tooltipItems.map((tooltipItem) => {
sum += tooltipItem.parsed.y
})
return (
`${t('common.TOTAL')}: ` +
formatTooltipValue(
displayedData.value,
sum,
useImperialUnits.value,
true,
getUnit(displayedData.value)
)
)
}, },
}, },
plugins: { },
datalabels: {
anchor: 'end',
align: 'end',
color: function (context) {
return props.displayedData === 'average_speed' &&
context.dataset.backgroundColor
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
context.dataset.backgroundColor[0]
: '#666666'
},
rotation: function (context) {
return props.fullStats && context.chart.chartArea.width < 580
? 310
: 0
},
display: function (context) {
return props.fullStats && context.chart.chartArea.width < 300
? false
: props.displayedData === 'average_speed'
? props.displayedSportIds.length == 1
? 'auto'
: false
: true
},
formatter: function (value, context) {
if (props.displayedData === 'average_speed') {
return formatTooltipValue(
props.displayedData,
value,
props.useImperialUnits,
false
)
} else {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const total: number = context.chart.data.datasets
.map((d) => d.data[context.dataIndex])
.reduce((total, value) => getSum(total, value), 0)
return context.datasetIndex ===
props.displayedSportIds.length - 1 && total > 0
? formatTooltipValue(
props.displayedData,
total,
props.useImperialUnits,
false,
getUnit(props.displayedData)
)
: null
}
},
},
legend: {
display: false,
},
tooltip: {
interaction: {
intersect: true,
mode: 'index',
position:
props.displayedData === 'average_speed' ? 'nearest' : 'average',
},
filter: function (tooltipItem) {
return tooltipItem.formattedValue !== '0'
},
callbacks: {
label: function (context) {
let label = t(`sports.${context.dataset.label}.LABEL`) || ''
if (label) {
label += ': '
}
if (context.parsed.y !== null) {
label += formatTooltipValue(
props.displayedData,
context.parsed.y,
props.useImperialUnits,
true,
getUnit(props.displayedData)
)
}
return label
},
footer: function (tooltipItems) {
if (props.displayedData === 'average_speed') {
return ''
}
let sum = 0
tooltipItems.map((tooltipItem) => {
sum += tooltipItem.parsed.y
})
return (
`${t('common.TOTAL')}: ` +
formatTooltipValue(
props.displayedData,
sum,
props.useImperialUnits,
true,
getUnit(props.displayedData)
)
)
},
},
},
},
}))
const { barChartProps } = useBarChart({
chartData,
options,
})
return { barChartProps }
}, },
}) }))
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getNumber(value: any): number {
return isNaN(value) ? 0 : +value
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getSum(total: any, value: any): number {
return getNumber(total) + getNumber(value)
}
function getUnit(displayedData: string) {
return ['total_ascent', 'total_descent'].includes(displayedData)
? 'm'
: 'km'
}
</script> </script>

View File

@ -79,10 +79,10 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { format } from 'date-fns' import { format } from 'date-fns'
import { computed, defineComponent, ref, watch, onBeforeMount } from 'vue' import { computed, ref, toRefs, watch, onBeforeMount } from 'vue'
import type { ComputedRef, PropType, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import Chart from '@/components/Common/StatsChart/Chart.vue' import Chart from '@/components/Common/StatsChart/Chart.vue'
import { STATS_STORE } from '@/store/constants' import { STATS_STORE } from '@/store/constants'
@ -98,107 +98,89 @@
import { useStore } from '@/use/useStore' import { useStore } from '@/use/useStore'
import { formatStats } from '@/utils/statistics' import { formatStats } from '@/utils/statistics'
export default defineComponent({ interface Props {
name: 'UserMonthStats', sports: ISport[]
components: { user: IAuthUserProfile
Chart, chartParams: IStatisticsDateParams
}, displayedSportIds?: number[]
props: { fullStats?: boolean
sports: { hideChartIfNoData?: boolean
type: Object as PropType<ISport[]>, isDisabled?: boolean
required: true, }
}, const props = withDefaults(defineProps<Props>(), {
user: { displayedSportIds: () => [],
type: Object as PropType<IAuthUserProfile>, fullStats: false,
required: true, hideChartIfNoData: false,
}, isDisabled: false,
chartParams: {
type: Object as PropType<IStatisticsDateParams>,
required: true,
},
displayedSportIds: {
type: Array as PropType<number[]>,
default: () => [],
},
fullStats: {
type: Boolean,
default: false,
},
hideChartIfNoData: {
type: Boolean,
default: false,
},
isDisabled: {
type: Boolean,
default: false,
},
},
setup(props) {
const store = useStore()
const displayedData: Ref<TStatisticsDatasetKeys> = ref('total_distance')
const statistics: ComputedRef<TStatisticsFromApi> = computed(
() => store.getters[STATS_STORE.GETTERS.USER_STATS]
)
const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
formatStats(
props.chartParams,
props.user.weekm,
props.sports,
props.displayedSportIds,
statistics.value,
props.user.imperial_units,
props.user.date_format
)
)
onBeforeMount(() =>
getStatistics(getApiParams(props.chartParams, props.user))
)
function getStatistics(apiParams: IStatisticsParams) {
store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
username: props.user.username,
filterType: 'by_time',
params: apiParams,
})
}
function updateDisplayData(event: Event) {
displayedData.value = (event.target as HTMLInputElement)
.name as TStatisticsDatasetKeys
}
function getApiParams(
chartParams: IStatisticsDateParams,
user: IAuthUserProfile
): IStatisticsParams {
return {
from: format(chartParams.start, 'yyyy-MM-dd'),
to: format(chartParams.end, 'yyyy-MM-dd'),
time:
chartParams.duration === 'week'
? `week${user.weekm ? 'm' : ''}`
: chartParams.duration,
}
}
watch(
() => props.chartParams,
async (newParams) => {
getStatistics(getApiParams(newParams, props.user))
}
)
return {
datasets: computed(
() => formattedStats.value.datasets[displayedData.value]
),
labels: computed(() => formattedStats.value.labels),
emptyStats: computed(() => Object.keys(statistics.value).length === 0),
displayedData,
updateDisplayData,
}
},
}) })
const {
sports,
user,
chartParams,
displayedSportIds,
fullStats,
hideChartIfNoData,
isDisabled,
} = toRefs(props)
const store = useStore()
const displayedData: Ref<TStatisticsDatasetKeys> = ref('total_distance')
const statistics: ComputedRef<TStatisticsFromApi> = computed(
() => store.getters[STATS_STORE.GETTERS.USER_STATS]
)
const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
formatStats(
chartParams.value,
user.value.weekm,
sports.value,
displayedSportIds.value,
statistics.value,
user.value.imperial_units,
user.value.date_format
)
)
const datasets = computed(
() => formattedStats.value.datasets[displayedData.value]
)
const labels = computed(() => formattedStats.value.labels)
const emptyStats = computed(() => Object.keys(statistics.value).length === 0)
onBeforeMount(() =>
getStatistics(getApiParams(chartParams.value, user.value))
)
function getStatistics(apiParams: IStatisticsParams) {
store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
username: user.value.username,
filterType: 'by_time',
params: apiParams,
})
}
function updateDisplayData(event: Event) {
displayedData.value = (event.target as HTMLInputElement)
.name as TStatisticsDatasetKeys
}
function getApiParams(
chartParams: IStatisticsDateParams,
user: IAuthUserProfile
): IStatisticsParams {
return {
from: format(chartParams.start, 'yyyy-MM-dd'),
to: format(chartParams.end, 'yyyy-MM-dd'),
time:
chartParams.duration === 'week'
? `week${user.weekm ? 'm' : ''}`
: chartParams.duration,
}
}
watch(
() => chartParams.value,
async (newParams) => {
getStatistics(getApiParams(newParams, user.value))
}
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -24,9 +24,11 @@
</label> </label>
</div> </div>
<div id="chart-legend" /> <div id="chart-legend" />
<LineChart <Line
v-bind="lineChartProps"
class="line-chart" class="line-chart"
:data="chartData"
:options="options"
:plugins="plugins"
@mouseleave="emitEmptyCoordinates" @mouseleave="emitEmptyCoordinates"
/> />
<div class="chart-info"> <div class="chart-info">
@ -54,7 +56,7 @@
import type { ChartData, ChartOptions } from 'chart.js' import type { ChartData, ChartOptions } from 'chart.js'
import { computed, ref, toRefs } from 'vue' import { computed, ref, toRefs } from 'vue'
import type { ComputedRef } from 'vue' import type { ComputedRef } from 'vue'
import { LineChart, useLineChart } from 'vue-chart-3' import { Line } from 'vue-chartjs'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { htmlLegendPlugin } from '@/components/Workout/WorkoutDetail/WorkoutChart/legend' import { htmlLegendPlugin } from '@/components/Workout/WorkoutDetail/WorkoutChart/legend'
@ -204,11 +206,7 @@
}, },
}, },
})) }))
const { lineChartProps } = useLineChart({ const plugins = [htmlLegendPlugin]
chartData,
options,
plugins: [htmlLegendPlugin],
})
function updateDisplayDistance() { function updateDisplayDistance() {
displayDistance.value = !displayDistance.value displayDistance.value = !displayDistance.value

View File

@ -648,7 +648,7 @@
dependencies: dependencies:
"@vue/shared" "3.3.8" "@vue/shared" "3.3.8"
"@vue/runtime-core@3.3.8", "@vue/runtime-core@latest": "@vue/runtime-core@3.3.8":
version "3.3.8" version "3.3.8"
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz#fba5a632cbf2b5d29e171489570149cb6975dcdb" resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz#fba5a632cbf2b5d29e171489570149cb6975dcdb"
integrity sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw== integrity sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==
@ -656,7 +656,7 @@
"@vue/reactivity" "3.3.8" "@vue/reactivity" "3.3.8"
"@vue/shared" "3.3.8" "@vue/shared" "3.3.8"
"@vue/runtime-dom@3.3.8", "@vue/runtime-dom@latest": "@vue/runtime-dom@3.3.8":
version "3.3.8" version "3.3.8"
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz#e2d7aa795cf50914dda9a951887765a594b38af4" resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz#e2d7aa795cf50914dda9a951887765a594b38af4"
integrity sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA== integrity sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==
@ -1138,7 +1138,7 @@ cssstyle@^3.0.0:
dependencies: dependencies:
rrweb-cssom "^0.6.0" rrweb-cssom "^0.6.0"
csstype@^3.1.2, csstype@latest: csstype@^3.1.2:
version "3.1.2" version "3.1.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@ -2426,11 +2426,6 @@ locate-path@^6.0.0:
dependencies: dependencies:
p-locate "^5.0.0" p-locate "^5.0.0"
lodash-es@latest:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.merge@^4.6.2: lodash.merge@^4.6.2:
version "4.6.2" version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@ -3554,15 +3549,10 @@ vitest@^0.34.6:
vite-node "0.34.6" vite-node "0.34.6"
why-is-node-running "^2.2.2" why-is-node-running "^2.2.2"
vue-chart-3@^3.1.8: vue-chartjs@^5.2.0:
version "3.1.8" version "5.2.0"
resolved "https://registry.yarnpkg.com/vue-chart-3/-/vue-chart-3-3.1.8.tgz#4ca4cba0a51ea2851a657a132bc14bf8c3ba1da2" resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.2.0.tgz#3d0076ccf8016d1bf8fab5ccd837e7fb81005ded"
integrity sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g== integrity sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==
dependencies:
"@vue/runtime-core" latest
"@vue/runtime-dom" latest
csstype latest
lodash-es latest
vue-component-type-helpers@1.8.4: vue-component-type-helpers@1.8.4:
version "1.8.4" version "1.8.4"