129 lines
3.6 KiB
JavaScript
129 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const sidebarCollapse = document.getElementById('sidebarCollapse');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
if (sidebarCollapse) {
|
|
sidebarCollapse.addEventListener('click', function () {
|
|
sidebar.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// Auto hide alerts after 5 seconds
|
|
const alerts = document.querySelectorAll('.alert');
|
|
alerts.forEach(function (alert) {
|
|
setTimeout(function () {
|
|
const bsAlert = new bootstrap.Alert(alert);
|
|
bsAlert.close();
|
|
}, 5000);
|
|
});
|
|
|
|
// --- Modern Charts Initialization ---
|
|
|
|
// 1. Sales Analytics Chart
|
|
const salesOptions = {
|
|
series: [{
|
|
name: 'Sales',
|
|
data: [3100000, 4000000, 2800000, 5100000, 4200000, 10900000, 12500000]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
fontFamily: 'Inter, sans-serif'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3,
|
|
colors: ['#10b981']
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.45,
|
|
opacityTo: 0.05,
|
|
stops: [20, 100, 100, 100]
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val) {
|
|
return "Rp " + (val / 1000000).toFixed(1) + "M";
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f5f9',
|
|
strokeDashArray: 4
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return "Rp " + val.toLocaleString('id-ID');
|
|
}
|
|
}
|
|
},
|
|
colors: ['#10b981']
|
|
};
|
|
|
|
const salesChartEl = document.querySelector("#salesChart");
|
|
if (salesChartEl) {
|
|
const salesChart = new ApexCharts(salesChartEl, salesOptions);
|
|
salesChart.render();
|
|
}
|
|
|
|
// 2. Category Distribution Chart
|
|
const categoryOptions = {
|
|
series: [44, 55, 13, 33],
|
|
chart: {
|
|
height: 350,
|
|
type: 'donut',
|
|
fontFamily: 'Inter, sans-serif'
|
|
},
|
|
labels: ['Electronics', 'Groceries', 'Apparel', 'Others'],
|
|
colors: ['#0f172a', '#10b981', '#3b82f6', '#f59e0b'],
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '75%',
|
|
labels: {
|
|
show: true,
|
|
total: {
|
|
show: true,
|
|
label: 'Total',
|
|
formatter: function (w) {
|
|
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "%";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
}
|
|
};
|
|
|
|
const categoryChartEl = document.querySelector("#categoryChart");
|
|
if (categoryChartEl) {
|
|
const categoryChart = new ApexCharts(categoryChartEl, categoryOptions);
|
|
categoryChart.render();
|
|
}
|
|
}); |