FlightsAPI/resources/js/Components/FlightsGoneBy/Charts/CountriesChart.vue

<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 }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
                <apexchart
                    type="bar"
                    :height="chartHeight"
                    :options="chartOptions"
                    :series="chartSeries"
                />
            </div>

            <ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
                <div class="ct-name">
                    <span :class="`fi fi-${tooltipItem?.code.toLowerCase()}`" />
                    {{ tooltipItem?.name }}
                </div>
                <div class="ct-row"><span class="ct-label">Flights</span><span class="ct-val">{{ tooltipItem?.past }}</span></div>
                <div class="ct-row" v-if="tooltipItem?.upcoming"><span class="ct-label">Upcoming</span><span class="ct-val">{{ tooltipItem?.upcoming }}</span></div>
            </ChartTooltip>

            <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'
import { useChartTooltip} from "@/Composables/useChartTooltip";
import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'

const props = defineProps<{
    flights: Flight[]
    upcomingFlights: Flight[]
    maxVisible?: number
}>()

interface CountryItem {
    name: string
    past: number
    upcoming: number
    code: string
}

const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<CountryItem>()

const MAX_VISIBLE = computed(() => props?.maxVisible ?? 12)
const BAR_HEIGHT = 32

interface CountryItem {
    name: string
    code: string
    past: number
    upcoming: number
}

function countCountries(flights: Flight[]): Map<string, { count: number; code: string }> {
    const counts = new Map<string, { count: number; code: string }>()
    flights.forEach(f => {
        const dep = f.departure_airport?.region?.country
        const arr = f.arrival_airport?.region?.country

        if (dep?.name) {
            const existing = counts.get(dep.name) ?? { count: 0, code: dep.code }
            existing.count++
            counts.set(dep.name, existing)
        }
        if (arr?.name && arr.name !== dep?.name) {
            const existing = counts.get(arr.name) ?? { count: 0, code: arr.code }
            existing.count++
            counts.set(arr.name, existing)
        }
    })
    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,
            code: (past.get(name) ?? upcoming.get(name))!.code,
            past: past.get(name)?.count ?? 0,
            upcoming: upcoming.get(name)?.count ?? 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.value)
    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,
        events: {
            mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
                if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
                tooltipItem.value = series.value[config.dataPointIndex] ?? null
            },
            mouseLeave: () => { tooltipItem.value = null },
        },
    },
    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: { enabled: false },
    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>