Create ability to add and remove items from graph

views/dashboardPage/dashboard.ejs

@@ -244,13 +244,13 @@
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
-        <script src="/dashboardPage//inventory.js"></script>
-        <script src="/dashboardPage//recipes.js"></script>
-        <script src="/dashboardPage//account.js"></script>
-        <script src="/dashboardPage//addIngredient.js"></script>
-        <script src="/dashboardPage//enterTransactions.js"></script>
-        <script src="/dashboardPage//enterPurchase.js"></script>
-        <script src="/dashboardPage//singleRecipe.js"></script>
+        <script src="/dashboardPage/inventory.js"></script>
+        <script src="/dashboardPage/recipes.js"></script>
+        <script src="/dashboardPage/account.js"></script>
+        <script src="/dashboardPage/addIngredient.js"></script>
+        <script src="/dashboardPage/enterTransactions.js"></script>
+        <script src="/dashboardPage/enterPurchase.js"></script>
+        <script src="/dashboardPage/singleRecipe.js"></script>
         <script src="/shared/controller.js"></script>
     </body>
 </html>

views/dataPage/data.css

@@ -27,10 +27,9 @@
         align-items: center;
     }
 
-/* Graph Action */
+/* Ingredient Strand */
 #ingredientStrand{
-    flex-direction: column;
-    align-items: center;
+    justify-content: space-between;
 }
 
     #ingredientStrand > *{
@@ -38,6 +37,13 @@
     }
 
     canvas{
-        height: 60vh;
-        width: 98vw;
+        flex-grow: 10;
+        max-height: 60vh;
+        max-width: 90vw;
+    }
+
+    #ingredientOptions{
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
     }

views/dataPage/data.ejs

@@ -90,7 +90,7 @@
         </div>
 
         <div id="ingredientStrand" class="strand">
-            <h1>Ingredients</h1>
+            <div id="ingredientOptions"></div>
 
             <canvas></canvas>
         </div>

views/dataPage/ingredient.js

@@ -1,17 +1,37 @@
 window.ingredientObj = {
+    isPopulated: false,
+    graph: {},
+
     display: function(type, ingredient){
         clearScreen();
         document.querySelector("#ingredientStrand").style.display = "flex";
         document.querySelector("strand-selector").setAttribute("strand", "ingredient");
 
-        if(ingredient){
-            document.querySelector("#ingredientStrand h1").innerText = ingredient.name;
+        if(!this.isPopulated){
+            let ingredientsDiv = document.querySelector("#ingredientOptions");
+
+            for(let item of data.merchant.inventory){
+                let label = document.createElement("label");
+                label.innerText = item.ingredient.name;
+                ingredientsDiv.appendChild(label);
+                
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.onchange = ()=>{
+                    if(checkbox.checked){
+                        this.graph.addData(this.formatData("ingredient", item.ingredient._id));
+                    }else{
+                        this.graph.removeData(item.ingredient._id);
+                    }
+                };
+                label.appendChild(checkbox);
+            }
+
             let startDate = new Date();
             startDate.setFullYear(new Date().getFullYear() - 1);
 
-            let ingredientGraph = new LineGraph(
+            this.graph = new LineGraph(
                 document.querySelector("#ingredientStrand canvas"),
-                this.formatData(type, ingredient.id),
                 "Quantity",
                 "Date",
                 {
@@ -20,6 +40,12 @@ window.ingredientObj = {
                     end: new Date()
                 }
             );
+
+            this.isPopulated = true;
+        }
+
+        if(ingredient){
+            this.graph.addData(this.formatData("ingredient", ingredient.id));
         }
     },
 
@@ -50,7 +76,7 @@ window.ingredientObj = {
                 }
             }
 
-            return dataList;
+            return {id: id, set: dataList};
         }
     }
 }

views/shared/graphs.js

@@ -1,45 +1,81 @@
 class LineGraph{
-    constructor(canvas, data, yName, xName, xData){
+    constructor(canvas, yName, xName, xData){
         canvas.height = canvas.clientHeight;
         canvas.width = canvas.clientWidth;
 
+        this.canvas = canvas;
         this.context = canvas.getContext("2d");
         this.left = canvas.clientWidth - (canvas.clientWidth * 0.9);
         this.right = canvas.clientWidth * 0.9;
         this.top = canvas.clientHeight - (canvas.clientHeight * 0.9);
         this.bottom = canvas.clientHeight * 0.9;
+        this.data = [];
+        this.max = 0;
+        this.xName = xName;
+        this.yName = yName;
+        this.xData = xData;
+    }
+
+    drawGraph(){
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.drawYAxis();
+        this.drawXAxis();
+
+        for(let dataSet of this.data){
+            this.drawData(dataSet.set);
+        }
+    }
+
+    addData(data){
+        this.data.push(data);
 
-        let max = data[0];
-        for(let point of data){
-            if(point > max){max = point;}
+        let isNewMax = false;
+        for(let point of data.set){
+            if(point > this.max){
+                this.max = point;
+                isNewMax = true;
+            }
         }
 
-        this.verticalMultiplier = (this.bottom - this.top) / max;
-        this.horizontalMultiplier = (this.right - this.left) / data.length;
+        if(isNewMax){
+            this.verticalMultiplier = (this.bottom - this.top) / this.max;
+            this.horizontalMultiplier = (this.right - this.left) / data.set.length;
+            
+            this.xData.dataLength = data.set.length;
+
+            this.drawGraph();
+        }else{
+            this.drawData(data.set);
+        }
+    }
 
-        xData.dataLength = data.length;
+    removeData(id){
+        for(let i = 0; i < this.data.length; i++){
+            if(this.data[i].id === id){
+                this.data.splice(i, 1);
+                break;
+            }
+        }
 
-        this.drawYAxis(yName, max);
-        this.drawXAxis(xName, xData);
-        this.addLine(data);
+        this.drawGraph();
     }
 
-    addLine(data){
+    drawData(dataSet){
         let redRand = Math.floor(Math.random() * 200);
         let greenRand = Math.floor(Math.random() * 200);
         let blueRand = Math.floor(Math.random() * 200);
 
-        for(let i = 0; i < data.length - 1; i++){
+        for(let i = 0; i < dataSet.length - 1; i++){
             this.context.beginPath();
-            this.context.moveTo(this.left + (this.horizontalMultiplier * i), this.bottom - (this.verticalMultiplier * data[i]));
-            this.context.lineTo(this.left + (this.horizontalMultiplier * (i + 1)), this.bottom - (this.verticalMultiplier * data[i + 1]));
+            this.context.moveTo(this.left + (this.horizontalMultiplier * i), this.bottom - (this.verticalMultiplier * dataSet[i]));
+            this.context.lineTo(this.left + (this.horizontalMultiplier * (i + 1)), this.bottom - (this.verticalMultiplier * dataSet[i + 1]));
             this.context.lineWidth = 1;
             this.context.strokeStyle = `rgb(${redRand}, ${greenRand}, ${blueRand})`;
             this.context.stroke();
         }
     }
 
-    drawXAxis(xName, xData){
+    drawXAxis(){
         this.context.beginPath();
         this.context.moveTo(this.left, this.bottom);
         this.context.lineTo(this.right, this.bottom);
@@ -47,17 +83,17 @@ class LineGraph{
         this.context.stroke();
 
         this.context.font = "25px Arial";
-        this.context.fillText(xName, this.right / 2, this.bottom + 50);
+        this.context.fillText(this.xName, this.right / 2, this.bottom + 50);
 
         this.context.setLineDash([5, 10]);
         this.context.font = "10px Arial";
         this.context.lineWidth = 1;
 
-        if(xData.type = "date"){
-            let diff = Math.abs(Math.floor((Date.UTC(xData.start.getFullYear(), xData.start.getMonth(), xData.start.getDate()) - Date.UTC(xData.end.getFullYear(), xData.end.getMonth(), xData.end.getDate())) / (1000 * 60 * 60 * 24)));
-            let showDate = xData.start;
+        if(this.xData.type = "date"){
+            let diff = Math.abs(Math.floor((Date.UTC(this.xData.start.getFullYear(), this.xData.start.getMonth(), this.xData.start.getDate()) - Date.UTC(this.xData.end.getFullYear(), this.xData.end.getMonth(), this.xData.end.getDate())) / (1000 * 60 * 60 * 24)));
+            let showDate = this.xData.start;
 
-            for(let i = 0; i < xData.dataLength; i += Math.floor(xData.dataLength / 10)){
+            for(let i = 0; i < this.xData.dataLength; i += Math.floor(this.xData.dataLength / 10)){
                 this.context.fillText(showDate.toLocaleDateString("en-US", {month: "short", day: "numeric", year: "2-digit"}), this.left + (this.horizontalMultiplier * i) - 20, this.bottom + 15);
 
                 this.context.beginPath()
@@ -74,7 +110,7 @@ class LineGraph{
         this.context.setLineDash([]);
     }
 
-    drawYAxis(yName, max){
+    drawYAxis(){
         this.context.beginPath();
         this.context.moveTo(this.left, this.top);
         this.context.lineTo(this.left, this.bottom);
@@ -82,7 +118,7 @@ class LineGraph{
         this.context.stroke();
 
         this.context.font = "25px Arial";
-        this.context.fillText(yName, 0, this.bottom / 2);
+        this.context.fillText(this.yName, 0, this.bottom / 2);
 
         this.context.setLineDash([5, 10]);
         this.context.font = "10px Arial";
@@ -101,7 +137,7 @@ class LineGraph{
             this.context.stroke();
 
             verticalOffset += verticalIncrement;
-            axisNum += max / 10;
+            axisNum += this.max / 10;
         }while(verticalOffset <= (this.bottom - this.top));
 
         this.context.strokeStyle = "black";