Skip to content

Commit 22f4881

Browse files
Timofeq1Timofeq1
committed
Add more data presentation
1 parent 258c615 commit 22f4881

2 files changed

Lines changed: 92 additions & 20 deletions

File tree

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
<body>
1010
<div class="container">
1111
<h1>CookieLess Analytics</h1>
12-
<button id="showStats">Show Statistics</button>
12+
<div id="loading">Loading statistics...</div>
1313
<div id="analytics-data" class="stats-container"></div>
1414
</div>
1515
<script src="script.js"></script>
1616
</body>
17-
</html>
17+
</html>

‎docs/script.js‎

Lines changed: 90 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,124 @@
1-
// data collection code
1+
// Data collection code
22
async function logData() {
33
const data = {
44
fingerprint: await getFingerprint(),
55
screen: `${screen.width}x${screen.height}`,
66
userAgent: navigator.userAgent
77
};
88

9-
fetch('https://147.45.139.11:7881/post', {
10-
method: 'POST',
11-
headers: { 'Content-Type': 'application/json' },
12-
body: JSON.stringify(data)
13-
});
9+
try {
10+
await fetch('https://147.45.139.11:7881/post', {
11+
method: 'POST',
12+
headers: { 'Content-Type': 'application/json' },
13+
body: JSON.stringify(data)
14+
});
15+
// After successful POST, fetch stats
16+
fetchStats();
17+
} catch (error) {
18+
console.error('Error sending data:', error);
19+
displayError('Failed to send analytics data');
20+
}
1421
}
1522

16-
// stats fetching functionality
17-
document.getElementById('showStats').addEventListener('click', fetchStats);
18-
23+
// Auto-fetch stats on page load
1924
async function fetchStats() {
2025
try {
2126
const response = await fetch('https://147.45.139.11:7881/get');
2227
const data = await response.json();
28+
document.getElementById('loading').remove();
2329
displayStats(data);
2430
} catch (error) {
2531
console.error('Error fetching stats:', error);
26-
displayError();
32+
displayError('Failed to load statistics. Please try again later.');
2733
}
2834
}
2935

3036
function displayStats(stats) {
3137
const container = document.getElementById('analytics-data');
3238
container.innerHTML = `
33-
<h2>Some Statistics</h2>
39+
<h2>Real-time Statistics</h2>
40+
${createStatsSection('General Statistics', stats)}
41+
${createPeriodStats(stats.periodStats)}
42+
${createTimeSeriesTable('Daily Statistics', stats.dailyStats)}
43+
${createTimeSeriesTable('Monthly Statistics', stats.monthlyStats)}
44+
`;
45+
}
46+
47+
function createStatsSection(title, data) {
48+
return `
49+
<div class="stats-section">
50+
<h3>${title}</h3>
51+
<div class="stats-grid">
52+
${createStatItem('Total Visitors', data.totalVisitors)}
53+
${createStatItem('Unique Visitors', data.uniqueVisitors)}
54+
</div>
55+
</div>
56+
`;
57+
}
58+
59+
function createPeriodStats(periodStats) {
60+
return `
61+
<div class="stats-section">
62+
<h3>Period Statistics</h3>
63+
<div class="stats-grid">
64+
${Object.entries(periodStats).map(([period, stats]) => `
65+
<div class="period-group">
66+
<h4>${period.replace('_', ' ').toUpperCase()}</h4>
67+
${createStatItem('Total', stats.total)}
68+
${createStatItem('Unique', stats.unique)}
69+
</div>
70+
`).join('')}
71+
</div>
72+
</div>
73+
`;
74+
}
75+
76+
function createTimeSeriesTable(title, data) {
77+
if (!data || data.length === 0) return '';
78+
79+
return `
80+
<div class="stats-section">
81+
<h3>${title}</h3>
82+
<table>
83+
<thead>
84+
<tr>
85+
<th>Date</th>
86+
<th>Total</th>
87+
<th>Unique</th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
${data.map(entry => `
92+
<tr>
93+
<td>${entry.date || entry.month}</td>
94+
<td>${entry.total}</td>
95+
<td>${entry.unique}</td>
96+
</tr>
97+
`).join('')}
98+
</tbody>
99+
</table>
100+
</div>
101+
`;
102+
}
103+
104+
function createStatItem(label, value) {
105+
return `
34106
<div class="stat-item">
35-
<span class="stat-value">${stats.stringify()}</span>
107+
<span class="stat-label">${label}:</span>
108+
<span class="stat-value">${value}</span>
36109
</div>
37-
<!-- Add more stats as needed -->
38110
`;
39111
}
40112

41-
function displayError() {
113+
function displayError(message) {
42114
const container = document.getElementById('analytics-data');
43-
container.innerHTML = '<p class="error">Failed to load statistics. Please try again later.</p>';
115+
container.innerHTML = `<p class="error">${message}</p>`;
44116
}
45117

46-
// Fingerprint and initialization
118+
// Fingerprint generation
47119
async function getFingerprint() {
48120
return 'anon-' + Math.random().toString(36).substr(2, 9);
49121
}
50122

51-
// Initialize data collection
52-
logData();
123+
// Initialize data collection and stats loading
124+
logData();

0 commit comments

Comments
 (0)