62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
function updateStats(pageviews, sessions) {
|
|
document.getElementById('total-pageviews').textContent = pageviews.toLocaleString();
|
|
document.getElementById('total-sessions').textContent = sessions.toLocaleString();
|
|
}
|
|
|
|
// Example: How to populate the table
|
|
function updateTable(data) {
|
|
const tbody = document.getElementById('table-body');
|
|
|
|
if (data.length === 0) {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="5" class="empty-state">
|
|
<span class="material-symbols-outlines">inbox</span>
|
|
<div>No data available</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
tbody.innerHTML = data.map(row => `
|
|
<tr>
|
|
<td class="url-cell" title="${row.url}">${row.url}</td>
|
|
<td class="number-cell">${row.pageviews.toLocaleString()}</td>
|
|
<td class="number-cell">${row.uniquePageviews.toLocaleString()}</td>
|
|
<td class="number-cell">${row.sessions.toLocaleString()}</td>
|
|
<td class="number-cell">${row.sessionDuration}</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
// Example usage with sample data (you'll replace this with API calls)
|
|
setTimeout(() => {
|
|
// Update stats
|
|
updateStats(15234, 8456);
|
|
|
|
// Update table
|
|
updateTable([
|
|
{
|
|
url: '/home',
|
|
pageviews: 5234,
|
|
uniquePageviews: 4521,
|
|
sessions: 3456,
|
|
sessionDuration: '3m 24s'
|
|
},
|
|
{
|
|
url: '/about',
|
|
pageviews: 2345,
|
|
uniquePageviews: 2100,
|
|
sessions: 1876,
|
|
sessionDuration: '2m 15s'
|
|
},
|
|
{
|
|
url: '/products',
|
|
pageviews: 1876,
|
|
uniquePageviews: 1654,
|
|
sessions: 1234,
|
|
sessionDuration: '4m 02s'
|
|
}
|
|
]);
|
|
}, 1500);
|