<!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>