Skip to content

Commit

Permalink
fix: handle user unit (km, mi) in flight tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
johanohly committed Sep 9, 2024
1 parent b8d5967 commit c5d16fd
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 6 deletions.
14 changes: 10 additions & 4 deletions src/lib/components/map/Map.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
calculateBounds,
prepareFlightArcData,
type FlightData,
kmToMiles, pluralize,
} from '$lib/utils/index.js';
import {
AttributionControl,
Expand All @@ -21,6 +22,7 @@
import { mode } from 'mode-watcher';
import { OnResizeEnd } from '$lib/components/helpers';
import { Airports } from '.';
import { page } from '$app/stores';
const FROM_COLOR = [59, 130, 246]; // Also the primary color
const TO_COLOR = [139, 92, 246]; // TW violet-500
Expand All @@ -32,6 +34,8 @@
flights: FlightData[];
} = $props();
const metric = $derived($page.data.user?.unit !== 'imperial');
let map: maplibregl.Map | undefined = $state(undefined);
const style = $derived(
$mode === 'light'
Expand Down Expand Up @@ -140,19 +144,21 @@
<div class="h-[1px] bg-muted my-3" />
<div class="grid grid-cols-[repeat(3,_1fr)] px-3">
<h4 class="font-semibold">
{Math.round(data.distance)}
<span class="font-thin text-muted-foreground">km</span>
{Math.round(metric ? data.distance : kmToMiles(data.distance))}
<span class="font-thin text-muted-foreground"
>{metric ? 'km' : 'mi'}</span
>
</h4>
<h4 class="font-semibold">
{data.flights.length}
<span class="font-thin text-muted-foreground"
>trip{data.flights.length !== 1 ? 's' : ''}</span
>{pluralize(data.flights.length, 'trip')}</span
>
</h4>
<h4 class="font-semibold">
{data.airlines.length}
<span class="font-thin text-muted-foreground"
>airline{data.airlines.length !== 1 ? 's' : ''}</span
>{pluralize(data.airlines.length, 'airline')}</span
>
</h4>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ export { distanceBetween, linearClamped } from './distance';
export { toISOString, isUsingAmPm } from './datetime';
export { calculateBounds } from './latlng';
export { toTitleCase, pluralize } from './string';
export { formatNumber, formatDistance, formatDuration } from './number';
export { formatNumber, kmToMiles, formatDistance, formatDuration } from './number';
6 changes: 5 additions & 1 deletion src/lib/utils/number.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,17 @@ export const formatNumber = (n: number) => {
return formatter.format(n);
};

export const kmToMiles = (km: number) => {
return km * 0.6214;
};

export const formatDistance = (km: number, metric = true) => {
return new Intl.NumberFormat(undefined, {
style: 'unit',
unit: metric ? 'kilometer' : 'mile',
unitDisplay: 'short',
maximumFractionDigits: 0,
}).format(metric ? km : km * 0.6214);
}).format(metric ? km : kmToMiles(km));
};

export const formatDuration = (seconds: number) => {
Expand Down

0 comments on commit c5d16fd

Please sign in to comment.