dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Charts

Browse Source
This commit is contained in:
josh
2026-04-11 20:49:01 +10:00
parent e83fd3bdca
commit 95624f345c
16 changed files with 979 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/FlightCharts.vue
+50 -18
View File
@@ -1,40 +1,57 @@
<template>
<!-- Year — full width -->
<div class="flight-charts glass">
<FlightsPerYearChart :flights="flights" :upcoming-flights="upcomingFlights"/>
<FlightsPerYearChart :flights="flights" :upcoming-flights="upcomingFlights" />
</div>
<div class="flight-charts glass">
<!-- Month + Day of week -->
<div class="flight-charts glass charts-row">
<FlightsPerMonthChart :flights="flights" :upcoming-flights="upcomingFlights" />
<FlightsPerDayChart :flights="flights" :upcoming-flights="upcomingFlights" />
</div>
<!-- Reasons + Class + Seat type -->
<div class="flight-charts glass charts-row">
<FlightReasonsChart :flights="[...flights, ...upcomingFlights]" />
<FlightClassChart :flights="[...flights, ...upcomingFlights]" />
<SeatTypeChart :flights="[...flights, ...upcomingFlights]" />
<FlightClassChart :flights="[...flights, ...upcomingFlights]" />
<SeatTypeChart :flights="[...flights, ...upcomingFlights]" />
</div>
<!-- Countries (tall) + Continents & Flight Type stacked -->
<div class="flight-charts glass charts-row">
<CountriesChart :flights="flights" :upcoming-flights="upcomingFlights" />
<CountriesChart :max-visible="18" :flights="flights" :upcoming-flights="upcomingFlights" class="chart-tall" />
<div class="charts-stack">
<ContinentsChart :flights="flights" :upcoming-flights="upcomingFlights" />
<FlightTypeChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
</div>
</div>
<!-- Airlines + Airports -->
<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>
<!-- Routes + International vs Domestic -->
<div class="flight-charts glass charts-row">
<TopRoutesChart :flights="flights" :upcoming-flights="upcomingFlights" />
<TopRoutesChart :flights="[...flights, ...upcomingFlights]" :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";
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'
defineProps<{
flights: Flight[]
@@ -54,14 +71,29 @@ defineProps<{
.charts-row {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.charts-row > :deep(*) {
flex: 1;
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;