Fix styling for analysis page

views/dashboardPage/bundle.js

@@ -776,6 +776,16 @@ let analytics = {
         }
 
         Plotly.newPlot("recipeSalesGraph", [trace], layout);
+
+        let sum = 0;
+        for(let i = 0; i < quantities.length; i++){
+            sum += quantities[i];
+        }
+
+        document.getElementById("recipeAvgUse").innerText = (sum / quantities.length).toFixed(2);
+        console.log(sum / quantities.length);
+        console.log(this.recipe.price);
+        document.getElementById("recipeAvgRevenue").innerText = `$${(((sum / quantities.length) * this.recipe.price) / 100).toFixed(2)}`;
     },
 
     changeDates: function(){
@@ -1282,7 +1292,7 @@ let home = {
                 title: "MOST POPULAR INGREDIENTS",
                 xaxis: {
                     zeroline: false,
-                    title: "QUANTITY IN GRAMS"
+                    title: "QUANTITY"
                 }
             }
             

views/dashboardPage/dashboard.css

@@ -534,28 +534,36 @@ Analytics Strand
         display: flex;
         flex-direction: column;
         justify-content: space-around;
-        width: 85%;
+        width: 100%;
         height: 100%;
     }
 
         #itemUseGraph{
             padding: 10px;
             height: 60%;
-            flex-grow: 0;
+            flex-basis: 100px;
+            flex-grow: 5;
         }
 
         .dataRow{
             display: flex;
-            justify-content: space-around;
-            height: 15%;
+            justify-content: space-between;
+            flex-basis: 150px;
+            flex-grow: 0;
         }
 
             .analCard{
                 display: flex;
                 flex-direction: column;
                 justify-content: space-around;
+                margin: 5px;
+                height: inherit;
             }
 
+                .analCard > *{
+                    margin: 0;
+                }
+
 #analRecipeContent{
     display: flex;
     justify-content: space-around;

views/dashboardPage/dashboard.ejs

@@ -275,7 +275,7 @@
                     <ul id="itemsList" class="itemsList"></ul>
 
                     <div class="analData">
-                        <div id="itemUseGraph" class="card"></div>
+                        <div id="itemUseGraph" class="card analCard"></div>
 
                         <div class="dataRow">
                             <div class="card analCard">
@@ -347,7 +347,21 @@
                     <ul id="analRecipeList" class="itemsList"></ul>
 
                     <div class="analData">
-                        <div id="recipeSalesGraph" class="card"></div>
+                        <div id="recipeSalesGraph" class="card analCard"></div>
+
+                        <div class="dataRow">
+                            <div class="card analCard">
+                                <p>Average Daily Sales</p>
+
+                                <h1 id="recipeAvgUse"></h1>
+                            </div>
+
+                            <div class="card analCard">
+                                <p>Average Daily Revenue</p>
+
+                                <h1 id="recipeAvgRevenue"></h1>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

views/dashboardPage/js/analytics.js

@@ -235,6 +235,16 @@ let analytics = {
         }
 
         Plotly.newPlot("recipeSalesGraph", [trace], layout);
+
+        let sum = 0;
+        for(let i = 0; i < quantities.length; i++){
+            sum += quantities[i];
+        }
+
+        document.getElementById("recipeAvgUse").innerText = (sum / quantities.length).toFixed(2);
+        console.log(sum / quantities.length);
+        console.log(this.recipe.price);
+        document.getElementById("recipeAvgRevenue").innerText = `$${(((sum / quantities.length) * this.recipe.price) / 100).toFixed(2)}`;
     },
 
     changeDates: function(){

views/dashboardPage/js/home.js

@@ -163,7 +163,7 @@ let home = {
                 title: "MOST POPULAR INGREDIENTS",
                 xaxis: {
                     zeroline: false,
-                    title: "QUANTITY IN GRAMS"
+                    title: "QUANTITY"
                 }
             }