75 lines
2.5 KiB
Vue
75 lines
2.5 KiB
Vue
<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>
|