banksampah
/
bps-rw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add filter dropdown

main-dlh
Regiaaaaaa 2025-12-09 11:44:06 +07:00
parent 073aa9a92b
commit 77dac14abc
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Views/DashboardRw/Index.cshtml
View File

@ -6,8 +6,16 @@
<!-- Profil RW --> <!-- Profil RW -->
<div class="card card-border h-full bg-white lg:col-span-9"> <div class="card card-border h-full bg-white lg:col-span-9">
<div class="card-body"> <div class="card-body">
<div class="flex flex-col items-center justify-between lg:flex-row"> <div class="flex flex-col items-center justify-between gap-2 lg:flex-row">
<h2 class="w-full text-lg font-bold md:w-1/2">Profile RW 7</h2> <h2 class="w-full text-lg font-bold md:w-1/2">Profile RW 7</h2>
<div class="flex w-full items-center justify-end gap-2 md:w-1/2">
<select id="filterPeriod" class="select select-bordered select-sm w-32">
<option selected>Tahunan</option>
<option>Bulanan</option>
<option>Harian</option>
</select>
<input type="month" id="monthPicker" class="input input-bordered input-sm w-40 hidden" placeholder="Pilih Bulan">
</div>
</div> </div>
<div class="h-2"></div> <div class="h-2"></div>
<div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4"> <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4">
@ -205,6 +213,22 @@
<script src="/lib/chart.js/chart.umd.js"></script> <script src="/lib/chart.js/chart.umd.js"></script>
<script> <script>
// Filter period handler
const filterPeriod = document.getElementById('filterPeriod');
const monthPicker = document.getElementById('monthPicker');
filterPeriod.addEventListener('change', function() {
if (this.value === 'Bulanan') {
monthPicker.classList.remove('hidden');
} else {
monthPicker.classList.add('hidden');
}
});
monthPicker.addEventListener('change', function() {
console.log('Selected month:', this.value);
});
const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; const labels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
// contoh data variasi // contoh data variasi
@ -241,11 +265,11 @@
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
layout: { layout: {
padding: { padding: {
bottom: 32 // kecilkan padding bottom: 32 // kecilkan padding
} }
}, },
plugins: { plugins: {
legend: { legend: {
position: "bottom", position: "bottom",