Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Client] statistics - display average speed in chart

Browse Source
This commit is contained in:
Sam 2021-11-24 18:01:38 +01:00
parent fb127b22c4
commit bd0d79f575
8 changed files with 244 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
fittrackee_client/src/components/Common/StatsChart/Chart.vue
View File

@ -77,7 +77,7 @@
},
},
y: {
stacked: true,
stacked: props.displayedData !== 'average_speed',
grid: {
drawOnChartArea: false,
},
@ -101,29 +101,50 @@
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)
return props.fullStats && context.chart.chartArea.width < 300
? false
: props.displayedData === 'average_speed'
? 'auto'
: true
},
formatter: function (value, context) {
// 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
)
: null
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
)
: null
}
},
},
legend: {
@ -133,6 +154,8 @@
interaction: {
intersect: true,
mode: 'index',
position:
props.displayedData === 'average_speed' ? 'nearest' : 'average',
},
filter: function (tooltipItem) {
return tooltipItem.formattedValue !== '0'
@ -153,6 +176,9 @@
return label
},
footer: function (tooltipItems) {
if (props.displayedData === 'average_speed') {
return ''
}
let sum = 0
tooltipItems.map((tooltipItem) => {
sum += tooltipItem.parsed.y

9
fittrackee_client/src/components/Common/StatsChart/index.vue
View File

@ -32,6 +32,15 @@
/>
{{ $t('workouts.WORKOUT', 2) }}
</label>
<label v-if="fullStats">
<input
type="radio"
name="average_speed"
:checked="displayedData === 'average_speed'"
@click="updateDisplayData"
/>
{{ $t('workouts.AVERAGE_SPEED') }}
</label>
<label v-if="fullStats">
<input
type="radio"

4
fittrackee_client/src/types/chart.ts
View File

@ -4,6 +4,8 @@ export interface IChartDataset {
borderColor?: string[]
borderWidth?: number
fill?: boolean
data: number[]
data: (number | null)[]
yAxisID?: string
type?: string
spanGaps?: boolean
}

1
fittrackee_client/src/types/statistics.ts
View File

@ -19,6 +19,7 @@ export interface IStatisticsDateParams {
}
export type TStatisticsDatasetKeys =
| 'average_speed'
| 'nb_workouts'
| 'total_duration'
| 'total_distance'

21
fittrackee_client/src/utils/statistics.ts
View File

@ -43,6 +43,7 @@ const dateFormats: Record<string, Record<string, string>> = {
}
export const datasetKeys: TStatisticsDatasetKeys[] = [
'average_speed',
'nb_workouts',
'total_duration',
'total_distance',
@ -67,17 +68,25 @@ export const getDateKeys = (
const getStatisticsChartDataset = (
sportLabel: string,
color: string
color: string,
isLineChart = false
): IChartDataset => {
return {
const dataset: IChartDataset = {
label: sportLabel,
backgroundColor: [color],
data: [],
}
if (isLineChart) {
dataset.type = 'line'
dataset.borderColor = [color]
dataset.spanGaps = true
}
return dataset
}
export const getDatasets = (displayedSports: ISport[]): TStatisticsDatasets => {
const datasets: TStatisticsDatasets = {
average_speed: [],
nb_workouts: [],
total_distance: [],
total_duration: [],
@ -86,6 +95,9 @@ export const getDatasets = (displayedSports: ISport[]): TStatisticsDatasets => {
}
displayedSports.map((sport) => {
const color = sport.color ? sport.color : sportColors[sport.label]
datasets.average_speed.push(
getStatisticsChartDataset(sport.label, color, true)
)
datasets.nb_workouts.push(getStatisticsChartDataset(sport.label, color))
datasets.total_distance.push(getStatisticsChartDataset(sport.label, color))
datasets.total_duration.push(getStatisticsChartDataset(sport.label, color))
@ -101,11 +113,12 @@ export const convertStatsValue = (
useImperialUnits: boolean
): number => {
switch (datasetKey) {
case 'average_speed':
case 'total_distance':
case 'total_ascent':
case 'total_descent':
return convertStatsDistance(
datasetKey === 'total_distance' ? 'km' : 'm',
['average_speed', 'total_distance'].includes(datasetKey) ? 'km' : 'm',
value,
useImperialUnits
)
@ -151,6 +164,8 @@ export const formatStats = (
apiStats[date][sportsId[dataset.label]][datasetKey],
useImperialUnits
)
: datasetKey === 'average_speed'
? null
: 0
)
})

2
fittrackee_client/src/utils/tooltip.ts
View File

@ -11,6 +11,8 @@ export const formatTooltipValue = (
const unitFrom = 'km'
const unitTo = useImperialUnits ? units[unitFrom].defaultTarget : unitFrom
switch (displayedData) {
case 'average_speed':
return `${value.toFixed(2)} ${unitTo}/h`
case 'total_duration':
return formatDuration(value, formatWithUnits)
case 'total_distance':

136
fittrackee_client/tests/unit/utils/statistics.spec.ts
View File

@ -167,6 +167,32 @@ describe('getDateKeys (week starting Monday)', () => {
describe('getDatasets', () => {
it('returns chart datasets (when no displayed data provided)', () => {
const expected: TStatisticsDatasets = {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [],
type: 'line',
spanGaps: true,
},
{
label: 'Cycling (Transport)',
backgroundColor: ['#000000'],
borderColor: ['#000000'],
data: [],
type: 'line',
spanGaps: true,
},
{
label: 'Hiking',
backgroundColor: ['#bb757c'],
borderColor: ['#bb757c'],
data: [],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
@ -257,6 +283,16 @@ describe('getDatasets', () => {
})
it('returns chart datasets with only displayed sports', () => {
const expected: TStatisticsDatasets = {
average_speed: [
{
label: 'Cycling (Transport)',
backgroundColor: ['#000000'],
borderColor: ['#000000'],
data: [],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Transport)',
@ -308,6 +344,7 @@ describe('formatStats', () => {
const expected: IStatisticsChartData = {
labels: ['05/2021', '06/2021', '07/2021'],
datasets: {
average_speed: [],
nb_workouts: [],
total_distance: [],
total_duration: [],
@ -331,6 +368,16 @@ describe('formatStats', () => {
const expected: IStatisticsChartData = {
labels: ['05/2021', '06/2021', '07/2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Transport)',
backgroundColor: ['#000000'],
borderColor: ['#000000'],
data: [null, null, null],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Transport)',
@ -378,6 +425,7 @@ describe('formatStats', () => {
const inputStats: TStatisticsFromApi = {
'2021-05': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -387,6 +435,7 @@ describe('formatStats', () => {
},
'2021-06': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -394,6 +443,7 @@ describe('formatStats', () => {
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -403,6 +453,7 @@ describe('formatStats', () => {
},
'2021-07': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 12,
total_duration: 5000,
@ -419,6 +470,7 @@ describe('formatStats', () => {
const expected: IStatisticsChartData = {
labels: ['05/2021', '06/2021', '07/2021'],
datasets: {
average_speed: [],
nb_workouts: [],
total_distance: [],
total_duration: [],
@ -436,6 +488,7 @@ describe('formatStats', () => {
const inputStats: TStatisticsFromApi = {
'2021-05': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -445,6 +498,7 @@ describe('formatStats', () => {
},
'2021-06': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -452,6 +506,7 @@ describe('formatStats', () => {
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -461,6 +516,7 @@ describe('formatStats', () => {
},
'2021-07': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -477,6 +533,16 @@ describe('formatStats', () => {
const expected: IStatisticsChartData = {
labels: ['05/2021', '06/2021', '07/2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [12, 18, null],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
@ -526,6 +592,7 @@ describe('formatStats (duration)', () => {
const inputStats: TStatisticsFromApi = {
'2020': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -535,6 +602,7 @@ describe('formatStats (duration)', () => {
},
'2021': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -542,6 +610,7 @@ describe('formatStats (duration)', () => {
total_descent: 150,
},
2: {
average_speed: 14,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -551,6 +620,7 @@ describe('formatStats (duration)', () => {
},
'2022': {
3: {
average_speed: 14,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -567,6 +637,16 @@ describe('formatStats (duration)', () => {
const expected: IStatisticsChartData = {
labels: ['2020', '2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [12, 18],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
@ -613,6 +693,7 @@ describe('formatStats (duration)', () => {
const inputStats: TStatisticsFromApi = {
'2020': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -622,6 +703,7 @@ describe('formatStats (duration)', () => {
},
'2021': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -629,6 +711,7 @@ describe('formatStats (duration)', () => {
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -638,6 +721,7 @@ describe('formatStats (duration)', () => {
},
'2022': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -654,6 +738,16 @@ describe('formatStats (duration)', () => {
const expected: IStatisticsChartData = {
labels: ['2020', '2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [12, 18],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
@ -701,6 +795,7 @@ describe('formatStats (duration)', () => {
const inputStats: TStatisticsFromApi = {
'2021-10-03': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -710,6 +805,7 @@ describe('formatStats (duration)', () => {
},
'2021-10-10': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -717,6 +813,7 @@ describe('formatStats (duration)', () => {
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -726,6 +823,7 @@ describe('formatStats (duration)', () => {
},
'2021-10-17': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -742,6 +840,16 @@ describe('formatStats (duration)', () => {
const expected: IStatisticsChartData = {
labels: ['03/10/2021', '10/10/2021', '17/10/2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [12, 18, null],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
@ -789,6 +897,7 @@ describe('formatStats (duration)', () => {
const inputStats: TStatisticsFromApi = {
'2021-10-04': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -798,6 +907,7 @@ describe('formatStats (duration)', () => {
},
'2021-10-11': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -805,6 +915,7 @@ describe('formatStats (duration)', () => {
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -814,6 +925,7 @@ describe('formatStats (duration)', () => {
},
'2021-10-18': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -830,6 +942,16 @@ describe('formatStats (duration)', () => {
const expected: IStatisticsChartData = {
labels: ['04/10/2021', '11/10/2021', '18/10/2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [12, 18, null],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
@ -877,6 +999,7 @@ describe('formatStats (duration)', () => {
const inputStats: TStatisticsFromApi = {
'2021-10-03': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
@ -886,6 +1009,7 @@ describe('formatStats (duration)', () => {
},
'2021-10-10': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
@ -893,6 +1017,7 @@ describe('formatStats (duration)', () => {
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -902,6 +1027,7 @@ describe('formatStats (duration)', () => {
},
'2021-10-17': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
@ -918,6 +1044,16 @@ describe('formatStats (duration)', () => {
const expected: IStatisticsChartData = {
labels: ['03/10/2021', '10/10/2021', '17/10/2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [7.46, 11.18, null],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',

48
fittrackee_client/tests/unit/utils/tooltip.spec.ts
View File

@ -5,33 +5,39 @@ import { formatTooltipValue } from '@/utils/tooltip'
describe('formatTooltipValue', () => {
const testsParams = [
{
description: 'returns 3 if input is average speed',
inputDisplayedData: datasetKeys[0], // 'average_speed'
inputValue: 30,
expectedResult: '30.00 km/h',
},
{
description: 'returns 3 if input is workouts count',
inputDisplayedData: datasetKeys[0], // 'nb_workouts'
inputDisplayedData: datasetKeys[1], // 'nb_workouts'
inputValue: 30,
expectedResult: '30',
},
{
description: 'returns 00m:03s if input is total duration',
inputDisplayedData: datasetKeys[1], // 'total_duration'
inputDisplayedData: datasetKeys[2], // 'total_duration'
inputValue: 30,
expectedResult: '00m 30s',
},
{
description: 'returns 3.00 km if input is total distance',
inputDisplayedData: datasetKeys[2], // 'total_distance'
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputValue: 30,
expectedResult: '30.00 km',
},
{
description: 'returns 0.003 km if input is total ascent',
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
{
description: 'returns 0.003 km if input is total descent',
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputDisplayedData: datasetKeys[5], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
@ -53,33 +59,39 @@ describe('formatTooltipValue', () => {
describe('formatTooltipValue after conversion to imperial units', () => {
const testsParams = [
{
description: 'returns 30 if input is average speed',
inputDisplayedData: datasetKeys[0], // 'average_speed'
inputValue: 30,
expectedResult: '30.00 mi/h',
},
{
description: 'returns 30 if input is workouts count',
inputDisplayedData: datasetKeys[0], // 'nb_workouts'
inputDisplayedData: datasetKeys[1], // 'nb_workouts'
inputValue: 30,
expectedResult: '30',
},
{
description: 'returns 00m:03s if input is total duration',
inputDisplayedData: datasetKeys[1], // 'total_duration'
inputDisplayedData: datasetKeys[2], // 'total_duration'
inputValue: 30,
expectedResult: '00m 30s',
},
{
description: 'returns 30 mi if input is total distance',
inputDisplayedData: datasetKeys[2], // 'total_distance'
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputValue: 30,
expectedResult: '30.00 mi',
},
{
description: 'returns 0.03 mi if input is total ascent',
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 mi',
},
{
description: 'returns 0.03 mi if input is total descent',
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputDisplayedData: datasetKeys[5], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 mi',
},
@ -101,33 +113,39 @@ describe('formatTooltipValue after conversion to imperial units', () => {
describe('formatTooltipValue (formatWithUnits = false)', () => {
const testsParams = [
{
description: 'returns 3 if input is average speed',
inputDisplayedData: datasetKeys[0], // 'average_speed'
inputValue: 30,
expectedResult: '30.00 km/h',
},
{
description: 'returns 3 if input is workouts count',
inputDisplayedData: datasetKeys[0], // 'nb_workouts'
inputDisplayedData: datasetKeys[1], // 'nb_workouts'
inputValue: 30,
expectedResult: '30',
},
{
description: 'returns 00:03 if input is total duration',
inputDisplayedData: datasetKeys[1], // 'total_duration'
inputDisplayedData: datasetKeys[2], // 'total_duration'
inputValue: 30,
expectedResult: '00:30',
},
{
description: 'returns 3.00 km if input is total distance',
inputDisplayedData: datasetKeys[2], // 'total_distance'
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputValue: 30,
expectedResult: '30.00 km',
},
{
description: 'returns 0.003 km if input is total ascent',
inputDisplayedData: datasetKeys[3], // 'total_distance'
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},
{
description: 'returns 0.003 km if input is total descent',
inputDisplayedData: datasetKeys[4], // 'total_distance'
inputDisplayedData: datasetKeys[5], // 'total_distance'
inputValue: 30,
expectedResult: '0.03 km',
},