50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from '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 RouteItem {
|
|
label: string
|
|
depLabel: string
|
|
arrLabel: string
|
|
past: number
|
|
upcoming: number
|
|
}
|
|
|
|
const props = defineProps<{
|
|
flightStats: FlightStats
|
|
}>()
|
|
|
|
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<RouteItem>()
|
|
|
|
const routes = computed(() => props.flightStats.topRoutes.value.routes)
|
|
const series = computed(() => props.flightStats.topRoutes.value.series)
|
|
</script>
|
|
|
|
<template>
|
|
<ScrollingHorizontalBarChart
|
|
title="Top Routes"
|
|
:series="series"
|
|
:categories="routes.map(r => r.label)"
|
|
:footer-value="routes.length"
|
|
footer-label="total routes"
|
|
:max-visible="12"
|
|
>
|
|
<template #tooltip="{ visible, x, y, index }">
|
|
<ChartTooltip :visible="visible" :x="x" :y="y">
|
|
<div class="ct-name">{{ index !== null ? routes[index].label : '' }}</div>
|
|
<div class="ct-row">
|
|
<span class="ct-label">Flights</span>
|
|
<span class="ct-val">{{ index !== null ? routes[index].past : '' }}</span>
|
|
</div>
|
|
<div v-if="index !== null && routes[index].upcoming" class="ct-row">
|
|
<span class="ct-label">Upcoming</span>
|
|
<span class="ct-val">{{ routes[index].upcoming }}</span>
|
|
</div>
|
|
</ChartTooltip>
|
|
</template>
|
|
</ScrollingHorizontalBarChart>
|
|
</template>
|