Complete the recipe categories on the analytics strand.

views/dashboardPage/css/strands/analytics.css

@@ -81,7 +81,7 @@
                     text-align: center;
                 }
 
-#analCategoriesGraph{
+#analCategoriesGraph, #analCatRecipeGraph{
     margin-left: 25px;
     flex-grow: 2;
     height: 90%;

views/dashboardPage/ejs/strands/analytics.ejs

@@ -126,7 +126,7 @@
     </div>
 
     <div id="analCategoryRecipe" class="analContent" style="display:none">
-        <ul id="analCatRecipeList" class="itemList"></ul>
+        <ul id="analCatRecipeList" class="itemsList"></ul>
 
         <div id="analCatRecipeGraph"></div>
     </div>

views/dashboardPage/js/classes/Transaction.js

@@ -56,9 +56,10 @@ class Transaction{
     Gets the quantity for a given recipe
     */
    getRecipeQuantity(recipe){
-       for(let i = 0; i < this._recipes.length; i++){
+        for(let i = 0; i < this._recipes.length; i++){
            if(this._recipes[i].recipe === recipe) return this._recipes[i].quantity;
-       }
+        }
+        return 0;
     }
 }
 

views/dashboardPage/js/strands/analytics.js

@@ -40,6 +40,7 @@ let analytics = {
         let ingredientButtons = document.getElementById("analIngredientList");
         let categoryButtons = document.getElementById("analCategoriesList");
         let recipeButtons = document.getElementById("analRecipeList");
+        let recipeCategoryButtons = document.getElementById("analCatRecipeList");
 
         while(ingredientButtons.children.length > 0){
             ingredientButtons.removeChild(ingredientButtons.firstChild);
@@ -86,6 +87,23 @@ let analytics = {
             };
             recipeButtons.appendChild(button);
         }
+
+        while(recipeCategoryButtons.children.length > 0){
+            recipeCategoryButtons.removeChild(recipeCategoryButtons.firstChild);
+        }
+
+        let recipeCategories = merchant.categorizeRecipes();
+        for(let i = 0; i < recipeCategories.length; i++){
+            let button = document.createElement("button");
+            button.innerText = (recipeCategories[i].name === "") ? "UNCATEGORIZED" : recipeCategories[i].name;
+            
+            button.classList.add("choosable");
+            button.onclick = ()=>{
+                this.recipeCategory = recipeCategories[i];
+                this.displayRecipeCategory();
+            }
+            recipeCategoryButtons.appendChild(button);
+        }
     },
 
     getData: function(from, to){
@@ -234,6 +252,7 @@ let analytics = {
 
     displayIngredientCategory: function(){
         if(this.category === undefined) this.category = merchant.categorizeIngredients()[0];
+        if(this.category === undefined) return;
 
         let dates = [];
         let quantities = [];
@@ -348,9 +367,10 @@ let analytics = {
             let total = 0;
             for(let j = 0; j < this.transactionsByDate[i].transactions.length; j++){
                 for(let k = 0; k < this.recipeCategory.recipes.length; k++){
-                    total += this.transactionsByDate[i].transactions[j].getRecipeQuantity(this.recipeCategory.recipes[i]);
+                    total += this.transactionsByDate[i].transactions[j].getRecipeQuantity(this.recipeCategory.recipes[k]);
                 }
             }
+
             quantities.push(total);
         }
 
@@ -364,7 +384,7 @@ let analytics = {
         };
 
         let layout = {
-            title: this.recipeCategory.name,
+            title: (this.recipeCategory.name === "") ? "UNCATEGORIZED" : this.recipeCategory.name,
             xaxis: {title: "DATE"},
             yaxis: {title: "COST ($)"},
             margin: {