Merge pull request #76 from edwin-chalmers/feat/adminchanges

Add refactored Admin functions
edwin-chalmers · Feb 25, 2024 · 95a2d40 · 95a2d40
2 parents 01bb2c6 + 35e2936
commit 95a2d40
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 123 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Fitlit
 
-[Try it here!](http://example.com/)
+[Try it here!](https://edwin-chalmers.github.io/fitlit/)
 
 ## About
 FitLit is a dynamic and interactive dashboard project designed to emulate the functionality of activity tracking apps like Fitbit or Strava. The core objective of this project is to provide users with a comprehensive view of their personal activity data, including steps taken, water consumption, sleep patterns, and more, over various time frames. This project is executed with a focus on several key goals:

diff --git a/dist/index.html b/dist/index.html
@@ -44,8 +44,10 @@ <h1 class="welcome-message" id="welcomeMessage">welcome back (person.name)</h1>
               <p class="icon">&#128099;</p>
               <h3>Activity Data</h3>
             </section>
-            <h3>Activity Data</h3>
-            <canvas id="stepChart"></canvas>
+            <h3>Activity (steps)</h3>
+            <div class="chartContainer">
+            <canvas id="stepChart" responsive="true">
+          </div>
           </div>
         </section>
         <section class="water-main info-card  draggable" draggable="true" id="waterCard">
@@ -54,10 +56,14 @@ <h3>Activity Data</h3>
               <p class="icon">&#128167;</p>
               <h3>Hydration Data</h3>
             </section>
-            <p>Average Hydration Data (oz)</p>
-              <canvas id="hydChart"></canvas>
+            <h3>Average Hydration Data (oz)</h3>
+            <div class="chartContainer">
+              <canvas id="hydChart" responsive="true"></canvas>
+            </div>
             <p>Weekly Hydration Data (oz)</p>
-              <canvas id="wklyHydChart"></canvas>
+            <div class="chartContainer">
+              <canvas id="wklyHydChart" responsive="true"></canvas>
+            </div> 
             <div id="hydrationInputContainer">
               <input type="date" id="hydrationDate" placeholder="YYYY/MM/DD" required>
               <input type="number" id="hydrationAmount" placeholder="Ounces" required>
@@ -77,9 +83,15 @@ <h3>Sleep Data</h3>
                 <option>2023/07/01</option>
               </select>
             </section>
-            <canvas id="sleepChart"></canvas>
-            <canvas id="wklySleepChart"></canvas>
-            <canvas id="avgSleepChart"></canvas>
+              <div class="chartContainer">
+                <canvas id="sleepChart" responsive="true"></canvas>
+              </div>
+              <div class="chartContainer">
+                <canvas id="wklySleepChart" responsive="true"></canvas>
+              </div>
+              <div class="chartContainer">
+                <canvas id="avgSleepChart" responsive="true"></canvas>
+              </div>
           </div>
         </section>
         <section class="account-main info-card" id="accountCard">

diff --git a/src/chartSetup.js b/src/chartSetup.js
@@ -32,16 +32,16 @@ const adminSleepCtx = document.getElementById('adminSleepChart').getContext('2d'
 const adminHydrationCtx = document.getElementById('adminHydrationChart').getContext('2d');
 const adminActivityCtx = document.getElementById('adminActivityChart').getContext('2d');
 
-stepCtx.canvas.height = 100; 
-wklyHydCtx.canvas.height = 100;
-hydCtx.canvas.height = 100;
-sleepCtx.canvas.height = 60;
-avgSleepCtx.canvas.height = 150;
-wklySleepCtx.canvas.height = 80;
-adminCtx.canvas.height = 200;
-adminSleepCtx.canvas.height = 100;
-adminHydrationCtx.canvas.height = 100;
-adminActivityCtx.canvas.height = 100;
+// stepCtx.canvas.height = 100; 
+// wklyHydCtx.canvas.height = 100;
+// hydCtx.canvas.height = 100;
+// sleepCtx.canvas.height = 60;
+// avgSleepCtx.canvas.height = 150;
+// wklySleepCtx.canvas.height = 80;
+// adminCtx.canvas.height = 150;
+// adminSleepCtx.canvas.height = 150;
+// adminHydrationCtx.canvas.height = 150;
+// adminActivityCtx.canvas.height = 150;
 
 const stepChartData = {
   labels: ['Your step goal', 'Average step goal'],
@@ -82,7 +82,7 @@ const wklyHydChartData = {
 };
 
 const hydChartData = {
-  labels: ['Average Daily Hydration (oz)', 'Hydration For Specific Day (oz)'],
+  labels: ['Average Daily Hyd', 'Hydration For Spec Day'],
   datasets: [{
     label: '',
     data: [],
@@ -101,7 +101,7 @@ const hydChartData = {
 };
 
 const wklySleepChartData = {
-  labels: ['Weekly Hours Slept Per Day', 'Weekly Sleep Quality Per Day'],
+  labels: ['Wkly Hrs Slept / Day', 'Sleep Qual / Day'],
   datasets: [
     {
       label: 'Day1',
@@ -198,7 +198,7 @@ const wklySleepChartData = {
 };
 //////
 const avgSleepChartData = {
-  labels: ['Average Hours Slept Per Day', 'Average Sleep Quality Per Day'],
+  labels: ['Avg Hrs Slept / Day', 'Avg Sleep Qual / Day'],
   datasets: [{
     label: '',
     data: [],
@@ -217,7 +217,7 @@ const avgSleepChartData = {
 };
 
 const sleepChartData = {
-  labels: ['Hours Slept Per Recent Day', 'Sleep Quality Per Recent Day'],
+  labels: ['Hrs Slept / Rec Day', 'Sleep Qual / Rec Day'],
   datasets: [{
     label: '',
     data: [],

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -280,7 +280,12 @@ canvas {
         flex-wrap: wrap;
         flex-direction: row;
         align-items: center;
-        scroll-margin-top: 220px
+        scroll-margin-top: 220px;
+
+        .chartContainer {
+          width: 95%;
+        }
+
       }
 
       .iconSection {
@@ -386,8 +391,8 @@ canvas {
 
         .fa > p {
           position: absolute;
-          top: 120px;
-          left: 143px;
+          top: 240px;
+          left: 140px;
         }
         .chartOptions,
         .options {
@@ -433,8 +438,8 @@ canvas {
 
         .fa > p {
           position: absolute;
-          top: 380px;
-          left: 370px;
+          top: 240px;
+          left: 700px;
         }
 
         input {

diff --git a/src/domUpdates.js b/src/domUpdates.js
@@ -4,15 +4,13 @@ import {
   getAverageDailyFluidOunces,
   getSpecificDay,
   getWeeklyFluidOunces,
-  getAverageSleepHours,
   getWeeklySleep,
-  getAverageSleepQuality,
-  getMostRecentSleepHours,
-  getMostRecentSleepQuality,
+  getAverageSleepData,
+  getMostRecentSleepData,
   getTotalAverageSleepData,
   getTotalAverageNumOunces,
   getTotalAverageActivityData,
-  adminChartUpdate
+  adminChartUpdate,
 } from './scripts'
 import { Chart, registerables } from 'chart.js/auto';
 import { stepChart, wklyHydChart, hydChart, avgSleepChart, sleepChart, wklySleepChart, setCharts, adminChart } from './chartSetup'
@@ -37,22 +35,21 @@ function displayWelcomeMessage(user) {
 }
 //////////
 
-        // refactor updateAccountFriends() + updateAccountStep() + updateAccountStride()
-
-        // + updateAccountName() + updateAccountEmail() + updateAccountAddress()
-        function updateAccountData(user) {
-          Object.keys(user).forEach(dataType => {
-            if (dataType === 'dailyStepGoal') {
-              document.querySelector(`#${dataType}`).textContent = `${user[dataType]} steps`;
-            } else if (dataType === 'strideLength') {
-              document.querySelector(`#${dataType}`).textContent = `${user[dataType]} ft.`;
-            } else if (dataType === 'id') { 
-              //don't do anything
-            } else { 
-              document.querySelector(`#${dataType}`).textContent = `${user[dataType]}`;
-            }
-          })
-        }
+// refactor updateAccountFriends() + updateAccountStep() + updateAccountStride()
+// + updateAccountName() + updateAccountEmail() + updateAccountAddress()
+function updateAccountData(user) {
+  Object.keys(user).forEach(dataType => {
+    if (dataType === 'dailyStepGoal') {
+      document.querySelector(`#${dataType}`).textContent = `${user[dataType]} steps`;
+    } else if (dataType === 'strideLength') {
+      document.querySelector(`#${dataType}`).textContent = `${user[dataType]} ft.`;
+    } else if (dataType === 'id') { 
+      //don't do anything
+    } else { 
+      document.querySelector(`#${dataType}`).textContent = `${user[dataType]}`;
+    }
+  })
+}
 
 function displayAverageDailyOunces(averageOunces) {
   return averageOunces.toFixed(2)
@@ -88,13 +85,14 @@ function hydrationChartUpdate(randomUser, allUsers) {
 }
 
 function sleepChartUpdate(randomUser, allUsers) {
-  const averageHoursSleptPerDay = getAverageSleepHours(randomUser)
-  const averageSleepQuality = getAverageSleepQuality(randomUser)
-  const hoursSleptRecentDay = getMostRecentSleepHours(randomUser)
-  const sleepQualityRecentDay = getMostRecentSleepQuality(randomUser)
+  const averageHoursSleptPerDay = getAverageSleepData(randomUser, 'hoursSlept')
+  const averageSleepQuality = getAverageSleepData(randomUser, 'sleepQuality')
+  const hoursSleptRecentDay = getMostRecentSleepData(randomUser, 'hoursSlept')
+  const sleepQualityRecentDay = getMostRecentSleepData(randomUser, 'sleepQuality')
 
   const selectedDate = document.querySelector('.dateSelector').value
   const sleepWeekAndDay = getWeeklySleep(randomUser, selectedDate)
+  console.log(selectedDate)
   const weeklySleepHoursPerDay = sleepWeekAndDay.weeklySleepHours
   const weeklySleepQualityPerDay = sleepWeekAndDay.weeklySleepQuality
 
@@ -115,6 +113,8 @@ function sleepChartUpdate(randomUser, allUsers) {
 }
 
 
+
+
 export {
   updateDom,
   displayWelcomeMessage,

diff --git a/src/functions.js b/src/functions.js
@@ -106,10 +106,10 @@ export {
     getSpecificDay,
     getWeeklyFluidOunces,
     getUserSleepData,
-    getAverageSleepHours,
-    getAverageSleepQuality,
+    getAverageSleepData,
     getMostRecentSleepHours,
     getMostRecentSleepQuality,
     getWeeklySleepHours,
-    getWeeklySleepQuality
+    getWeeklySleepQuality,
+    getWeeklySleepData
 };