57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
|
|
let paymentMethodCtx = document.getElementById('paymentMethodChart').getContext('2d');
|
|
|
|
let paymentMethodLabels = paymentMethod.map(payment => {
|
|
switch (payment.payment_method) {
|
|
case '1':
|
|
return 'Tunai';
|
|
case '2':
|
|
return 'Qris';
|
|
case '3':
|
|
return 'Lainnya';
|
|
default:
|
|
return 'Unknown';
|
|
}
|
|
});
|
|
|
|
let paymentMethodData = paymentMethod.map(paymentMethod => paymentMethod.total_amount);
|
|
|
|
let paymentMethodBackgroundColors = paymentMethodData.map(() => getRandomColor());
|
|
let paymentMethodBorderColors = paymentMethodBackgroundColors.map(color => color.replace('0.2', '1'));
|
|
|
|
let paymentMethodChart = new Chart(paymentMethodCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: paymentMethodLabels,
|
|
datasets: [{
|
|
label: 'Jumlah Transaksi',
|
|
data: paymentMethodData,
|
|
backgroundColor: paymentMethodBackgroundColors,
|
|
borderColor: paymentMethodBorderColors,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (tooltipItem) {
|
|
let rupiahFormat = new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
maximumFractionDigits: 0,
|
|
useGrouping: true
|
|
}).format(tooltipItem.raw);
|
|
|
|
return tooltipItem.label + ': ' + rupiahFormat.replace('Rp ', 'Rp').replace(/\s/g, '');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|