feat: added recovery chart/api (#183)

package.json

@@ -120,6 +120,7 @@
     "@types/cookie-parser": "^1.4.3",
     "@types/cors": "^2.8.12",
     "@types/jsonwebtoken": "^8.5.8",
+    "@types/lodash-es": "^4.17.6",
     "@types/multer": "^1.4.7",
     "@types/request-ip": "^0.0.37",
     "c8": "^7.11.3",

src/apps/api/v1/exercises/exercises.controller.js

@@ -19,8 +19,8 @@ export async function getExerciseHistory(req, res) {
   const { perPage, currentPage } = req.query;
 
   const pagination = {
-    perPage,
-    currentPage,
+    perPage: perPage ?? null,
+    currentPage: currentPage ?? null,
   };
 
   const exercise = await ExercisesQueries.getExerciseHistoryByExerciseId(exercise_id, pagination);

src/apps/api/v1/sessions/sessions.controller.js

@@ -87,8 +87,8 @@ export async function getUserSessions(req, res) {
   const { perPage, currentPage } = req.query;
 
   const pagination = {
-    perPage,
-    currentPage,
+    perPage: perPage ?? null,
+    currentPage: currentPage ?? null,
   };
 
   const sessions = await SessionQueries.getSessionsByUserId(user_id, pagination);

src/apps/api/v1/variables/variables.controller.js

@@ -5,15 +5,38 @@ import path from 'path';
 import { marked } from 'marked';
 import { calculateE1RM } from '../../../../utils/helpers.js';
 
+/**
+ * It gets the recovery data for a user
+ * @param req - The request object.
+ * @param res - The response object.
+ * @returns The recovery data for a user.
+ */
 export async function getRecovery(req, res) {
+  const { user_id } = req.params;
+  const { perPage, currentPage } = req.query;
+
+  const pagination = {
+    perPage: perPage ?? null,
+    currentPage: currentPage ?? null,
+  };
+
+  const recovery = await VariablesQueries.getRecovery(user_id, pagination);
+
   return res.status(StatusCodes.OK).json({
     status: 'success',
     request_url: req.originalUrl,
     message: 'The resource was returned successfully!',
-    data: [],
+    data: recovery.data,
+    pagination: recovery.pagination,
   });
 }
 
+/**
+ * It reads the `CHANGELOG.md` file and returns the content in HTML format
+ * @param req - The request object.
+ * @param res - The response object.
+ * @returns The changelogs in HTML format.
+ */
 export async function getChangelogs(req, res) {
   let changelogs = null;
   try {
@@ -58,7 +81,8 @@ export async function getWeeklyWeightIn(req, res) {
   }
 
   const mapped = [];
-  // It's looping through the bodyWeight array and calculating the trend.
+
+  // It's iteration through the bodyWeight array and calculating the trend.
   for (let i = 0; i < bodyWeight.length; i++) {
     const current = bodyWeight[i];
     const previous = bodyWeight[i + 1];

src/apps/api/v1/variables/variables.queries.js

@@ -57,3 +57,18 @@ export async function recentPrsByUserId(user_id) {
   );
   return rows;
 }
+
+export async function getRecovery(user_id, pagination = { perPage: null, currentPage: null }) {
+  return db
+    .select('v.stress_level', 'v.hours_of_sleep', 'ss.session_rpe', 'v.created_at')
+    .from('variables as v')
+    .innerJoin('sessions as ss', 'ss.id', 'v.session_id')
+    .where({ 'v.user_id': user_id })
+    .andWhere({ 'v.deleted': false })
+    .andWhere({ 'ss.deleted': false })
+    .orderBy('v.created_at', 'desc')
+    .paginate({
+      ...pagination,
+      isLengthAware: true,
+    });
+}

src/apps/api/v1/variables/variables.router.js

@@ -31,9 +31,11 @@ variables.get(
 );
 
 /**
- * GET /api/v1/variables/recovery/{user_id}
+ * GET /api/v1/variables/recovery/{user_id}?perPage={perPage}&currentPage={perPage}
  * @tags variables
  * @summary get recovery tracking information
+ * @param {number} perPage.query.required - the perPage id  - application/x-www-form-urlencoded
+ * @param {number} currentPage.query.required - the currentPage id  - application/x-www-form-urlencoded
  * @param {number} user_id.path.required - the user_id - application/x-www-form-urlencoded
  */
 variables.get(

src/apps/api/v1/variables/variables.validation.js

@@ -1,4 +1,4 @@
-import { check, param, body } from 'express-validator';
+import { check, param, body, query } from 'express-validator';
 import * as UsersQueries from '../users/users.queries.js';
 
 /* Validating the user_id. */
@@ -42,6 +42,26 @@ export const getRecentPrs = [
 ];
 
 export const getRecovery = [
+  query('perPage')
+    .optional()
+    .trim()
+    .notEmpty()
+    .withMessage('perPage must not be empty!')
+    .bail()
+    .isInt()
+    .withMessage('perPage must be an ID!')
+    .bail()
+    .toInt(),
+  query('currentPage')
+    .optional()
+    .trim()
+    .notEmpty()
+    .withMessage('current-page must not be empty!')
+    .bail()
+    .isInt()
+    .withMessage('current-page must be an ID!')
+    .bail()
+    .toInt(),
   param('user_id')
     .trim()
     .notEmpty()

src/apps/ui/pages/dashboard/Exercise.vue

@@ -91,7 +91,6 @@ const chartData = computed(() => ({
 const { lineChartProps } = useLineChart({
   chartData,
 });
-
 // ----------- chart end
 
 async function getExerciseDetails(currentPage) {

src/apps/ui/pages/dashboard/Profile.vue

@@ -1,11 +1,8 @@
 <script setup>
 import VideosAndProfileHeader from '../../components/dashboard/headers/VideosAndProfileHeader.vue';
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { Chart } from 'chart.js';
-import { sleep } from '../../../../utils/helpers.js';
-import { isMobile } from '../../../../utils/helpers.js';
 import api from '../../../../utils/fetch-with-style.js';
 import useUserStore from '../../store/user.store.js';
 import dayjs from 'dayjs';
@@ -14,6 +11,8 @@ import { omit } from 'lodash-es';
 import useAppStore from '../../store/app.store.js';
 const appStore = useAppStore();
 
+import { LineChart, useLineChart } from 'vue-chart-3';
+
 const userStore = useUserStore();
 const router = useRouter();
 const today = ref(null);
@@ -23,6 +22,8 @@ const alert = reactive({
   msg: '',
 });
 
+const recovery = ref([]);
+
 const weeklyWeightIn = reactive({});
 
 const recentPrs = reactive({});
@@ -56,8 +57,6 @@ onMounted(async () => {
     },
   };
 
-  const ctx = document.getElementById('myChart');
-  new Chart(ctx, data);
   // ----------- chart ends
 
   // warn user if they have not update user details
@@ -75,6 +74,10 @@ onMounted(async () => {
   let rpr = await getRecentPrs();
   rpr.map((cur) => (cur.showRecentPrDetails = false));
   Object.assign(recentPrs, rpr);
+
+  // recovery
+  const r = await getRecovery();
+  recovery.value = r || [];
 });
 
 async function getRecentPrs() {
@@ -126,6 +129,61 @@ async function getWeeklyWeightIn() {
     }
   }
 }
+
+async function getRecovery() {
+  try {
+    const res = await api.get(`/api/v1/variables/recovery/${userStore.user.id}?perPage=7`);
+    const json = await res.json();
+
+    if (!res.ok) {
+      if (json.errors) {
+        throw json.errors;
+      } else {
+        throw json.message;
+      }
+    }
+
+    return json.data;
+  } catch (e) {
+    alert.type = 'danger';
+    if (Array.isArray(e)) {
+      alert.msg = e.map((cur) => cur.msg).join(' ');
+      return;
+    } else {
+      alert.msg = e;
+    }
+  }
+}
+
+// ----------- chart starts
+const chartData = computed(() => ({
+  labels: recovery.value?.map((r) => dayjs(r.created_at).format('MM/DD')),
+  datasets: [
+    {
+      label: 'sleep',
+      data: recovery.value?.map((r) => r.hours_of_sleep),
+      backgroundColor: '#BADBCC',
+      borderColor: '#198754',
+    },
+    {
+      label: 'stress',
+      data: recovery.value?.map((r) => r.stress_level),
+      backgroundColor: '#FFECB5',
+      borderColor: '#FFDE7A',
+    },
+    {
+      label: 'session_rpe',
+      data: recovery.value?.map((r) => r.session_rpe),
+      backgroundColor: '#F5C2C7',
+      borderColor: '#DC3545',
+    },
+  ],
+}));
+
+const { lineChartProps } = useLineChart({
+  chartData,
+});
+// ----------- chart end
 </script>
 
 <template>
@@ -204,7 +262,7 @@ async function getWeeklyWeightIn() {
         <h5><i class="bi bi-activity"></i> Recovery</h5>
         <div class="card" style="height: 100%">
           <div class="card-body">
-            <canvas id="myChart"></canvas>
+            <LineChart :height="Number(237)" v-bind="lineChartProps" />
           </div>
         </div>
       </div>