Fix units on tide graph

Author: bkeepers

website/src/components/TideHeight.tsx

@@ -1,13 +1,4 @@
-const IMPERIAL_LOCALES = ["en-US", "en-LR", "my-MM"];
-
-const locale =
-  typeof navigator !== "undefined" ? navigator.language : undefined;
-
-function usesImperialUnits(locale: string | undefined): boolean {
-  return !!locale && IMPERIAL_LOCALES.includes(locale);
-}
-
-const imperial = usesImperialUnits(locale);
+import { imperial } from "../utils/units";
 
 const FEET_PER_METER = 3.28084;
 const MILES_PER_METER = 0.000621371;
@@ -55,5 +46,11 @@ export function TideHeight({
   value: number;
   precision?: number;
 }) {
-  return <Distance meters={value} precision={precision} />;
+  const unit = imperial ? "ft" : "m";
+  return (
+    <span className="tabular-nums">
+      {value.toFixed(precision)}
+      <span className="text-[0.8em]"> {unit}</span>
+    </span>
+  );
 }

website/src/components/tides/TideGraph.tsx

@@ -41,7 +41,7 @@ interface Props {
 }
 
 export function TideGraph({ station, extremesData, timelineData }: Props) {
-  const units: "meters" | "feet" = "feet";
+  const units = timelineData?.units || extremesData?.units || "meters";
   const isReference = station.type === "reference";
 
   const data: TideDataPoint[] = useMemo(() => {

website/src/components/tides/TideStation.tsx

@@ -3,6 +3,7 @@ import type { Station } from "@neaps/tide-database";
 import { Temporal } from "@js-temporal/polyfill";
 import { useNeapsAPI } from "../../utils/useNeapsAPI";
 import type { ExtremesResponse, TimelineResponse } from "../../utils/tides";
+import { preferredUnits } from "../../utils/units";
 import Today from "./Today";
 import { TideGraph } from "./TideGraph";
 
@@ -33,12 +34,12 @@ export function TideStation({ station }: Props) {
 
   const { data: extremesData, loading } = useNeapsAPI<ExtremesResponse>(
     `/tides/stations/${station.id}/extremes`,
-    { start: startDate, end: endDate },
+    { start: startDate, end: endDate, units: preferredUnits },
   );
 
   const { data: timelineData } = useNeapsAPI<TimelineResponse>(
     `/tides/stations/${station.id}/timeline`,
-    { start: startDate, end: endDate },
+    { start: startDate, end: endDate, units: preferredUnits },
     { skip: !isReference },
   );
 

website/src/utils/units.ts

@@ -0,0 +1,7 @@
+const IMPERIAL_LOCALES = ["en-US", "en-LR", "my-MM"];
+
+const locale =
+  typeof navigator !== "undefined" ? navigator.language : undefined;
+
+export const imperial = !!locale && IMPERIAL_LOCALES.includes(locale);
+export const preferredUnits = imperial ? "feet" : "meters";