From 754334aadc754b4e48cfffc190f68c41c2fa2d12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o?= <cdf.leo.merkel@gmail.com>
Date: Tue, 4 Feb 2025 13:02:27 +0100
Subject: [PATCH] Added MeterGroup statistic

---
 src/views/Dashboard.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 1dc81dd..a0b6473 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted} from 'vue';
 import Chart from 'primevue/chart';
 import Fieldset from 'primevue/fieldset';
+import MeterGroup from 'primevue/metergroup';
 import { getProducts,getWarehouses } from '../api.js';
 
 const products = ref();
@@ -16,6 +17,16 @@ const colorsSchemes = [
     "#cd6133", "#84817a", "#cc8e35", "#ccae62"
 ];
 
+const getProductValues = (warehouse) => {
+    return products.value
+        .filter(product => product.warehouses.includes(warehouse.id))
+        .map(product => ({
+            label: product.name,
+            color: getColorForProduct(product.name),
+            value: (product.quantity * 100) / warehouse.max_capacity
+        }));
+};
+
 const getColorForProduct = (productName) => {
     if (!productColors[productName]) {
         productColors[productName] = colorsSchemes[Object.keys(productColors).length % colorsSchemes.length];
@@ -45,7 +56,14 @@ onMounted(async () => {
 
 <template>
     <Fieldset legend="Graph" style="max-width: 600px; margin: auto; padding:20px" toggleable>
-        <p>test</p>
         <Chart type="pie" :data="chartData"></Chart>
     </Fieldset>
+    <Fieldset legend="Used capacity" style="max-width: 600px; margin: auto; padding:20px" toggleable>
+        <ul>
+            <li v-for="warehouse in warehouses" :key="warehouse.id" style="list-style-type: none;">
+                {{ warehouse.name }}
+                <MeterGroup :value="getProductValues(warehouse)"></MeterGroup>
+            </li>
+        </ul>
+    </Fieldset>
 </template>
\ No newline at end of file