Add more airlines and fix edit bugs

2026-04-20 13:36:58 +10:00
parent 8d7d8f02d3
commit 5deefcbfb3
22 changed files with 1109 additions and 1530 deletions
@@ -1,109 +1,21 @@
-<template>
-        <FlightChart
-            title="Flights per year"
-            type="bar"
-            height="220"
-            :options="chartOptions"
-            :series="series"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
+import VerticalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue";

 const props = defineProps<{
-    flights: Flight[]
-    upcomingFlights: Flight[]
+    flightStats: FlightStats
 }>()

-const flightYear = (f: Flight): number =>
-    Number(new Intl.DateTimeFormat('en', {
-        timeZone: f.departure_airport.timezone,
-        year: 'numeric',
-    }).format(new Date(f.departure_date)))
-
-const years = computed(() => {
-    const allYears = new Set<number>()
-    ;[...props.flights, ...props.upcomingFlights].forEach(f =>
-        allYears.add(flightYear(f))
-    )
-    const sorted = [...allYears].sort((a, b) => a - b)
-
-    let min = sorted[0]
-    let max = sorted[sorted.length - 1]
-
-    while (max - min + 1 < 5) {
-        min--
-        if (max - min + 1 < 5) max++
-    }
-
-    return Array.from({ length: max - min + 1 }, (_, i) => min + i)
-})
-
-const countByYear = (list: Flight[]) =>
-    years.value.map(year => list.filter(f => flightYear(f) === year).length)
-
-const series = computed(() => [
-    { name: 'Flown',    data: countByYear(props.flights) },
-    { name: 'Upcoming', data: countByYear(props.upcomingFlights) },
-])
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'bar',
-        stacked: true,
-        toolbar: { show: false },
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    plotOptions: {
-        bar: {
-            borderRadius: 3,
-            borderRadiusWhenStacked: 'last',
-            columnWidth: '55%',
-        },
-    },
-    colors: ['#4da6ff', '#ffc107'],
-    dataLabels: { enabled: false },
-    grid: {
-        borderColor: 'rgba(255,255,255,0.05)',
-        yaxis: { lines: { show: true } },
-        xaxis: { lines: { show: false } },
-    },
-    xaxis: {
-        categories: years.value,
-        axisBorder: { show: false },
-        axisTicks: { show: false },
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    yaxis: {
-        labels: {
-            style: { colors: '#445566', fontSize: '12px' },
-        },
-    },
-    legend: {
-        position: 'top',
-        horizontalAlign: 'right',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12 },
-    },
-    tooltip: {
-        theme: 'dark',
-        shared: true,
-        intersect: false,
-    },
-    states: {
-        hover: { filter: { type: 'lighten', value: 0.1 } },
-        active: { filter: { type: 'none' } },
-    },
-}))
 </script>
+<template>
+    <VerticalBarChart
+        title="Flights per year"
+        type="bar"
+        :height="220"
+        :categories="flightStats.perYear.value.years"
+        :series="flightStats.perYear.value.series"
+    />
+</template>

 <style scoped>