69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<script setup>
|
|
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();
|
|
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 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];
|
|
}
|
|
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>
|
|
<Fieldset legend="Graph" style="max-width: 600px; margin: auto; padding:20px" toggleable>
|
|
<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> |