|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useEffect, useMemo, useState } from "react"; |
| 4 | +import { |
| 5 | + CartesianGrid, |
| 6 | + Line, |
| 7 | + LineChart, |
| 8 | + Tooltip, |
| 9 | + XAxis, |
| 10 | + YAxis, |
| 11 | +} from "recharts"; |
| 12 | +import { Card, CardContent, CardHeader } from "@/components/ui/card"; |
| 13 | +import { ChartContainer, type ChartConfig } from "@/components/ui/chart"; |
| 14 | +import { |
| 15 | + Select, |
| 16 | + SelectContent, |
| 17 | + SelectItem, |
| 18 | + SelectTrigger, |
| 19 | + SelectValue, |
| 20 | +} from "@/components/ui/select"; |
| 21 | +import { Skeleton } from "@/components/ui/skeleton"; |
| 22 | +import { useGetFlightSnapshotsChartData } from "@/lib/api-hooks"; |
| 23 | +import { DEPOSIT_RATES_CHART_RANGE_LABELS } from "@/lib/constants"; |
| 24 | +import { formatDepositRatesChartTickDate } from "@/lib/date"; |
| 25 | +import { Currency, FetchStatus, FlightAirline } from "@/lib/enums"; |
| 26 | +import { formatMoney, formatMoneyPeso } from "@/lib/number"; |
| 27 | +import type { DepositRatesChartRange } from "@/lib/types"; |
| 28 | +import { FlightPriceChartTooltip } from "@/components/flight-price-chart-tooltip"; |
| 29 | + |
| 30 | +type Props = { |
| 31 | + airline: FlightAirline; |
| 32 | + destinationCityCode: string; |
| 33 | + chartTitle?: string; |
| 34 | +}; |
| 35 | + |
| 36 | +export function FlightPriceChart({ |
| 37 | + airline, |
| 38 | + destinationCityCode, |
| 39 | + chartTitle, |
| 40 | +}: Props) { |
| 41 | + const [range, setRange] = useState<DepositRatesChartRange>("6m"); |
| 42 | + const [fetchStatus, chartData, getFlightSnapshotsChartData] = |
| 43 | + useGetFlightSnapshotsChartData(airline, destinationCityCode); |
| 44 | + |
| 45 | + useEffect(() => { |
| 46 | + getFlightSnapshotsChartData(range); |
| 47 | + |
| 48 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 49 | + }, [range]); |
| 50 | + |
| 51 | + const isLoading = |
| 52 | + fetchStatus === FetchStatus.Idle || fetchStatus === FetchStatus.Loading; |
| 53 | + |
| 54 | + const chartContainerConfig: ChartConfig = useMemo( |
| 55 | + () => ({ |
| 56 | + price: { |
| 57 | + label: chartData?.chartConfig.price?.label ?? "Price", |
| 58 | + }, |
| 59 | + }), |
| 60 | + [chartData], |
| 61 | + ); |
| 62 | + |
| 63 | + const allPrices = (chartData?.chartData ?? []).map((point) => point.price); |
| 64 | + const minPrice = allPrices.length ? Math.min(...allPrices) : 0; |
| 65 | + const maxPrice = allPrices.length ? Math.max(...allPrices) : 1; |
| 66 | + const yAxisMin = Math.max(0, minPrice - 10); |
| 67 | + const yAxisMax = maxPrice + 10; |
| 68 | + |
| 69 | + return ( |
| 70 | + <Card className="my-6"> |
| 71 | + <CardHeader className="space-y-2 pb-4"> |
| 72 | + <div className="flex flex-wrap items-center justify-between gap-2"> |
| 73 | + <h3 className="text-base font-semibold"> |
| 74 | + {chartTitle ?? |
| 75 | + `${chartData?.destinationCityName ?? destinationCityCode} Price Trend`} |
| 76 | + </h3> |
| 77 | + <Select |
| 78 | + value={range} |
| 79 | + onValueChange={(v) => setRange(v as DepositRatesChartRange)} |
| 80 | + > |
| 81 | + <SelectTrigger className="w-[160px]"> |
| 82 | + <SelectValue /> |
| 83 | + </SelectTrigger> |
| 84 | + <SelectContent> |
| 85 | + {( |
| 86 | + Object.entries(DEPOSIT_RATES_CHART_RANGE_LABELS) as Array< |
| 87 | + [DepositRatesChartRange, string] |
| 88 | + > |
| 89 | + ).map(([value, label]) => ( |
| 90 | + <SelectItem key={value} value={value}> |
| 91 | + {label} |
| 92 | + </SelectItem> |
| 93 | + ))} |
| 94 | + </SelectContent> |
| 95 | + </Select> |
| 96 | + </div> |
| 97 | + </CardHeader> |
| 98 | + <CardContent className="px-4 pb-4"> |
| 99 | + {isLoading ? ( |
| 100 | + <Skeleton className="h-[350px] w-full" /> |
| 101 | + ) : fetchStatus === FetchStatus.Failure || !chartData ? null : ( |
| 102 | + <ChartContainer |
| 103 | + config={chartContainerConfig} |
| 104 | + className="h-[350px] w-full" |
| 105 | + > |
| 106 | + <LineChart |
| 107 | + data={chartData.chartData} |
| 108 | + margin={{ top: 5, right: 10, left: -20, bottom: 5 }} |
| 109 | + > |
| 110 | + <CartesianGrid strokeDasharray="3 3" vertical={false} /> |
| 111 | + <XAxis |
| 112 | + dataKey="date" |
| 113 | + tick={{ fontSize: 11 }} |
| 114 | + tickFormatter={(value) => |
| 115 | + formatDepositRatesChartTickDate(String(value), range) |
| 116 | + } |
| 117 | + tickLine={false} |
| 118 | + axisLine={false} |
| 119 | + /> |
| 120 | + <YAxis |
| 121 | + domain={[yAxisMin, yAxisMax]} |
| 122 | + tickFormatter={(value) => |
| 123 | + chartData.currency === Currency.SGD |
| 124 | + ? formatMoney(Number(value)) |
| 125 | + : formatMoneyPeso(Number(value)) |
| 126 | + } |
| 127 | + tick={{ fontSize: 11 }} |
| 128 | + tickLine={false} |
| 129 | + axisLine={false} |
| 130 | + width={60} |
| 131 | + /> |
| 132 | + <Tooltip |
| 133 | + content={ |
| 134 | + <FlightPriceChartTooltip |
| 135 | + range={range} |
| 136 | + currency={chartData.currency} |
| 137 | + /> |
| 138 | + } |
| 139 | + cursor={{ stroke: "hsl(var(--border))", strokeWidth: 1 }} |
| 140 | + /> |
| 141 | + <Line |
| 142 | + type="monotone" |
| 143 | + dataKey="price" |
| 144 | + name={chartData.chartConfig.price?.label ?? "Price"} |
| 145 | + stroke="hsl(var(--primary))" |
| 146 | + strokeWidth={2} |
| 147 | + dot={false} |
| 148 | + connectNulls |
| 149 | + isAnimationActive={false} |
| 150 | + /> |
| 151 | + </LineChart> |
| 152 | + </ChartContainer> |
| 153 | + )} |
| 154 | + </CardContent> |
| 155 | + </Card> |
| 156 | + ); |
| 157 | +} |
0 commit comments