up_fail

Running

App Files Files Community

DmitrMakeev commited on Jan 23

Commit

5291b83

verified ·

1 Parent(s): 23c27d4

Update registrations.html

Browse files

Files changed (1) hide show

registrations.html +59 -26

registrations.html CHANGED Viewed

@@ -3,40 +3,73 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Регистрации за сегодня</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-    <h1>Регистрации за сегодня по UTM-меткам</h1>
     <canvas id="registrationsChart" width="400" height="200"></canvas>
     <script>
-        // Запрос данных с сервера
-        fetch('/registrations_today')
-            .then(response => response.json())
-            .then(data => {
-                // Создание графика
-                const ctx = document.getElementById('registrationsChart').getContext('2d');
-                new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: data.labels,
-                        datasets: [{
-                            label: 'Количество регистраций',
-                            data: data.values,
-                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                            borderColor: 'rgba(75, 192, 192, 1)',
-                            borderWidth: 1
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            y: {
-                                beginAtZero: true
                             }
                         }
-                    }
                 });
-            });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Регистрации по UTM-меткам</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
+    <h1>Регистрации по UTM-меткам</h1>
+    <!-- Поле для выбора даты -->
+    <label for="datePicker">Выберите дату:</label>
+    <input type="date" id="datePicker" name="datePicker">
+    <!-- Кнопка для получения данных -->
+    <button onclick="fetchData()">Получить данные</button>
+    <!-- Контейнер для графика -->
     <canvas id="registrationsChart" width="400" height="200"></canvas>
     <script>
+        let myChart; // Переменная для хранения графика
+        // Функция для запроса данных и обновления графика
+        function fetchData() {
+            // Получаем выбранную дату
+            const selectedDate = document.getElementById('datePicker').value;
+            // Запрос данных с сервера
+            fetch(`/registrations_today?date=${selectedDate}`)
+                .then(response => response.json())
+                .then(data => {
+                    // Если график уже существует, уничтожаем его
+                    if (myChart) {
+                        myChart.destroy();
+                    }
+                    // Создание нового графика
+                    const ctx = document.getElementById('registrationsChart').getContext('2d');
+                    myChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: data.labels,
+                            datasets: [{
+                                label: 'Количество регистраций',
+                                data: data.values,
+                                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                                borderColor: 'rgba(75, 192, 192, 1)',
+                                borderWidth: 1
+                            }]
+                        },
+                        options: {
+                            scales: {
+                                y: {
+                                    beginAtZero: true
+                                }
                             }
                         }
+                    });
+                })
+                .catch(error => {
+                    console.error('Ошибка при получении данных:', error);
                 });
+        }
+        // Устанавливаем сегодняшнюю дату по умолчанию
+        window.onload = function() {
+            const today = new Date().toISOString().split('T')[0];
+            document.getElementById('datePicker').value = today;
+            fetchData(); // Автоматически загружаем данные за сегодня
+        };
     </script>
 </body>
 </html>