103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
var chartElement = document.getElementById('adminRentalMonthlyBookingsChart');
|
|
var dataElement = document.getElementById('admin-rental-monthly-bookings-data');
|
|
|
|
if (!chartElement || !dataElement || typeof Chart === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
var payload = {};
|
|
|
|
try {
|
|
payload = JSON.parse(dataElement.textContent || '{}');
|
|
} catch (error) {
|
|
payload = {};
|
|
}
|
|
|
|
var labels = Array.isArray(payload.labels) ? payload.labels : [];
|
|
var values = Array.isArray(payload.values) ? payload.values : [];
|
|
|
|
var hasData = values.some(function (value) {
|
|
return Number(value) > 0;
|
|
});
|
|
|
|
var emptyState = document.querySelector('[data-admin-rental-chart-empty]');
|
|
|
|
if (!hasData) {
|
|
if (emptyState) {
|
|
emptyState.hidden = false;
|
|
}
|
|
if (chartElement.parentElement) {
|
|
chartElement.parentElement.hidden = true;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (emptyState) {
|
|
emptyState.hidden = true;
|
|
}
|
|
|
|
new Chart(chartElement, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Booking',
|
|
data: values,
|
|
backgroundColor: 'rgba(108, 140, 245, 0.82)',
|
|
borderColor: 'rgba(90, 121, 230, 1)',
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
maxBarThickness: 42,
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
tooltip: {
|
|
backgroundColor: '#1f2937',
|
|
titleFont: {
|
|
family: 'Montserrat',
|
|
weight: '700',
|
|
},
|
|
bodyFont: {
|
|
family: 'Poppins',
|
|
},
|
|
padding: 12,
|
|
displayColors: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
color: '#6b7280',
|
|
font: {
|
|
family: 'Poppins',
|
|
},
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
precision: 0,
|
|
color: '#6b7280',
|
|
font: {
|
|
family: 'Poppins',
|
|
},
|
|
},
|
|
grid: {
|
|
color: 'rgba(229, 231, 235, 0.85)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|