Hugging Face's logo

Spaces:
eg-art
/
up_fail
Running

App Files Community
DmitrMakeev commited on
Commit
8aaac40
·
verified ·
1 Parent(s): aeb01a2

Create registrations_period.html

Browse files
Files changed (1) hide show
  1. registrations_period.html +168 -0
registrations_period.html ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Регистрации за период</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ text-align: center;
12
+ background-color: #f0f0f0;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+ h1 {
17
+ background-color: #4CAF50;
18
+ color: white;
19
+ padding: 20px;
20
+ margin: 0;
21
+ border-bottom: 2px solid #388E3C;
22
+ font-size: 28px;
23
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
24
+ }
25
+ button {
26
+ color: white;
27
+ background-color: #4CAF50;
28
+ border: none;
29
+ cursor: pointer;
30
+ padding: 10px 20px;
31
+ font-size: 16px;
32
+ border-radius: 5px;
33
+ margin: 5px;
34
+ transition: background-color 0.3s ease;
35
+ }
36
+ button:hover {
37
+ background-color: #388E3C;
38
+ }
39
+ input[type="date"] {
40
+ padding: 10px;
41
+ font-size: 16px;
42
+ margin: 5px;
43
+ border-radius: 5px;
44
+ border: 1px solid #ccc;
45
+ background-color: #f0f0f0;
46
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
47
+ }
48
+ input[type="date"]:focus {
49
+ border-color: #4CAF50;
50
+ box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
51
+ }
52
+ #chartContainer {
53
+ margin-top: 20px;
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ flex-direction: column;
58
+ max-width: 100%;
59
+ height: auto;
60
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
61
+ border-radius: 10px;
62
+ padding: 20px;
63
+ background-color: white;
64
+ }
65
+ </style>
66
+ </head>
67
+ <body>
68
+ <h1>Регистрации за период</h1>
69
+
70
+ <!-- Поля для выбора периода -->
71
+ <label for="startDate">Начальная дата:</label>
72
+ <input type="date" id="startDate" name="startDate">
73
+
74
+ <label for="endDate">Конечная дата:</label>
75
+ <input type="date" id="endDate" name="endDate">
76
+
77
+ <!-- Кнопка для получения данных -->
78
+ <button onclick="fetchData()">Получить данные</button>
79
+
80
+ <!-- Контейнер для графика -->
81
+ <div id="chartContainer">
82
+ <canvas id="registrationsChart" width="400" height="200"></canvas>
83
+ </div>
84
+
85
+ <script>
86
+ let myChart; // Переменная для хранения графика
87
+
88
+ // Функция для запроса данных и обновления графика
89
+ function fetchData() {
90
+ // Получаем выбранные даты
91
+ const startDate = document.getElementById('startDate').value;
92
+ const endDate = document.getElementById('endDate').value;
93
+
94
+ // Проверяем, что обе даты выбраны
95
+ if (!startDate || !endDate) {
96
+ alert("Пожалуйста, выберите обе даты.");
97
+ return;
98
+ }
99
+
100
+ // Запрос данных с сервера
101
+ fetch(`/registrations_period?start_date=${startDate}&end_date=${endDate}`)
102
+ .then(response => response.json())
103
+ .then(data => {
104
+ // Если график уже существует, уничтожаем его
105
+ if (myChart) {
106
+ myChart.destroy();
107
+ }
108
+
109
+ // Создание нового графика
110
+ const ctx = document.getElementById('registrationsChart').getContext('2d');
111
+ myChart = new Chart(ctx, {
112
+ type: 'bar',
113
+ data: {
114
+ labels: data.labels,
115
+ datasets: [{
116
+ label: 'Количество регистраций',
117
+ data: data.values,
118
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
119
+ borderColor: 'rgba(75, 192, 192, 1)',
120
+ borderWidth: 1
121
+ }]
122
+ },
123
+ options: {
124
+ scales: {
125
+ y: {
126
+ beginAtZero: true,
127
+ grid: {
128
+ color: '#f0f0f0'
129
+ },
130
+ ticks: {
131
+ color: '#333'
132
+ }
133
+ },
134
+ x: {
135
+ grid: {
136
+ color: '#f0f0f0'
137
+ },
138
+ ticks: {
139
+ color: '#333'
140
+ }
141
+ }
142
+ },
143
+ plugins: {
144
+ legend: {
145
+ labels: {
146
+ color: '#333'
147
+ }
148
+ }
149
+ },
150
+ responsive: true,
151
+ maintainAspectRatio: false
152
+ }
153
+ });
154
+ })
155
+ .catch(error => {
156
+ console.error('Ошибка при получении данных:', error);
157
+ });
158
+ }
159
+
160
+ // Устанавливаем сегодняшнюю дату по умолчанию
161
+ window.onload = function() {
162
+ const today = new Date().toISOString().split('T')[0];
163
+ document.getElementById('startDate').value = today;
164
+ document.getElementById('endDate').value = today;
165
+ };
166
+ </script>
167
+ </body>
168
+ </html>