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 @@
}
});
// ✅ Simpan data penuh agar bisa difilter nanti
// ✅ Simpan data penuh untuk keperluan filter ulang
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) {
const chart = window.chartFakultasInstance;
const xAxis = chart.scales.x;
......@@ -298,35 +298,64 @@
const x = event.offsetX;
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) {
const labelIndex = Math.floor(
((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];
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 = chart.data.labels.length === 1 && chart.data.labels[0] === fakultas;
const isFiltered = currentLabel && currentLabel === clickedLabel;
const filtered = isFiltered
? fullData
: fullData.filter(d =>
(Array.isArray(d.fakultas) ? d.fakultas.join(' ') : d.fakultas) === fakultas
// 🔁 Jika sedang difilter & diklik lagi → kembalikan ke semua fakultas
if (isFiltered) {
chart.data.labels = fullData.map(d =>
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);
chart.data.datasets[0].data = filtered.map(d => d.proposal);
chart.data.datasets[1].data = filtered.map(d => d.monev1);
chart.data.datasets[2].data = filtered.map(d => d.monev2);
// 🔍 Cari data fakultas yang diklik, meskipun nilainya semua 0
const selected = fullData.find(d => {
const fName = d.fakultas.replace(/\n/g, ' ').trim();
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();
}
});
// ==========================
// ✅ TOOLTIP LABEL FAKULTAS
// ==========================
// Sembunyikan spinner, tampilkan chart
spinner.style.display = 'none';
......@@ -337,7 +366,6 @@
labelTooltip.style.display = 'none';
document.body.appendChild(labelTooltip);
// event listener untuk mendeteksi hover di atas tick label
canvas.addEventListener('mousemove', function (event) {
const chart = window.chartFakultasInstance;
const xAxis = chart.scales.x;
......@@ -346,17 +374,20 @@
const x = event.offsetX;
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) {
const labelIndex = Math.floor(
((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])
? chart.data.labels[labelIndex].join(' ')
: 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) {
labelTooltip.innerHTML = `
<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