Add all parts of home page for layout look

views/dashboardPage/dashboard.css

@@ -1,19 +1,42 @@
+html{
+    height: 100%;
+}
+
 body{
     display: flex;
     flex-direction: row;
     font-family: 'Saira', sans-serif;
+    height: 100%;
 }
 
 .contentBlock{
     padding: 25px;
     width: 100%;
+    height: 100%;
+}
+
+/* Cards */
+.card{
+    margin: 15px;
+    border: 1px solid rgba(183, 183, 183, 0.9);
+    border-radius: 7px;
+    box-shadow: 1px 2px gray;
+    padding: 25px;
+}
+
+.card > *{
+    margin: 10px;
+}
+
+.card p:first-of-type{
+    font-size: 14px;
+    font-weight: bold;
 }
 
 /* Home Strand */
 #homeStrand{
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     height: 100%;
     width: 100%;
 }
@@ -34,37 +57,40 @@ body{
     justify-content: space-between;
 }
 
-.card{
-    margin: 15px;
-    border: 1px solid rgba(183, 183, 183, 0.9);
-    border-radius: 7px;
-    box-shadow: 1px 2px gray;
-    padding: 35px;
-}
-
-.card > *{
-    margin: 10px;
-}
-
 #revenue{
     text-align: center;
-    font-size: 25px;
+    font-size: 30px;
     font-weight: bold;
 }
 
-#revenueChange{
-    display: flex;
-}
+    #revenueChange{
+        display: flex;
+    }
 
-#revenueChange img{
-    height: 15px;
-    width: 15px;
-    margin-right: 10px;
-}
+    #revenueChange > p{
+        font-weight: 100;
+    }
+
+    #revenueChange img{
+        height: 15px;
+        width: 15px;
+        margin-right: 10px;
+    }
 
 #graphCard{
     flex-grow: 1;
+    max-height: 50vh;
 }
+
+    #graphCard canvas{
+        height: 95%;
+        width: 100%;
+    }
+
+#inventoryCheckCard ul{
+    text-decoration: none;
+}
+
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;

views/dashboardPage/dashboard.ejs

@@ -17,13 +17,13 @@
 
                 <div class="flexRow">
                     <div class="flexColumn">
-                        <div class="card">
-                            <h4>Total Revenue (month)</h4>
+                        <div id="revenueCard" class="card">
+                            <p>Total Revenue (month)</p>
 
                             <p id="revenue"></p>
 
                             <div id="revenueChange">
-                                <img>
+                                <img alt="revenue">
 
                                 <p></p>
                             </div>
@@ -40,7 +40,13 @@
                     </div>
                 </div>
 
-                <div>Row 2</div>
+                <div>
+                    <div id="inventoryCheckCard" class="card">
+                        <p>Inventory Check</p>
+
+                        <ul></ul>
+                    </div>
+                </div>
             </div>
 
             <div id="ingredientsStrand" class="strand">
@@ -58,6 +64,7 @@
 
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
+        <script src="../shared/graphs.js"></script>
         <script src="/dashboardPage/home.js"></script>
         <script src="/dashboardPage/controller.js"></script>
     </body>

views/dashboardPage/home.js

@@ -1,5 +1,6 @@
 window.homeStrandObj = {
     isPopulated: false,
+    graph: {},
 
     display: function(){
         if(!this.isPopulated){
@@ -24,6 +25,28 @@ window.homeStrandObj = {
             document.querySelector("#revenueChange p").innerText = `${Math.abs(revenueChange).toFixed(2)}% vs last month`;
             document.querySelector("#revenueChange img").src = img;
 
+            this.graph = new LineGraph(
+                document.querySelector("#graphCanvas"),
+                "$",
+                "Date"
+            )
+
+            let thirtyAgo = new Date(today);
+            thirtyAgo.setDate(today.getDate() - 29);
+
+            this.graph.addData(
+                this.graphData(dateIndices(thirtyAgo)),
+                [thirtyAgo, new Date()],
+                "Revenue"
+            );
+
+            let ul = document.querySelector("#inventoryCheckCard ul");
+            for(let i = 0; i < 5; i++){
+                let li = document.createElement("li");
+                li.innerText = merchant.inventory[i].ingredient.name;
+                ul.appendChild(li);
+            }
+
             this.isPopulated = true;
         }
     },
@@ -42,5 +65,28 @@ window.homeStrandObj = {
         }
 
         return total / 100;
+    },
+
+    graphData: function(indices){
+        let dataList = new Array(30).fill(0);
+        let currentDate = transactions[indices[0]].date;
+        let arrayIndex = 0;
+
+        for(let i = indices[0]; i <= indices[1]; i++){
+            if(transactions[i].date.getDate() !== currentDate.getDate()){
+                currentDate = transactions[i].date;
+                arrayIndex++;
+            }
+            for(let recipe of transactions[i].recipes){
+                for(let merchRecipe of merchant.recipes){
+                    if(recipe.recipe === merchRecipe._id){
+                        dataList[arrayIndex] = parseFloat((dataList[arrayIndex] + (recipe.quantity * merchRecipe.price) / 100).toFixed(2));
+                        break;
+                    }
+                }
+            }
+        }
+
+        return dataList;
     }
 }