Full creation of graph completed

controllers/transactionData.js

@@ -117,7 +117,6 @@ module.exports = {
             let now = new Date();
             let start = new Date();
             start.setFullYear(now.getFullYear() - 1);
-            // let end = new Date(2020, 11, 31);
             return new Date(start.getTime() + Math.random() * (now.getTime() - start.getTime()));
         }
 
@@ -125,7 +124,7 @@ module.exports = {
             .then((merchant)=>{
                 let newTransactions = [];
 
-                for(let i = 0; i < 25000; i++){
+                for(let i = 0; i < 5000; i++){
                     let newTransaction = new Transaction({
                         merchant: merchant._id,
                         date: randomDate(),

views/dataPage/ingredient.js

@@ -5,15 +5,32 @@ window.ingredientObj = {
         document.querySelector("strand-selector").setAttribute("strand", "ingredient");
 
         if(ingredient){
-            document.querySelector("#ingredientStrand h1").innerText = `${ingredient.name} (${ingredient.unit})`;
-            graph.line(document.querySelector("#ingredientStrand canvas"), this.formatData(type, ingredient.id));
+            document.querySelector("#ingredientStrand h1").innerText = ingredient.name;
+            let startDate = new Date();
+            startDate.setFullYear(new Date().getFullYear() - 1);
+
+            lineGraph.drawLineGraph(
+                document.querySelector("#ingredientStrand canvas"),
+                this.formatData(type, ingredient.id),
+                "Quantity",
+                "Date",
+                {
+                    type: "date",
+                    start: startDate,
+                    end: new Date()
+                }
+            );
         }
     },
 
     formatData: function(type, id){
         dataList = new Array(365).fill(0);
         let today = new Date();
+        
         if(type === "ingredient"){
+            let dataLastDate = new Date(data.transactions[0].date);
+            let dateRange = Math.floor((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) - Date.UTC(dataLastDate.getFullYear(), dataLastDate.getMonth(), dataLastDate.getDate())) / (1000 * 60 * 60 * 24));
+
             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));
@@ -23,7 +40,7 @@ window.ingredientObj = {
                             if(merchRecipe._id === recipe.recipe){
                                 for(let ingredient of merchRecipe.ingredients){
                                     if(ingredient.ingredient === id){
-                                        dataList[Math.abs(diff)] += ingredient.quantity;
+                                        dataList[dateRange - Math.abs(diff)] += ingredient.quantity;
                                     }
                                 }
                                 break;

views/shared/graphs.js

@@ -1,39 +1,117 @@
-let graph = {
-    line: function(canvas, data){
+let lineGraph = {
+    context: {},
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    verticalMultiplier: 0,
+    horizontalMultiplier: 0,
+
+    drawLineGraph: function(canvas, data, yName, xName, xData){
         canvas.height = canvas.clientHeight;
         canvas.width = canvas.clientWidth;
 
-        let context = canvas.getContext("2d");
+        this.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);
+        this.left = canvas.clientWidth - (canvas.clientWidth * 0.9);
+        this.right = canvas.clientWidth * 0.9;
+        this.bottom = canvas.clientHeight * 0.9;
+        this.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;
+        this.verticalMultiplier = (this.bottom - this.top) / max;
+        this.horizontalMultiplier = (this.right - this.left) / data.length;
 
-        //Draw axes
-        context.beginPath();
-        context.moveTo(left, top);
-        context.lineTo(left, bottom);
-        context.stroke();
+        this.drawXAxis(xName, xData);
+        this.drawYAxis(yName, max)
+        this.addLine(data);
+    },
 
-        context.beginPath();
-        context.moveTo(left, bottom);
-        context.lineTo(right, bottom);
-        context.stroke();
+    addLine: function(data){
+        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++){
-            context.beginPath();
-            context.moveTo(left + (horizontalMultiplier * i), bottom - (verticalMultiplier * data[i]));
-            context.lineTo(left + (horizontalMultiplier * (i + 1)), bottom - (verticalMultiplier * data[i + 1]));
-            context.stroke();
+            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.lineWidth = 1;
+            this.context.strokeStyle = `rgb(${redRand}, ${greenRand}, ${blueRand})`;
+            this.context.stroke();
+        }
+    },
+
+    drawXAxis: function(xName, xData){
+        this.context.beginPath();
+        this.context.moveTo(this.left, this.bottom);
+        this.context.lineTo(this.right, this.bottom);
+        this.context.stroke();
+
+        this.context.font = "25px Arial";
+        this.context.fillText(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 horizontalIncrement = (this.right - this.left) /10
+            let horizontalOffset = 0
+            let showDate = xData.start;
+
+            do{
+                this.context.fillText(showDate.toLocaleDateString("en-US", {month: "short", day: "numeric", year: "2-digit"}), this.left + horizontalOffset - 20, this.bottom + 10);
+
+                this.context.beginPath();
+                this.context.moveTo(this.left + horizontalOffset, this.bottom);
+                this.context.lineTo(this.left + horizontalOffset, this.top);
+                this.context.strokeStyle = "#a5a5a5";
+                this.context.stroke();
+
+                showDate.setDate(showDate.getDate() + (Math.abs(diff / 10)));
+                horizontalOffset += horizontalIncrement;
+            }while(horizontalOffset < (this.right - this.left));
         }
+
+        this.context.setLineDash([]);
+    },
+
+    drawYAxis: function(yName, max){
+        this.context.beginPath();
+        this.context.moveTo(this.left, this.top);
+        this.context.lineTo(this.left, this.bottom);
+        this.context.lineWidth = 3;
+        this.context.stroke();
+
+        this.context.font = "25px Arial";
+        this.context.fillText(yName, 0, this.bottom / 2);
+
+        this.context.setLineDash([5, 10]);
+        this.context.font = "10px Arial";
+        this.context.lineWidth = 1;
+
+        let axisNum = 0;
+        let verticalIncrement = (this.bottom - this.top) / 10;
+        let verticalOffset = 0;
+        do{
+            this.context.fillText(Math.round(axisNum).toString(), this.left - 20, this.bottom - verticalOffset + 3);
+
+            this.context.beginPath();
+            this.context.moveTo(this.left, this.bottom - verticalOffset);
+            this.context.lineTo(this.right, this.bottom - verticalOffset);
+            this.context.strokeStyle = "#a5a5a5";
+            this.context.stroke();
+
+            verticalOffset += verticalIncrement;
+            axisNum += max / 10;
+        }while(verticalOffset <= (this.bottom - this.top));
+
+        this.context.setLineDash([]);
     }
 }