Add averages for each day of the week

views/dashboardPage/bundle.js

@@ -574,6 +574,7 @@ let analytics = {
     ingredient: {},
 
     display: function(){
+        console.time("display");
         let startDate = new Date();
         startDate.setMonth(startDate.getMonth() - 1);
         const dateIndices = controller.transactionIndices(merchant.transactions, startDate);
@@ -610,10 +611,11 @@ let analytics = {
             };
             itemsList.appendChild(li);
         }
+        console.timeEnd("display");
     },
 
     ingredientDisplay: function(){
-        console.log(this.ingredient);
+        console.time("load");
         //Get list of recipes that contain the ingredient
         let containingRecipes = [];
 
@@ -673,12 +675,38 @@ let analytics = {
 
         Plotly.newPlot("itemUseGraph", [trace], layout);
 
-        //Create daily use card
+        //Create use cards
         let sum = 0;
+        let max = 0;
+        let min = quantities[0];
         for(let i = 0; i < quantities.length; i++){
             sum += quantities[i];
+            if(quantities[i] > max){
+                max = quantities[i];
+            }else if(quantities[i] < min){
+                min = quantities[i];
+            }
+        }
+        document.getElementById("analMinUse").innerText = `${min.toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analAvgUse").innerText = `${(sum / quantities.length).toFixed(2)} ${this.ingredient.ingredient.unit}`;        
+        document.getElementById("analMaxUse").innerText = `${max.toFixed(2)} ${this.ingredient.ingredient.unit}`;
+
+        let dayUse = [0, 0, 0, 0, 0, 0, 0];
+        let dayCount = [0, 0, 0, 0, 0, 0, 0];
+        for(let i = 0; i < quantities.length; i++){
+            dayUse[dates[i].getDay()] += quantities[i];
+            dayCount[dates[i].getDay()]++;
         }
-        document.getElementById("analAvgUse").innerText = `${(sum / 30).toFixed(2)} ${this.ingredient.ingredient.unit}`;        
+
+        document.getElementById("analDayOne").innerText = `${(dayUse[0] / dayCount[0]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayTwo").innerText = `${(dayUse[1] / dayCount[1]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayThree").innerText = `${(dayUse[2] / dayCount[2]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayFour").innerText = `${(dayUse[3] / dayCount[3]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayFive").innerText = `${(dayUse[4] / dayCount[4]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDaySix").innerText = `${(dayUse[5] / dayCount[5]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDaySeven").innerText = `${(dayUse[6] / dayCount[6]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+
+        console.timeEnd("load");
     },
 
     changeDates: function(){
@@ -722,7 +750,6 @@ let analytics = {
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("ERROR: UNABLE TO DISPLAY THE DATA");
             })
             .finally(()=>{

views/dashboardPage/dashboard.css

@@ -486,14 +486,14 @@ Analytics Strand
 
         #itemUseGraph{
             padding: 10px;
-            height: 70%;
+            height: 60%;
             flex-grow: 0;
         }
 
         .dataRow{
             display: flex;
             justify-content: space-around;
-            height: 20%;
+            height: 15%;
         }
 
             .analCard{

views/dashboardPage/dashboard.ejs

@@ -278,11 +278,67 @@
                         <div id="itemUseGraph" class="card"></div>
 
                         <div class="dataRow">
+                            <div class="card analCard">
+                                <p>MINIMUM DAILY USE</p>
+
+                                <h1 id="analMinUse"></h1>
+                            </div>
+
                             <div class="card analCard">
                                 <p>AVERAGE DAILY USE</p>
 
                                 <h1 id="analAvgUse"></h1>
                             </div>
+
+                            <div class="card analCard">
+                                <p>MAXIMUM DAILY USE</p>
+
+                                <h1 id="analMaxUse"></h1>
+                            </div>
+                        </div>
+
+                        <div class="dataRow">
+                            <div class="card analCard">
+                                <p>Sunday Average</p>
+
+                                <h1 id="analDayOne"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Monday Average</p>
+
+                                <h1 id="analDayTwo"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Tuesday Average</p>
+
+                                <h1 id="analDayThree"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Wednesday Average</p>
+
+                                <h1 id="analDayFour"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Thursday Average</p>
+
+                                <h1 id="analDayFive"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Friday Average</p>
+
+                                <h1 id="analDaySix"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Saturday Average</p>
+
+                                <h1 id="analDaySeven"></h1>
+                            </div>
                         </div>
                     </div>
                 </div>

views/dashboardPage/js/analytics.js

@@ -5,6 +5,7 @@ let analytics = {
     ingredient: {},
 
     display: function(){
+        console.time("display");
         let startDate = new Date();
         startDate.setMonth(startDate.getMonth() - 1);
         const dateIndices = controller.transactionIndices(merchant.transactions, startDate);
@@ -41,10 +42,11 @@ let analytics = {
             };
             itemsList.appendChild(li);
         }
+        console.timeEnd("display");
     },
 
     ingredientDisplay: function(){
-        console.log(this.ingredient);
+        console.time("load");
         //Get list of recipes that contain the ingredient
         let containingRecipes = [];
 
@@ -104,12 +106,38 @@ let analytics = {
 
         Plotly.newPlot("itemUseGraph", [trace], layout);
 
-        //Create daily use card
+        //Create use cards
         let sum = 0;
+        let max = 0;
+        let min = quantities[0];
         for(let i = 0; i < quantities.length; i++){
             sum += quantities[i];
+            if(quantities[i] > max){
+                max = quantities[i];
+            }else if(quantities[i] < min){
+                min = quantities[i];
+            }
+        }
+        document.getElementById("analMinUse").innerText = `${min.toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analAvgUse").innerText = `${(sum / quantities.length).toFixed(2)} ${this.ingredient.ingredient.unit}`;        
+        document.getElementById("analMaxUse").innerText = `${max.toFixed(2)} ${this.ingredient.ingredient.unit}`;
+
+        let dayUse = [0, 0, 0, 0, 0, 0, 0];
+        let dayCount = [0, 0, 0, 0, 0, 0, 0];
+        for(let i = 0; i < quantities.length; i++){
+            dayUse[dates[i].getDay()] += quantities[i];
+            dayCount[dates[i].getDay()]++;
         }
-        document.getElementById("analAvgUse").innerText = `${(sum / 30).toFixed(2)} ${this.ingredient.ingredient.unit}`;        
+
+        document.getElementById("analDayOne").innerText = `${(dayUse[0] / dayCount[0]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayTwo").innerText = `${(dayUse[1] / dayCount[1]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayThree").innerText = `${(dayUse[2] / dayCount[2]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayFour").innerText = `${(dayUse[3] / dayCount[3]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDayFive").innerText = `${(dayUse[4] / dayCount[4]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDaySix").innerText = `${(dayUse[5] / dayCount[5]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+        document.getElementById("analDaySeven").innerText = `${(dayUse[6] / dayCount[6]).toFixed(2)} ${this.ingredient.ingredient.unit}`;
+
+        console.timeEnd("load");
     },
 
     changeDates: function(){
@@ -153,7 +181,6 @@ let analytics = {
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("ERROR: UNABLE TO DISPLAY THE DATA");
             })
             .finally(()=>{