Update style for graphs

views/dataPage/data.css

@@ -1,3 +1,9 @@
+body, html{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
 #title{
     font-size: 45px;
     color: rgb(255, 99, 107);
@@ -47,7 +53,7 @@
 /* Ingredient Strand */
 #ingredientStrand{
     flex-direction: column;
-    align-items: space-around;
+    align-items: space-between;
 }
 
     #ingredientStrand > *{
@@ -57,14 +63,11 @@
     .canvasBox{
         display: flex;
         justify-content: space-between;
-        width: 100vw;
-        height: 100vh;
     }
 
     canvas{
-        flex-grow: 10;
-        max-height: 60vh;
-        max-width: 90vw;
+        flex-grow: 9;
+        height: 64vh;
     }
 
     #ingredientOptions{

views/dataPage/home.js

@@ -15,7 +15,7 @@ window.homeObj = {
             document.querySelector("#homeFrom").valueAsDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
             document.querySelector("#homeTo").valueAsDate = new Date();
 
-            this.isPopulated = true;
+            this.isPopulated = true;2
         }
     },
 

views/dataPage/ingredient.js

@@ -107,16 +107,18 @@ window.ingredientObj = {
             to = new Date(to);
         }
 
-        window.fetchData(from, to, ()=>{
-            this.graph.clearData();
+        if(validator.transaction.date(from, to)){
+            window.fetchData(from, to, ()=>{
+                this.graph.clearData();
 
-            let ingredientsDiv = document.querySelector("#ingredientOptions");
-            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.name);
+                let ingredientsDiv = document.querySelector("#ingredientOptions");
+                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.name);
+                    }
                 }
-            }
-        });
+            });
+        }
     }
 }

views/shared/graphs.js

@@ -13,7 +13,7 @@ class LineGraph{
         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.9);
+        this.top = canvas.clientHeight - (canvas.clientHeight * 0.99);
         this.bottom = canvas.clientHeight * 0.9;
         this.data = [];
         this.max = 0;
@@ -97,6 +97,7 @@ class LineGraph{
     clearData(){
         this.max = 0;
         this.data = [];
+        this.xRange = [];
     }
 
     /**********