Added Crew and General Aviation Filters

resources/js/Components/FlightsGoneBy/Charts/TopRoutesChart.vue

@@ -1,11 +1,49 @@
 <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="18"
+    >
+        <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>
-
-<style scoped>
-
-</style>