-
Notifications
You must be signed in to change notification settings - Fork 0
/
idea_stats.html
115 lines (109 loc) · 3.96 KB
/
idea_stats.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Статистика кликов "Вдохновить меня"</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
}
#stats-container {
background-color: #f7f7f7;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}
.stat-item {
margin-bottom: 10px;
}
.chart-container {
margin-top: 30px;
}
</style>
</head>
<body>
<h1>Статистика кликов "Вдохновить меня"</h1>
<div id="stats-container">
<p>Загрузка данных...</p>
</div>
<div class="chart-container">
<canvas id="clicksChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
async function fetchARClickStats() {
try {
const response = await fetch('https://wo-server-v1.onrender.com/ar-clicks-stats');
const data = await response.json();
console.log('AR Click Stats:', data);
displayStats(data);
createChart(data.last7DaysClicks);
} catch (error) {
console.error('Error fetching AR click stats:', error);
document.getElementById('stats-container').innerHTML = '<p>Ошибка при загрузке данных. Пожалуйста, попробуйте позже.</p>';
}
}
function displayStats(data) {
const statsContainer = document.getElementById('stats-container');
statsContainer.innerHTML = `
<div class="stat-item"><strong>Всего кликов:</strong> ${data.totalClicks}</div>
<h3>Клики за последние 7 дней:</h3>
<ul>
${Object.entries(data.last7DaysClicks).map(([date, clicks]) =>
`<li>${formatDate(date)}: ${clicks} клик(ов)</li>`
).join('')}
</ul>
`;
}
function createChart(last7DaysData) {
const ctx = document.getElementById('clicksChart').getContext('2d');
const labels = Object.keys(last7DaysData).map(formatDate);
const values = Object.values(last7DaysData);
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Количество кликов',
data: values,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Количество кликов'
}
},
x: {
title: {
display: true,
text: 'Дата'
}
}
}
}
});
}
function formatDate(dateString) {
const options = { day: 'numeric', month: 'short' };
return new Date(dateString).toLocaleDateString('ru-RU', options);
}
document.addEventListener('DOMContentLoaded', fetchARClickStats);
</script>
</body>
</html>