File size: 5,966 Bytes
23c27d4 5291b83 23c27d4 aeb01a2 23c27d4 952ba79 5291b83 aeb01a2 5291b83 23c27d4 5291b83 aeb01a2 5291b83 aeb01a2 23c27d4 5291b83 23c27d4 5291b83 23c27d4 |
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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<!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> |