Update graph for a prettier look

views/dashboardPage/home.js

@@ -29,15 +29,13 @@ window.homeStrandObj = {
             graphCanvas.height = graphCanvas.parentElement.clientHeight;
             graphCanvas.width = graphCanvas.parentElement.clientWidth;
 
-            this.graph = new LineGraph(
-                graphCanvas,
-                "$",
-                "Date"
-            )
+            this.graph = new LineGraph(graphCanvas);
+            this.graph.addTitle("Revenue");
 
             let thirtyAgo = new Date(today);
             thirtyAgo.setDate(today.getDate() - 29);
 
+            console.log("data adding");
             this.graph.addData(
                 this.graphData(dateIndices(thirtyAgo)),
                 [thirtyAgo, new Date()],

views/shared/graphs.js

@@ -5,17 +5,15 @@
 //  yName = a string for the name of the Y axis
 //  xName = a string for the name of the X axis
 class LineGraph{
-    constructor(canvas, yName, xName){
+    constructor(canvas){
         this.canvas = canvas;
         this.context = canvas.getContext("2d");
-        this.left = canvas.clientWidth - (canvas.clientWidth * 0.9);
-        this.right = canvas.clientWidth * 0.8;
-        this.top = canvas.clientHeight - (canvas.clientHeight * 0.99);
-        this.bottom = canvas.clientHeight * 0.9;
+        this.left = canvas.clientWidth - (canvas.clientWidth * 0.95);
+        this.right = canvas.clientWidth * 1;
+        this.top = canvas.clientHeight - (canvas.clientHeight * 1);
+        this.bottom = canvas.clientHeight * 0.85;
         this.data = [];
         this.max = 0;
-        this.xName = xName;
-        this.yName = yName;
         this.xRange = [];
         this.colors = [];
         this.colorIndex = 0;
@@ -97,18 +95,31 @@ class LineGraph{
         this.xRange = [];
     }
 
+    addTitle(title){
+        this.top = this.canvas.clientHeight - (this.canvas.clientHeight * 0.9);
+        
+        this.title = title;
+    }
+
     /**********
     *********PRIVATE*********
     **********/
     drawGraph(){
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
+        
         this.drawYAxis();
         this.drawXAxis();
 
         for(let dataSet of this.data){
             this.drawLine(dataSet);
         }
+
+        if(this.title){
+            console.log(this.title);
+            this.context.font = "25px Saira";
+            let xLocation = ((this.right - this.left) / 2) - (this.context.measureText(this.title).width / 2);
+            this.context.fillText(this.title, xLocation, this.top - 10);
+        }
     }
 
     drawLine(data){
@@ -123,7 +134,9 @@ class LineGraph{
 
         this.context.strokeStyle = "black";
 
-        this.drawLegend(data.colorIndex, data.name);
+        if(this.data.length > 1){
+            this.drawLegend(data.colorIndex, data.name);
+        }
     }
 
     drawXAxis(){
@@ -133,9 +146,6 @@ class LineGraph{
         this.context.lineWidth = 4;
         this.context.stroke();
 
-        this.context.font = "25px Arial";
-        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;
@@ -171,9 +181,6 @@ class LineGraph{
         this.context.lineWidth = 2;
         this.context.stroke();
 
-        this.context.font = "25px Arial";
-        this.context.fillText(this.yName, 0, this.bottom / 2);
-
         this.context.setLineDash([5, 10]);
         this.context.font = "10px Arial";
         this.context.lineWidth = 1;