Hugging Face's logo

Spaces:
pankoteikin
/
shahed-tracker
Running

App Files Community
shahed-tracker / index.html
pankoteikin's picture
pankoteikin
undefined - Initial Deployment
5c842a5 verified
raw
history blame contribute delete
34.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Russian Attacks on Ukraine – Daily Tracker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/date-fns.min.js"></script>
<style>
.map-container {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none" stroke="%23374151" stroke-width="2"><path d="M200,100 L300,150 L400,120 L500,180 L600,150 L700,200 L650,300 L550,350 L450,300 L350,250 L250,300 L200,250 Z"/><path d="M300,400 L400,350 L500,400 L600,350 L650,450 L550,500 L450,450 L350,500 L300,450 Z"/></svg>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.dark .map-container {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none" stroke="%23E5E7EB" stroke-width="2"><path d="M200,100 L300,150 L400,120 L500,180 L600,150 L700,200 L650,300 L550,350 L450,300 L350,250 L250,300 L200,250 Z"/><path d="M300,400 L400,350 L500,400 L600,350 L650,450 L550,500 L450,450 L350,500 L300,450 Z"/></svg>');
}
.marker {
position: absolute;
width: 12px;
height: 12px;
background-color: #EF4444;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.marker::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #EF4444;
border-radius: 50%;
opacity: 0.4;
top: -4px;
left: -4px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.4; }
70% { transform: scale(1.3); opacity: 0.1; }
100% { transform: scale(0.8); opacity: 0.4; }
}
.chart-container {
position: relative;
height: 300px;
}
@media (min-width: 1024px) {
.chart-container {
height: 350px;
}
}
</style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
<div class="min-h-screen">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm">
<div class="container mx-auto px-4 py-6 flex justify-between items-center">
<div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Russian Attacks on Ukraine – Daily Tracker</h1>
<p class="text-gray-600 dark:text-gray-300">Monitoring daily aggression against Ukraine</p>
</div>
<div class="flex items-center space-x-4">
<button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path id="darkIcon" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" class="hidden" />
<path id="lightIcon" fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>
</button>
<div class="text-sm text-gray-500 dark:text-gray-400">
<span id="currentDate"></span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Filters -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label for="dateRange" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date Range</label>
<select id="dateRange" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="7">Last 7 days</option>
<option value="30" selected>Last 30 days</option>
<option value="custom">Custom range</option>
</select>
</div>
<div id="customRangeContainer" class="hidden">
<label for="startDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Custom Range</label>
<div class="flex space-x-2">
<input type="date" id="startDate" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<input type="date" id="endDate" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
</div>
<div>
<label for="attackType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attack Type</label>
<select id="attackType" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="both" selected>Both Shaheds & Missiles</option>
<option value="shaheds">Shaheds Only</option>
<option value="missiles">Missiles Only</option>
</select>
</div>
</div>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
<h3 class="text-lg font-medium text-blue-800 dark:text-blue-200 mb-2">Today's Attacks</h3>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-blue-900 dark:text-white" id="todayTotal">0</p>
<p class="text-sm text-blue-700 dark:text-blue-300" id="todayChange">No data available</p>
</div>
<div class="text-blue-500 dark:text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
</div>
</div>
<div class="bg-red-50 dark:bg-red-900/30 rounded-lg shadow-sm p-6 border-l-4 border-red-500">
<h3 class="text-lg font-medium text-red-800 dark:text-red-200 mb-2">Shaheds</h3>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-red-900 dark:text-white" id="todayShaheds">0</p>
<p class="text-sm text-red-700 dark:text-red-300" id="shahedsPercentage">0% of total</p>
</div>
<div class="text-red-500 dark:text-red-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
</div>
</div>
<div class="bg-purple-50 dark:bg-purple-900/30 rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
<h3 class="text-lg font-medium text-purple-800 dark:text-purple-200 mb-2">Missiles</h3>
<div class="flex items-end justify-between">
<div>
<p class="text-3xl font-bold text-purple-900 dark:text-white" id="todayMissiles">0</p>
<p class="text-sm text-purple-700 dark:text-purple-300" id="missilesPercentage">0% of total</p>
</div>
<div class="text-purple-500 dark:text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Daily Attacks Breakdown</h3>
<div class="chart-container">
<canvas id="lineChart"></canvas>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Total Attacks per Day</h3>
<div class="chart-container">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
<!-- Map -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-4">Most Attacked Regions</h3>
<div class="relative h-64 md:h-96 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 map-container">
<!-- Map markers will be added dynamically -->
<div class="marker" style="top: 30%; left: 25%;"></div>
<div class="marker" style="top: 40%; left: 45%;"></div>
<div class="marker" style="top: 35%; left: 60%;"></div>
<div class="marker" style="top: 55%; left: 50%;"></div>
<div class="marker" style="top: 65%; left: 35%;"></div>
</div>
<div class="mt-4 grid grid-cols-2 md:grid-cols-5 gap-2">
<div class="text-sm text-gray-700 dark:text-gray-300 flex items-center">
<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> Kyiv
</div>
<div class="text-sm text-gray-700 dark:text-gray-300 flex items-center">
<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> Kharkiv
</div>
<div class="text-sm text-gray-700 dark:text-gray-300 flex items-center">
<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> Odesa
</div>
<div class="text-sm text-gray-700 dark:text-gray-300 flex items-center">
<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> Dnipro
</div>
<div class="text-sm text-gray-700 dark:text-gray-300 flex items-center">
<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span> Zaporizhzhia
</div>
</div>
</div>
<!-- Data Table -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Detailed Attack Data</h3>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Shaheds</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Missiles</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Total</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Change</th>
</tr>
</thead>
<tbody id="dataTableBody" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<!-- Data will be inserted here -->
</tbody>
</table>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-600 dark:text-gray-300 mb-4 md:mb-0">
<p>Data last updated: <span id="lastUpdated"></span></p>
</div>
<div class="text-gray-600 dark:text-gray-300">
<p>Source: Ukrainian Air Force reports</p>
</div>
</div>
</div>
</footer>
</div>
<script>
// Sample data for the dashboard
const attackData = [
{ date: '2025-07-08', shaheds: 21, missiles: 5 },
{ date: '2025-07-09', shaheds: 18, missiles: 7 },
{ date: '2025-07-10', shaheds: 12, missiles: 9 },
{ date: '2025-07-11', shaheds: 24, missiles: 4 },
{ date: '2025-07-12', shaheds: 17, missiles: 6 },
{ date: '2025-07-13', shaheds: 20, missiles: 8 },
{ date: '2025-07-14', shaheds: 26, missiles: 3 }
];
// Sort data by date
attackData.sort((a, b) => new Date(a.date) - new Date(b.date));
// Initialize charts
let lineChart, barChart;
// DOM elements
const dateRangeSelect = document.getElementById('dateRange');
const customRangeContainer = document.getElementById('customRangeContainer');
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
const attackTypeSelect = document.getElementById('attackType');
const dataTableBody = document.getElementById('dataTableBody');
const darkModeToggle = document.getElementById('darkModeToggle');
const darkIcon = document.getElementById('darkIcon');
const lightIcon = document.getElementById('lightIcon');
const todayTotal = document.getElementById('todayTotal');
const todayChange = document.getElementById('todayChange');
const todayShaheds = document.getElementById('todayShaheds');
const shahedsPercentage = document.getElementById('shahedsPercentage');
const todayMissiles = document.getElementById('todayMissiles');
const missilesPercentage = document.getElementById('missilesPercentage');
const currentDateEl = document.getElementById('currentDate');
const lastUpdatedEl = document.getElementById('lastUpdated');
// Set current date
const today = new Date();
currentDateEl.textContent = today.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
lastUpdatedEl.textContent = today.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
// Initialize date inputs
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
startDateInput.valueAsDate = thirtyDaysAgo;
endDateInput.valueAsDate = today;
startDateInput.max = endDateInput.value;
endDateInput.max = today.toISOString().split('T')[0];
// Event listeners
dateRangeSelect.addEventListener('change', function() {
if (this.value === 'custom') {
customRangeContainer.classList.remove('hidden');
} else {
customRangeContainer.classList.add('hidden');
updateDashboard();
}
});
startDateInput.addEventListener('change', function() {
endDateInput.min = this.value;
updateDashboard();
});
endDateInput.addEventListener('change', function() {
startDateInput.max = this.value;
updateDashboard();
});
attackTypeSelect.addEventListener('change', updateDashboard);
darkModeToggle.addEventListener('click', toggleDarkMode);
// Check for saved theme preference or use system preference
if (localStorage.getItem('darkMode') === 'true' ||
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
} else {
document.documentElement.classList.remove('dark');
darkIcon.classList.add('hidden');
lightIcon.classList.remove('hidden');
}
// Toggle dark mode
function toggleDarkMode() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('darkMode', 'false');
darkIcon.classList.add('hidden');
lightIcon.classList.remove('hidden');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('darkMode', 'true');
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
}
updateCharts();
}
// Filter data based on selected options
function getFilteredData() {
let filteredData = [...attackData];
const attackType = attackTypeSelect.value;
// Filter by date range
if (dateRangeSelect.value !== 'custom') {
const days = parseInt(dateRangeSelect.value);
const cutoffDate = new Date();
cutoffDate.setDate(cutoffDate.getDate() - days);
filteredData = filteredData.filter(item => new Date(item.date) >= cutoffDate);
} else {
const startDate = new Date(startDateInput.value);
const endDate = new Date(endDateInput.value);
filteredData = filteredData.filter(item => {
const itemDate = new Date(item.date);
return itemDate >= startDate && itemDate <= endDate;
});
}
// Filter by attack type if needed
if (attackType !== 'both') {
filteredData = filteredData.map(item => {
return {
date: item.date,
shaheds: attackType === 'shaheds' ? item.shaheds : 0,
missiles: attackType === 'missiles' ? item.missiles : 0
};
});
}
return filteredData;
}
// Update the dashboard with filtered data
function updateDashboard() {
const filteredData = getFilteredData();
updateSummaryCards(filteredData);
updateDataTable(filteredData);
updateCharts(filteredData);
}
// Update summary cards
function updateSummaryCards(data) {
if (data.length === 0) return;
// Get today's data (most recent date)
const todayData = data[data.length - 1];
const totalToday = todayData.shaheds + todayData.missiles;
todayTotal.textContent = totalToday;
todayShaheds.textContent = todayData.shaheds;
todayMissiles.textContent = todayData.missiles;
// Calculate percentages
const shahedsPct = totalToday > 0 ? Math.round((todayData.shaheds / totalToday) * 100) : 0;
const missilesPct = totalToday > 0 ? Math.round((todayData.missiles / totalToday) * 100) : 0;
shahedsPercentage.textContent = `${shahedsPct}% of total`;
missilesPercentage.textContent = `${missilesPct}% of total`;
// Calculate change from previous day
if (data.length > 1) {
const yesterdayData = data[data.length - 2];
const totalYesterday = yesterdayData.shaheds + yesterdayData.missiles;
const change = totalToday - totalYesterday;
const changePct = totalYesterday > 0 ? Math.round((change / totalYesterday) * 100) : 0;
if (change > 0) {
todayChange.innerHTML = `<span class="text-red-600 dark:text-red-400">+${change} (+${changePct}%)</span> from yesterday`;
} else if (change < 0) {
todayChange.innerHTML = `<span class="text-green-600 dark:text-green-400">${change} (${changePct}%)</span> from yesterday`;
} else {
todayChange.textContent = `No change from yesterday`;
}
} else {
todayChange.textContent = `No previous data for comparison`;
}
}
// Update data table
function updateDataTable(data) {
dataTableBody.innerHTML = '';
if (data.length === 0) {
dataTableBody.innerHTML = `
<tr class="bg-white dark:bg-gray-800">
<td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">No data available for selected filters</td>
</tr>
`;
return;
}
// Add rows for each data point
data.forEach((item, index) => {
const total = item.shaheds + item.missiles;
let changeText = '';
if (index > 0) {
const prevTotal = data[index - 1].shaheds + data[index - 1].missiles;
const change = total - prevTotal;
const changePct = prevTotal > 0 ? Math.round((change / prevTotal) * 100) : 0;
if (change > 0) {
changeText = `<span class="text-red-600 dark:text-red-400">+${change} (+${changePct}%)</span>`;
} else if (change < 0) {
changeText = `<span class="text-green-600 dark:text-green-400">${change} (${changePct}%)</span>`;
} else {
changeText = 'No change';
}
} else {
changeText = 'N/A';
}
const formattedDate = new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
const row = document.createElement('tr');
row.className = index % 2 === 0 ? 'bg-gray-50 dark:bg-gray-700' : 'bg-white dark:bg-gray-800';
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">${formattedDate}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">${item.shaheds}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">${item.missiles}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">${total}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">${changeText}</td>
`;
dataTableBody.appendChild(row);
});
}
// Update charts
function updateCharts(data) {
if (data.length === 0) return;
const dates = data.map(item => {
const date = new Date(item.date);
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
});
const shahedsData = data.map(item => item.shaheds);
const missilesData = data.map(item => item.missiles);
const totalData = data.map(item => item.shaheds + item.missiles);
const isDarkMode = document.documentElement.classList.contains('dark');
const textColor = isDarkMode ? '#E5E7EB' : '#374151';
const gridColor = isDarkMode ? 'rgba(229, 231, 235, 0.1)' : 'rgba(209, 213, 219, 0.5)';
const tooltipBgColor = isDarkMode ? '#1F2937' : '#FFFFFF';
// Line chart (daily breakdown)
const lineCtx = document.getElementById('lineChart').getContext('2d');
if (lineChart) {
lineChart.destroy();
}
lineChart = new Chart(lineCtx, {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Shaheds',
data: shahedsData,
borderColor: '#EF4444',
backgroundColor: 'rgba(239, 68, 68, 0.1)',
tension: 0.3,
fill: true,
borderWidth: 2
},
{
label: 'Missiles',
data: missilesData,
borderColor: '#8B5CF6',
backgroundColor: 'rgba(139, 92, 246, 0.1)',
tension: 0.3,
fill: true,
borderWidth: 2
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: textColor,
usePointStyle: true,
padding: 20
}
},
tooltip: {
backgroundColor: tooltipBgColor,
titleColor: textColor,
bodyColor: textColor,
borderColor: gridColor,
borderWidth: 1,
usePointStyle: true,
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.raw}`;
}
}
}
},
scales: {
x: {
grid: {
color: gridColor,
drawBorder: false
},
ticks: {
color: textColor
}
},
y: {
beginAtZero: true,
grid: {
color: gridColor,
drawBorder: false
},
ticks: {
color: textColor
}
}
}
}
});
// Bar chart (total attacks)
const barCtx = document.getElementById('barChart').getContext('2d');
if (barChart) {
barChart.destroy();
}
barChart = new Chart(barCtx, {
type: 'bar',
data: {
labels: dates,
datasets: [{
label: 'Total Attacks',
data: totalData,
backgroundColor: '#3B82F6',
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: textColor,
usePointStyle: true,
padding: 20
}
},
tooltip: {
backgroundColor: tooltipBgColor,
titleColor: textColor,
bodyColor: textColor,
borderColor: gridColor,
borderWidth: 1,
callbacks: {
label: function(context) {
const dataIndex = context.dataIndex;
const shaheds = shahedsData[dataIndex];
const missiles = missilesData[dataIndex];
return [
`Total: ${context.raw}`,
`Shaheds: ${shaheds}`,
`Missiles: ${missiles}`
];
}
}
}
},
scales: {
x: {
grid: {
color: gridColor,
drawBorder: false
},
ticks: {
color: textColor
}
},
y: {
beginAtZero: true,
grid: {
color: gridColor,
drawBorder: false
},
ticks: {
color: textColor
}
}
}
}
});
}
// Initialize the dashboard
updateDashboard();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pankoteikin/shahed-tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>