Add more airlines and fix edit bugs
This commit is contained in:
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Continents visited</div>
|
||||
<apexchart
|
||||
<FlightChart
|
||||
title="Continents"
|
||||
v-if="series.length"
|
||||
type="donut"
|
||||
height="280"
|
||||
:options="chartOptions"
|
||||
:series="seriesData"
|
||||
/>
|
||||
<div v-else class="chart-empty">No continent data available</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div v-if="series.length" class="chart-outer">
|
||||
<div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
|
||||
<apexchart
|
||||
<UnstyledFlightChart
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="chartOptions"
|
||||
@@ -36,6 +36,7 @@ import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import { useChartTooltip} from "@/Composables/useChartTooltip";
|
||||
import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
|
||||
import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Flight classes</div>
|
||||
<apexchart
|
||||
<FlightChart
|
||||
title="Flight Classes"
|
||||
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'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -87,26 +85,5 @@ const chartOptions = computed(() => ({
|
||||
</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>
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Flight reasons</div>
|
||||
<apexchart
|
||||
<FlightChart
|
||||
title="Flight Reasons"
|
||||
v-if="series.length"
|
||||
type="donut"
|
||||
height="280"
|
||||
:options="chartOptions"
|
||||
:series="seriesData"
|
||||
/>
|
||||
<div v-else class="chart-empty">No flight reason data available</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">International vs Domestic</div>
|
||||
<apexchart
|
||||
<FlightChart
|
||||
title="International vs Domestic"
|
||||
v-if="series.length"
|
||||
type="donut"
|
||||
height="280"
|
||||
:options="chartOptions"
|
||||
:series="seriesData"
|
||||
/>
|
||||
<div v-else class="chart-empty">No flight data available</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -90,37 +88,4 @@ const chartOptions = computed(() => ({
|
||||
</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;
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.charts-row > * {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Flights per day of week</div>
|
||||
<apexchart
|
||||
<FlightChart
|
||||
title="Flights per day of week"
|
||||
type="bar"
|
||||
height="220"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -97,17 +96,4 @@ const chartOptions = computed(() => ({
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Flights per month</div>
|
||||
<apexchart
|
||||
type="bar"
|
||||
height="220"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
<FlightChart
|
||||
title="Flights per month"
|
||||
type="bar"
|
||||
height="220"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -93,17 +92,4 @@ const chartOptions = computed(() => ({
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Flights per year</div>
|
||||
<apexchart
|
||||
<FlightChart
|
||||
title="Flights per year"
|
||||
type="bar"
|
||||
height="220"
|
||||
:options="chartOptions"
|
||||
:series="series"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -107,17 +106,5 @@ const chartOptions = computed(() => ({
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div class="chart-wrap">
|
||||
<div class="chart-title">Seat types</div>
|
||||
<apexchart
|
||||
v-if="series.length"
|
||||
type="donut"
|
||||
height="280"
|
||||
:options="chartOptions"
|
||||
:series="seriesData"
|
||||
/>
|
||||
<div v-else class="chart-empty">No seat type data available</div>
|
||||
</div>
|
||||
<FlightChart
|
||||
title="Seat Types"
|
||||
v-if="series.length"
|
||||
type="donut"
|
||||
height="280"
|
||||
:options="chartOptions"
|
||||
:series="seriesData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightChart from "@/Components/FlightsGoneBy/FlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
@@ -87,26 +85,4 @@ const chartOptions = computed(() => ({
|
||||
</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>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div v-if="series.length" class="chart-outer">
|
||||
<div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
|
||||
<apexchart
|
||||
<UnstyledFlightChart
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="chartOptions"
|
||||
@@ -34,6 +34,7 @@ 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";
|
||||
import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
|
||||
|
||||
const page = usePage<SharedProps>().props
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div v-if="series.length" class="chart-outer">
|
||||
<div class="chart-scroll" :style="{ height: scrollHeight }" @mousemove="onMouseMove" @mouseleave="onMouseLeave">
|
||||
<apexchart
|
||||
<UnstyledFlightChart
|
||||
type="bar"
|
||||
:height="chartHeight"
|
||||
:options="chartOptions"
|
||||
@@ -44,6 +44,7 @@ import { computed } from 'vue'
|
||||
import type { Airport, Flight } from '@/Types/types'
|
||||
import { useChartTooltip } from '@/Composables/useChartTooltip'
|
||||
import ChartTooltip from '@/Components/FlightsGoneBy/Charts/ChartTooltip.vue'
|
||||
import UnstyledFlightChart from "@/Components/FlightsGoneBy/UnstyledFlightChart.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
|
||||
Reference in New Issue
Block a user