diff --git a/fittrackee_client/src/components/Common/StatsChart/index.vue b/fittrackee_client/src/components/Common/StatsChart/index.vue index 98567653..f7fdbda2 100644 --- a/fittrackee_client/src/components/Common/StatsChart/index.vue +++ b/fittrackee_client/src/components/Common/StatsChart/index.vue @@ -32,6 +32,24 @@ /> {{ $t('workouts.WORKOUT', 2) }} + + { 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 } diff --git a/fittrackee_client/src/utils/tooltip.ts b/fittrackee_client/src/utils/tooltip.ts index 2e7a00e1..a9b69762 100644 --- a/fittrackee_client/src/utils/tooltip.ts +++ b/fittrackee_client/src/utils/tooltip.ts @@ -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() + } } diff --git a/fittrackee_client/tests/unit/utils/statistics.spec.ts b/fittrackee_client/tests/unit/utils/statistics.spec.ts index ca091f62..297b7d90 100644 --- a/fittrackee_client/tests/unit/utils/statistics.spec.ts +++ b/fittrackee_client/tests/unit/utils/statistics.spec.ts @@ -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( diff --git a/fittrackee_client/tests/unit/utils/tooltip.spec.ts b/fittrackee_client/tests/unit/utils/tooltip.spec.ts index 56b7216f..33ca8886 100644 --- a/fittrackee_client/tests/unit/utils/tooltip.spec.ts +++ b/fittrackee_client/tests/unit/utils/tooltip.spec.ts @@ -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', }, ]