Skip to content

S
simpmw
Commit 006873c0 by Alfiro Pratama
Options

Fix Chart

parent 6e11c3af
Showing with 97 additions and 66 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,98 +298,129 @@ ...@@ -298,98 +298,129 @@
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;
// Toggle filter: jika sudah difilter, klik lagi untuk tampilkan semua // Deteksi apakah chart sedang dalam mode filter (1 fakultas saja)
const isFiltered = chart.data.labels.length === 1 && chart.data.labels[0] === fakultas; const currentLabel = chart.data.labels.length === 1
? (Array.isArray(chart.data.labels[0])
? chart.data.labels[0].join(' ')
: chart.data.labels[0])
: null;
const filtered = isFiltered const isFiltered = currentLabel && currentLabel === clickedLabel;
? fullData
: fullData.filter(d => // 🔁 Jika sedang difilter & diklik lagi → kembalikan ke semua fakultas
(Array.isArray(d.fakultas) ? d.fakultas.join(' ') : d.fakultas) === 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); // 🔍 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';
canvas.style.display = 'block'; canvas.style.display = 'block';
let labelTooltip = document.createElement('div'); let labelTooltip = document.createElement('div');
labelTooltip.className = 'tooltip-fakultas shadow'; labelTooltip.className = 'tooltip-fakultas shadow';
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; const yAxis = chart.scales.y;
const yAxis = chart.scales.y;
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];
if (item) {
labelTooltip.innerHTML = `
<strong>${fakultas}</strong><br>
<div class="d-flex align-items-center mt-1">
<div style="width:12px; height:12px; background-color:rgba(54, 162, 235, 0.8); margin-right:6px; border-radius:2px;"></div>
Proposal: ${item.proposal}
</div>
<div class="d-flex align-items-center mt-1">
<div style="width:12px; height:12px; background-color:rgba(255, 206, 86, 0.8); margin-right:6px; border-radius:2px;"></div>
Monev I: ${item.monev1}
</div>
<div class="d-flex align-items-center mt-1">
<div style="width:12px; height:12px; background-color:rgba(255, 99, 132, 0.8); margin-right:6px; border-radius:2px;"></div>
Monev II: ${item.monev2}
</div>
`;
labelTooltip.style.display = 'block';
labelTooltip.style.left = `${event.pageX + 10}px`;
labelTooltip.style.top = `${event.pageY - labelTooltip.offsetHeight - 10}px`;
canvas.style.cursor = 'pointer';
}
} else {
labelTooltip.style.display = 'none';
canvas.style.cursor = 'default';
}
});
canvas.addEventListener('mouseleave', function () { // 🔍 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>
<div class="d-flex align-items-center mt-1">
<div style="width:12px; height:12px; background-color:rgba(54, 162, 235, 0.8); margin-right:6px; border-radius:2px;"></div>
Proposal: ${item.proposal}
</div>
<div class="d-flex align-items-center mt-1">
<div style="width:12px; height:12px; background-color:rgba(255, 206, 86, 0.8); margin-right:6px; border-radius:2px;"></div>
Monev I: ${item.monev1}
</div>
<div class="d-flex align-items-center mt-1">
<div style="width:12px; height:12px; background-color:rgba(255, 99, 132, 0.8); margin-right:6px; border-radius:2px;"></div>
Monev II: ${item.monev2}
</div>
`;
labelTooltip.style.display = 'block';
labelTooltip.style.left = `${event.pageX + 10}px`;
labelTooltip.style.top = `${event.pageY - labelTooltip.offsetHeight - 10}px`;
canvas.style.cursor = 'pointer';
}
} else {
labelTooltip.style.display = 'none'; labelTooltip.style.display = 'none';
canvas.style.cursor = 'default'; canvas.style.cursor = 'default';
}); }
});
canvas.addEventListener('mouseleave', function () {
labelTooltip.style.display = 'none';
canvas.style.cursor = 'default';
});
} catch (error) { } catch (error) {
console.error('Gagal memuat chart:', error); console.error('Gagal memuat chart:', error);
......
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