Client - update date format on charts

fittrackee_client/src/utils/statistics.ts

@@ -26,11 +26,19 @@ import {
 import { incrementDate, startDate } from '@/utils/dates'
 import { sportColors } from '@/utils/sports'
 
-// date format from api
+const dateFormats: Record<string, Record<string, string>> = {
-const dateFormats: Record<string, string> = {
+  week: {
-  week: 'yyyy-MM-dd',
+    api: 'yyyy-MM-dd',
-  month: 'yyyy-MM',
+    chart: 'dd/MM/yyyy',
-  year: 'yyyy',
+  },
+  month: {
+    api: 'yyyy-MM',
+    chart: 'MM/yyyy',
+  },
+  year: {
+    api: 'yyyy',
+    chart: 'yyyy',
+  },
 }
 
 export const datasetKeys: TStatisticsDatasetKeys[] = [
@@ -100,8 +108,9 @@ export const formatStats = (
   )
 
   dayKeys.map((key) => {
-    const date: string = format(key, dateFormat)
+    const date: string = format(key, dateFormat.api)
-    labels.push(date)
+    const label: string = format(key, dateFormat.chart)
+    labels.push(label)
     datasetKeys.map((datasetKey) => {
       datasets[datasetKey].map((dataset) => {
         dataset.data.push(

fittrackee_client/tests/unit/utils/statistics.spec.ts

@@ -258,7 +258,7 @@ describe('formatStats', () => {
       end: new Date('July 31, 2021 23:59:59.999'),
     }
     const expected: IStatisticsChartData = {
-      labels: ['2021-05', '2021-06', '2021-07'],
+      labels: ['05/2021', '06/2021', '07/2021'],
       datasets: {
         nb_workouts: [],
         total_distance: [],
@@ -279,7 +279,7 @@ describe('formatStats', () => {
       end: new Date('July 31, 2021 23:59:59.999'),
     }
     const expected: IStatisticsChartData = {
-      labels: ['2021-05', '2021-06', '2021-07'],
+      labels: ['05/2021', '06/2021', '07/2021'],
       datasets: {
         nb_workouts: [
           {
@@ -345,7 +345,7 @@ describe('formatStats', () => {
       end: new Date('July 31, 2021 23:59:59.999'),
     }
     const expected: IStatisticsChartData = {
-      labels: ['2021-05', '2021-06', '2021-07'],
+      labels: ['05/2021', '06/2021', '07/2021'],
       datasets: {
         nb_workouts: [],
         total_distance: [],
@@ -358,7 +358,7 @@ describe('formatStats', () => {
     )
   })
 
-  it('returns empty datasets if data and displayed sport provided', () => {
+  it('returns datasets when data and displayed sport provided', () => {
     const inputStats: TStatisticsFromApi = {
       '2021-05': {
         1: {
@@ -393,7 +393,7 @@ describe('formatStats', () => {
       end: new Date('July 31, 2021 23:59:59.999'),
     }
     const expected: IStatisticsChartData = {
-      labels: ['2021-05', '2021-06', '2021-07'],
+      labels: ['05/2021', '06/2021', '07/2021'],
       datasets: {
         nb_workouts: [
           {
@@ -425,6 +425,271 @@ describe('formatStats', () => {
   })
 })
 
+describe('formatStats (duration)', () => {
+  it("returns datasets when duration is 'year'", () => {
+    const inputStats: TStatisticsFromApi = {
+      '2020': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 10,
+          total_duration: 3000,
+        },
+      },
+      '2021': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 15,
+          total_duration: 3500,
+        },
+        2: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+      '2022': {
+        3: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+    }
+    const inputParams = {
+      duration: 'year',
+      start: new Date('January 1, 2020 00:00:00'),
+      end: new Date('December 31, 2021 23:59:59.999'),
+    }
+    const expected: IStatisticsChartData = {
+      labels: ['2020', '2021'],
+      datasets: {
+        nb_workouts: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [1, 1],
+          },
+        ],
+        total_distance: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [10, 15],
+          },
+        ],
+        total_duration: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [3000, 3500],
+          },
+        ],
+      },
+    }
+    assert.deepEqual(
+      formatStats(inputParams, false, sports, [1], inputStats),
+      expected
+    )
+  })
+  it("returns datasets when duration is 'year'", () => {
+    const inputStats: TStatisticsFromApi = {
+      '2020': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 10,
+          total_duration: 3000,
+        },
+      },
+      '2021': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 15,
+          total_duration: 3500,
+        },
+        2: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+      '2022': {
+        3: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+    }
+    const inputParams = {
+      duration: 'year',
+      start: new Date('January 1, 2020 00:00:00'),
+      end: new Date('December 31, 2021 23:59:59.999'),
+    }
+    const expected: IStatisticsChartData = {
+      labels: ['2020', '2021'],
+      datasets: {
+        nb_workouts: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [1, 1],
+          },
+        ],
+        total_distance: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [10, 15],
+          },
+        ],
+        total_duration: [
+          {
+            label: 'Cycling (Sport)',
+            backgroundColor: ['#4c9792'],
+            data: [3000, 3500],
+          },
+        ],
+      },
+    }
+    assert.deepEqual(
+      formatStats(inputParams, false, sports, [1], inputStats),
+      expected
+    )
+  })
+
+  it("returns datasets when duration is 'week' and week starts on Sunday", () => {
+    const inputStats: TStatisticsFromApi = {
+      '2021-10-03': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 10,
+          total_duration: 3000,
+        },
+      },
+      '2021-10-10': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 15,
+          total_duration: 3500,
+        },
+        2: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+      '2021-10-17': {
+        3: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+    }
+    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: ['03/10/2021', '10/10/2021', '17/10/2021'],
+      datasets: {
+        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],
+          },
+        ],
+      },
+    }
+    assert.deepEqual(
+      formatStats(inputParams, false, sports, [1], inputStats),
+      expected
+    )
+  })
+
+  it("returns datasets when duration is 'week' and week starts on Monday", () => {
+    const inputStats: TStatisticsFromApi = {
+      '2021-10-04': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 10,
+          total_duration: 3000,
+        },
+      },
+      '2021-10-11': {
+        1: {
+          nb_workouts: 1,
+          total_distance: 15,
+          total_duration: 3500,
+        },
+        2: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+      '2021-10-18': {
+        3: {
+          nb_workouts: 2,
+          total_distance: 20,
+          total_duration: 3000,
+        },
+      },
+    }
+    const inputParams = {
+      duration: 'week',
+      start: new Date('October 04, 2021 00:00:00'),
+      end: new Date('October 24, 2021 23:59:59.999'),
+    }
+    const expected: IStatisticsChartData = {
+      labels: ['04/10/2021', '11/10/2021', '18/10/2021'],
+      datasets: {
+        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],
+          },
+        ],
+      },
+    }
+    assert.deepEqual(
+      formatStats(inputParams, true, sports, [1], inputStats),
+      expected
+    )
+  })
+})
+
 describe("getStatsDateParams when time frame is 'month')", () => {
   const weekStartingMonday = [false, true]