Added Charts
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="chart-title">Top countries</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,16 @@
|
||||
: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>
|
||||
@@ -24,23 +34,49 @@
|
||||
<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
|
||||
}>()
|
||||
|
||||
const MAX_VISIBLE = 12
|
||||
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
|
||||
|
||||
function countCountries(flights: Flight[]): Map<string, number> {
|
||||
const counts = new Map<string, number>()
|
||||
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 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)
|
||||
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
|
||||
@@ -49,36 +85,27 @@ function countCountries(flights: Flight[]): Map<string, number> {
|
||||
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,
|
||||
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)
|
||||
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),
|
||||
},
|
||||
{ name: 'Flights', data: series.value.map(s => s.past) },
|
||||
{ name: 'Upcoming', data: series.value.map(s => s.upcoming) },
|
||||
])
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
@@ -89,6 +116,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: {
|
||||
@@ -100,9 +134,7 @@ const chartOptions = computed(() => ({
|
||||
},
|
||||
},
|
||||
colors: ['#4da6ff', '#ffc107'],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
xaxis: {
|
||||
categories: series.value.map(s => s.name),
|
||||
labels: { show: false },
|
||||
@@ -111,15 +143,10 @@ const chartOptions = computed(() => ({
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#778899',
|
||||
fontSize: '12px',
|
||||
},
|
||||
style: { colors: '#778899', fontSize: '12px' },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
grid: { show: false },
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
@@ -128,14 +155,7 @@ const chartOptions = computed(() => ({
|
||||
markers: { width: 8, height: 8, radius: 2 },
|
||||
itemMargin: { horizontal: 8 },
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: (val: number) => `${val} flights`,
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
states: {
|
||||
hover: { filter: { type: 'lighten', value: 0.1 } },
|
||||
},
|
||||
@@ -170,18 +190,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;
|
||||
|
||||
Reference in New Issue
Block a user