Add more airlines and fix edit bugs
This commit is contained in:
@@ -1,42 +1,3 @@
|
||||
<template>
|
||||
<!-- Year — full width -->
|
||||
<div class="flight-charts glass">
|
||||
<FlightsPerYearChart :flights="flights" :upcoming-flights="upcomingFlights" />
|
||||
</div>
|
||||
|
||||
<!-- 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]" />
|
||||
</div>
|
||||
|
||||
<!-- Countries (tall) + Continents & Flight Type stacked -->
|
||||
<div class="flight-charts glass charts-row">
|
||||
<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" />
|
||||
<TopAirportsChart :flights="flights" :upcoming-flights="upcomingFlights" />
|
||||
</div>
|
||||
|
||||
<!-- Routes + International vs Domestic -->
|
||||
<div class="flight-charts glass charts-row">
|
||||
<TopRoutesChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Flight } from '@/Types/types'
|
||||
@@ -52,13 +13,58 @@ import TopAirlinesChart from '@/Components/FlightsGoneBy/Charts/TopAirlinesChart
|
||||
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<{
|
||||
flights: Flight[]
|
||||
upcomingFlights: Flight[]
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user