Add more airlines and fix edit bugs
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ChartType } from '@/Types/types'
|
||||
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
|
||||
import VueApexCharts from "vue3-apexcharts"
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
height: number | string
|
||||
series: number[]
|
||||
labels: string[]
|
||||
total?: number
|
||||
options?: object
|
||||
}>()
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
chart: {
|
||||
type: 'donut',
|
||||
background: 'transparent',
|
||||
fontFamily: 'inherit',
|
||||
},
|
||||
theme: { mode: 'dark' },
|
||||
labels: props.labels,
|
||||
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.total ?? props.series.reduce((a, b) => a + b, 0)).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` },
|
||||
},
|
||||
}))
|
||||
|
||||
const ready = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">{{ title }}</div>
|
||||
<PlaneLoader v-if="!ready" />
|
||||
<VueApexCharts
|
||||
type="donut"
|
||||
:height="height"
|
||||
:options="options ?? chartOptions"
|
||||
:series="series"
|
||||
:class="{ 'chart-hidden': !ready }"
|
||||
@mounted="ready = true"
|
||||
/>
|
||||
</div>
|
||||
</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-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
+172
@@ -0,0 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
|
||||
import VueApexCharts from "vue3-apexcharts"
|
||||
|
||||
interface TooltipItem {
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
series: { name: string; data: number[] }[]
|
||||
categories: string[]
|
||||
footerValue?: string | number
|
||||
footerLabel?: string
|
||||
maxVisible?: number
|
||||
barHeight?: number
|
||||
colors?: string[]
|
||||
options?: object
|
||||
events?: object
|
||||
}>()
|
||||
|
||||
const BAR_HEIGHT = computed(() => props.barHeight ?? 32)
|
||||
const MAX_VISIBLE = computed(() => props.maxVisible ?? 12)
|
||||
|
||||
const chartHeight = computed(() => props.categories.length * BAR_HEIGHT.value + 40)
|
||||
const scrollHeight = computed(() => {
|
||||
const visible = Math.min(props.categories.length, MAX_VISIBLE.value)
|
||||
return `${visible * BAR_HEIGHT.value + 40}px`
|
||||
})
|
||||
|
||||
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: props.colors ?? ['#4da6ff', '#ffc107'],
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
categories: props.categories,
|
||||
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 },
|
||||
states: {
|
||||
hover: { filter: { type: 'lighten', value: 0.1 } },
|
||||
},
|
||||
}))
|
||||
|
||||
const ready = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">{{ title }}</div>
|
||||
|
||||
<div v-if="categories.length" class="chart-outer">
|
||||
<div class="chart-scroll" :style="{ height: scrollHeight }">
|
||||
<PlaneLoader v-if="!ready" />
|
||||
<VueApexCharts
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="options ?? chartOptions"
|
||||
:series="series"
|
||||
:class="{ 'chart-hidden': !ready }"
|
||||
@mounted="ready = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Optional slot for custom tooltip -->
|
||||
<slot name="tooltip" />
|
||||
|
||||
<div v-if="footerValue !== undefined" class="chart-footer">
|
||||
<span class="total-count">{{ footerValue }}</span>
|
||||
<span class="total-label">{{ footerLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="chart-empty">No data available</div>
|
||||
</div>
|
||||
</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-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;
|
||||
}
|
||||
|
||||
.chart-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
|
||||
import VueApexCharts from 'vue3-apexcharts'
|
||||
import { ChartType } from "@/Types/types"
|
||||
|
||||
const props = defineProps<{
|
||||
type: ChartType
|
||||
title: string
|
||||
height: number | string
|
||||
series: unknown[]
|
||||
categories: unknown[]
|
||||
options?: object
|
||||
}>()
|
||||
|
||||
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: props.categories,
|
||||
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' } },
|
||||
},
|
||||
}))
|
||||
|
||||
const ready = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">{{title}}</div>
|
||||
<PlaneLoader v-if="!ready" />
|
||||
<VueApexCharts
|
||||
:type="type"
|
||||
:height="height"
|
||||
:options="options ?? chartOptions"
|
||||
:series="series"
|
||||
:class="{ 'chart-hidden': !ready }"
|
||||
@mounted="ready = true"
|
||||
/>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
@@ -1,225 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue"
|
||||
import { FlightStats } from "@/Composables/useFlightStats"
|
||||
import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
|
||||
import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
|
||||
import { useChartTooltip } from "@/Composables/useChartTooltip"
|
||||
|
||||
interface CountryItem {
|
||||
name: string
|
||||
code: string
|
||||
past: number
|
||||
upcoming: number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
}>()
|
||||
|
||||
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<CountryItem>()
|
||||
|
||||
const countries = computed(() => props.flightStats.countries.value.countries)
|
||||
|
||||
const chartEvents = computed(() => ({
|
||||
mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
|
||||
if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
|
||||
tooltipItem.value = countries.value[config.dataPointIndex] ?? null
|
||||
},
|
||||
mouseLeave: () => { tooltipItem.value = null },
|
||||
}))
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<UnstyledFlightChart
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollingHorizontalBarChart
|
||||
title="Top countries"
|
||||
:series="flightStats.countries.value.series"
|
||||
:categories="countries.map(c => c.name)"
|
||||
:footer-value="countries.length"
|
||||
footer-label="total countries"
|
||||
:max-visible="18"
|
||||
:events="chartEvents"
|
||||
@mousemove="onMouseMove"
|
||||
@mouseleave="onMouseLeave"
|
||||
>
|
||||
<template #tooltip>
|
||||
<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>
|
||||
<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>
|
||||
</ScrollingHorizontalBarChart>
|
||||
</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'
|
||||
import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.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>
|
||||
|
||||
@@ -1,89 +1,18 @@
|
||||
<template>
|
||||
<FlightChart
|
||||
title="Flight Classes"
|
||||
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 cls = f.flight_class?.name ?? 'Unknown'
|
||||
counts.set(cls, (counts.get(cls) ?? 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="Flight Classes"
|
||||
:height="280"
|
||||
:labels="flightStats.classes.value.labels"
|
||||
:series="flightStats.classes.value.series"
|
||||
/>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,110 +1,18 @@
|
||||
<template>
|
||||
<FlightChart
|
||||
title="Flight Reasons"
|
||||
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 reason = f.flight_reason?.name ?? 'Unknown'
|
||||
counts.set(reason, (counts.get(reason) ?? 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="Flight Reasons"
|
||||
:height="280"
|
||||
:labels="flightStats.reasons.value.labels"
|
||||
:series="flightStats.reasons.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,91 +1,18 @@
|
||||
<template>
|
||||
<FlightChart
|
||||
title="International vs Domestic"
|
||||
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 = { International: 0, Domestic: 0 }
|
||||
props.flights.forEach(f => {
|
||||
const dep = f.departure_airport.region?.country?.id
|
||||
const arr = f.arrival_airport.region?.country?.id
|
||||
if (dep && arr) {
|
||||
dep === arr ? counts.Domestic++ : counts.International++
|
||||
}
|
||||
})
|
||||
return Object.entries(counts)
|
||||
.filter(([, count]) => count > 0)
|
||||
.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', '#a150d5'],
|
||||
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="Flight Types"
|
||||
:height="280"
|
||||
:labels="flightStats.flightTypes.value.labels"
|
||||
:series="flightStats.flightTypes.value.series"
|
||||
/>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,99 +1,22 @@
|
||||
<template>
|
||||
<FlightChart
|
||||
title="Flights per day of week"
|
||||
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 DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||||
|
||||
// JS getDay() is 0=Sun, 1=Mon ... 6=Sat — remap to Mon-first
|
||||
const dayIndex = (f: Flight): number => {
|
||||
const date = new Date(f.departure_date)
|
||||
const localDay = new Intl.DateTimeFormat('en', {
|
||||
timeZone: f.departure_airport.timezone,
|
||||
weekday: 'long',
|
||||
}).format(date)
|
||||
const idx = DAYS.indexOf(localDay)
|
||||
return idx === -1 ? 0 : idx
|
||||
}
|
||||
|
||||
const countByDay = (list: Flight[]) =>
|
||||
DAYS.map((_, i) => list.filter(f => dayIndex(f) === i).length)
|
||||
|
||||
|
||||
const series = computed(() => [
|
||||
{ name: 'Flown', data: countByDay(props.flights) },
|
||||
{ name: 'Upcoming', data: countByDay(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: DAYS,
|
||||
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 Day"
|
||||
type="bar"
|
||||
:height="220"
|
||||
:categories="flightStats.perDay.value.days"
|
||||
:series="flightStats.perDay.value.series"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,95 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import {FlightStats} from "@/Composables/useFlightStats";
|
||||
import VerticalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
}>()
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<FlightChart
|
||||
title="Flights per month"
|
||||
<VerticalBarChart
|
||||
title="Flights per Month"
|
||||
type="bar"
|
||||
height="220"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
:height="220"
|
||||
:categories="flightStats.perMonth.value.months"
|
||||
:series="flightStats.perMonth.value.series"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
upcomingFlights: Flight[]
|
||||
}>()
|
||||
|
||||
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
||||
|
||||
const monthIndex = (f: Flight): number => {
|
||||
const date = new Date(f.departure_date)
|
||||
return Number(new Intl.DateTimeFormat('en', {
|
||||
timeZone: f.departure_airport.timezone,
|
||||
month: 'numeric',
|
||||
}).format(date)) - 1 // numeric returns 1-12, convert to 0-indexed
|
||||
}
|
||||
|
||||
const countByMonth = (list: Flight[]) =>
|
||||
MONTHS.map((_, i) => list.filter(f => monthIndex(f) === i).length)
|
||||
|
||||
const series = computed(() => [
|
||||
{ name: 'Flown', data: countByMonth(props.flights) },
|
||||
{ name: 'Upcoming', data: countByMonth(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: MONTHS,
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,88 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import DonutChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue";
|
||||
import {FlightStats} from "@/Composables/useFlightStats";
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
}>()
|
||||
</script>
|
||||
<template>
|
||||
<FlightChart
|
||||
<DonutChart
|
||||
title="Seat Types"
|
||||
v-if="series.length"
|
||||
type="donut"
|
||||
height="280"
|
||||
:options="chartOptions"
|
||||
:series="seriesData"
|
||||
:height="280"
|
||||
:labels="flightStats.seatTypes.value.labels"
|
||||
:series="flightStats.seatTypes.value.series"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
}>()
|
||||
|
||||
const series = computed(() => {
|
||||
const counts = new Map<string, number>()
|
||||
props.flights.forEach(f => {
|
||||
const seat = f.seat_type?.name ?? 'Unknown'
|
||||
counts.set(seat, (counts.get(seat) ?? 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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,48 +1,11 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Top airlines</div>
|
||||
|
||||
<div v-if="series.length" class="chart-outer">
|
||||
<div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
|
||||
<UnstyledFlightChart
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
|
||||
<div class="ct-name"><img :src="`${page.logo_api_url}/airlines/logos/tail/id/${tooltipItem?.id}`" width="24" height="24"/>{{ 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">{{ totalAirlines }}</span>
|
||||
<span class="total-label">total airlines</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="chart-empty">No airline data available</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type {Flight, SharedProps} from '@/Types/types'
|
||||
import { FlightStats } from "@/Composables/useFlightStats"
|
||||
import { useChartTooltip } from '@/Composables/useChartTooltip'
|
||||
import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
|
||||
import {usePage} from "@inertiajs/vue3";
|
||||
import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
|
||||
|
||||
const page = usePage<SharedProps>().props
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
upcomingFlights: Flight[]
|
||||
}>()
|
||||
import { usePage } from "@inertiajs/vue3"
|
||||
import { SharedProps } from '@/Types/types'
|
||||
import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
|
||||
import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
|
||||
|
||||
interface AirlineItem {
|
||||
name: string
|
||||
@@ -51,160 +14,50 @@ interface AirlineItem {
|
||||
id: number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
}>()
|
||||
|
||||
const page = usePage<SharedProps>().props
|
||||
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirlineItem>()
|
||||
|
||||
const MAX_VISIBLE = 12
|
||||
const BAR_HEIGHT = 32
|
||||
const airlines = computed(() => props.flightStats.topAirlines.value.airlines)
|
||||
|
||||
function countAirlines(flights: Flight[]): Map<string, { count: number; id: number }> {
|
||||
const counts = new Map<string, { count: number; id: number }>()
|
||||
flights.forEach(f => {
|
||||
const airline = f.airline
|
||||
if (!airline?.name) return
|
||||
const existing = counts.get(airline.name) ?? { count: 0, id: airline.id }
|
||||
existing.count++
|
||||
counts.set(airline.name, existing)
|
||||
})
|
||||
return counts
|
||||
}
|
||||
|
||||
const series = computed(() => {
|
||||
const past = countAirlines(props.flights)
|
||||
const upcoming = countAirlines(props.upcomingFlights)
|
||||
const allAirlines = new Set([...past.keys(), ...upcoming.keys()])
|
||||
return [...allAirlines]
|
||||
.map(name => ({
|
||||
name,
|
||||
id: (past.get(name) ?? upcoming.get(name))!.id,
|
||||
past: past.get(name)?.count ?? 0,
|
||||
upcoming: upcoming.get(name)?.count ?? 0,
|
||||
}))
|
||||
.sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
|
||||
})
|
||||
|
||||
const totalAirlines = 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,
|
||||
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 } },
|
||||
const chartEvents = computed(() => ({
|
||||
mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
|
||||
if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
|
||||
tooltipItem.value = airlines.value[config.dataPointIndex] ?? null
|
||||
},
|
||||
mouseLeave: () => { tooltipItem.value = null },
|
||||
}))
|
||||
</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>
|
||||
<template>
|
||||
<ScrollingHorizontalBarChart
|
||||
title="Top airlines"
|
||||
:series="flightStats.topAirlines.value.series"
|
||||
:categories="airlines.map(a => a.name)"
|
||||
:footer-value="airlines.length"
|
||||
footer-label="total airlines"
|
||||
:events="chartEvents"
|
||||
@mousemove="onMouseMove"
|
||||
@mouseleave="onMouseLeave"
|
||||
>
|
||||
<template #tooltip>
|
||||
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
|
||||
<div class="ct-name">
|
||||
<img :src="`${page.logo_api_url}/airlines/logos/tail/id/${tooltipItem?.id}`" width="24" height="24"/>
|
||||
{{ 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>
|
||||
</template>
|
||||
</ScrollingHorizontalBarChart>
|
||||
</template>
|
||||
|
||||
@@ -1,17 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { FlightStats } from "@/Composables/useFlightStats"
|
||||
import { useChartTooltip } from '@/Composables/useChartTooltip'
|
||||
import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
|
||||
import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
|
||||
|
||||
interface AirportItem {
|
||||
label: string
|
||||
fullName: string
|
||||
departures: number
|
||||
arrivals: number
|
||||
upcoming: number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
flightStats: FlightStats
|
||||
}>()
|
||||
|
||||
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirportItem>()
|
||||
|
||||
const airports = computed(() => props.flightStats.topAirports.value.airports)
|
||||
|
||||
const chartEvents = computed(() => ({
|
||||
mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
|
||||
if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
|
||||
tooltipItem.value = airports.value[config.dataPointIndex] ?? null
|
||||
},
|
||||
mouseLeave: () => { tooltipItem.value = null },
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Top airports</div>
|
||||
|
||||
<div v-if="series.length" class="chart-outer">
|
||||
<div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
|
||||
<UnstyledFlightChart
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="chartOptions"
|
||||
:series="chartSeries"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollingHorizontalBarChart
|
||||
title="Top airports"
|
||||
:series="flightStats.topAirports.value.series"
|
||||
:categories="airports.map(a => a.label)"
|
||||
:footer-value="airports.length"
|
||||
footer-label="total airports"
|
||||
:colors="['#4da6ff', '#a150d5', '#ffc107']"
|
||||
:events="chartEvents"
|
||||
@mousemove="onMouseMove"
|
||||
@mouseleave="onMouseLeave"
|
||||
>
|
||||
<template #tooltip>
|
||||
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
|
||||
<div class="ct-name">{{ tooltipItem?.fullName }}</div>
|
||||
<div class="ct-sub">{{ tooltipItem?.label }}</div>
|
||||
@@ -28,224 +59,11 @@
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="chart-empty">No airport data available</div>
|
||||
</div>
|
||||
</template>
|
||||
</ScrollingHorizontalBarChart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Airport, Flight } from '@/Types/types'
|
||||
import { useChartTooltip } from '@/Composables/useChartTooltip'
|
||||
import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
|
||||
import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
upcomingFlights: Flight[]
|
||||
}>()
|
||||
|
||||
interface AirportItem {
|
||||
label: string
|
||||
fullName: string
|
||||
departures: number
|
||||
arrivals: number
|
||||
upcoming: number
|
||||
}
|
||||
|
||||
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirportItem>()
|
||||
|
||||
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((): 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 = map.get(depLabel) ?? empty()
|
||||
e.departures++
|
||||
e.label = depLabel
|
||||
e.fullName = f.departure_airport?.name ?? depLabel
|
||||
map.set(depLabel, e)
|
||||
}
|
||||
if (arrLabel) {
|
||||
const e = map.get(arrLabel) ?? empty()
|
||||
e.arrivals++
|
||||
e.label = arrLabel
|
||||
e.fullName = f.arrival_airport?.name ?? arrLabel
|
||||
map.set(arrLabel, e)
|
||||
}
|
||||
})
|
||||
|
||||
props.upcomingFlights.forEach(f => {
|
||||
const depLabel = airportLabel(f.departure_airport)
|
||||
const arrLabel = airportLabel(f.arrival_airport)
|
||||
|
||||
if (depLabel) {
|
||||
const e = map.get(depLabel) ?? empty()
|
||||
e.upcoming++
|
||||
e.label = depLabel
|
||||
e.fullName = f.departure_airport?.name ?? depLabel
|
||||
map.set(depLabel, e)
|
||||
}
|
||||
if (arrLabel) {
|
||||
const e = map.get(arrLabel) ?? empty()
|
||||
e.upcoming++
|
||||
e.label = arrLabel
|
||||
e.fullName = f.arrival_airport?.name ?? arrLabel
|
||||
map.set(arrLabel, e)
|
||||
}
|
||||
})
|
||||
|
||||
return [...map.values()]
|
||||
.sort((a, b) =>
|
||||
(b.departures + b.arrivals + b.upcoming) - (a.departures + a.arrivals + a.upcoming)
|
||||
)
|
||||
})
|
||||
|
||||
const totalAirports = 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: '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) },
|
||||
])
|
||||
|
||||
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', '#a150d5', '#ffc107'],
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
categories: series.value.map(s => s.label),
|
||||
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;
|
||||
}
|
||||
|
||||
.ct-sub {
|
||||
font-size: 11px;
|
||||
color: #556677;
|
||||
|
||||
Reference in New Issue
Block a user