65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
|
import Chart from 'chart.js';
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: route('admin.sales_analytics.index'),
|
||
|
|
success(response) {
|
||
|
|
let data = { labels: response.labels, sales: [], formatted: [], totalOrders: [] };
|
||
|
|
|
||
|
|
for (let item of response.data) {
|
||
|
|
data.sales.push(item.total.amount);
|
||
|
|
data.formatted.push(item.total.formatted);
|
||
|
|
data.totalOrders.push(item.total_orders);
|
||
|
|
}
|
||
|
|
|
||
|
|
initSalesAnalyticsChart(data);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function initSalesAnalyticsChart(data) {
|
||
|
|
new Chart($('.sales-analytics .chart'), {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: data.labels,
|
||
|
|
datasets: [{
|
||
|
|
data: data.sales,
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 99, 132, 0.5)',
|
||
|
|
'rgba(54, 162, 235, 0.5)',
|
||
|
|
'rgba(255, 206, 86, 0.5)',
|
||
|
|
'rgba(75, 192, 192, 0.5)',
|
||
|
|
'rgba(153, 102, 255, 0.5)',
|
||
|
|
'rgba(255, 159, 64, 0.5)',
|
||
|
|
],
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
barThickness: 1,
|
||
|
|
options: {
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
legend: {
|
||
|
|
display: false,
|
||
|
|
},
|
||
|
|
tooltips: {
|
||
|
|
displayColors: false,
|
||
|
|
callbacks: {
|
||
|
|
label(item) {
|
||
|
|
let orders = `${trans('admin::dashboard.sales_analytics.orders')}: ${data.totalOrders[item.index]}`;
|
||
|
|
let sales = `${trans('admin::dashboard.sales_analytics.sales')}: ${data.formatted[item.index]}`;
|
||
|
|
|
||
|
|
return [orders, sales];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
beginAtZero: true,
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|