55 lines
1.9 KiB
PHP
55 lines
1.9 KiB
PHP
<div id="deals-pie-chart-parent" class="col-span-1">
|
|
<x-dashboard.card class="col-span-1 h-75">
|
|
<h3 class="text-md font-bold mb-4">Deals by category</h3>
|
|
<div data-is-loading="false" class="h-55">
|
|
<canvas id="category-wise-deals-pie-chart"></canvas>
|
|
</div>
|
|
</x-dashboard.card>
|
|
</div>
|
|
@push('scripts')
|
|
<script async>
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
const dealsPieChart = document.getElementById('category-wise-deals-pie-chart');
|
|
const dealsPieChartParent = document.getElementById('deals-pie-chart-parent');
|
|
|
|
if (!dealsPieChart || !dealsPieChartParent) {
|
|
console.error('canvas not defined');
|
|
return;
|
|
}
|
|
toggleShimmer(false, dealsPieChartParent);
|
|
try {
|
|
const {data: apiData} = await axios.get('/api/stats/deals-by-category');
|
|
|
|
const categories = apiData?.data.map((item) => item?.name);
|
|
const dealsCounts = apiData?.data.map((item) => item?.dealsCount);
|
|
|
|
const data = {
|
|
labels: categories,
|
|
datasets: [{
|
|
data: dealsCounts,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
|
|
const config = {
|
|
type: 'pie',
|
|
data: data,
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const chart = new Chart(dealsPieChart, config);
|
|
toggleShimmer(true, dealsPieChartParent);
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
})
|
|
</script>
|
|
@endpush
|