113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
|
|
<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 FlightsPerDayChart from '@/Components/FlightsGoneBy/Charts/FlightsPerDayChart.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 ContinentsChart from '@/Components/FlightsGoneBy/Charts/ContinentsChart.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'
|
|
import FlightTypeChart from '@/Components/FlightsGoneBy/Charts/FlightTypeChart.vue'
|
|
import {FlightStats} from "@/Composables/useFlightStats";
|
|
|
|
defineProps<{
|
|
flightStats: FlightStats
|
|
}>()
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Year — full width -->
|
|
<div class="flight-charts glass">
|
|
<FlightsPerYearChart :flight-stats="flightStats" />
|
|
</div>
|
|
|
|
<!-- Month + Day of week -->
|
|
<div class="flight-charts glass charts-row">
|
|
<FlightsPerMonthChart :flight-stats="flightStats" />
|
|
<FlightsPerDayChart :flight-stats="flightStats" />
|
|
</div>
|
|
|
|
<!-- Reasons + Class + Seat type -->
|
|
<div class="flight-charts glass charts-row">
|
|
<FlightClassChart :flight-stats="flightStats" />
|
|
<FlightReasonsChart :flight-stats="flightStats" />
|
|
<SeatTypeChart :flight-stats="flightStats" />
|
|
</div>
|
|
|
|
<!-- Countries (tall) + Continents & Flight Type stacked -->
|
|
<div class="flight-charts glass charts-row">
|
|
<CountriesChart :max-visible="18" :flight-stats="flightStats" class="chart-tall" />
|
|
<div class="charts-stack">
|
|
<ContinentsChart :flight-stats="flightStats" />
|
|
<FlightTypeChart :flight-stats="flightStats" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Airlines + Airports -->
|
|
<div class="flight-charts glass charts-row">
|
|
<TopAirlinesChart :flight-stats="flightStats" />
|
|
<TopAirportsChart :flight-stats="flightStats" />
|
|
</div>
|
|
|
|
<!-- Routes + International vs Domestic -->
|
|
<div class="flight-charts glass charts-row">
|
|
<!--
|
|
<TopRoutesChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
|
|
-->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.flight-charts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
border-radius: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.charts-row {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.charts-row > :deep(*) {
|
|
flex: 1 1 300px;
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
.chart-tall {
|
|
flex: 1 1 300px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.charts-stack {
|
|
flex: 1 1 300px;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.charts-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.charts-row > :deep(*) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|