Added Charts

2026-04-11 17:30:16 +10:00
parent 7a07616f03
commit e83fd3bdca
24 changed files with 2915 additions and 39 deletions
@@ -0,0 +1,213 @@
+<template>
+    <div class="chart-wrap">
+        <div class="chart-title">Top countries</div>
+
+        <div v-if="series.length" class="chart-outer">
+            <div class="chart-scroll" :style="{ height: scrollHeight }">
+                <apexchart
+                    type="bar"
+                    :height="chartHeight"
+                    :options="chartOptions"
+                    :series="chartSeries"
+                />
+            </div>
+            <div class="chart-footer">
+                <span class="total-count">{{ totalCountries }}</span>
+                <span class="total-label">total countries</span>
+            </div>
+        </div>
+
+        <div v-else class="chart-empty">No country data available</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Flight } from '@/Types/types'
+
+const props = defineProps<{
+    flights: Flight[]
+    upcomingFlights: Flight[]
+}>()
+
+const MAX_VISIBLE = 12
+const BAR_HEIGHT = 32
+
+function countCountries(flights: Flight[]): Map<string, number> {
+    const counts = new Map<string, number>()
+    flights.forEach(f => {
+        const depCountry = f.departure_airport?.region?.country?.name ?? null
+        const arrCountry = f.arrival_airport?.region?.country?.name ?? null
+        if (depCountry) counts.set(depCountry, (counts.get(depCountry) ?? 0) + 1)
+        if (arrCountry && arrCountry !== depCountry) {
+            counts.set(arrCountry, (counts.get(arrCountry) ?? 0) + 1)
+        }
+    })
+    return counts
+}
+
+const series = computed(() => {
+    const past = countCountries(props.flights)
+    const upcoming = countCountries(props.upcomingFlights)
+
+    const allCountries = new Set([...past.keys(), ...upcoming.keys()])
+
+    return [...allCountries]
+        .map(name => ({
+            name,
+            past: past.get(name) ?? 0,
+            upcoming: upcoming.get(name) ?? 0,
+        }))
+        .sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
+})
+
+const totalCountries = computed(() => series.value.length)
+
+const chartHeight = computed(() => series.value.length * BAR_HEIGHT + 40)
+
+const scrollHeight = computed(() => {
+    const visible = Math.min(series.value.length, MAX_VISIBLE)
+    return `${visible * BAR_HEIGHT + 40}px`
+})
+
+const chartSeries = computed(() => [
+    {
+        name: 'Flights',
+        data: series.value.map(s => s.past),
+    },
+    {
+        name: 'Upcoming',
+        data: series.value.map(s => s.upcoming),
+    },
+])
+
+const chartOptions = computed(() => ({
+    chart: {
+        type: 'bar',
+        background: 'transparent',
+        fontFamily: 'inherit',
+        toolbar: { show: false },
+        animations: { enabled: false },
+        stacked: true,
+    },
+    theme: { mode: 'dark' },
+    plotOptions: {
+        bar: {
+            horizontal: true,
+            barHeight: '60%',
+            borderRadius: 3,
+            borderRadiusWhenStacked: 'last',
+        },
+    },
+    colors: ['#4da6ff', '#ffc107'],
+    dataLabels: {
+        enabled: false,
+    },
+    xaxis: {
+        categories: series.value.map(s => s.name),
+        labels: { show: false },
+        axisBorder: { show: false },
+        axisTicks: { show: false },
+    },
+    yaxis: {
+        labels: {
+            style: {
+                colors: '#778899',
+                fontSize: '12px',
+            },
+        },
+    },
+    grid: {
+        show: false,
+    },
+    legend: {
+        show: true,
+        position: 'top',
+        horizontalAlign: 'right',
+        labels: { colors: '#778899' },
+        markers: { width: 8, height: 8, radius: 2 },
+        itemMargin: { horizontal: 8 },
+    },
+    tooltip: {
+        theme: 'dark',
+        shared: true,
+        intersect: false,
+        y: {
+            formatter: (val: number) => `${val} flights`,
+        },
+    },
+    states: {
+        hover: { filter: { type: 'lighten', value: 0.1 } },
+    },
+}))
+</script>
+
+<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-outer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.chart-scroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: #334455 transparent;
+}
+
+.chart-scroll::-webkit-scrollbar {
+    width: 4px;
+}
+
+.chart-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chart-scroll::-webkit-scrollbar-thumb {
+    background: #334455;
+    border-radius: 2px;
+}
+
+.chart-footer {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    padding-left: 4px;
+}
+
+.total-count {
+    font-size: 28px;
+    font-weight: 600;
+    color: #e0e6f0;
+    line-height: 1;
+}
+
+.total-label {
+    font-size: 13px;
+    color: #556677;
+}
+
+.chart-empty {
+    height: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: #445566;
+}
+</style>