SentimentSpark / script.js
ghostai1's picture
Update script.js
e436ba0 verified
raw
history blame
6.34 kB
document.addEventListener('DOMContentLoaded', () => {
const tableBody = document.getElementById('dataTable');
const sentimentFilter = document.getElementById('sentimentAnalysis');
const pagination = document.getElementById('customPagination');
const itemsPerPage = 10;
let currentPage = 1;
let dataset = [];
fetch('data.csv')
.then(response => response.text())
.then(data => {
const rows = data.trim().split('\n').slice(1);
dataset = rows.map(row => {
const [index, text, label] = row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
return { index: parseInt(index), text: text.replace(/^"|"$/g, ''), label: label.replace(/^"|"$/g, '') };
});
function displayData(filter = 'all', page = 1) {
tableBody.innerHTML = '';
const filteredData = filter === 'all' ? dataset : dataset.filter(item => item.label === filter);
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const paginatedData = filteredData.slice(start, end);
paginatedData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.index}</td>
<td>${item.text}</td>
<td>${item.label}</td>
`;
tableBody.appendChild(row);
});
tableBody.style.opacity = '0';
setTimeout(() => {
tableBody.style.opacity = '1';
tableBody.style.transition = 'opacity 0.3s ease';
}, 50);
updatePagination(filteredData.length, page);
}
function updatePagination(totalItems, page) {
pagination.innerHTML = '';
const totalPages = Math.ceil(totalItems / itemsPerPage);
const maxPagesToShow = 5;
let startPage, endPage;
if (totalPages <= maxPagesToShow) {
startPage = 1;
endPage = totalPages;
} else {
const half = Math.floor(maxPagesToShow / 2);
if (page <= half) {
startPage = 1;
endPage = maxPagesToShow;
} else if (page + half >= totalPages) {
startPage = totalPages - maxPagesToShow + 1;
endPage = totalPages;
} else {
startPage = page - half;
endPage = page + half;
}
}
const prevLi = document.createElement('li');
prevLi.className = `page-item ${page === 1 ? 'disabled' : ''}`;
prevLi.innerHTML = '<a class="page-link" href="#">Previous</a>';
prevLi.addEventListener('click', (e) => {
e.preventDefault();
if (page > 1) displayData(sentimentFilter.value, page - 1);
});
pagination.appendChild(prevLi);
if (startPage > 1) {
const firstLi = document.createElement('li');
firstLi.className = 'page-item';
firstLi.innerHTML = '<a class="page-link" href="#">1</a>';
firstLi.addEventListener('click', (e) => {
e.preventDefault();
displayData(sentimentFilter.value, 1);
});
pagination.appendChild(firstLi);
if (startPage > 2) {
const dotsLi = document.createElement('li');
dotsLi.className = 'page-item disabled';
dotsLi.innerHTML = '<a class="page-link" href="#">...</a>';
pagination.appendChild(dotsLi);
}
}
for (let i = startPage; i <= endPage; i++) {
const li = document.createElement('li');
li.className = `page-item ${i === page ? 'active' : ''}`;
li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
li.addEventListener('click', (e) => {
e.preventDefault();
displayData(sentimentFilter.value, i);
});
pagination.appendChild(li);
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
const dotsLi = document.createElement('li');
dotsLi.className = 'page-item disabled';
dotsLi.innerHTML = '<a class="page-link" href="#">...</a>';
pagination.appendChild(dotsLi);
}
const lastLi = document.createElement('li');
lastLi.className = 'page-item';
lastLi.innerHTML = `<a class="page-link" href="#">${totalPages}</a>`;
lastLi.addEventListener('click', (e) => {
e.preventDefault();
displayData(sentimentFilter.value, totalPages);
});
pagination.appendChild(lastLi);
}
const nextLi = document.createElement('li');
nextLi.className = `page-item ${page === totalPages ? 'disabled' : ''}`;
nextLi.innerHTML = '<a class="page-link" href="#">Next</a>';
nextLi.addEventListener('click', (e) => {
e.preventDefault();
if (page < totalPages) displayData(sentimentFilter.value, page + 1);
});
pagination.appendChild(nextLi);
}
displayData();
sentimentFilter.addEventListener('change', () => {
displayData(sentimentFilter.value, 1);
});
})
.catch(error => {
console.error('Error loading data:', error);
tableBody.innerHTML = '<tr><td colspan="3">Error loading dataset.</td></tr>';
});
});