Clicking on an ingredient draws a very basic graph

views/dataPage/data.css

@@ -25,4 +25,19 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+    }
+
+/* Graph Action */
+#graphAction{
+    flex-direction: column;
+    align-items: center;
+}
+
+    #graphAction > *{
+        margin: 10px;
+    }
+
+    canvas{
+        height: 60vh;
+        width: 98vw;
     }

views/dataPage/data.ejs

@@ -89,11 +89,19 @@
             </div>
         </div>
 
+        <div id="graphAction" class="action">
+            <h1>something</h1>
+
+            <canvas></canvas>
+        </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/fetchData.js"></script>
+        <script src="dataPage/graph.js"></script>
         <script src="/shared/controller.js"></script>
+        <script src="/shared/graphs.js"></script>
+        <script src="/dataPage/fetchData.js"></script>
     </body>
 </html>

views/dataPage/graph.js

@@ -0,0 +1,34 @@
+window.graphObj = {
+    display: function(type, ingredient){
+        clearScreen();
+        document.querySelector("#graphAction").style.display = "flex";
+        document.querySelector("#graphAction h1").innerText = `${ingredient.name} (${ingredient.unit})`;
+
+        graph.line(document.querySelector("#graphAction canvas"), this.formatData(type, ingredient.id));
+    },
+
+    formatData: function(type, id){
+        dataList = new Array(365).fill(0);
+        let today = new Date();
+        if(type === "ingredient"){
+            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(today.getFullYear(), today.getMonth(), today.getDate())) / (1000 * 60 * 60 * 24));
+                if(diff <= 0){
+                    for(let recipe of transaction.recipes){
+                        for(let merchRecipe of data.merchant.recipes){
+                            if(merchRecipe._id === recipe.recipe){
+                                for(let ingredient of merchRecipe.ingredients){
+                                    dataList[Math.abs(diff)] += ingredient.quantity;
+                                }
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+
+            return dataList;
+        }
+    }
+}

views/dataPage/home.js

@@ -103,6 +103,8 @@ window.homeObj = {
         
         for(let ingredient of soldIngredients){
             let row = document.createElement("tr");
+            row.classList = "clickableRow";
+            row.onclick = ()=>{window.graphObj.display("ingredient", ingredient)};
             ingredientsBody.appendChild(row);
 
             let name = document.createElement("td");

views/shared/graphs.js

@@ -0,0 +1,49 @@
+let graph = {
+    line: function(canvas, data){
+        canvas.height = canvas.clientHeight;
+        canvas.width = canvas.clientWidth;
+
+        let context = canvas.getContext("2d");
+
+        let left = canvas.clientWidth - (canvas.clientWidth * 0.75);
+        let right = canvas.clientWidth * 0.75;
+        let bottom = canvas.clientHeight * 0.9;
+        let top = canvas.clientHeight - (canvas.clientHeight * 0.9);
+
+        let max = data[0];
+        for(let point of data){
+            if(point > max){max = point;}
+        }
+
+        let verticalMultiplier = (bottom - top) / max;
+        let horizontalMultiplier = (right - left) / data.length;
+
+        //Draw axes
+        context.beginPath();
+        context.moveTo(left, top);
+        context.lineTo(left, bottom);
+        context.stroke();
+
+        context.beginPath();
+        context.moveTo(left, bottom);
+        context.lineTo(right, bottom);
+        context.stroke();
+
+        context.beginPath();
+        context.moveTo(right, bottom);
+        context.lineTo(right, top);
+        context.stroke();
+
+        context.beginPath();
+        context.moveTo(left, top);
+        context.lineTo(right, top);
+        context.stroke();
+
+        for(let i = 0; i < data.length - 1; i++){
+            context.beginPath();
+            context.moveTo(left + (horizontalMultiplier * i), bottom - (verticalMultiplier * data[i]));
+            context.lineTo(left + (horizontalMultiplier * (i + 1)), bottom - (verticalMultiplier * data[i + 1]));
+            context.stroke();
+        }
+    }
+}

views/shared/shared.css

@@ -41,6 +41,18 @@ table{
         background: rgb(240, 252, 255);
     }
 
+    .clickableRow{
+        cursor: pointer;
+        transition: 0.3s;
+    }
+
+        .clickableRow:hover{
+            position: relative;
+            z-index: 2;
+            box-shadow: 0 0 25px black;
+            border-radius: 50px;
+        }
+
 form{
     display: flex;
     flex-direction: column;