Hugging Face's logo

Spaces:
Useless43323
/
skyrocket-aviation-analytics
Running

App Files Community
skyrocket-aviation-analytics / analytics.html
Useless43323's picture
Useless43323
from datasets import load_dataset
e22b39e verified
Raw History Blame Contribute Delete
13.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyRocket Analytics Dashboard</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.dashboard-card {
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-100">
<!-- Navigation -->
<nav class="bg-white shadow-lg fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="bar-chart-2" class="h-8 w-8 text-blue-600"></i>
<span class="ml-2 text-xl font-bold text-gray-900">SkyRocket Analytics</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a>
<a href="analytics.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-sm font-medium">Analytics</a>
<a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Reports</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl font-bold text-gray-900">Flight Performance Analytics</h1>
<p class="mt-2 text-gray-600">Real-time insights from SkyRocket's global operations</p>
<!-- Stats Cards -->
<div class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
<div class="bg-white overflow-hidden shadow rounded-lg dashboard-card">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="clock" class="h-6 w-6 text-blue-500"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Avg. Flight Duration</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">3.2</div>
<div class="ml-2 text-sm font-medium text-gray-500">hours</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg dashboard-card">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="wind" class="h-6 w-6 text-blue-500"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Top Speed</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">182</div>
<div class="ml-2 text-sm font-medium text-gray-500">MPH</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg dashboard-card">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="map-pin" class="h-6 w-6 text-blue-500"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Active Flights</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">47</div>
<div class="ml-2 text-sm font-medium text-gray-500">worldwide</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg dashboard-card">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="check-circle" class="h-6 w-6 text-blue-500"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Flight Success</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">99.8%</div>
<div class="ml-2 text-sm font-medium text-gray-500">completion</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Speed Distribution -->
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-900 mb-4">Flight Speed Distribution</h3>
<div class="h-64">
<canvas id="speedChart"></canvas>
</div>
</div>
<!-- Altitude vs Speed -->
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-900 mb-4">Altitude vs Speed</h3>
<div class="h-64">
<canvas id="altitudeChart"></canvas>
</div>
</div>
<!-- Flight Duration -->
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-900 mb-4">Average Flight Duration by Region</h3>
<div class="h-64">
<canvas id="durationChart"></canvas>
</div>
</div>
<!-- Maintenance Events -->
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-900 mb-4">Maintenance Events by Model</h3>
<div class="h-64">
<canvas id="maintenanceChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize charts
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
// Speed Distribution Chart
const speedCtx = document.getElementById('speedChart').getContext('2d');
const speedChart = new Chart(speedCtx, {
type: 'bar',
data: {
labels: ['120-140', '140-160', '160-180', '180+'],
datasets: [{
label: 'Flights by Speed Range (MPH)',
data: [12, 45, 78, 23],
backgroundColor: 'rgba(59, 130, 246, 0.7)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Altitude vs Speed Chart
const altitudeCtx = document.getElementById('altitudeChart').getContext('2d');
const altitudeChart = new Chart(altitudeCtx, {
type: 'scatter',
data: {
datasets: [{
label: 'Flight Data Points',
data: [
{x: 130, y: 5000},
{x: 145, y: 6000},
{x: 160, y: 7500},
{x: 175, y: 8500},
{x: 180, y: 9000},
{x: 165, y: 7000},
{x: 150, y: 5500},
],
backgroundColor: 'rgba(59, 130, 246, 0.7)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: 'Speed (MPH)'
}
},
y: {
title: {
display: true,
text: 'Altitude (ft)'
}
}
}
}
});
// Duration Chart
const durationCtx = document.getElementById('durationChart').getContext('2d');
const durationChart = new Chart(durationCtx, {
type: 'polarArea',
data: {
labels: ['North America', 'Europe', 'Asia', 'Middle East', 'Africa', 'South America'],
datasets: [{
label: 'Avg Flight Hours',
data: [2.8, 3.5, 4.2, 3.1, 2.9, 3.7],
backgroundColor: [
'rgba(59, 130, 246, 0.7)',
'rgba(16, 185, 129, 0.7)',
'rgba(249, 115, 22, 0.7)',
'rgba(139, 92, 246, 0.7)',
'rgba(236, 72, 153, 0.7)',
'rgba(20, 184, 166, 0.7)'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Maintenance Chart
const maintenanceCtx = document.getElementById('maintenanceChart').getContext('2d');
const maintenanceChart = new Chart(maintenanceCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'SR1 Model',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgba(59, 130, 246, 1)',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.3
},
{
label: 'SR2 Model',
data: [8, 15, 2, 4, 1, 6],
borderColor: 'rgba(16, 185, 129, 1)',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.3
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>