Client - update date format on charts

This commit is contained in:
Sam 2022-11-01 18:12:42 +01:00
parent 68913f2e25
commit c5eff632ce
3 changed files with 338 additions and 30 deletions

View File

@ -145,7 +145,8 @@
props.sports, props.sports,
props.displayedSportIds, props.displayedSportIds,
statistics.value, statistics.value,
props.user.imperial_units props.user.imperial_units,
props.user.date_format
) )
) )

View File

@ -14,6 +14,7 @@ import {
subYears, subYears,
} from 'date-fns' } from 'date-fns'
import createI18n from '@/i18n'
import { IChartDataset } from '@/types/chart' import { IChartDataset } from '@/types/chart'
import { ISport } from '@/types/sports' import { ISport } from '@/types/sports'
import { import {
@ -23,14 +24,17 @@ import {
TStatisticsDatasets, TStatisticsDatasets,
TStatisticsFromApi, TStatisticsFromApi,
} from '@/types/statistics' } from '@/types/statistics'
import { incrementDate, getStartDate } from '@/utils/dates' import { incrementDate, getStartDate, getDateFormat } from '@/utils/dates'
import { localeFromLanguage } from '@/utils/locales'
import { sportColors } from '@/utils/sports' import { sportColors } from '@/utils/sports'
import { convertStatsDistance } from '@/utils/units' import { convertStatsDistance } from '@/utils/units'
const { locale } = createI18n.global
const dateFormats: Record<string, Record<string, string>> = { const dateFormats: Record<string, Record<string, string>> = {
week: { week: {
api: 'yyyy-MM-dd', api: 'yyyy-MM-dd',
chart: 'dd/MM/yyyy', chart: 'MM/dd/yyyy',
}, },
month: { month: {
api: 'yyyy-MM', api: 'yyyy-MM',
@ -135,7 +139,8 @@ export const formatStats = (
sports: ISport[], sports: ISport[],
displayedSportsId: number[], displayedSportsId: number[],
apiStats: TStatisticsFromApi, apiStats: TStatisticsFromApi,
useImperialUnits: boolean useImperialUnits: boolean,
userDateFormat: string
): IStatisticsChartData => { ): IStatisticsChartData => {
const dayKeys = getDateKeys(params, weekStartingMonday) const dayKeys = getDateKeys(params, weekStartingMonday)
const dateFormat = dateFormats[params.duration] const dateFormat = dateFormats[params.duration]
@ -151,7 +156,13 @@ export const formatStats = (
dayKeys.map((key) => { dayKeys.map((key) => {
const date: string = format(key, dateFormat.api) const date: string = format(key, dateFormat.api)
const label: string = format(key, dateFormat.chart) const label: string = format(
key,
params.duration === 'week'
? getDateFormat(userDateFormat, locale.value)
: dateFormat.chart,
{ locale: localeFromLanguage[locale.value] }
)
labels.push(label) labels.push(label)
datasetKeys.map((datasetKey) => { datasetKeys.map((datasetKey) => {
datasets[datasetKey].map((dataset) => { datasets[datasetKey].map((dataset) => {

View File

@ -2,6 +2,7 @@ import { assert } from 'chai'
import { sports } from './fixtures' import { sports } from './fixtures'
import createI18n from '@/i18n'
import { import {
IStatisticsChartData, IStatisticsChartData,
TStatisticsDatasets, TStatisticsDatasets,
@ -15,6 +16,8 @@ import {
updateChartParams, updateChartParams,
} from '@/utils/statistics' } from '@/utils/statistics'
const { locale } = createI18n.global
describe('getDateKeys (week starting Sunday)', () => { describe('getDateKeys (week starting Sunday)', () => {
const testsParams = [ const testsParams = [
{ {
@ -353,7 +356,15 @@ describe('formatStats', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [], inputStats, false), formatStats(
inputParams,
false,
sports,
[],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
@ -416,7 +427,15 @@ describe('formatStats', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [2], inputStats, false), formatStats(
inputParams,
false,
sports,
[2],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
@ -479,7 +498,15 @@ describe('formatStats', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [], inputStats, false), formatStats(
inputParams,
false,
sports,
[],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
@ -581,7 +608,15 @@ describe('formatStats', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [1], inputStats, false), formatStats(
inputParams,
false,
sports,
[1],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
@ -685,13 +720,21 @@ describe('formatStats (duration)', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [1], inputStats, false), formatStats(
inputParams,
false,
sports,
[1],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
it("returns datasets when duration is 'year'", () => { it("returns datasets when duration is 'month'", () => {
const inputStats: TStatisticsFromApi = { const inputStats: TStatisticsFromApi = {
'2020': { '2021-10': {
1: { 1: {
average_speed: 12, average_speed: 12,
nb_workouts: 1, nb_workouts: 1,
@ -701,7 +744,7 @@ describe('formatStats (duration)', () => {
total_descent: 100, total_descent: 100,
}, },
}, },
'2021': { '2021-11': {
1: { 1: {
average_speed: 18, average_speed: 18,
nb_workouts: 1, nb_workouts: 1,
@ -719,7 +762,7 @@ describe('formatStats (duration)', () => {
total_descent: 200, total_descent: 200,
}, },
}, },
'2022': { '2021-12': {
3: { 3: {
average_speed: 8.64, average_speed: 8.64,
nb_workouts: 2, nb_workouts: 2,
@ -731,19 +774,19 @@ describe('formatStats (duration)', () => {
}, },
} }
const inputParams = { const inputParams = {
duration: 'year', duration: 'month',
start: new Date('January 1, 2020 00:00:00'), start: new Date('October 1, 2021 00:00:00'),
end: new Date('December 31, 2021 23:59:59.999'), end: new Date('December 31, 2021 23:59:59.999'),
} }
const expected: IStatisticsChartData = { const expected: IStatisticsChartData = {
labels: ['2020', '2021'], labels: ['10/2021', '11/2021', '12/2021'],
datasets: { datasets: {
average_speed: [ average_speed: [
{ {
label: 'Cycling (Sport)', label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'], backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'], borderColor: ['#4c9792'],
data: [12, 18], data: [12, 18, null],
type: 'line', type: 'line',
spanGaps: true, spanGaps: true,
}, },
@ -752,41 +795,49 @@ describe('formatStats (duration)', () => {
{ {
label: 'Cycling (Sport)', label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'], backgroundColor: ['#4c9792'],
data: [1, 1], data: [1, 1, 0],
}, },
], ],
total_distance: [ total_distance: [
{ {
label: 'Cycling (Sport)', label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'], backgroundColor: ['#4c9792'],
data: [10, 15], data: [10, 15, 0],
}, },
], ],
total_duration: [ total_duration: [
{ {
label: 'Cycling (Sport)', label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'], backgroundColor: ['#4c9792'],
data: [3000, 3500], data: [3000, 3500, 0],
}, },
], ],
total_ascent: [ total_ascent: [
{ {
label: 'Cycling (Sport)', label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'], backgroundColor: ['#4c9792'],
data: [150, 250], data: [150, 250, 0],
}, },
], ],
total_descent: [ total_descent: [
{ {
label: 'Cycling (Sport)', label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'], backgroundColor: ['#4c9792'],
data: [100, 150], data: [100, 150, 0],
}, },
], ],
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [1], inputStats, false), formatStats(
inputParams,
false,
sports,
[1],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
@ -838,7 +889,7 @@ describe('formatStats (duration)', () => {
end: new Date('October 23, 2021 23:59:59.999'), end: new Date('October 23, 2021 23:59:59.999'),
} }
const expected: IStatisticsChartData = { const expected: IStatisticsChartData = {
labels: ['03/10/2021', '10/10/2021', '17/10/2021'], labels: ['10/03/2021', '10/10/2021', '10/17/2021'],
datasets: { datasets: {
average_speed: [ average_speed: [
{ {
@ -888,7 +939,15 @@ describe('formatStats (duration)', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [1], inputStats, false), formatStats(
inputParams,
false,
sports,
[1],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
@ -940,7 +999,7 @@ describe('formatStats (duration)', () => {
end: new Date('October 24, 2021 23:59:59.999'), end: new Date('October 24, 2021 23:59:59.999'),
} }
const expected: IStatisticsChartData = { const expected: IStatisticsChartData = {
labels: ['04/10/2021', '11/10/2021', '18/10/2021'], labels: ['10/04/2021', '10/11/2021', '10/18/2021'],
datasets: { datasets: {
average_speed: [ average_speed: [
{ {
@ -990,12 +1049,20 @@ describe('formatStats (duration)', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, true, sports, [1], inputStats, false), formatStats(
inputParams,
true,
sports,
[1],
inputStats,
false,
'MM/dd/yyyy'
),
expected expected
) )
}) })
it('returns datasets after conversion to imperial units', () => { it("returns datasets when duration is 'week' and date format 'dd/MM/yyyy'", () => {
const inputStats: TStatisticsFromApi = { const inputStats: TStatisticsFromApi = {
'2021-10-03': { '2021-10-03': {
1: { 1: {
@ -1043,6 +1110,227 @@ describe('formatStats (duration)', () => {
} }
const expected: IStatisticsChartData = { const expected: IStatisticsChartData = {
labels: ['03/10/2021', '10/10/2021', '17/10/2021'], 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)',
backgroundColor: ['#4c9792'],
data: [1, 1, 0],
},
],
total_distance: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [10, 15, 0],
},
],
total_duration: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
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(
formatStats(
inputParams,
false,
sports,
[1],
inputStats,
false,
'dd/MM/yyyy'
),
expected
)
})
it("returns datasets when duration is 'week' and date format is 'date_string'", () => {
locale.value = 'fr'
const inputStats: TStatisticsFromApi = {
'2021-10-03': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021-10-10': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2021-10-17': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
const inputParams = {
duration: 'week',
start: new Date('October 03, 2021 00:00:00'),
end: new Date('October 23, 2021 23:59:59.999'),
}
const expected: IStatisticsChartData = {
labels: ['3 oct. 2021', '10 oct. 2021', '17 oct. 2021'],
datasets: {
average_speed: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
borderColor: ['#4c9792'],
data: [12, 18, null],
type: 'line',
spanGaps: true,
},
],
nb_workouts: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [1, 1, 0],
},
],
total_distance: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
data: [10, 15, 0],
},
],
total_duration: [
{
label: 'Cycling (Sport)',
backgroundColor: ['#4c9792'],
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(
formatStats(
inputParams,
false,
sports,
[1],
inputStats,
false,
'date_string'
),
expected
)
})
it('returns datasets after conversion to imperial units', () => {
const inputStats: TStatisticsFromApi = {
'2021-10-03': {
1: {
average_speed: 12,
nb_workouts: 1,
total_distance: 10,
total_duration: 3000,
total_ascent: 150,
total_descent: 100,
},
},
'2021-10-10': {
1: {
average_speed: 18,
nb_workouts: 1,
total_distance: 15,
total_duration: 3500,
total_ascent: 250,
total_descent: 150,
},
2: {
average_speed: 24,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 150,
total_descent: 200,
},
},
'2021-10-17': {
3: {
average_speed: 8.64,
nb_workouts: 2,
total_distance: 20,
total_duration: 3000,
total_ascent: 100,
total_descent: 100,
},
},
}
const inputParams = {
duration: 'week',
start: new Date('October 03, 2021 00:00:00'),
end: new Date('October 23, 2021 23:59:59.999'),
}
const expected: IStatisticsChartData = {
labels: ['10/03/2021', '10/10/2021', '10/17/2021'],
datasets: { datasets: {
average_speed: [ average_speed: [
{ {
@ -1092,7 +1380,15 @@ describe('formatStats (duration)', () => {
}, },
} }
assert.deepEqual( assert.deepEqual(
formatStats(inputParams, false, sports, [1], inputStats, true), formatStats(
inputParams,
false,
sports,
[1],
inputStats,
true,
'MM/dd/yyyy'
),
expected expected
) )
}) })