Add 2 cards on left side of home page

controllers/renderer.js

@@ -101,7 +101,7 @@ module.exports = {
                                     Transaction.create(transactions);
 
                                     let date = new Date();
-                                    let firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+                                    let firstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1);
 
                                     return Transaction.aggregate([
                                         {$match: {
@@ -110,7 +110,6 @@ module.exports = {
                                         }},
                                         {$sort: {date: 1}},
                                         {$project: {
-                                            _id: 0,
                                             date: 1,
                                             recipes: 1
                                         }}
@@ -136,7 +135,7 @@ module.exports = {
                     merchant.password = undefined;
 
                     let date = new Date();
-                    let firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+                    let firstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1);
 
                     Transaction.aggregate([
                         {$match: {

views/shared/controller.js → views/dashboardPage/controller.js

@@ -14,4 +14,30 @@ let changeStrand = (name)=>{
 
     document.querySelector(`#${name}`).style.display = "flex";
     window[`${name}Obj`].display();
-}
+}
+
+let dateIndices = (from, to = new Date())=>{
+    let indices = [];
+
+    for(let i = 0; i < transactions.length; i++){
+        if(transactions[i].date > from){
+            indices[0] = i;
+            break;
+        }
+    }
+
+    for(let i = transactions.length - 1; i >=0; i--){
+        if(transactions[i].date < to){
+            indices[1] = i;
+            break;
+        }
+    }
+
+    return indices;
+}
+
+for(let transaction of transactions){
+    transaction.date = new Date(transaction.date);
+}
+
+homeStrandObj.display();

views/dashboardPage/dashboard.css

@@ -18,9 +18,9 @@ body{
     width: 100%;
 }
 
-    #homeStrand h1{
-        text-align: left;
-    }
+#homeStrand h1{
+    text-align: left;
+}
 
 .flexRow{
     display: flex;
@@ -36,12 +36,35 @@ body{
 
 .card{
     margin: 15px;
-    border: 1px solid gray;
-    border-radius: 5px;
-    box-shadow: 0 2px gray;
-    padding: 25px;
+    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-weight: bold;
 }
 
+#revenueChange{
+    display: flex;
+}
+
+#revenueChange img{
+    height: 15px;
+    width: 15px;
+    margin-right: 10px;
+}
+
+#graphCard{
+    flex-grow: 1;
+}
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;

views/dashboardPage/dashboard.ejs

@@ -19,16 +19,25 @@
                     <div class="flexColumn">
                         <div class="card">
                             <h4>Total Revenue (month)</h4>
+
                             <p id="revenue"></p>
+
+                            <div id="revenueChange">
+                                <img>
+
+                                <p></p>
+                            </div>
                         </div>
 
                         <div class="card">
-                            <p>Some Text</p>
-                            <p>Some more text</p>
+                            <p>Waste Score</p>
+                            <p>Да хрен его знает</p>
                         </div>
                     </div>
 
-                    <div>right-hand</div>
+                    <div id="graphCard" class="card">
+                        <canvas id="graphCanvas">
+                    </div>
                 </div>
 
                 <div>Row 2</div>
@@ -49,7 +58,7 @@
 
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
-        <script src="../shared/controller.js"></script>
         <script src="/dashboardPage/home.js"></script>
+        <script src="/dashboardPage/controller.js"></script>
     </body>
 </html>

views/dashboardPage/home.js

@@ -1,5 +1,46 @@
 window.homeStrandObj = {
+    isPopulated: false,
+
     display: function(){
-        console.log("Home strand");
+        if(!this.isPopulated){
+            let today = new Date();
+            let firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+            let firstOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+            let lastMonthtoDay = new Date(new Date().setMonth(today.getMonth() - 1));
+
+            let revenueThisMonth = this.calculateRevenue(dateIndices(firstOfMonth));
+            let revenueLastmonthToDay = this.calculateRevenue(dateIndices(firstOfLastMonth, lastMonthtoDay));
+
+            document.querySelector("#revenue").innerText = `$${revenueThisMonth.toLocaleString("en")}`;
+
+            let revenueChange = ((revenueThisMonth - revenueLastmonthToDay) / revenueLastmonthToDay) * 100;
+            
+            let img = "";
+            if(revenueChange >= 0){
+                img = "/shared/images/upArrow.png";
+            }else{
+                img = "/shared/images/downArrow.png";
+            }
+            document.querySelector("#revenueChange p").innerText = `${Math.abs(revenueChange).toFixed(2)}% vs last month`;
+            document.querySelector("#revenueChange img").src = img;
+
+            this.isPopulated = true;
+        }
+    },
+
+    calculateRevenue: function(indices){
+        let total = 0;
+
+        for(let i = indices[0]; i <= indices[1]; i++){
+            for(let recipe of transactions[i].recipes){
+                for(let merchRecipe of merchant.recipes){
+                    if(recipe.recipe === merchRecipe._id){
+                        total += recipe.quantity * merchRecipe.price;
+                    }
+                }
+            }
+        }
+
+        return total / 100;
     }
 }