Client - update stats chart display (wip)
This commit is contained in:
parent
0e98efe5a9
commit
18908ce89d
@ -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)
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="user-month-stats">
|
||||
<Card :without-title="false">
|
||||
<template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
|
||||
<template #content>
|
||||
|
@ -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()
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user