Added Charts

2026-04-11 17:30:16 +10:00
parent 7a07616f03
commit e83fd3bdca
24 changed files with 2915 additions and 39 deletions
@@ -0,0 +1,74 @@
+<template>
+    <div class="flight-charts glass">
+        <FlightsPerYearChart :flights="flights" :upcoming-flights="upcomingFlights"/>
+    </div>
+    <div class="flight-charts glass">
+        <FlightsPerMonthChart :flights="flights" :upcoming-flights="upcomingFlights" />
+    </div>
+    <div class="flight-charts glass charts-row">
+        <FlightReasonsChart :flights="[...flights, ...upcomingFlights]" />
+        <FlightClassChart :flights="[...flights, ...upcomingFlights]"  />
+        <SeatTypeChart :flights="[...flights, ...upcomingFlights]"  />
+    </div>
+    <div class="flight-charts glass charts-row">
+        <CountriesChart :flights="flights" :upcoming-flights="upcomingFlights" />
+    </div>
+    <div class="flight-charts glass charts-row">
+        <TopAirlinesChart :flights="flights" :upcoming-flights="upcomingFlights" />
+    </div>
+    <div class="flight-charts glass charts-row">
+        <TopAirportsChart :flights="flights" :upcoming-flights="upcomingFlights" />
+    </div>
+    <div class="flight-charts glass charts-row">
+        <TopRoutesChart :flights="flights" :upcoming-flights="upcomingFlights" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Flight } from '@/Types/types'
+import FlightsPerYearChart from "@/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue";
+import FlightsPerMonthChart from "@/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue";
+import FlightReasonsChart from "@/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue";
+import FlightClassChart from "@/Components/FlightsGoneBy/Charts/FlightClassChart.vue";
+import SeatTypeChart from "@/Components/FlightsGoneBy/Charts/SeatTypeChart.vue";
+import CountriesChart from "@/Components/FlightsGoneBy/Charts/CountriesChart.vue";
+import TopAirlinesChart from "@/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue";
+import TopAirportsChart from "@/Components/FlightsGoneBy/Charts/TopAirportsChart.vue";
+import TopRoutesChart from "@/Components/FlightsGoneBy/Charts/TopRoutesChart.vue";
+
+defineProps<{
+    flights: Flight[]
+    upcomingFlights: Flight[]
+}>()
+</script>
+
+<style scoped>
+.flight-charts {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 24px;
+    border-radius: 10px;
+    margin-top: 12px;
+}
+
+.charts-row {
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+.charts-row > :deep(*) {
+    flex: 1;
+    min-width: 0;
+}
+
+@media (max-width: 768px) {
+    .charts-row {
+        flex-direction: column;
+    }
+
+    .charts-row > :deep(*) {
+        width: 100%;
+    }
+}
+</style>