Client - [PR84/93] display elevation on statistics

This commit is contained in:
Sam 2021-11-03 20:39:14 +01:00
parent c25f30fb2f
commit 07fb64c8f5
6 changed files with 259 additions and 19 deletions

View File

@ -32,6 +32,24 @@
/>
{{ $t('workouts.WORKOUT', 2) }}
</label>
<label v-if="fullStats">
<input
type="radio"
name="total_ascent"
:checked="displayedData === 'total_ascent'"
@click="updateDisplayData"
/>
{{ $t('workouts.ASCENT') }}
</label>
<label v-if="fullStats">
<input
type="radio"
name="total_descent"
:checked="displayedData === 'total_descent'"
@click="updateDisplayData"
/>
{{ $t('workouts.DESCENT') }}
</label>
</div>
<Chart
v-if="labels.length > 0"

View File

@ -22,6 +22,8 @@ export type TStatisticsDatasetKeys =
| 'nb_workouts'
| 'total_duration'
| 'total_distance'
| 'total_ascent'
| 'total_descent'
export type TStatistics = {
[key in TStatisticsDatasetKeys]: number

View File

@ -45,6 +45,8 @@ export const datasetKeys: TStatisticsDatasetKeys[] = [
'nb_workouts',
'total_duration',
'total_distance',
'total_ascent',
'total_descent',
]
export const getDateKeys = (
@ -78,12 +80,16 @@ export const getDatasets = (displayedSports: ISport[]): TStatisticsDatasets => {
nb_workouts: [],
total_distance: [],
total_duration: [],
total_ascent: [],
total_descent: [],
}
displayedSports.map((sport) => {
const color = sportColors[sport.label]
datasets.nb_workouts.push(getStatisticsChartDataset(sport.label, color))
datasets.total_distance.push(getStatisticsChartDataset(sport.label, color))
datasets.total_duration.push(getStatisticsChartDataset(sport.label, color))
datasets.total_ascent.push(getStatisticsChartDataset(sport.label, color))
datasets.total_descent.push(getStatisticsChartDataset(sport.label, color))
})
return datasets
}

View File

@ -6,9 +6,15 @@ export const formatTooltipValue = (
value: number,
formatWithUnits = true
): string => {
return displayedData === 'total_duration'
? formatDuration(value, formatWithUnits)
: displayedData === 'total_distance'
? value.toFixed(2) + ' km'
: value.toString()
switch (displayedData) {
case 'total_duration':
return formatDuration(value, formatWithUnits)
case 'total_distance':
return value.toFixed(2) + ' km'
case 'total_ascent':
case 'total_descent':
return (value / 1000).toFixed(2) + ' km'
default:
return value.toString()
}
}

View File

@ -218,6 +218,40 @@ describe('getDatasets', () => {
data: [],
},
],
total_ascent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [],
},
{
label: 'Cycling (Transport)',
backgroundColor: ['#88af98'],
data: [],
},
{
label: 'Hiking',
backgroundColor: ['#bb757c'],
data: [],
},
],
total_descent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [],
},
{
label: 'Cycling (Transport)',
backgroundColor: ['#88af98'],
data: [],
},
{
label: 'Hiking',
backgroundColor: ['#bb757c'],
data: [],
},
],
}
assert.deepEqual(getDatasets(sports), expected)
})
@ -244,6 +278,20 @@ describe('getDatasets', () => {
data: [],
},
],
total_ascent: [
{
label: 'Cycling (Transport)',
backgroundColor: ['#88af98'],
data: [],
},
],
total_descent: [
{
label: 'Cycling (Transport)',
backgroundColor: ['#88af98'],
data: [],
},
],
}
assert.deepEqual(getDatasets([sports[1]]), expected)
})
@ -263,6 +311,8 @@ describe('formatStats', () => {
nb_workouts: [],
total_distance: [],
total_duration: [],
total_ascent: [],
total_descent: [],
},
}
assert.deepEqual(
@ -302,6 +352,20 @@ describe('formatStats', () => {
data: [0, 0, 0],
},
],
total_ascent: [
{
label: 'Cycling (Transport)',
backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
],
total_descent: [
{
label: 'Cycling (Transport)',
backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
],
},
}
assert.deepEqual(
@ -317,6 +381,8 @@ describe('formatStats', () => {
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021-06': {
@ -324,11 +390,15 @@ describe('formatStats', () => {
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2021-07': {
@ -336,6 +406,8 @@ describe('formatStats', () => {
nb_workouts: 2,
total_distance: 12,
total_duration: 5000,
total_ascent: 100,
total_descent: 100,
},
},
}
@ -350,6 +422,8 @@ describe('formatStats', () => {
nb_workouts: [],
total_distance: [],
total_duration: [],
total_ascent: [],
total_descent: [],
},
}
assert.deepEqual(
@ -365,6 +439,8 @@ describe('formatStats', () => {
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021-06': {
@ -372,11 +448,15 @@ describe('formatStats', () => {
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2021-07': {
@ -384,6 +464,8 @@ describe('formatStats', () => {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
@ -416,6 +498,20 @@ describe('formatStats', () => {
data: [3000, 3500, 0],
},
],
total_ascent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [150, 250, 0],
},
],
total_descent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [100, 150, 0],
},
],
},
}
assert.deepEqual(
@ -433,6 +529,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021': {
@ -440,11 +538,15 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2022': {
@ -452,6 +554,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
@ -484,6 +588,20 @@ describe('formatStats (duration)', () => {
data: [3000, 3500],
},
],
total_ascent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [150, 250],
},
],
total_descent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [100, 150],
},
],
},
}
assert.deepEqual(
@ -498,6 +616,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021': {
@ -505,11 +625,15 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2022': {
@ -517,6 +641,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
@ -549,6 +675,20 @@ describe('formatStats (duration)', () => {
data: [3000, 3500],
},
],
total_ascent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [150, 250],
},
],
total_descent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [100, 150],
},
],
},
}
assert.deepEqual(
@ -564,6 +704,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021-10-10': {
@ -571,11 +713,15 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2021-10-17': {
@ -583,6 +729,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
@ -615,6 +763,20 @@ describe('formatStats (duration)', () => {
data: [3000, 3500, 0],
},
],
total_ascent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [150, 250, 0],
},
],
total_descent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [100, 150, 0],
},
],
},
}
assert.deepEqual(
@ -630,6 +792,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021-10-11': {
@ -637,11 +801,15 @@ describe('formatStats (duration)', () => {
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2021-10-18': {
@ -649,6 +817,8 @@ describe('formatStats (duration)', () => {
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
@ -681,6 +851,20 @@ describe('formatStats (duration)', () => {
data: [3000, 3500, 0],
},
],
total_ascent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [150, 250, 0],
},
],
total_descent: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [100, 150, 0],
},
],
},
}
assert.deepEqual(

View File

@ -8,20 +8,32 @@ describe('formatTooltipValue', () => {
{
description: 'returns 3 if input is workouts count',
inputDisplayedData: datasetKeys[0], // 'nb_workouts'
inputValue: 3,
expectedResult: '3',
inputValue: 30,
expectedResult: '30',
},
{
description: 'returns 00m:03s if input is total duration',
inputDisplayedData: datasetKeys[1], // 'total_duration'
inputValue: 3,
expectedResult: '00m 03s',
inputValue: 30,
expectedResult: '00m 30s',
},
{
description: 'returns 3.00 if input is total distance',
description: 'returns 3.00 km if input is total distance',
inputDisplayedData: datasetKeys[2], // 'total_distance'
inputValue: 3,
expectedResult: '3.00 km',
inputValue: 30,
expectedResult: '30.00 km',
},
{
description: 'returns 0.003 km if input is total ascent',
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
{
description: 'returns 0.003 km if input is total descent',
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
]
@ -43,20 +55,32 @@ describe('formatTooltipValue (formatWithUnits = false)', () => {
{
description: 'returns 3 if input is workouts count',
inputDisplayedData: datasetKeys[0], // 'nb_workouts'
inputValue: 3,
expectedResult: '3',
inputValue: 30,
expectedResult: '30',
},
{
description: 'returns 00:03 if input is total duration',
inputDisplayedData: datasetKeys[1], // 'total_duration'
inputValue: 3,
expectedResult: '00:03',
inputValue: 30,
expectedResult: '00:30',
},
{
description: 'returns 3.00 if input is total distance',
description: 'returns 3.00 km if input is total distance',
inputDisplayedData: datasetKeys[2], // 'total_distance'
inputValue: 3,
expectedResult: '3.00 km',
inputValue: 30,
expectedResult: '30.00 km',
},
{
description: 'returns 0.003 km if input is total ascent',
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
{
description: 'returns 0.003 km if input is total descent',
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
]