Fix bug in controller

views/dataPage/data.css

@@ -28,12 +28,12 @@
     }
 
 /* Graph Action */
-#graphAction{
+#ingredientStrand{
     flex-direction: column;
     align-items: center;
 }
 
-    #graphAction > *{
+    #ingredientStrand > *{
         margin: 10px;
     }
 

views/dataPage/data.ejs

@@ -89,8 +89,8 @@
             </div>
         </div>
 
-        <div id="graphAction" class="action">
-            <h1>something</h1>
+        <div id="ingredientStrand" class="strand">
+            <h1>Ingredients</h1>
 
             <canvas></canvas>
         </div>
@@ -99,7 +99,7 @@
         <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/graph.js"></script>
+        <script src="dataPage/ingredient.js"></script>
         <script src="/shared/controller.js"></script>
         <script src="/shared/graphs.js"></script>
         <script src="/dataPage/fetchData.js"></script>

views/dataPage/home.js

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

views/dataPage/graph.js → views/dataPage/ingredient.js

@@ -1,10 +1,13 @@
-window.graphObj = {
+window.ingredientObj = {
     display: function(type, ingredient){
         clearScreen();
-        document.querySelector("#graphAction").style.display = "flex";
-        document.querySelector("#graphAction h1").innerText = `${ingredient.name} (${ingredient.unit})`;
+        document.querySelector("#ingredientStrand").style.display = "flex";
+        document.querySelector("strand-selector").setAttribute("strand", "ingredient");
 
-        graph.line(document.querySelector("#graphAction canvas"), this.formatData(type, ingredient.id));
+        if(ingredient){
+            document.querySelector("#ingredientStrand h1").innerText = `${ingredient.name} (${ingredient.unit})`;
+            graph.line(document.querySelector("#ingredientStrand canvas"), this.formatData(type, ingredient.id));
+        }
     },
 
     formatData: function(type, id){