Skip to content

S
simpmw
Commit 006873c0 by Alfiro Pratama
Options

Fix Chart

parent 6e11c3af
Showing with 49 additions and 18 deletions
resources/views/backend/index.blade.php
...@@ -286,10 +286,10 @@ ...@@ -286,10 +286,10 @@
} }
}); });
// ✅ Simpan data penuh agar bisa difilter nanti // ✅ Simpan data penuh untuk keperluan filter ulang
fullData = data; fullData = data;
// ✅ Tambahkan event klik label fakultas di bawah chart (area sumbu X) // ✅ Event klik label fakultas di bawah chart
canvas.addEventListener('click', function (event) { canvas.addEventListener('click', function (event) {
const chart = window.chartFakultasInstance; const chart = window.chartFakultasInstance;
const xAxis = chart.scales.x; const xAxis = chart.scales.x;
...@@ -298,35 +298,64 @@ ...@@ -298,35 +298,64 @@
const x = event.offsetX; const x = event.offsetX;
const y = event.offsetY; const y = event.offsetY;
// Pastikan klik di area label bawah // Deteksi klik di area label fakultas bawah chart
if (y > yAxis.bottom && y < yAxis.bottom + 30) { if (y > yAxis.bottom && y < yAxis.bottom + 30) {
const labelIndex = Math.floor( const labelIndex = Math.floor(
((x - xAxis.left) / (xAxis.right - xAxis.left)) * chart.data.labels.length ((x - xAxis.left) / (xAxis.right - xAxis.left)) * chart.data.labels.length
); );
const fakultas = Array.isArray(chart.data.labels[labelIndex]) if (labelIndex < 0 || labelIndex >= chart.data.labels.length) return;
// Normalisasi label (gabungkan kalau array)
const clickedLabel = Array.isArray(chart.data.labels[labelIndex])
? chart.data.labels[labelIndex].join(' ') ? chart.data.labels[labelIndex].join(' ')
: chart.data.labels[labelIndex]; : chart.data.labels[labelIndex];
if (!fakultas) return; if (!clickedLabel) return;
// Deteksi apakah chart sedang dalam mode filter (1 fakultas saja)
const currentLabel = chart.data.labels.length === 1
? (Array.isArray(chart.data.labels[0])
? chart.data.labels[0].join(' ')
: chart.data.labels[0])
: null;
// Toggle filter: jika sudah difilter, klik lagi untuk tampilkan semua const isFiltered = currentLabel && currentLabel === clickedLabel;
const isFiltered = chart.data.labels.length === 1 && chart.data.labels[0] === fakultas;
const filtered = isFiltered // 🔁 Jika sedang difilter & diklik lagi → kembalikan ke semua fakultas
? fullData if (isFiltered) {
: fullData.filter(d => chart.data.labels = fullData.map(d =>
(Array.isArray(d.fakultas) ? d.fakultas.join(' ') : d.fakultas) === fakultas d.fakultas.includes('\n') ? d.fakultas.split('\n') : d.fakultas
); );
chart.data.datasets[0].data = fullData.map(d => d.proposal);
chart.data.datasets[1].data = fullData.map(d => d.monev1);
chart.data.datasets[2].data = fullData.map(d => d.monev2);
chart.update();
return;
}
chart.data.labels = filtered.map(d => d.fakultas.includes('\n') ? d.fakultas.split('\n') : d.fakultas); // 🔍 Cari data fakultas yang diklik, meskipun nilainya semua 0
chart.data.datasets[0].data = filtered.map(d => d.proposal); const selected = fullData.find(d => {
chart.data.datasets[1].data = filtered.map(d => d.monev1); const fName = d.fakultas.replace(/\n/g, ' ').trim();
chart.data.datasets[2].data = filtered.map(d => d.monev2); return fName === clickedLabel.trim();
});
if (!selected) return;
// 🧩 Update chart untuk menampilkan hanya fakultas yang diklik
chart.data.labels = [
selected.fakultas.includes('\n') ? selected.fakultas.split('\n') : selected.fakultas
];
chart.data.datasets[0].data = [selected.proposal];
chart.data.datasets[1].data = [selected.monev1];
chart.data.datasets[2].data = [selected.monev2];
chart.update(); chart.update();
} }
}); });
// ==========================
// ✅ TOOLTIP LABEL FAKULTAS
// ==========================
// Sembunyikan spinner, tampilkan chart // Sembunyikan spinner, tampilkan chart
spinner.style.display = 'none'; spinner.style.display = 'none';
...@@ -337,7 +366,6 @@ ...@@ -337,7 +366,6 @@
labelTooltip.style.display = 'none'; labelTooltip.style.display = 'none';
document.body.appendChild(labelTooltip); document.body.appendChild(labelTooltip);
// event listener untuk mendeteksi hover di atas tick label
canvas.addEventListener('mousemove', function (event) { canvas.addEventListener('mousemove', function (event) {
const chart = window.chartFakultasInstance; const chart = window.chartFakultasInstance;
const xAxis = chart.scales.x; const xAxis = chart.scales.x;
...@@ -346,17 +374,20 @@ ...@@ -346,17 +374,20 @@
const x = event.offsetX; const x = event.offsetX;
const y = event.offsetY; const y = event.offsetY;
// Cek apakah posisi mouse berada di area bawah chart (dekat label fakultas) // Hitung index label yang sedang dihover
if (y > yAxis.bottom && y < yAxis.bottom + 30) { if (y > yAxis.bottom && y < yAxis.bottom + 30) {
const labelIndex = Math.floor( const labelIndex = Math.floor(
((x - xAxis.left) / (xAxis.right - xAxis.left)) * chart.data.labels.length ((x - xAxis.left) / (xAxis.right - xAxis.left)) * chart.data.labels.length
); );
const item = data[labelIndex]; // Ambil nama fakultas (gabungkan jika array)
const fakultas = Array.isArray(chart.data.labels[labelIndex]) const fakultas = Array.isArray(chart.data.labels[labelIndex])
? chart.data.labels[labelIndex].join(' ') ? chart.data.labels[labelIndex].join(' ')
: chart.data.labels[labelIndex]; : chart.data.labels[labelIndex];
// 🔍 Cari data fakultas dari fullData (agar tetap muncul meskipun difilter)
const item = fullData.find(d => d.fakultas.replace(/\n/g, ' ').trim() === fakultas.trim());
if (item) { if (item) {
labelTooltip.innerHTML = ` labelTooltip.innerHTML = `
<strong>${fakultas}</strong><br> <strong>${fakultas}</strong><br>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment