chart.js implementation, make dashboard more responsive

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@primevue/themes": "^4.2.5",
     "axios": "^1.7.9",
+    "chart.js": "^4.4.7",
     "js-cookie": "^3.0.5",
     "luxon": "^3.5.0",
     "primeicons": "^7.0.0",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: ^1.7.9
         version: 1.7.9
+      chart.js:
+        specifier: ^4.4.7
+        version: 4.4.7
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
@@ -226,6 +229,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@primeuix/styled@0.3.2':
     resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==}
     engines: {node: '>=12.11.0'}
@@ -532,6 +538,10 @@ packages:
   character-reference-invalid@1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
 
+  chart.js@4.4.7:
+    resolution: {integrity: sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==}
+    engines: {pnpm: '>=8'}
+
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -1142,6 +1152,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@kurkle/color@0.3.4': {}
+
   '@primeuix/styled@0.3.2':
     dependencies:
       '@primeuix/utils': 0.3.2
@@ -1679,6 +1691,10 @@ snapshots:
 
   character-reference-invalid@1.1.4: {}
 
+  chart.js@4.4.7:
+    dependencies:
+      '@kurkle/color': 0.3.4
+
   classnames@2.5.1: {}
 
   combined-stream@1.0.8:

src/views/Dashboard.vue

@@ -1,6 +1,51 @@
 <script setup>
+import { ref, onMounted} from 'vue';
+import Chart from 'primevue/chart';
+import Fieldset from 'primevue/fieldset';
+import { getProducts,getWarehouses } from '../api.js';
+
+const products = ref();
+const warehouses = ref();
+const chartData = ref();
+const productColors = {};
+const colorsSchemes = [
+    "#40407a", "#706fd3", "#f7f1e3", "#34ace0",
+    "#33d9b2", "#2c2c54", "#474787", "#aaa69d",
+    "#227093", "#218c74", "#ff5252", "#ff793f",
+    "#d1ccc0", "#ffb142", "#ffda79", "#b33939",
+    "#cd6133", "#84817a", "#cc8e35", "#ccae62"
+];
+
+const getColorForProduct = (productName) => {
+    if (!productColors[productName]) {
+        productColors[productName] = colorsSchemes[Object.keys(productColors).length % colorsSchemes.length];
+    }
+    return productColors[productName];
+};
+
+const setChartData = () => {
+    return {
+        labels: products.value.map(product => product.name),
+        datasets: [
+            {
+                label: 'Quantité',
+                backgroundColor: products.value.map(product => getColorForProduct(product.name)), 
+                data: products.value.map(product => product.quantity)
+            }
+        ]
+    };
+};
+
+onMounted(async () => {
+    warehouses.value = await getWarehouses();
+    products.value = await getProducts();
+    chartData.value = setChartData();
+})
 </script>
 
 <template>
-    <p>Dashboard</p>
+    <Fieldset legend="Graph" style="max-width: 600px; margin: auto; padding:20px" toggleable>
+        <p>test</p>
+        <Chart type="pie" :data="chartData"></Chart>
+    </Fieldset>
 </template>