Client - move to vue-chartjs + refacto
This commit is contained in:
Sam
@ -1,220 +1,200 @@
|
||||
<template>
|
||||
<div class="chart">
|
||||
<BarChart v-bind="barChartProps" class="bar-chart" />
|
||||
<Bar :data="chartData" :options="options" class="bar-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import type { ChartOptions, LayoutItem } from 'chart.js'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { BarChart, useBarChart } from 'vue-chart-3'
|
||||
import { computed, toRefs } from 'vue'
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type { IChartDataset } from '@/types/chart'
|
||||
import type { TStatisticsDatasetKeys } from '@/types/statistics'
|
||||
import { formatTooltipValue } from '@/utils/tooltip'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Chart',
|
||||
components: {
|
||||
BarChart,
|
||||
},
|
||||
props: {
|
||||
datasets: {
|
||||
type: Object as PropType<IChartDataset[]>,
|
||||
required: true,
|
||||
},
|
||||
labels: {
|
||||
type: Object as PropType<unknown[]>,
|
||||
required: true,
|
||||
},
|
||||
displayedData: {
|
||||
type: String as PropType<TStatisticsDatasetKeys>,
|
||||
required: true,
|
||||
},
|
||||
displayedSportIds: {
|
||||
type: Array as PropType<number[]>,
|
||||
required: true,
|
||||
},
|
||||
fullStats: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
useImperialUnits: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
interface Props {
|
||||
datasets: IChartDataset[]
|
||||
labels: unknown[]
|
||||
displayedData: TStatisticsDatasetKeys
|
||||
displayedSportIds: number[]
|
||||
fullStats: boolean
|
||||
useImperialUnits: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const {
|
||||
datasets,
|
||||
labels,
|
||||
displayedData,
|
||||
displayedSportIds,
|
||||
fullStats,
|
||||
useImperialUnits,
|
||||
} = toRefs(props)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: labels.value,
|
||||
// workaround to avoid dataset modification
|
||||
datasets: JSON.parse(JSON.stringify(datasets.value)),
|
||||
}))
|
||||
const options = computed<ChartOptions<'bar'>>(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
animation: false,
|
||||
layout: {
|
||||
padding: {
|
||||
top: fullStats.value ? 40 : 22,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
// 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'
|
||||
}
|
||||
const chartData = computed(() => ({
|
||||
labels: props.labels,
|
||||
// workaround to avoid dataset modification
|
||||
datasets: JSON.parse(JSON.stringify(props.datasets)),
|
||||
}))
|
||||
const options = computed<ChartOptions<'bar'>>(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
animation: false,
|
||||
layout: {
|
||||
padding: {
|
||||
top: props.fullStats ? 40 : 22,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
stacked: displayedData.value !== 'average_speed',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
maxTicksLimit: 6,
|
||||
callback: function (value) {
|
||||
return formatTooltipValue(
|
||||
displayedData.value,
|
||||
+value,
|
||||
useImperialUnits.value,
|
||||
false,
|
||||
getUnit(displayedData.value)
|
||||
)
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
stacked: props.displayedData !== 'average_speed',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
maxTicksLimit: 6,
|
||||
callback: function (value) {
|
||||
return formatTooltipValue(
|
||||
props.displayedData,
|
||||
+value,
|
||||
props.useImperialUnits,
|
||||
afterFit: function (scale: LayoutItem) {
|
||||
scale.width = fullStats.value ? 90 : 60
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
datalabels: {
|
||||
anchor: 'end',
|
||||
align: 'end',
|
||||
color: function (context) {
|
||||
return displayedData.value === '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 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,
|
||||
getUnit(props.displayedData)
|
||||
getUnit(displayedData.value)
|
||||
)
|
||||
},
|
||||
},
|
||||
afterFit: function (scale: LayoutItem) {
|
||||
scale.width = props.fullStats ? 90 : 60
|
||||
},
|
||||
: null
|
||||
}
|
||||
},
|
||||
},
|
||||
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>
|
||||
|
||||
@ -79,10 +79,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import { computed, defineComponent, ref, watch, onBeforeMount } from 'vue'
|
||||
import type { ComputedRef, PropType, Ref } from 'vue'
|
||||
import { computed, ref, toRefs, watch, onBeforeMount } from 'vue'
|
||||
import type { ComputedRef, Ref } from 'vue'
|
||||
|
||||
import Chart from '@/components/Common/StatsChart/Chart.vue'
|
||||
import { STATS_STORE } from '@/store/constants'
|
||||
@ -98,107 +98,89 @@
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { formatStats } from '@/utils/statistics'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserMonthStats',
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
props: {
|
||||
sports: {
|
||||
type: Object as PropType<ISport[]>,
|
||||
required: true,
|
||||
},
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
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,
|
||||
}
|
||||
},
|
||||
interface Props {
|
||||
sports: ISport[]
|
||||
user: IAuthUserProfile
|
||||
chartParams: IStatisticsDateParams
|
||||
displayedSportIds?: number[]
|
||||
fullStats?: boolean
|
||||
hideChartIfNoData?: boolean
|
||||
isDisabled?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
displayedSportIds: () => [],
|
||||
fullStats: false,
|
||||
hideChartIfNoData: false,
|
||||
isDisabled: false,
|
||||
})
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -24,9 +24,11 @@
|
||||
</label>
|
||||
</div>
|
||||
<div id="chart-legend" />
|
||||
<LineChart
|
||||
v-bind="lineChartProps"
|
||||
<Line
|
||||
class="line-chart"
|
||||
:data="chartData"
|
||||
:options="options"
|
||||
:plugins="plugins"
|
||||
@mouseleave="emitEmptyCoordinates"
|
||||
/>
|
||||
<div class="chart-info">
|
||||
@ -54,7 +56,7 @@
|
||||
import type { ChartData, ChartOptions } from 'chart.js'
|
||||
import { computed, ref, toRefs } 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 { htmlLegendPlugin } from '@/components/Workout/WorkoutDetail/WorkoutChart/legend'
|
||||
@ -204,11 +206,7 @@
|
||||
},
|
||||
},
|
||||
}))
|
||||
const { lineChartProps } = useLineChart({
|
||||
chartData,
|
||||
options,
|
||||
plugins: [htmlLegendPlugin],
|
||||
})
|
||||
const plugins = [htmlLegendPlugin]
|
||||
|
||||
function updateDisplayDistance() {
|
||||
displayDistance.value = !displayDistance.value
|
||||
|
||||
Reference in New Issue
Block a user