Create graph for each ingredient. Create average daily use card.

views/dashboardPage/bundle.js

@@ -604,13 +604,97 @@ let analytics = {
     display: function(){
         const itemsList = document.getElementById("itemsList");
 
+        while(itemsList.children.length > 0){
+            itemsList.removeChild(itemsList.firstChild);
+        }
+
         for(let i = 0; i < merchant.ingredients.length; i++){
             let li = document.createElement("li");
             li.classList.add("itemButton");
             li.item = merchant.ingredients[i];
             li.innerText = merchant.ingredients[i].ingredient.name;
+            li.onclick = ()=>{this.ingredientDisplay(merchant.ingredients[i], li)};
             itemsList.appendChild(li);
         }
+    },
+
+    ingredientDisplay: function(ingredient, li){
+        console.time("timing");
+        const itemsList = document.getElementById("itemsList");
+        for(let i = 0; i < itemsList.children.length; i++){
+            itemsList.children[i].classList.remove("analItemActive");
+        }
+        li.classList.add("analItemActive");
+
+        let startDate = new Date();
+        startDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() - 30);
+
+        //Get list of recipes that contain the ingredient
+        let containingRecipes = [];
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            for(let j = 0; j < merchant.recipes[i].ingredients.length; j++){
+                if(merchant.recipes[i].ingredients[j].ingredient === ingredient.ingredient){
+                    containingRecipes.push({
+                        recipe: merchant.recipes[i],
+                        quantity: merchant.recipes[i].ingredients[j].quantity
+                    });
+
+                    break;
+                }
+            }
+        }
+
+        //Create Graph
+        console.log(startDate);
+        const dateIndices = merchant.transactionIndices(startDate);
+        console.log(dateIndices);
+        console.log(merchant.transactions[dateIndices[0]]);
+        let quantities = [];
+        let dates = [];
+        let currentDate = merchant.transactions[dateIndices[0]].date;
+        let currentQuantity = 0;
+
+        for(let i = dateIndices[0]; i < dateIndices[1]; i++){
+            if(currentDate.getDate() !== merchant.transactions[i].date.getDate()){
+                quantities.push(ingredient.ingredient.convert(currentQuantity));
+                dates.push(currentDate);
+                currentQuantity = 0;
+                currentDate = merchant.transactions[i].date;
+            }
+
+            for(let j = 0; j < merchant.transactions[i].recipes.length; j++){
+                for(let k = 0; k < containingRecipes.length; k++){
+                    if(merchant.transactions[i].recipes[j].recipe === containingRecipes[k].recipe){
+                        for(let l = 0; l < merchant.transactions[i].recipes[j].recipe.ingredients.length; l++){
+                            const transIngredient = merchant.transactions[i].recipes[j].recipe.ingredients[l];
+
+                            if(transIngredient.ingredient === ingredient.ingredient){
+                                currentQuantity += transIngredient.quantity * merchant.transactions[i].recipes[j].quantity;
+
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        let trace = {
+            x: dates,
+            y: quantities,
+            mode: "lines+markers"
+        }
+
+        console.timeEnd("timing");
+        Plotly.newPlot("itemUseGraph", [trace]);
+
+        //Create daily use card
+        let sum = 0;
+        for(let i = 0; i < quantities.length; i++){
+            sum += quantities[i];
+        }
+        document.getElementById("analAvgUse").innerText = `${(sum / 30).toFixed(2)} ${ingredient.ingredient.unit}`;        
     }
 }
 

views/dashboardPage/dashboard.css

@@ -447,29 +447,42 @@ Analytics Strand
     .itemsList{
         list-style-type: none;
         width: 15%;
+        overflow-y: auto;
     }
 
         .itemButton{
-            background: rgb(179, 191, 209);
+            background: rgb(0, 27, 45);
             color: white;
             border-radius: 5px;
-            border: 1px solid black;
             padding: 5px;
-            margin: 1px;
+            margin: 2px;
             width: 90%;
             text-align: center;
+            cursor: pointer;
         }
 
-        .analItemActive{
+            .itemButton:hover{
+                background: rgb(201, 201, 201);
+                color: black;
+            }
 
+        .analItemActive{
+            background: rgb(179, 191, 209);
         }
 
     .analData{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
         width: 85%;
         height: 100%;
-        background: red;
     }
 
+        #itemUseGraph{
+            padding: 10px;
+            height: 50%;
+        }
+
 /* 
 Orders Strand 
 */

views/dashboardPage/dashboard.ejs

@@ -263,7 +263,15 @@
                     <ul id="itemsList" class="itemsList"></ul>
 
                     <div class="analData">
+                        <div id="itemUseGraph" class="card"></div>
 
+                        <div class="flexRow">
+                            <div class="card">
+                                <p>AVERAGE DAILY USE</p>
+
+                                <h1 id="analAvgUse"></h1>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -407,6 +415,7 @@
             }
         </script>
         <script src="./dashboardPage/bundle.js"></script>
+        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
         <noscript>Please turn on javascript for this site to work properly</noscript>
     </body>

views/dashboardPage/js/analytics.js

@@ -2,13 +2,97 @@ let analytics = {
     display: function(){
         const itemsList = document.getElementById("itemsList");
 
+        while(itemsList.children.length > 0){
+            itemsList.removeChild(itemsList.firstChild);
+        }
+
         for(let i = 0; i < merchant.ingredients.length; i++){
             let li = document.createElement("li");
             li.classList.add("itemButton");
             li.item = merchant.ingredients[i];
             li.innerText = merchant.ingredients[i].ingredient.name;
+            li.onclick = ()=>{this.ingredientDisplay(merchant.ingredients[i], li)};
             itemsList.appendChild(li);
         }
+    },
+
+    ingredientDisplay: function(ingredient, li){
+        console.time("timing");
+        const itemsList = document.getElementById("itemsList");
+        for(let i = 0; i < itemsList.children.length; i++){
+            itemsList.children[i].classList.remove("analItemActive");
+        }
+        li.classList.add("analItemActive");
+
+        let startDate = new Date();
+        startDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() - 30);
+
+        //Get list of recipes that contain the ingredient
+        let containingRecipes = [];
+
+        for(let i = 0; i < merchant.recipes.length; i++){
+            for(let j = 0; j < merchant.recipes[i].ingredients.length; j++){
+                if(merchant.recipes[i].ingredients[j].ingredient === ingredient.ingredient){
+                    containingRecipes.push({
+                        recipe: merchant.recipes[i],
+                        quantity: merchant.recipes[i].ingredients[j].quantity
+                    });
+
+                    break;
+                }
+            }
+        }
+
+        //Create Graph
+        console.log(startDate);
+        const dateIndices = merchant.transactionIndices(startDate);
+        console.log(dateIndices);
+        console.log(merchant.transactions[dateIndices[0]]);
+        let quantities = [];
+        let dates = [];
+        let currentDate = merchant.transactions[dateIndices[0]].date;
+        let currentQuantity = 0;
+
+        for(let i = dateIndices[0]; i < dateIndices[1]; i++){
+            if(currentDate.getDate() !== merchant.transactions[i].date.getDate()){
+                quantities.push(ingredient.ingredient.convert(currentQuantity));
+                dates.push(currentDate);
+                currentQuantity = 0;
+                currentDate = merchant.transactions[i].date;
+            }
+
+            for(let j = 0; j < merchant.transactions[i].recipes.length; j++){
+                for(let k = 0; k < containingRecipes.length; k++){
+                    if(merchant.transactions[i].recipes[j].recipe === containingRecipes[k].recipe){
+                        for(let l = 0; l < merchant.transactions[i].recipes[j].recipe.ingredients.length; l++){
+                            const transIngredient = merchant.transactions[i].recipes[j].recipe.ingredients[l];
+
+                            if(transIngredient.ingredient === ingredient.ingredient){
+                                currentQuantity += transIngredient.quantity * merchant.transactions[i].recipes[j].quantity;
+
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        let trace = {
+            x: dates,
+            y: quantities,
+            mode: "lines+markers"
+        }
+
+        console.timeEnd("timing");
+        Plotly.newPlot("itemUseGraph", [trace]);
+
+        //Create daily use card
+        let sum = 0;
+        for(let i = 0; i < quantities.length; i++){
+            sum += quantities[i];
+        }
+        document.getElementById("analAvgUse").innerText = `${(sum / 30).toFixed(2)} ${ingredient.ingredient.unit}`;        
     }
 }