dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Charts

Browse Source
This commit is contained in:
josh
2026-04-11 20:49:01 +10:00
parent e83fd3bdca
commit 95624f345c
16 changed files with 979 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
+60 -96
View File
@@ -3,7 +3,7 @@
<div class="chart-title">Top airports</div>
<div v-if="series.length" class="chart-outer">
<div class="chart-scroll" :style="{ height: scrollHeight }">
<div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
<apexchart
type="bar"
:height="chartHeight"
@@ -11,6 +11,24 @@
:series="chartSeries"
/>
</div>
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
<div class="ct-name">{{ tooltipItem?.fullName }}</div>
<div class="ct-sub">{{ tooltipItem?.label }}</div>
<div class="ct-row">
<span class="ct-label">Departures</span>
<span class="ct-val">{{ tooltipItem?.departures }}</span>
</div>
<div class="ct-row">
<span class="ct-label">Arrivals</span>
<span class="ct-val">{{ tooltipItem?.arrivals }}</span>
</div>
<div v-if="tooltipItem?.upcoming" class="ct-row">
<span class="ct-label">Upcoming</span>
<span class="ct-val">{{ tooltipItem?.upcoming }}</span>
</div>
</ChartTooltip>
<div class="chart-footer">
<span class="total-count">{{ totalAirports }}</span>
<span class="total-label">total airports</span>
@@ -23,79 +41,54 @@
<script setup lang="ts">
import { computed } from 'vue'
import type {Airport, Flight} from '@/Types/types'
import type { Airport, Flight } from '@/Types/types'
import { useChartTooltip } from '@/Composables/useChartTooltip'
import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
const props = defineProps<{
flights: Flight[]
upcomingFlights: Flight[]
}>()
const MAX_VISIBLE = 12
const BAR_HEIGHT = 32
interface AirportCounts {
interface AirportItem {
label: string
fullName: string
departures: number
arrivals: number
upcoming: number
}
function buildAirportMap(flights: Flight[], key: 'departures' | 'arrivals' | 'upcoming'): Map<string, AirportCounts> {
const map = new Map<string, AirportCounts>()
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirportItem>()
const empty = (): AirportCounts => ({ departures: 0, arrivals: 0, upcoming: 0 })
flights.forEach(f => {
const depName = f.departure_airport?.iata_code
? `${f.departure_airport.iata_code} – ${f.departure_airport.name}`
: f.departure_airport?.name ?? null
const arrName = f.arrival_airport?.iata_code
? `${f.arrival_airport.iata_code} – ${f.arrival_airport.name}`
: f.arrival_airport?.name ?? null
if (depName) {
const existing = map.get(depName) ?? empty()
existing[key]++
map.set(depName, existing)
}
if (arrName) {
const existing = map.get(arrName) ?? empty()
if (key !== 'upcoming') existing.arrivals++
else existing[key]++
map.set(arrName, existing)
}
})
return map
}
const MAX_VISIBLE = 12
const BAR_HEIGHT = 32
function airportLabel(airport: Airport | null | undefined): string | null {
if (!airport) return null
return airport.iata_code ?? airport.icao_code ?? airport.name ?? null
}
const series = computed(() => {
const past = new Map<string, AirportCounts & { label: string; fullName: string }>()
const empty = () => ({ departures: 0, arrivals: 0, upcoming: 0, label: '', fullName: '' })
const series = computed((): AirportItem[] => {
const map = new Map<string, AirportItem>()
const empty = (): AirportItem => ({ departures: 0, arrivals: 0, upcoming: 0, label: '', fullName: '' })
props.flights.forEach(f => {
const depLabel = airportLabel(f.departure_airport)
const arrLabel = airportLabel(f.arrival_airport)
if (depLabel) {
const e = past.get(depLabel) ?? empty()
const e = map.get(depLabel) ?? empty()
e.departures++
e.label = depLabel
e.fullName = f.departure_airport?.name ?? depLabel
past.set(depLabel, e)
map.set(depLabel, e)
}
if (arrLabel) {
const e = past.get(arrLabel) ?? empty()
const e = map.get(arrLabel) ?? empty()
e.arrivals++
e.label = arrLabel
e.fullName = f.arrival_airport?.name ?? arrLabel
past.set(arrLabel, e)
map.set(arrLabel, e)
}
})
@@ -104,23 +97,22 @@ const series = computed(() => {
const arrLabel = airportLabel(f.arrival_airport)
if (depLabel) {
const e = past.get(depLabel) ?? empty()
const e = map.get(depLabel) ?? empty()
e.upcoming++
e.label = depLabel
e.fullName = f.departure_airport?.name ?? depLabel
past.set(depLabel, e)
map.set(depLabel, e)
}
if (arrLabel) {
const e = past.get(arrLabel) ?? empty()
const e = map.get(arrLabel) ?? empty()
e.upcoming++
e.label = arrLabel
e.fullName = f.arrival_airport?.name ?? arrLabel
past.set(arrLabel, e)
map.set(arrLabel, e)
}
})
return [...past.entries()]
.map(([, counts]) => ({ ...counts }))
return [...map.values()]
.sort((a, b) =>
(b.departures + b.arrivals + b.upcoming) - (a.departures + a.arrivals + a.upcoming)
)
@@ -135,8 +127,8 @@ const scrollHeight = computed(() => {
const chartSeries = computed(() => [
{ name: 'Departures', data: series.value.map(s => s.departures) },
{ name: 'Arrivals', data: series.value.map(s => s.arrivals) },
{ name: 'Upcoming', data: series.value.map(s => s.upcoming) },
{ name: 'Arrivals', data: series.value.map(s => s.arrivals) },
{ name: 'Upcoming', data: series.value.map(s => s.upcoming) },
])
const chartOptions = computed(() => ({
@@ -147,6 +139,13 @@ const chartOptions = computed(() => ({
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: {
@@ -167,10 +166,7 @@ const chartOptions = computed(() => ({
},
yaxis: {
labels: {
style: {
colors: '#778899',
fontSize: '12px',
},
style: { colors: '#778899', fontSize: '12px' },
},
},
grid: { show: false },
@@ -182,36 +178,7 @@ const chartOptions = computed(() => ({
markers: { width: 8, height: 8, radius: 2 },
itemMargin: { horizontal: 8 },
},
tooltip: {
theme: 'dark',
shared: true,
intersect: false,
custom: ({ dataPointIndex }: { dataPointIndex: number }) => {
const airport = series.value[dataPointIndex]
if (!airport) return ''
const rows = [
{ label: 'Departures', value: airport.departures, },
{ label: 'Arrivals', value: airport.arrivals, color: '#a150d5' },
{ label: 'Upcoming', value: airport.upcoming, color: '#ffc107' },
]
.filter(r => r.value > 0)
.map(r => `
<div class="glass" style="display:flex;align-items:center;gap:6px;padding:2px 0">
<span style="width:8px;height:8px;border-radius:2px;background:${r.color};flex-shrink:0"></span>
<span style="color:#778899">${r.label}:</span>
<span style="color:#e0e6f0;margin-left:auto;padding-left:12px">${r.value} flights</span>
</div>
`).join('')
return `
<div class="glass" style="padding:10px 12px;min-width:180px">
<div style="color:#e0e6f0;font-weight:500;margin-bottom:6px">${airport.fullName}</div>
<div style="color:#556677;font-size:11px;margin-bottom:8px">${airport.label}</div>
${rows}
</div>
`
},
},
tooltip: { enabled: false },
states: {
hover: { filter: { type: 'lighten', value: 0.1 } },
},
@@ -246,18 +213,9 @@ const chartOptions = computed(() => ({
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-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;
@@ -286,4 +244,10 @@ const chartOptions = computed(() => ({
font-size: 13px;
color: #445566;
}
.ct-sub {
font-size: 11px;
color: #556677;
margin-bottom: 8px;
}
</style>