dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more airlines and fix edit bugs

Browse Source
This commit is contained in:
josh
2026-04-20 16:42:11 +10:00
parent 061ee9dd07
commit e007824fa9
15 changed files with 458 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue
+5 -5
View File
@@ -18,7 +18,7 @@ const chartOptions = computed(() => ({
type: 'donut',
background: 'transparent',
fontFamily: 'inherit',
lazy: true,
animations: { enabled: false },
},
theme: { mode: 'dark' },
labels: props.labels,
@@ -64,20 +64,16 @@ const chartOptions = computed(() => ({
},
}))
const ready = ref(false)
</script>
<template>
<div class="chart-wrap">
<div class="chart-title">{{ title }}</div>
<PlaneLoader v-if="!ready" />
<VueApexCharts
type="donut"
:height="height"
:options="options ?? chartOptions"
:series="series"
:class="{ 'chart-hidden': !ready }"
@mounted="ready = true"
/>
</div>
</template>
@@ -100,4 +96,8 @@ const ready = ref(false)
.chart-hidden {
visibility: hidden;
}
:deep(svg) {
outline: none;
}
</style>
resources/js/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue
+5 -5
View File
@@ -37,7 +37,7 @@ const chartOptions = computed(() => ({
toolbar: { show: false },
animations: { enabled: false },
stacked: true,
lazy: true,
animation: { enabled: false },
},
theme: { mode: 'dark' },
plotOptions: {
@@ -74,7 +74,6 @@ const chartOptions = computed(() => ({
},
}))
const ready = ref(false)
</script>
<template>
@@ -83,14 +82,11 @@ const ready = ref(false)
<div v-if="categories.length" class="chart-outer">
<div class="chart-scroll" :style="{ height: scrollHeight }">
<PlaneLoader v-if="!ready" />
<VueApexCharts
type="bar"
:height="chartHeight"
:options="options ?? chartOptions"
:series="series"
:class="{ 'chart-hidden': !ready }"
@mounted="ready = true"
/>
</div>
@@ -167,6 +163,10 @@ const ready = ref(false)
color: #445566;
}
:deep(svg) {
outline: none;
}
.chart-hidden {
visibility: hidden;
}
resources/js/Components/FlightsGoneBy/Charts/ChartTypes/VerticalBarChart.vue
+86 -30
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
import { ref, watch, onMounted } from 'vue'
import VueApexCharts from 'vue3-apexcharts'
import { ChartType } from "@/Types/types"
@@ -8,19 +7,24 @@ const props = defineProps<{
type: ChartType
title: string
height: number | string
series: unknown[]
series: { name: string; data: number[] }[]
categories: unknown[]
options?: object
}>()
const chartOptions = computed(() => ({
const chartRef = ref()
const isUpdating = ref(false)
const ready = ref(false)
let rafId: number | null = null
const staticOptions = {
chart: {
type: 'bar',
stacked: true,
toolbar: { show: false },
background: 'transparent',
fontFamily: 'inherit',
lazy: true,
animations: { enabled: false },
},
theme: { mode: 'dark' },
plotOptions: {
@@ -37,12 +41,6 @@ const chartOptions = computed(() => ({
yaxis: { lines: { show: true } },
xaxis: { lines: { show: false } },
},
xaxis: {
categories: props.categories,
axisBorder: { show: false },
axisTicks: { show: false },
labels: { style: { colors: '#445566', fontSize: '12px' } },
},
yaxis: {
labels: { style: { colors: '#445566', fontSize: '12px' } },
},
@@ -58,23 +56,59 @@ const chartOptions = computed(() => ({
hover: { filter: { type: 'lighten', value: 0.1 } },
active: { filter: { type: 'none' } },
},
}))
}
const ready = ref(false)
const initialOptions = {
...staticOptions,
xaxis: {
categories: props.categories,
axisBorder: { show: false },
axisTicks: { show: false },
labels: { style: { colors: '#445566', fontSize: '12px' } },
},
}
onMounted(() => { ready.value = true })
watch(
[() => props.categories, () => props.series],
([cats, series]) => {
if (!ready.value) return
// Show skeleton immediately, defer the ApexCharts work
isUpdating.value = true
if (rafId !== null) cancelAnimationFrame(rafId)
rafId = requestAnimationFrame(() => {
chartRef.value?.updateOptions(
{ xaxis: { categories: cats } },
false,
false,
)
chartRef.value?.updateSeries(series, false)
isUpdating.value = false
rafId = null
})
},
{ deep: false }
)
</script>
<template>
<div class="chart-wrap">
<div class="chart-title">{{title}}</div>
<PlaneLoader v-if="!ready" />
<VueApexCharts
:type="type"
:height="height"
:options="options ?? chartOptions"
:series="series"
:class="{ 'chart-hidden': !ready }"
@mounted="ready = true"
/>
<div class="chart-title">{{ title }}</div>
<div class="chart-area" :style="{ height: typeof height === 'number' ? height + 'px' : height }">
<VueApexCharts
ref="chartRef"
:type="type"
:height="height"
:options="options ?? initialOptions"
:series="series"
:style="{ opacity: isUpdating ? 0 : 1 }"
class="apex-chart"
/>
<div v-if="isUpdating" class="chart-skeleton" />
</div>
</div>
</template>
@@ -93,12 +127,34 @@ const ready = ref(false)
letter-spacing: 0.08em;
}
.chart-empty {
height: 280px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #445566;
.chart-area {
position: relative;
}
.apex-chart {
transition: opacity 0.15s ease;
}
.chart-skeleton {
position: absolute;
inset: 0;
border-radius: 6px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.03) 25%,
rgba(255, 255, 255, 0.07) 50%,
rgba(255, 255, 255, 0.03) 75%
);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
:deep(svg) {
outline: none;
}
</style>