Add displaying of category buttons on the analytics page.

views/dashboardPage/css/strands/analytics.css

@@ -10,6 +10,7 @@
     .analTabButton.active{
         background: rgb(179, 191, 209);
         color: black;
+        box-shadow: inset 0 0 5px black;
     }
 
 #analCategoriesTab{

views/dashboardPage/ejs/strands/analytics.ejs

@@ -92,11 +92,13 @@
         </div>
     </div>
 
-    <div id="analCategoryContent">
-        <h1>CATEGORIES</h1>
+    <div id="analCategoryContent" class="analContent" style="display:none;">
+        <div id="analCategoriesList" class="itemsList"></div>
+
+        <div id="analCategoriesGraph"></div>
     </div>
 
-    <div id="analRecipeContent" class="analContent">
+    <div id="analRecipeContent" class="analContent" style="display:none;">
         <ul id="analRecipeList" class="itemsList"></ul>
 
         <div class="analData">

views/dashboardPage/js/classes/Merchant.js

@@ -183,7 +183,6 @@ class Merchant{
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{

views/dashboardPage/js/strands/analytics.js

@@ -3,13 +3,12 @@ const Transaction = require("../classes/Transaction.js");
 let analytics = {
     isPopulated: false,
     ingredient: undefined,
+    category: undefined,
     recipe: undefined,
     transactionsByDate: [],
 
     display: function(){
         if(!this.isPopulated){
-            document.getElementById("analRecipeContent").style.display = "none";
-            
             let ingredientTab = document.getElementById("analIngredientsTab");
             let recipeTab = document.getElementById("analRecipesTab");
             let categoryTab = document.getElementById("analCategoriesTab");
@@ -36,6 +35,7 @@ let analytics = {
 
     populateButtons: function(){
         let ingredientButtons = document.getElementById("analIngredientList");
+        let categoryButtons = document.getElementById("analCategoriesList");
         let recipeButtons = document.getElementById("analRecipeList");
 
         while(ingredientButtons.children.length > 0){
@@ -53,6 +53,22 @@ let analytics = {
             ingredientButtons.appendChild(button);
         }
 
+        while(categoryButtons.children.length > 0){
+            categoryButtons.removeChild(categoryButtons.firstChild);
+        }
+
+        let categories = merchant.categorizeIngredients();
+        for(let i = 0; i < categories.length; i++){
+            let button = document.createElement("button");
+            button.innerText = categories[i].name;
+            button.classList.add("choosable");
+            button.onclick = ()=>{
+                this.category = categories[i];
+                this.displayCategory();
+            }
+            categoryButtons.appendChild(button);
+        }
+
         while(recipeButtons.children.length > 0){
             recipeButtons.removeChild(recipeButtons.firstChild);
         }
@@ -218,7 +234,7 @@ let analytics = {
     },
 
     displayCategory: function(){
-        console.log("howdy");
+
     },
 
     displayRecipe: function(){