Finished creation of horizontal bar graph. Fixed layout of home page.

views/dashboardPage/dashboard.css

@@ -21,8 +21,11 @@ body{
     margin: 15px;
     border: 1px solid rgba(183, 183, 183, 0.9);
     border-radius: 7px;
+    box-sizing: border-box;
     box-shadow: 1px 2px gray;
     padding: 25px;
+    flex-grow: 1;
+    height: 100%;
 }
 
 .card > *{
@@ -32,6 +35,7 @@ body{
 .card p:first-of-type{
     font-size: 14px;
     font-weight: bold;
+    text-align: center;
 }
 
 /* Home Strand */
@@ -49,7 +53,7 @@ body{
 
 .flexRow{
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     width: 100%;
 }
 
@@ -89,12 +93,17 @@ body{
         width: 100%;
     }
 
+#inventoryCheckCard{
+    flex-grow: 0.1;
+    height: 100%;
+}
+
 #inventoryCheckCard ul{
     list-style: none;
 }
 
 #inventoryCheckCard li{
-    margin: 5px;
+    margin: 15px 0;
 }
 
 #inventoryCheckCard li > p{
@@ -126,6 +135,13 @@ body{
     font-size: 15px;
 }
 
+#popularIngredientsCard{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;

views/dashboardPage/dashboard.ejs

@@ -51,7 +51,11 @@
                         <button class="button" onclick="homeStrandObj.updateInventory()">Update</button>
                     </div>
 
-                    <div id=popularIngredientsCard class="card"></div>
+                    <div id=popularIngredientsCard class="card">
+                        <p>Most Popular Ingredients</p>
+
+                        <canvas id="popularCanvas"></canvas>
+                    </div>
                 </div>
             </div>
 

views/dashboardPage/home.js

@@ -25,8 +25,12 @@ window.homeStrandObj = {
             document.querySelector("#revenueChange p").innerText = `${Math.abs(revenueChange).toFixed(2)}% vs last month`;
             document.querySelector("#revenueChange img").src = img;
 
+            let graphCanvas = document.querySelector("#graphCanvas");
+            graphCanvas.height = graphCanvas.parentElement.clientHeight;
+            graphCanvas.width = graphCanvas.parentElement.clientWidth;
+
             this.graph = new LineGraph(
-                document.querySelector("#graphCanvas"),
+                graphCanvas,
                 "$",
                 "Date"
             )
@@ -73,6 +77,22 @@ window.homeStrandObj = {
                 li.appendChild(label);
             }
 
+            //Most Popular ingredients
+            let dataArray = [];
+            for(let item of merchant.inventory){
+                dataArray.push({
+                    num: item.quantity,
+                    label: `${item.ingredient.name}: ${item.quantity} ${item.ingredient.unit}`
+                });
+            }
+
+            let thisCanvas = document.querySelector("#popularCanvas");
+            thisCanvas.width = thisCanvas.parentElement.clientWidth;
+            thisCanvas.height = thisCanvas.parentElement.clientHeight;
+
+            let popularGraph = new HorizontalBarGraph(document.querySelector("#popularCanvas"));
+            popularGraph.addData(dataArray);
+
             this.isPopulated = true;
         }
     },

views/shared/graphs.js

@@ -6,9 +6,6 @@
 //  xName = a string for the name of the X axis
 class LineGraph{
     constructor(canvas, yName, xName){
-        canvas.height = canvas.clientHeight;
-        canvas.width = canvas.clientWidth;
-
         this.canvas = canvas;
         this.context = canvas.getContext("2d");
         this.left = canvas.clientWidth - (canvas.clientWidth * 0.9);
@@ -220,4 +217,63 @@ class LineGraph{
 
         this.context.fillStyle = "black";
     }
+}
+
+class HorizontalBarGraph{
+    constructor(canvas){
+        this.canvas = canvas;
+        this.context = canvas.getContext("2d");
+        this.left = 0;
+        this.right = canvas.clientWidth;
+        this.top = canvas.clientHeight - (canvas.clientHeight * 0.99);
+        this.bottom = canvas.clientHeight;
+        this.data = [];
+        this.max = 0;
+    }
+
+    //Adds an array of data points to the chart
+    //All data is removed  and redrawn when called
+    //Must pass in all data points
+    //Inputs: 
+    //  dataArray: array of objects
+    //      num: number for the actual data
+    //      label: text to display on bar
+    addData(dataArray){
+        let data = [];
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        for(let point of dataArray){
+            if(point.num > this.max){
+                this.max = point.num;
+            }
+
+            this.data.push(point);
+        }
+
+        this.drawGraph();
+    }
+
+    drawGraph(){
+        let barHeight = (this.bottom - this.top) / this.data.length;
+
+        for(let i = 0; i < this.data.length; i++){
+            let topLocation = this.top + (i * barHeight) + 5;
+            let width = (this.right - this.left) * (this.data[i].num / this.max);
+
+            if(this.data[i].num >= this.max){
+                this.context.fillStyle = "rgb(255, 99, 107)";
+            }else{
+                this.context.fillStyle = "rgb(179, 191, 209)";
+            }
+
+            this.context.beginPath();
+            this.context.fillRect(this.left, topLocation, width, barHeight - 5);
+            this.context.stroke();
+
+            let textLocation  = 15;
+            this.context.font = "12px Saira";
+            this.context.fillStyle = "black";
+            this.context.fillText(this.data[i].label, textLocation, (this.top) + (i * barHeight) + (barHeight / 1.5));
+        }
+    }
 }