482 lines
17 KiB
JavaScript
482 lines
17 KiB
JavaScript
// Empty data initially - will be populated from uploaded files
|
|
let sentimentData = [];
|
|
|
|
let filteredData = [...sentimentData];
|
|
let currentPage = 1;
|
|
let itemsPerPage = 10;
|
|
|
|
// Initialize charts
|
|
let sentimentChart;
|
|
function initCharts() {
|
|
const ctx = document.getElementById("sentimentChart").getContext("2d");
|
|
sentimentChart = new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Sentimen Positif", "Sentimen Negatif"],
|
|
datasets: [
|
|
{
|
|
label: "Jumlah Data",
|
|
data: [0, 0],
|
|
backgroundColor: [
|
|
"rgba(16, 185, 129, 0.8)",
|
|
"rgba(239, 68, 68, 0.8)",
|
|
],
|
|
borderColor: ["rgb(16, 185, 129)", "rgb(239, 68, 68)"],
|
|
borderWidth: 2,
|
|
borderRadius: 8,
|
|
borderSkipped: false,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: "rgba(0, 0, 0, 0.1)",
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 12,
|
|
weight: "bold",
|
|
},
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 12,
|
|
weight: "bold",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
animation: {
|
|
duration: 2000,
|
|
easing: "easeOutBounce",
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
// Character counter for textarea
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const textInput = document.getElementById("textInput");
|
|
const charCount = document.getElementById("charCount");
|
|
|
|
textInput.addEventListener("input", function () {
|
|
const count = this.value.length;
|
|
charCount.textContent = `${count} karakter`;
|
|
|
|
if (count > 500) {
|
|
charCount.classList.add("text-red-500");
|
|
charCount.classList.remove("text-gray-500");
|
|
} else {
|
|
charCount.classList.add("text-gray-500");
|
|
charCount.classList.remove("text-red-500");
|
|
}
|
|
});
|
|
});
|
|
|
|
// Enhanced predict sentiment function
|
|
async function predictSentiment() {
|
|
const text = document.getElementById("textInput").value.trim();
|
|
if (!text) {
|
|
showNotification("Silakan masukkan teks untuk dianalisis", "warning");
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
document.getElementById("predictionResult").innerHTML = `
|
|
<div class="text-center">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
|
|
<p class="text-gray-600 font-medium">Menganalisis sentimen...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// Panggil Flask API untuk prediksi
|
|
const response = await fetch("/predict", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ text }),
|
|
});
|
|
const result = await response.json();
|
|
|
|
let sentiment = result.label || "Netral";
|
|
let gradientClass, iconClass;
|
|
let confidence = Math.random() * 20 + 80; // Dummy confidence, bisa diupdate jika API mengirimkan
|
|
|
|
if (sentiment === "Positif") {
|
|
gradientClass = "from-green-400 to-emerald-600";
|
|
iconClass = "fas fa-smile";
|
|
} else if (sentiment === "Negatif") {
|
|
gradientClass = "from-red-400 to-pink-600";
|
|
iconClass = "fas fa-frown";
|
|
} else {
|
|
gradientClass = "from-yellow-400 to-orange-500";
|
|
iconClass = "fas fa-meh";
|
|
}
|
|
|
|
document.getElementById("predictionResult").innerHTML = `
|
|
<div class="text-center animate-fade-in">
|
|
<div class="mb-6">
|
|
<div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-r ${gradientClass} flex items-center justify-center text-white text-2xl mb-4">
|
|
<i class="${iconClass}"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800 mb-2">
|
|
${sentiment}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
document.getElementById("predictionResult").innerHTML = `
|
|
<div class="text-center text-red-600 font-semibold">
|
|
Terjadi kesalahan saat memproses prediksi.
|
|
</div>
|
|
`;
|
|
showNotification(
|
|
"Gagal memprediksi sentimen. Pastikan server Flask berjalan.",
|
|
"error"
|
|
);
|
|
}
|
|
}
|
|
|
|
// Search functionality
|
|
function searchTable() {
|
|
const searchTerm = document
|
|
.getElementById("searchInput")
|
|
.value.toLowerCase();
|
|
const sentimentFilter =
|
|
document.getElementById("sentimentFilter").value;
|
|
|
|
filteredData = sentimentData.filter((item) => {
|
|
const matchesSearch =
|
|
item.text.toLowerCase().includes(searchTerm) ||
|
|
item.sentiment.toLowerCase().includes(searchTerm);
|
|
const matchesFilter =
|
|
!sentimentFilter || item.sentiment === sentimentFilter;
|
|
return matchesSearch && matchesFilter;
|
|
});
|
|
|
|
currentPage = 1;
|
|
updateTable();
|
|
updatePagination();
|
|
}
|
|
|
|
// Filter functionality
|
|
function filterTable() {
|
|
searchTable(); // Reuse search logic
|
|
}
|
|
|
|
// Change items per page
|
|
function changeItemsPerPage() {
|
|
itemsPerPage = parseInt(document.getElementById("itemsPerPage").value);
|
|
currentPage = 1;
|
|
updateTable();
|
|
updatePagination();
|
|
}
|
|
|
|
// Pagination functions
|
|
function changePage(direction) {
|
|
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
|
const newPage = currentPage + direction;
|
|
|
|
if (newPage >= 1 && newPage <= totalPages) {
|
|
currentPage = newPage;
|
|
updateTable();
|
|
updatePagination();
|
|
}
|
|
}
|
|
|
|
function goToPage(page) {
|
|
currentPage = page;
|
|
updateTable();
|
|
updatePagination();
|
|
}
|
|
|
|
// Enhanced update table function
|
|
function updateTable() {
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const pageData = filteredData.slice(startIndex, endIndex);
|
|
|
|
const tableBody = document.getElementById("dataTable");
|
|
tableBody.innerHTML = pageData
|
|
.map(
|
|
(item, index) => `
|
|
<tr class="table-row">
|
|
<td class="px-8 py-6 whitespace-nowrap text-sm font-semibold text-gray-900">${
|
|
startIndex + index + 1
|
|
}</td>
|
|
<td class="px-8 py-6 text-sm text-gray-700 max-w-md break-words">
|
|
<div title="${item.text}">${item.text}</div>
|
|
</td>
|
|
<td class="px-8 py-6 whitespace-nowrap">
|
|
<span class="px-4 py-2 inline-flex text-sm font-bold rounded-full ${
|
|
item.sentiment === "Positif"
|
|
? "bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 border border-green-200"
|
|
: "bg-gradient-to-r from-red-100 to-pink-100 text-red-800 border-red-200"
|
|
}">
|
|
<i class="fas ${
|
|
item.sentiment === "Positif" ? "fa-smile" : "fa-frown"
|
|
} mr-2"></i>
|
|
${item.sentiment}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
`
|
|
)
|
|
.join("");
|
|
|
|
// Update showing info
|
|
const showingStart = filteredData.length === 0 ? 0 : startIndex + 1;
|
|
const showingEnd = Math.min(endIndex, filteredData.length);
|
|
document.getElementById("showingStart").textContent = showingStart;
|
|
document.getElementById("showingEnd").textContent = showingEnd;
|
|
document.getElementById("totalItems").textContent = filteredData.length;
|
|
}
|
|
|
|
// Update pagination
|
|
function updatePagination() {
|
|
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
|
|
const pageNumbers = document.getElementById("pageNumbers");
|
|
|
|
// Update prev/next buttons
|
|
document.getElementById("prevBtn").disabled = currentPage === 1;
|
|
document.getElementById("nextBtn").disabled =
|
|
currentPage === totalPages || totalPages === 0;
|
|
|
|
// Generate page numbers
|
|
let paginationHTML = "";
|
|
const maxVisiblePages = 5;
|
|
let startPage = Math.max(
|
|
1,
|
|
currentPage - Math.floor(maxVisiblePages / 2)
|
|
);
|
|
let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
|
|
|
if (endPage - startPage + 1 < maxVisiblePages) {
|
|
startPage = Math.max(1, endPage - maxVisiblePages + 1);
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
paginationHTML += `
|
|
<button
|
|
onclick="goToPage(${i})"
|
|
class="pagination-btn px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
|
|
i === currentPage
|
|
? "bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg"
|
|
: "bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600"
|
|
}"
|
|
>
|
|
${i}
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
pageNumbers.innerHTML = paginationHTML;
|
|
}
|
|
|
|
// Enhanced file upload
|
|
function handleFileUpload(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
showNotification("Mengupload file...", "info");
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
try {
|
|
const data = new Uint8Array(e.target.result);
|
|
const workbook = XLSX.read(data, { type: "array" });
|
|
const sheetName = workbook.SheetNames[0];
|
|
const worksheet = workbook.Sheets[sheetName];
|
|
const jsonData = XLSX.utils.sheet_to_json(worksheet);
|
|
|
|
sentimentData = jsonData.map((row, index) => ({
|
|
text:
|
|
row.Teks || row.Text || row.teks || `Sample text ${index + 1}`,
|
|
sentiment:
|
|
row.Sentimen ||
|
|
row.Sentiment ||
|
|
(Math.random() > 0.5 ? "Positif" : "Negatif"),
|
|
}));
|
|
|
|
filteredData = [...sentimentData];
|
|
currentPage = 1;
|
|
updateTable();
|
|
updatePagination();
|
|
updateStats();
|
|
showNotification(
|
|
`Berhasil mengimport ${sentimentData.length} data dari Excel!`,
|
|
"success"
|
|
);
|
|
} catch (error) {
|
|
showNotification(
|
|
"Error membaca file Excel. Pastikan format file benar.",
|
|
"error"
|
|
);
|
|
}
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
}
|
|
|
|
// Enhanced export function
|
|
function exportToExcel() {
|
|
const ws = XLSX.utils.json_to_sheet(
|
|
filteredData.map((item, index) => ({
|
|
No: index + 1,
|
|
Teks: item.text,
|
|
Sentimen: item.sentiment,
|
|
}))
|
|
);
|
|
|
|
const wb = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(wb, ws, "Data Sentimen");
|
|
XLSX.writeFile(
|
|
wb,
|
|
`analisis_sentimen_${new Date().toISOString().split("T")[0]}.xlsx`
|
|
);
|
|
showNotification("Data berhasil diexport ke Excel!", "success");
|
|
}
|
|
|
|
// Update stats and chart
|
|
function updateStats() {
|
|
const total = sentimentData.length;
|
|
const positive = sentimentData.filter(
|
|
(item) => item.sentiment === "Positif"
|
|
).length;
|
|
const negative = total - positive;
|
|
const accuracy = 76; // Static accuracy
|
|
|
|
// Calculate percentages
|
|
const positivePercent =
|
|
total > 0 ? Math.round((positive / total) * 100) : 0;
|
|
const negativePercent =
|
|
total > 0 ? Math.round((negative / total) * 100) : 0;
|
|
|
|
// Update stats cards
|
|
document.getElementById("totalComments").textContent =
|
|
total.toLocaleString();
|
|
document.getElementById("positiveCount").textContent =
|
|
positive.toLocaleString();
|
|
document.getElementById("negativeCount").textContent =
|
|
negative.toLocaleString();
|
|
document.getElementById("accuracy").textContent = accuracy + "%";
|
|
|
|
// Update percentage text in cards
|
|
document.getElementById("positivePercent").textContent =
|
|
positivePercent + "% dari total";
|
|
document.getElementById("negativePercent").textContent =
|
|
negativePercent + "% dari total";
|
|
|
|
// Update progress bars
|
|
document.getElementById("positiveProgress").style.width =
|
|
positivePercent + "%";
|
|
document.getElementById("negativeProgress").style.width =
|
|
negativePercent + "%";
|
|
|
|
// Update chart
|
|
if (sentimentChart) {
|
|
sentimentChart.data.datasets[0].data = [positive, negative];
|
|
sentimentChart.update();
|
|
}
|
|
|
|
// Update percentage displays in chart section
|
|
document.querySelector(
|
|
".grid.grid-cols-2.gap-4.mt-6 .text-center:first-child .text-2xl"
|
|
).textContent = positivePercent + "%";
|
|
document.querySelector(
|
|
".grid.grid-cols-2.gap-4.mt-6 .text-center:last-child .text-2xl"
|
|
).textContent = negativePercent + "%";
|
|
}
|
|
|
|
// Notification system
|
|
function showNotification(message, type = "info") {
|
|
const notification = document.createElement("div");
|
|
const bgColor = {
|
|
success: "bg-green-500",
|
|
error: "bg-red-500",
|
|
warning: "bg-yellow-500",
|
|
info: "bg-blue-500",
|
|
}[type];
|
|
|
|
notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-4 rounded-xl shadow-lg z-50 transform translate-x-full transition-transform duration-300`;
|
|
notification.innerHTML = `
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas ${
|
|
type === "success"
|
|
? "fa-check-circle"
|
|
: type === "error"
|
|
? "fa-exclamation-circle"
|
|
: type === "warning"
|
|
? "fa-exclamation-triangle"
|
|
: "fa-info-circle"
|
|
}"></i>
|
|
<span class="font-medium">${message}</span>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.classList.remove("translate-x-full");
|
|
}, 100);
|
|
|
|
setTimeout(() => {
|
|
notification.classList.add("translate-x-full");
|
|
setTimeout(() => {
|
|
document.body.removeChild(notification);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// Tab switching functionality
|
|
function switchTab(tabName) {
|
|
// Hide all tab contents
|
|
document.getElementById("predictionContent").classList.add("hidden");
|
|
document.getElementById("dataContent").classList.add("hidden");
|
|
|
|
// Reset all tab buttons
|
|
document.getElementById("predictionTab").className =
|
|
"tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 text-gray-600 hover:text-gray-800";
|
|
document.getElementById("dataTab").className =
|
|
"tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 text-gray-600 hover:text-gray-800";
|
|
|
|
// Show selected tab content and activate button
|
|
if (tabName === "prediction") {
|
|
document
|
|
.getElementById("predictionContent")
|
|
.classList.remove("hidden");
|
|
document.getElementById("predictionTab").className =
|
|
"tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg";
|
|
document.getElementById("dataActions").classList.add("hidden");
|
|
} else if (tabName === "data") {
|
|
document.getElementById("dataContent").classList.remove("hidden");
|
|
document.getElementById("dataTab").className =
|
|
"tab-btn px-6 py-3 rounded-xl font-semibold transition-all duration-300 bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg";
|
|
document.getElementById("dataActions").classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
initCharts();
|
|
updateTable();
|
|
updatePagination();
|
|
updateStats();
|
|
}); |