Add purchases graph. Minor fixes to other graphs.

views/dataPage/data.css

@@ -91,6 +91,27 @@ canvas{
         justify-content: space-between;
     }
 
+    #recipeOptions{
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+/* Purchase Strand */
+#purchaseStrand{
+    flex-direction: column;
+    align-items: space-between;
+}
+
+    #purchaseStrand > *{
+        margin: 10px;
+    }
+
+    .canvasBox{
+        display: flex;
+        justify-content: space-between;
+    }
+
     #recipeOptions{
         flex-grow: 1;
         display: flex;

views/dataPage/data.ejs

@@ -123,6 +123,24 @@
             </div>
         </div>
 
+        <div id="purchaseStrand" class="strand">
+            <div class="dates">
+                <label>From:
+                    <input id="purchaseFrom" type="date" onchange="window.purchaseObj.newDates()">
+                </label>
+                
+                <label>To:
+                    <input id="purchaseTo" type="date" onchange="window.purchaseObj.newDates()">
+                </label>
+            </div>
+
+            <div class="canvasBox">
+                <div id="purchaseOptions"></div>
+
+                <canvas></canvas>
+            </div>
+        </div>
+
         <script>
             let data = <%- JSON.stringify(data); %>;
 
@@ -139,6 +157,7 @@
         <script src="/dataPage/home.js"></script>
         <script src="/dataPage/ingredient.js"></script>
         <script src="/dataPage/recipe.js"></script>
+        <script src="/dataPage/purchase.js"></script>
         <script src="/shared/controller.js"></script>
         <script src="/shared/graphs.js"></script>
         <script src="/dataPage/fetchData.js"></script>

views/dataPage/home.js

@@ -134,9 +134,9 @@ window.homeObj = {
 
         for(let recipe of recipes){
             let row = document.createElement("tr");
-            recipesBody.appendChild(row);
             row.classList = "clickableRow";
             row.onclick = ()=>{window.recipeObj.display(recipe)};
+            recipesBody.appendChild(row);
 
             let name = document.createElement("td");
             name.innerText = recipe.name;
@@ -160,6 +160,8 @@ window.homeObj = {
         
         for(let ingredient of purchaseIngredients){
             let row = document.createElement("tr");
+            row.classList = "clickableRow";
+            row.onclick = ()=>{window.purchaseObj.display(ingredient)};
             purchasesBody.appendChild(row);
             
             let name = document.createElement("td");

views/dataPage/ingredient.js

@@ -26,8 +26,8 @@ window.ingredientObj = {
                 checkbox.name = item.ingredient.name;
                 checkbox.onchange = ()=>{
                     if(checkbox.checked){
-                        let from = document.querySelector("#ingredientFrom").valueAsDate;
-                        let to = document.querySelector("#ingredientTo").valueAsDate;
+                        let from, to;
+                        [from, to] = getInputDates("ingredient");
 
                         this.graph.addData(this.formatData(item.ingredient._id, from, to), [from, to], item.ingredient.name);
                     }else{
@@ -69,15 +69,15 @@ window.ingredientObj = {
         }
     },
 
+    //TODO This can be made to be faster, no need to search full data list
     formatData: function(id, startDate, endDate){
         let dateRange = Math.floor((Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()) - Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())) / (1000 * 60 * 60 * 24)) + 1;
         let dataList = new Array(Math.abs(dateRange)).fill(0);
 
         for(let transaction of data.transactions){
-            let transDate = transaction.date;
-            let diff = Math.floor((Date.UTC(transDate.getFullYear(), transDate.getMonth(), transDate.getDate()) - Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())) / (1000 * 60 * 60 * 24));
+            let diff = Math.floor((Date.UTC(transaction.date.getFullYear(), transaction.date.getMonth(), transaction.date.getDate()) - Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())) / (1000 * 60 * 60 * 24));
 
-            if(transDate > startDate && diff <= 0){
+            if(transaction.date > startDate && diff <= 0){
                 for(let recipe of transaction.recipes){
                     for(let merchRecipe of data.merchant.recipes){
                         if(merchRecipe._id === recipe.recipe){
@@ -101,7 +101,7 @@ window.ingredientObj = {
         [from, to] = getInputDates("ingredient");
 
         if(validator.transaction.date(from, to)){
-            window.fetchData(from, to, ()=>{
+            fetchData(from, to, ()=>{
                 this.graph.clearData();
 
                 let ingredientsDiv = document.querySelector("#ingredientOptions");

views/dataPage/purchase.js

@@ -0,0 +1,109 @@
+window.purchaseObj = {
+    isPopulated: false,
+    graph: {},
+
+    display: function(ingredient){
+        clearScreen();
+        document.querySelector("#purchaseStrand").style.display = "flex";
+        document.querySelector("strand-selector").setAttribute("strand", "purchase");
+
+        if(!this.isPopulated){
+            let date = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+            document.querySelector("#purchaseFrom").valueAsDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
+            document.querySelector("#purchaseTo").valueAsDate = new Date();
+
+            let purchasesDiv = document.querySelector("#purchaseOptions");
+
+            for(let item of data.merchant.inventory){
+                console.log(item);
+                let checkDiv = document.createElement("div");
+                checkDiv.classList = "checkboxDiv";
+                purchasesDiv.appendChild(checkDiv);
+
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.id = `${item.ingredient.name}PurchaseCheckbox`;
+                checkbox._id = item.ingredient._id;
+                checkbox.name = item.ingredient.name;
+                checkbox.onchange = ()=>{
+                    if(checkbox.checked){
+                        let from, to;
+                        [from, to] = getInputDates("purchase");
+
+                        this.graph.addData(this.formatData(item.ingredient._id, from, to), [from, to], item.ingredient.name);
+                    }else{
+                        this.graph.removeData(item.ingredient.name);
+                    }
+                };
+                checkDiv.appendChild(checkbox);
+
+                let label = document.createElement("label");
+                label.innerText = item.ingredient.name;
+                label.setAttribute("for", `${item.ingredient.name}PurchaseCheckbox`);
+                checkDiv.appendChild(label);
+            }
+
+            this.graph = new LineGraph(
+                document.querySelector("#purchaseStrand canvas"),
+                "Quantity",
+                "Date"
+            );
+
+            this.isPopulated = true;
+        }
+
+        if(ingredient){
+            this.graph.clearData();
+
+            let from, to;
+            [from, to] = getInputDates("purchase");
+
+            this.graph.addData(this.formatData(ingredient.id, from, to), [from, to], ingredient.name);
+
+            for(let label of document.querySelector("#purchaseOptions").children){
+                if(label.innerText === ingredient.name){
+                    label.children[0].checked = true;
+                }else{
+                    label.children[0].checked = false;
+                }
+            }
+        }
+    },
+
+    //TODO This can be made to be faster, no need to search full data list
+    formatData: function(id, from, to){
+        let dateRange = Math.floor((Date.UTC(to.getFullYear(), to.getMonth(), to.getDate()) - Date.UTC(from.getFullYear(), from.getMonth(), from.getDate())) / (1000 * 60 * 60 * 24)) + 1;
+        let dataList = new Array(Math.abs(dateRange)).fill(0);
+        
+        for(let purchase of data.purchases){
+            let diff = Math.floor((Date.UTC(purchase.date.getFullYear(), purchase.date.getMonth(), purchase.date.getDate()) - Date.UTC(to.getFullYear(), to.getMonth(), to.getDate())) / (1000 * 60 * 60 * 24));
+
+            for(let ingredient of purchase.ingredients){
+                if(purchase.date > from && diff <=0 && id === ingredient.ingredient){
+                    dataList[dateRange - Math.abs(diff) - 1] += ingredient.quantity;
+                }
+            }
+        }
+
+        return dataList;
+    },
+
+    newDates: function(){
+        let from, to;
+        [from, to] = getInputDates("purchase");
+
+        if(validator.transaction.date(from, to)){
+            fetchData(from, to, ()=>{
+                this.graph.clearData();
+
+                let purchaseDiv = document.querySelector("#purchaseOptions");
+                for(let div of purchaseDiv.children){
+                    let checkbox = div.children[0];
+                    if(checkbox.checked){
+                        this.graph.addData(this.formatData(checkbox._id, from, to), [from, to], checkbox.name);
+                    }
+                }
+            });
+        }
+    }
+}

views/dataPage/recipe.js

@@ -26,8 +26,8 @@ window.recipeObj = {
                 checkbox.name = recipe.name;
                 checkbox.onchange = ()=>{
                     if(checkbox.checked){
-                        let from = document.querySelector("#recipeFrom").valueAsDate;
-                        let to = document.querySelector("#recipeTo").valueAsDate;
+                        let from, to;
+                        [from, to] = getInputDates("recipe");
 
                         this.graph.addData(this.formatData(recipe._id, from, to), [from, to], recipe.name);
                     }else{
@@ -69,15 +69,15 @@ window.recipeObj = {
         }
     },
 
+    //TODO This can be made to be faster, no need to search full data list
     formatData: function(id, from, to){
         let dateRange = Math.floor((Date.UTC(to.getFullYear(), to.getMonth(), to.getDate()) - Date.UTC(from.getFullYear(), from.getMonth(), from.getDate())) / (1000 * 60 * 60 * 24)) + 1;
         let dataList = new Array(Math.abs(dateRange)).fill(0);
 
         for(let transaction of data.transactions){
-            let transDate = transaction.date;
-            let diff = Math.floor((Date.UTC(transDate.getFullYear(), transDate.getMonth(), transDate.getDate()) - Date.UTC(to.getFullYear(), to.getMonth(), to.getDate())) / (1000 * 60 * 60 * 24));
+            let diff = Math.floor((Date.UTC(transaction.date.getFullYear(), transaction.date.getMonth(), transaction.date.getDate()) - Date.UTC(to.getFullYear(), to.getMonth(), to.getDate())) / (1000 * 60 * 60 * 24));
 
-            if(transDate > from && diff <= 0){
+            if(transaction.date > from && diff <= 0){
                 for(let recipe of transaction.recipes){
                     if(recipe.recipe === id){
                         dataList[dateRange - Math.abs(diff) - 1] += recipe.quantity;