Added Charts

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

@@ -3,7 +3,7 @@
         <div class="chart-title">Top airlines</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,13 @@
                     :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>
@@ -23,21 +30,39 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Flight } from '@/Types/types'
+import type {Flight, SharedProps} from '@/Types/types'
+import { useChartTooltip } from '@/Composables/useChartTooltip'
+import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
+import {usePage} from "@inertiajs/vue3";
+
+const page = usePage<SharedProps>().props
+
 
 const props = defineProps<{
     flights: Flight[]
     upcomingFlights: Flight[]
 }>()
 
+interface AirlineItem {
+    name: string
+    past: number
+    upcoming: number
+    id: number
+}
+
+const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<AirlineItem>()
+
 const MAX_VISIBLE = 12
 const BAR_HEIGHT = 32
 
-function countAirlines(flights: Flight[]): Map<string, number> {
-    const counts = new Map<string, number>()
+function countAirlines(flights: Flight[]): Map<string, { count: number; id: number }> {
+    const counts = new Map<string, { count: number; id: number }>()
     flights.forEach(f => {
-        const name = f.airline?.name ?? null
-        if (name) counts.set(name, (counts.get(name) ?? 0) + 1)
+        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
 }
@@ -45,14 +70,13 @@ function countAirlines(flights: Flight[]): Map<string, number> {
 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,
-            past: past.get(name) ?? 0,
-            upcoming: upcoming.get(name) ?? 0,
+            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))
 })
@@ -65,7 +89,7 @@ const scrollHeight = computed(() => {
 })
 
 const chartSeries = computed(() => [
-    { name: 'Flights', data: series.value.map(s => s.past) },
+    { name: 'Flights',  data: series.value.map(s => s.past) },
     { name: 'Upcoming', data: series.value.map(s => s.upcoming) },
 ])
 
@@ -77,6 +101,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: {
@@ -97,10 +128,7 @@ const chartOptions = computed(() => ({
     },
     yaxis: {
         labels: {
-            style: {
-                colors: '#778899',
-                fontSize: '12px',
-            },
+            style: { colors: '#778899', fontSize: '12px' },
         },
     },
     grid: { show: false },
@@ -112,12 +140,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 } },
     },
@@ -152,18 +175,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;