119 lines
4.5 KiB
JavaScript
119 lines
4.5 KiB
JavaScript
window.dashboardCharts = [];
|
|
|
|
function initDashboardCharts(monthlyData, statusData) {
|
|
const rootStyle = getComputedStyle(document.documentElement);
|
|
const getVar = (name) => rootStyle.getPropertyValue(name).trim();
|
|
|
|
// Chart Options for Dark Mode Compatibility
|
|
const commonOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: getVar('--text-main') || '#64748B',
|
|
font: { family: 'Sarabun' }
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
|
|
grid: { color: getVar('--border-color') || '#E2E8F0' }
|
|
},
|
|
y: {
|
|
ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
|
|
grid: { color: getVar('--border-color') || '#E2E8F0' }
|
|
}
|
|
}
|
|
};
|
|
|
|
// 1. Line Chart (Monthly Activity)
|
|
const lineCtx = document.getElementById('monthlyChart');
|
|
if (lineCtx) {
|
|
const lineChart = new Chart(lineCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
|
datasets: [{
|
|
label: 'จำนวนผู้ใช้งาน/การจอง',
|
|
data: monthlyData || [12, 19, 15, 25, 22, 30, 28, 35],
|
|
borderColor: '#0F766E', // Primary color
|
|
backgroundColor: 'rgba(15, 118, 110, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: commonOptions
|
|
});
|
|
window.dashboardCharts.push(lineChart);
|
|
}
|
|
|
|
// 2. Doughnut Chart (Status Overview)
|
|
const doughnutCtx = document.getElementById('statusChart');
|
|
if (doughnutCtx) {
|
|
const doughnutChart = new Chart(doughnutCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['เสร็จสิ้น', 'รอดำเนินการ', 'กำลังใช้งาน', 'ไม่มีข้อมูล'],
|
|
datasets: [{
|
|
data: statusData || [55, 25, 15, 5],
|
|
backgroundColor: [
|
|
'#10B981', // Success (Completed)
|
|
'#F59E0B', // Warning (Pending)
|
|
'#0ea5e9', // Info (Active)
|
|
'#64748B' // Muted
|
|
],
|
|
borderWidth: 0,
|
|
hoverOffset: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '75%',
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
color: getVar('--text-main') || '#64748B',
|
|
padding: 20,
|
|
font: { family: 'Sarabun' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
window.dashboardCharts.push(doughnutChart);
|
|
}
|
|
}
|
|
|
|
window.updateChartsTheme = function() {
|
|
if (!window.dashboardCharts || window.dashboardCharts.length === 0) return;
|
|
|
|
const rootStyle = getComputedStyle(document.documentElement);
|
|
const textMain = rootStyle.getPropertyValue('--text-main').trim() || '#64748B';
|
|
const textMuted = rootStyle.getPropertyValue('--text-muted').trim() || '#94A3B8';
|
|
const borderColor = rootStyle.getPropertyValue('--border-color').trim() || '#E2E8F0';
|
|
|
|
window.dashboardCharts.forEach(chart => {
|
|
// Update Legend
|
|
if (chart.options.plugins && chart.options.plugins.legend && chart.options.plugins.legend.labels) {
|
|
chart.options.plugins.legend.labels.color = textMain;
|
|
}
|
|
// Update Scales (if exist)
|
|
if (chart.options.scales) {
|
|
if (chart.options.scales.x) {
|
|
if (chart.options.scales.x.ticks) chart.options.scales.x.ticks.color = textMuted;
|
|
if (chart.options.scales.x.grid) chart.options.scales.x.grid.color = borderColor;
|
|
}
|
|
if (chart.options.scales.y) {
|
|
if (chart.options.scales.y.ticks) chart.options.scales.y.ticks.color = textMuted;
|
|
if (chart.options.scales.y.grid) chart.options.scales.y.grid.color = borderColor;
|
|
}
|
|
}
|
|
chart.update();
|
|
});
|
|
};
|