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,125 +1,18 @@
-<template>
-        <FlightChart
-            title="Continents"
-            v-if="series.length"
-            type="donut"
-            height="280"
-            :options="chartOptions"
-            :series="seriesData"
-        />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
-import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
-
+import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
+import {FlightStats} from "@/Composables/useFlightStats";
 const props = defineProps<{
-    flights: Flight[]
+    flightStats: FlightStats
 }>()
-
-const series = computed(() => {
-    const counts = new Map<string, number>()
-    props.flights.forEach(f => {
-        const continents = new Set<string>()
-        const dep = f.departure_airport.region?.continent?.name
-        const arr = f.arrival_airport.region?.continent?.name
-        if (dep) continents.add(dep)
-        if (arr) continents.add(arr)
-        continents.forEach(c => counts.set(c, (counts.get(c) ?? 0) + 1))
-    })
-    return [...counts.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .map(([name, count]) => ({ name, count }))
-})
-
-const seriesData = computed(() => series.value.map(s => s.count))
-
-const chartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        background: 'transparent',
-        fontFamily: 'inherit',
-    },
-    theme: { mode: 'dark' },
-    labels: series.value.map(s => s.name),
-    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
-    dataLabels: {
-        enabled: true,
-        formatter: (val: number) => `${Math.round(val)}%`,
-        style: { fontSize: '12px', fontWeight: 400 },
-        dropShadow: { enabled: false },
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '60%',
-                labels: {
-                    show: true,
-                    total: {
-                        show: true,
-                        label: 'Total',
-                        fontSize: '13px',
-                        color: '#556677',
-                        formatter: () => props.flights.length.toString(),
-                    },
-                    value: {
-                        fontSize: '22px',
-                        fontWeight: 500,
-                        color: '#e0e6f0',
-                    },
-                },
-            },
-        },
-    },
-    legend: {
-        position: 'bottom',
-        labels: { colors: '#778899' },
-        markers: { width: 8, height: 8, radius: 2 },
-        itemMargin: { horizontal: 12, vertical: 4 },
-    },
-    stroke: { width: 0 },
-    tooltip: {
-        theme: 'dark',
-        y: {
-            formatter: (val: number) => `${val} flights`,
-        },
-    },
-}))
 </script>
-
+<template>
+    <DonutChart
+        title="Continents"
+        :height="280"
+        :labels="flightStats.continents.value.labels"
+        :series="flightStats.continents.value.series"
+    />
+</template>
 <style scoped>
-.chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}

-.chart-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: #556677;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.chart-empty {
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    color: #445566;
-}
-
-.charts-row {
-    display: flex;
-    gap: 24px;
-    padding: 16px;
-}
-
-.charts-row > * {
-    flex: 1;
-    min-width: 0;
-}
 </style>