Store to change branches

controllers/transactionData.js

@@ -116,6 +116,7 @@ module.exports = {
         function randomDate() {
             let now = new Date();
             let start = new Date();
+            // start.setDate(now.getDate() - 10);
             start.setFullYear(now.getFullYear() - 1);
             return new Date(start.getTime() + Math.random() * (now.getTime() - start.getTime()));
         }

views/dataPage/data.css

@@ -28,6 +28,11 @@ body, html{
         margin: 10px;
     }
 
+canvas{
+    flex-grow: 9;
+    height: 64vh;
+}
+
 /* Home Strand */
 #homeStrand{
     flex-direction: column;
@@ -65,12 +70,28 @@ body, html{
         justify-content: space-between;
     }
 
-    canvas{
-        flex-grow: 9;
-        height: 64vh;
+    #ingredientOptions{
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
     }
 
-    #ingredientOptions{
+/* Recipe Strand */
+#recipeStrand{
+    flex-direction: column;
+    align-items: space-between;
+}
+
+    #recipeStrand > *{
+        margin: 10px;
+    }
+
+    .canvasBox{
+        display: flex;
+        justify-content: space-between;
+    }
+
+    #recipeOptions{
         flex-grow: 1;
         display: flex;
         flex-direction: column;

views/dataPage/data.ejs

@@ -105,11 +105,30 @@
             </div>
         </div>
 
+        <div id="recipeStrand" class="strand">
+            <div class="dates">
+                <label>From:
+                    <input id="recipeFrom" type="date" onchange="window.ingredientObj.newDates()">
+                </label>
+                
+                <label>To:
+                    <input id="recipeTo" type="date" onchange="window.ingredientObj.newDates()">
+                </label>
+            </div>
+
+            <div class="canvasBox">
+                <div id="recipeOptions"></div>
+
+                <canvas></canvas>
+            </div>
+        </div>
+
         <script>let data = <%- JSON.stringify(data); %></script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="/shared/validation.js"></script>
         <script src="/dataPage/home.js"></script>
-        <script src="dataPage/ingredient.js"></script>
+        <script src="/dataPage/ingredient.js"></script>
+        <script src="/dataPage/recipe.js"></script>
         <script src="/shared/controller.js"></script>
         <script src="/shared/graphs.js"></script>
         <script src="/dataPage/fetchData.js"></script>

views/dataPage/home.js

@@ -15,11 +15,12 @@ window.homeObj = {
             document.querySelector("#homeFrom").valueAsDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
             document.querySelector("#homeTo").valueAsDate = new Date();
 
-            this.isPopulated = true;2
+            this.isPopulated = true;
         }
     },
 
     populate: function(transactions){
+        console.log(transactions);
         this.recipeTotal = 0;
         this.revenueTotal = 0;
         

views/dataPage/ingredient.js

@@ -96,8 +96,8 @@ window.ingredientObj = {
     },
 
     newDates: function(){
-        let from = new Date(document.querySelector("#ingredientFrom").value);
-        let to  = new Date(document.querySelector("#ingredientTo").value);
+        let from = document.querySelector("#ingredientFrom").valueAsDate;
+        let to  = document.querySelector("#ingredientTo").valueAsDate;
 
         if(from === "" || to === ""){
             banner.createError("Invalid date");

views/dataPage/recipe.js

@@ -0,0 +1,117 @@
+window.recipeObj = {
+    isPopulated: false,
+    graph: {},
+
+    display: function(recipe){
+        clearScreen();
+        document.querySelector("#recipeStrand").style.display = "flex";
+        document.querySelector("strand-selector").setAttribute("strand", "recipe");
+
+        if(!this.isPopulated){
+            document.querySelector("#recipeFrom").valueAsDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+            document.querySelector("#recipeTo").valueAsDate = new Date();
+
+            let recipesDiv = document.querySelector("#recipeOptions");
+
+            for(let recipe of data.merchant.recipes){
+                let checkDiv = document.createElement("div");
+                checkDiv.classList = "checkboxDiv";
+                recipesDiv.appendChild(checkDiv);
+
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.id = `${recipe.name}Checkbox`;
+                checkbox._id = recipe._id;
+                checkbox.name = recipe.name;
+                checkbox.onchange = ()=>{
+                    if(checkbox.checked){
+                        let from = document.querySelector("#recipeFrom").valueAsDate;
+                        let to = document.querySelector("#recipeTo").valueAsDate;
+
+                        this.graph.addData(this.formatData(recipe._id, from, to), [from, to], recipe.name);
+                    }else{
+                        this.graph.removeData(recipe.name);
+                    }
+                };
+                checkDiv.appendChild(checkbox);
+
+                let label = document.createElement("label");
+                label.innerText = recipe.name;
+                label.setAttribute("for", `${recipe.name}Checkbox`);
+                checkDiv.appendChild(label);
+            }
+
+            this.graph = new LineGraph(
+                document.querySelector("#recipeStrand canvas"),
+                "Quantity",
+                "Date"
+            );
+
+            this.isPopulated = true;
+        }
+
+        if(recipe){
+            this.graph.clearData();
+
+            let from = document.querySelector("#recipeFrom").valueAsDate;
+            let to = document.querySelector("#recipeTo").valueAsDate;
+
+            this.graph.addData(this.formatData(recipe.id, from, to), [from, to], recipe.name);
+
+            for(let label of document.querySelector("#recipeOptions").children){
+                if(label.innerText === ingredient.name){
+                    label.children[0].checked = true;
+                }else{
+                    label.children[0].checked = false;
+                }
+            }
+        }
+    },
+
+    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 = new Date(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));
+
+            if(diff <= 0){
+                for(let recipe of transaction.recipes){
+                    if(recipe.recipe === id){
+                        dataList[dateRange - Math.abs(diff) - 1] += recipe.quantity;
+                    }
+                }
+            }
+        }
+
+        return dataList;
+    },
+
+    newDates: function(){
+        let from = document.querySelector("recipeFrom").valueAsDate;
+        let to = document.querySelector("recipeTo").valueAsDate;
+
+        if(from === "" || to === ""){
+            banner.createError("Invalid date");
+            return;
+        }else{
+            from = new Date(from);
+            to = new Date(to);
+        }
+
+        if(validator.transaction.date(from, to)){
+            window.fetchData(from, to, ()=>{
+                this.graph.clearData();
+
+                let recipesDiv = document.querySelector("#recipeOptions");
+                for(let div of recipesDiv.children){
+                    let checkbox = div.children[0];
+                    if(checkbox.checked){
+                        this.graph.addData(this.formatData(checkbox._id, from, to), [from, to], checkbox.name);
+                    }
+                }
+            })
+        }
+    }
+}

views/shared/graphs.js

@@ -39,6 +39,7 @@ class LineGraph{
     //  xRange = array containing two elements, start and end for x axis data (currently only dates)
     //  name = string name for the line.  Used for display and finding lines.  Each must be unique
     addData(data, xRange, name){
+        console.log(data);
         data = {
             set: data,
             colorIndex: this.colorIndex,