Fix the style on the most used cards.

views/dashboardPage/css/strands/home.css

@@ -29,37 +29,19 @@
         max-height: 43%;
     }
 
-#revenueCard{
+.mostUsed{
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 
-    #revenue{
-        text-align: center;
-        font-size: 30px;
-        font-weight: bold;
-    }
-
-    #revenueChange{
-        display: flex;
-    }
-
-    #revenueChange > p{
-        font-weight: 100;
-    }
-
-    #revenueChange img{
-        height: 15px;
-        width: 15px;
-        margin-right: 10px;
-    }
+#mostUsedRecipesList, #mostUsedList{
+    height: 75%;
+    overflow-y: auto;
+}
 
-#graphCard{
-    flex-grow: 5;
-    display: flex;
-    justify-content: center;
+#mostUsedRecipesList .choosable, #mostUsedList .choosable {
+    padding: 10px;
 }
 
 #inventoryCheckCard{

views/dashboardPage/ejs/strands/home.ejs

@@ -4,13 +4,13 @@
     </div>
 
     <div class="flexRow">
-        <div class="card">
+        <div class="card mostUsed">
             <h3>MOST USED RECIPES (30 DAYS)</h3>
 
             <div id="mostUsedRecipesList"></div>
         </div>
 
-        <div class="card">
+        <div class="card mostUsed">
             <h3>MOST USED INGREDIENTS (30 DAYS)</h3>
 
             <div id="mostUsedList"></div>

views/dashboardPage/js/classes/Merchant.js

@@ -537,9 +537,7 @@ class Merchant{
         }]
     */
     getRecipesSold(from = 0, to = new Date()){
-        if(from === 0){
-            from = this._transactions[0].date;
-        }
+        if(from === 0) from = this._transactions[0].date;
 
         const {start, end} = this.getTransactionIndices(from, to);
 

views/dashboardPage/js/dashboard.js

@@ -405,19 +405,21 @@ window.state = {
         analytics.isPopulated = false;
         home.drawInventoryCheckCard();
         home.mostUsedIngredients();
+        home.mostUsedRecipes();
     },
 
     updateRecipes: function(){
         recipeBook.populateRecipes();
         analytics.isPopulated = false;
         home.mostUsedIngredients();
+        home.mostUsedRecipes();
     },
 
     updateTransactions: function(transaction){
         home.isPopulated = false;
         ingredients.populateByProperty();
         analytics.isPopulated = false;
-        home.drawRevenueGraph();
+        home.mostUsedRecipes();
         home.mostUsedIngredients();
     },
 

views/dashboardPage/js/strands/home.js

@@ -44,9 +44,7 @@ let home = {
         from.setDate(from.getDate() - 30);
 
         for(let i = 0; i < merchant.inventory.length; i++){
-            let thing = merchant.inventory[i].getSoldQuantity(from, new Date());
-            let otherThing = merchant.inventory[i].ingredient.getUnitCost();
-            let cost = thing * otherThing;
+            let cost = merchant.inventory[i].getSoldQuantity(from, new Date()) * merchant.inventory[i].ingredient.getUnitCost();
             
             ingredients.push({
                 inventoryItem: merchant.inventory[i],
@@ -63,7 +61,9 @@ let home = {
 
         let displayCount = (merchant.inventory.length < 10) ? merchant.inventory.length : 10;
 
+        console.log(ingredients);
         for(let i = 0; i < displayCount; i++){
+            if(ingredients[i].unitCost === 0) break;
             let item = document.createElement("button");
             item.classList.add("choosable");
             item.onclick = ()=>{