Client - update stats chart display (wip)

This commit is contained in:
Sam 2021-09-05 09:41:39 +02:00
parent 0e98efe5a9
commit 18908ce89d
6 changed files with 88 additions and 14 deletions

View File

@ -48,13 +48,18 @@
x: {
stacked: true,
grid: {
display: false,
drawOnChartArea: false,
},
},
y: {
stacked: true,
grid: {
display: false,
drawOnChartArea: false,
},
ticks: {
callback: function (value) {
return formatTooltipValue(props.displayedData, +value, false)
},
},
},
},

View File

@ -67,3 +67,19 @@
},
})
</script>
<style lang="scss">
@import '~@/scss/base';
.stat-chart {
.chart {
height: 335px;
}
}
@media screen and (max-width: $small-limit) {
.stat-chart {
.chart {
height: 280px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="user-month-stats">
<Card :without-title="false">
<template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
<template #content>

View File

@ -3,10 +3,11 @@ import { formatDuration } from '@/utils/duration'
export const formatTooltipValue = (
displayedData: TDatasetKeys,
value: number
value: number,
formatWithUnits = true
): string => {
return displayedData === 'total_duration'
? formatDuration(value, true)
? formatDuration(value, formatWithUnits)
: displayedData === 'total_distance'
? value.toFixed(2) + ' km'
: value.toString()

View File

@ -3,12 +3,12 @@
<div class="container">
<UserStats :user="authUser" v-if="authUser.username" />
</div>
<div class="container">
<div class="left-container dashboard-container">
<div class="container dashboard-container">
<div class="left-container dashboard-sub-container">
<UserMonthStats :user="authUser" />
<UserRecords />
</div>
<div class="right-container dashboard-container">
<div class="right-container dashboard-sub-container">
<UserCalendar />
<Timeline />
</div>
@ -51,12 +51,28 @@
@import '~@/scss/base';
.dashboard-container {
display: flex;
flex-direction: column;
flex-direction: row;
.dashboard-sub-container {
display: flex;
flex-direction: column;
}
.left-container {
width: 35%;
}
.right-container {
width: 65%;
}
}
.left-container {
width: 35%;
}
.right-container {
width: 65%;
@media screen and (max-width: $small-limit) {
.dashboard-container {
display: flex;
flex-direction: column;
.left-container {
width: 100%;
}
.right-container {
width: 100%;
}
}
}
</style>

View File

@ -37,3 +37,39 @@ describe('formatTooltipValue', () => {
})
})
})
describe('formatTooltipValue (formatWithUnits = false)', () => {
const testsParams = [
{
description: 'returns 3 if input is workouts count',
inputDisplayedData: datasetKeys[0], // 'nb_workouts'
inputValue: 3,
expectedResult: '3',
},
{
description: 'returns 00:03 if input is total duration',
inputDisplayedData: datasetKeys[1], // 'total_duration'
inputValue: 3,
expectedResult: '00:03',
},
{
description: 'returns 3.00 if input is total distance',
inputDisplayedData: datasetKeys[2], // 'total_distance'
inputValue: 3,
expectedResult: '3.00 km',
},
]
testsParams.map((testParams) => {
it(testParams.description, () => {
assert.equal(
formatTooltipValue(
testParams.inputDisplayedData,
testParams.inputValue,
false
),
testParams.expectedResult
)
})
})
})