Client - update stats chart display (wip)

fittrackee_client/src/components/Common/StatsChart/Chart.vue

@@ -48,13 +48,18 @@
           x: {
             stacked: true,
             grid: {
-              display: false,
+              drawOnChartArea: false,
             },
           },
           y: {
             stacked: true,
             grid: {
-              display: false,
+              drawOnChartArea: false,
+            },
+            ticks: {
+              callback: function (value) {
+                return formatTooltipValue(props.displayedData, +value, false)
+              },
             },
           },
         },

fittrackee_client/src/components/Common/StatsChart/index.vue

@@ -67,3 +67,19 @@
     },
   })
 </script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  .stat-chart {
+    .chart {
+      height: 335px;
+    }
+  }
+  @media screen and (max-width: $small-limit) {
+    .stat-chart {
+      .chart {
+        height: 280px;
+      }
+    }
+  }
+</style>

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="user-month-stats">
     <Card :without-title="false">
       <template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
       <template #content>

fittrackee_client/src/utils/tooltip.ts

@@ -3,10 +3,11 @@ import { formatDuration } from '@/utils/duration'
 
 export const formatTooltipValue = (
   displayedData: TDatasetKeys,
-  value: number
+  value: number,
+  formatWithUnits = true
 ): string => {
   return displayedData === 'total_duration'
-    ? formatDuration(value, true)
+    ? formatDuration(value, formatWithUnits)
     : displayedData === 'total_distance'
     ? value.toFixed(2) + ' km'
     : value.toString()

fittrackee_client/src/views/DashBoard.vue

@@ -3,12 +3,12 @@
     <div class="container">
       <UserStats :user="authUser" v-if="authUser.username" />
     </div>
-    <div class="container">
+    <div class="container dashboard-container">
-      <div class="left-container dashboard-container">
+      <div class="left-container dashboard-sub-container">
         <UserMonthStats :user="authUser" />
         <UserRecords />
       </div>
-      <div class="right-container dashboard-container">
+      <div class="right-container dashboard-sub-container">
         <UserCalendar />
         <Timeline />
       </div>
@@ -50,6 +50,9 @@
 <style lang="scss">
   @import '~@/scss/base';
   .dashboard-container {
+    display: flex;
+    flex-direction: row;
+    .dashboard-sub-container {
       display: flex;
       flex-direction: column;
     }
@@ -59,4 +62,17 @@
     .right-container {
       width: 65%;
     }
+  }
+  @media screen and (max-width: $small-limit) {
+    .dashboard-container {
+      display: flex;
+      flex-direction: column;
+      .left-container {
+        width: 100%;
+      }
+      .right-container {
+        width: 100%;
+      }
+    }
+  }
 </style>

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

@@ -37,3 +37,39 @@ describe('formatTooltipValue', () => {
     })
   })
 })
+
+describe('formatTooltipValue (formatWithUnits = false)', () => {
+  const testsParams = [
+    {
+      description: 'returns 3 if input is workouts count',
+      inputDisplayedData: datasetKeys[0], // 'nb_workouts'
+      inputValue: 3,
+      expectedResult: '3',
+    },
+    {
+      description: 'returns 00:03 if input is total duration',
+      inputDisplayedData: datasetKeys[1], // 'total_duration'
+      inputValue: 3,
+      expectedResult: '00:03',
+    },
+    {
+      description: 'returns 3.00 if input is total distance',
+      inputDisplayedData: datasetKeys[2], // 'total_distance'
+      inputValue: 3,
+      expectedResult: '3.00 km',
+    },
+  ]
+
+  testsParams.map((testParams) => {
+    it(testParams.description, () => {
+      assert.equal(
+        formatTooltipValue(
+          testParams.inputDisplayedData,
+          testParams.inputValue,
+          false
+        ),
+        testParams.expectedResult
+      )
+    })
+  })
+})