Add color labels to graphs

views/dataPage/ingredient.js

@@ -22,15 +22,15 @@ window.ingredientObj = {
                 checkbox.type = "checkbox";
                 checkbox.id = `${item.ingredient.name}Checkbox`;
                 checkbox._id = item.ingredient._id;
+                checkbox.name = item.ingredient.name;
                 checkbox.onchange = ()=>{
                     if(checkbox.checked){
                         let from = document.querySelector("#ingredientFrom").valueAsDate;
                         let to = document.querySelector("#ingredientTo").valueAsDate;
-                        console.log(to);
 
-                        this.graph.addData(this.formatData(item.ingredient._id, from, to), [from, to], item.ingredient._id);
+                        this.graph.addData(this.formatData(item.ingredient._id, from, to), [from, to], item.ingredient.name);
                     }else{
-                        this.graph.removeData(item.ingredient._id);
+                        this.graph.removeData(item.ingredient.name);
                     }
                 };
                 checkDiv.appendChild(checkbox);
@@ -56,7 +56,7 @@ window.ingredientObj = {
             let from = document.querySelector("#ingredientFrom").valueAsDate;
             let to = document.querySelector("#ingredientTo").valueAsDate;
             
-            this.graph.addData(this.formatData(ingredient.id, from, to), [from, to], ingredient.id);
+            this.graph.addData(this.formatData(ingredient.id, from, to), [from, to], ingredient.name);
 
             for(let label of document.querySelector("#ingredientOptions").children){
                 if(label.innerText === ingredient.name){
@@ -114,7 +114,7 @@ window.ingredientObj = {
             for(let div of ingredientsDiv.children){
                 let checkbox = div.children[0];
                 if(checkbox.checked){
-                    this.graph.addData(this.formatData(checkbox._id, from, to), [from, to], checkbox._id);
+                    this.graph.addData(this.formatData(checkbox._id, from, to), [from, to], checkbox.name);
                 }
             }
         });

views/shared/graphs.js

@@ -12,7 +12,7 @@ class LineGraph{
         this.canvas = canvas;
         this.context = canvas.getContext("2d");
         this.left = canvas.clientWidth - (canvas.clientWidth * 0.9);
-        this.right = canvas.clientWidth * 0.9;
+        this.right = canvas.clientWidth * 0.8;
         this.top = canvas.clientHeight - (canvas.clientHeight * 0.9);
         this.bottom = canvas.clientHeight * 0.9;
         this.data = [];
@@ -37,12 +37,12 @@ class LineGraph{
     //  data = array containing list of numbers as the data points for the graph
     //      data[0] will be on the left.  data[data.length-1] will be on the right.
     //  xRange = array containing two elements, start and end for x axis data (currently only dates)
-    //  identifier = any string, int, etc. to identify this data set.  Used for removal
-    addData(data, xRange, identifier){
+    //  name = string name for the line.  Used for display and finding lines.  Each must be unique
+    addData(data, xRange, name){
         data = {
             set: data,
             colorIndex: this.colorIndex,
-            id: identifier
+            name: name
         }
         this.colorIndex++;
         this.data.push(data);
@@ -81,9 +81,9 @@ class LineGraph{
     //Removes a single data set from the graph and its line
     //Inputs:
     //  id = the unique identifier of the data set that was passed in with addData function
-    removeData(id){
+    removeData(name){
         for(let i = 0; i < this.data.length; i++){
-            if(this.data[i].id === id){
+            if(this.data[i].name === name){
                 this.data.splice(i, 1);
                 break;
             }
@@ -124,6 +124,8 @@ class LineGraph{
         }
 
         this.context.strokeStyle = "black";
+
+        this.drawLegend(data.colorIndex, data.name);
     }
 
     drawXAxis(){
@@ -197,4 +199,24 @@ class LineGraph{
         this.context.strokeStyle = "black";
         this.context.setLineDash([]);
     }
+
+    drawLegend(colorIndex, name){
+        let verticalOffset;
+        for(let i = 0; i < this.data.length; i++){
+            if(this.data[i].name === name){
+                verticalOffset = i * 25;
+                break;
+            }
+        }
+
+        this.context.beginPath();
+        this.context.fillStyle = this.colors[colorIndex];
+        this.context.fillRect(this.right + 50, this.top + 50 + verticalOffset, 10, 10);
+        this.context.stroke();
+
+        this.context.font = "15px Arial";
+        this.context.fillText(name, this.right + 65, this.top + 60 + verticalOffset);
+
+        this.context.fillStyle = "black";
+    }
 }