| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <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> |
| | <style> |
| | body { |
| | font-family: Arial, sans-serif; |
| | text-align: center; |
| | background-color: #f0f0f0; |
| | margin: 0; |
| | padding: 0; |
| | } |
| | h1 { |
| | background-color: #4CAF50; |
| | color: white; |
| | padding: 20px; |
| | margin: 0; |
| | border-bottom: 2px solid #388E3C; |
| | font-size: 28px; |
| | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); |
| | } |
| | button { |
| | color: white; |
| | background-color: #4CAF50; |
| | border: none; |
| | cursor: pointer; |
| | padding: 10px 20px; |
| | font-size: 16px; |
| | border-radius: 5px; |
| | margin: 5px; |
| | transition: background-color 0.3s ease; |
| | } |
| | button:hover { |
| | background-color: #388E3C; |
| | } |
| | #datePicker { |
| | padding: 10px; |
| | font-size: 16px; |
| | margin: 5px; |
| | border-radius: 5px; |
| | border: 1px solid #ccc; |
| | background-color: #f0f0f0; |
| | transition: border-color 0.3s ease, box-shadow 0.3s ease; |
| | } |
| | #datePicker:focus { |
| | border-color: #4CAF50; |
| | box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); |
| | } |
| | #chartContainer { |
| | margin-top: 20px; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | flex-direction: column; |
| | max-width: 100%; |
| | height: auto; |
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| | border-radius: 10px; |
| | padding: 20px; |
| | background-color: white; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <h1>Регистрации за день по UTM-меткам</h1> |
| | |
| | |
| | <label for="datePicker">Выберите дату:</label> |
| | <input type="date" id="datePicker" name="datePicker"> |
| | |
| | |
| | <button onclick="fetchData()">Получить данные</button> |
| | |
| | |
| | <div id="chartContainer"> |
| | <canvas id="registrationsChart" width="400" height="200"></canvas> |
| | </div> |
| |
|
| | <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, |
| | grid: { |
| | color: '#f0f0f0' |
| | }, |
| | ticks: { |
| | color: '#333' |
| | } |
| | }, |
| | x: { |
| | grid: { |
| | color: '#f0f0f0' |
| | }, |
| | ticks: { |
| | color: '#333' |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | labels: { |
| | color: '#333' |
| | } |
| | } |
| | }, |
| | responsive: true, |
| | maintainAspectRatio: false |
| | } |
| | }); |
| | }) |
| | .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> |
