File size: 8,270 Bytes
8aaac40 a697bf4 8aaac40 11a7664 8aaac40 11a7664 8aaac40 474ab08 8aaac40 6122293 8aaac40 11a7664 8aaac40 6122293 8aaac40 11a7664 8aaac40 11a7664 8aaac40 474ab08 8aaac40 474ab08 8aaac40 11a7664 8aaac40 11a7664 6122293 8aaac40 6122293 8aaac40 11a7664 8aaac40 6122293 474ab08 41a3d85 6122293 474ab08 8aaac40 41a3d85 8aaac40 a697bf4 8aaac40 fae3925 6122293 fae3925 6122293 fae3925 8aaac40 |
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 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
<!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;
}
input[type="date"], select {
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;
}
input[type="date"]:focus, select: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;
}
#totalRegistrations {
margin: 20px 0;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>GreenBuilderGRM UTM-метрики</h1>
<!-- Отображение общего количества регистраций -->
<div id="totalRegistrations">
<strong>Общее количество регистраций за период:</strong> <span id="totalCount">0</span>
</div>
<!-- Поля для выбора периода -->
<label for="startDate">Начальная дата:</label>
<input type="date" id="startDate" name="startDate">
<label for="endDate">Конечная дата:</label>
<input type="date" id="endDate" name="endDate">
<!-- Выпадающий список для выбора типа UTM-метки -->
<label for="utmType">Тип UTM-метки:</label>
<select id="utmType" name="utmType">
<option value="utm_source">utm_source</option>
<option value="utm_medium">utm_medium</option>
<option value="utm_campaign">utm_campaign</option>
<option value="utm_content">utm_content</option>
<option value="utm_term">utm_term</option>
</select>
<!-- Кнопка для получения данных -->
<button onclick="fetchData()">Обновить данные</button>
<!-- Контейнер для графика -->
<div id="chartContainer">
<canvas id="registrationsChart" width="400" height="200"></canvas>
</div>
<script>
let myChart; // Переменная для хранения графика
// Функция для запроса данных и обновления графика
function fetchData() {
// Получаем выбранные даты и тип UTM-метки
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const utmType = document.getElementById('utmType').value;
// Проверяем, что обе даты выбраны
if (!startDate || !endDate) {
alert("Пожалуйста, выберите обе даты.");
return;
}
// Запрос данных с сервера
fetch(`/registrations_period?start_date=${startDate}&end_date=${endDate}&utm_type=${utmType}`)
.then(response => response.json())
.then(data => {
// Обновляем общее количество регистраций
document.getElementById('totalCount').textContent = data.total_count;
// Если график уже существует, уничтожаем его
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();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // Месяцы начинаются с 0
const day = String(today.getDate()).padStart(2, '0');
const todayFormatted = `${year}-${month}-${day}`; // Формат YYYY-MM-DD
// Устанавливаем даты в поля ввода
document.getElementById('startDate').value = todayFormatted;
document.getElementById('endDate').value = todayFormatted;
// Загружаем данные за сегодня
fetchData();
};
</script>
</body>
</html> |