Added Charts

2026-04-11 17:30:16 +10:00
parent 7a07616f03
commit e83fd3bdca
24 changed files with 2915 additions and 39 deletions
@@ -0,0 +1,112 @@
+<template>
+    <div class="chart-wrap">
+        <div class="chart-title">Flight classes</div>
+        <apexchart
+            v-if="series.length"
+            type="donut"
+            height="280"
+            :options="chartOptions"
+            :series="seriesData"
+        />
+        <div v-else class="chart-empty">No flight class data available</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Flight } from '@/Types/types'
+
+const props = defineProps<{
+    flights: Flight[]
+}>()
+
+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>
+
+<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>