mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 05:12:14 +00:00
Marc-André Bombeck
4aaed5c312
Three pieces of code answered "what hour is it" for the salutation. The snapshot builder computed a `greetingHour` in the user's zone and put it on the payload so clients would not have to; no client ever read it. The insights hero derived one through the shared `hourInTz`. The dashboard header derived one through a local helper that fell back to the DEVICE clock whenever the runtime could not resolve the configured zone, which is what happens to an IANA entry the browser's data does not yet carry. At one instant, for one account, those three returned 20, 21 and 05. Keep the client end and drop the server one. The hour is a clock reading, not a fact about the record, and the snapshot body serves stale for up to an hour past its fresh TTL, so a stored hour can name a salutation the clock has left behind. What the server IS authoritative for is the zone, and that already travels on the same payload and is already what both surfaces read. Both greetings now share `hourInTz`, so an unresolvable zone falls back to the same default the rest of the app uses instead of to the device. The header's private helper is gone; it had no other caller. Two tests pinned the old shape by asserting the payload carried an hour. Inverted rather than deleted: the payload must now be shown NOT to carry one, which is the property that was missing when the field went unread for months. `greetingHour` leaves the response contract, so a native client decoding it as required needs the field made optional or dropped.
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
/**
|
|
* Range-display helpers for the dashboard tile strip and chart grid:
|
|
* traffic-light colour classes, the colour-legend hint block, the
|
|
* minutes→hours sleep projection, and the timezone-aware greeting hour.
|
|
*
|
|
* Extracted from the dashboard page; the composition (which tile uses
|
|
* which range) stays there.
|
|
*/
|
|
import type * as React from "react";
|
|
import type { TrafficRange } from "@/lib/analytics/value-bands";
|
|
import type { DataSummary } from "@/lib/analytics/trends";
|
|
|
|
export interface RangeDisplayConfig {
|
|
range: TrafficRange | null;
|
|
}
|
|
|
|
/**
|
|
* v1.11.4 — minutes→hours projection of a `DataSummary` for the sleep
|
|
* tile. The server emits `summaries.SLEEP_DURATION` as per-night minutes;
|
|
* the tile renders hours. Every value-bearing field (latest / min / max /
|
|
* mean / median / avg7 / avg30 / avg30LastMonth / avg30LastYear) divides
|
|
* by 60; the slope tuples scale their `slope` (per-day rate) by the same
|
|
* factor so the trend arrow stays consistent; count / direction /
|
|
* confidence are unit-free and pass through.
|
|
*/
|
|
export function toHoursSummary(s: DataSummary): DataSummary {
|
|
const h = (v: number | null | undefined): number | null =>
|
|
v == null ? null : Math.round((v / 60) * 100) / 100;
|
|
const scaleSlope = (slope: DataSummary["slope7"]): DataSummary["slope7"] =>
|
|
slope == null
|
|
? null
|
|
: { ...slope, slope: Math.round((slope.slope / 60) * 1000) / 1000 };
|
|
return {
|
|
...s,
|
|
latest: h(s.latest),
|
|
min: h(s.min),
|
|
max: h(s.max),
|
|
mean: h(s.mean),
|
|
median: h(s.median),
|
|
avg7: h(s.avg7),
|
|
avg30: h(s.avg30),
|
|
avg30LastMonth: h(s.avg30LastMonth),
|
|
avg30LastYear: h(s.avg30LastYear),
|
|
slope7: scaleSlope(s.slope7),
|
|
slope30: scaleSlope(s.slope30),
|
|
};
|
|
}
|
|
|
|
export function getRangeColorClass(
|
|
value: number | null | undefined,
|
|
config: RangeDisplayConfig,
|
|
): string | undefined {
|
|
const range = config.range;
|
|
if (value == null || !range) return undefined;
|
|
const inGreen = value >= range.greenMin && value <= range.greenMax;
|
|
const inOrange =
|
|
!inGreen && value >= range.orangeMin && value <= range.orangeMax;
|
|
|
|
if (inGreen) return "text-success";
|
|
if (inOrange) return "text-warning";
|
|
return "text-destructive";
|
|
}
|
|
|
|
export function getRangeHint(
|
|
unit: string,
|
|
config: RangeDisplayConfig,
|
|
t: (key: string) => string,
|
|
formatNumber: (value: number, fractionDigits?: number) => string,
|
|
): React.ReactNode | undefined {
|
|
const range = config.range;
|
|
if (!range) return undefined;
|
|
|
|
const format = (value: number) => formatNumber(value, 1);
|
|
|
|
return (
|
|
<>
|
|
<p>
|
|
<span className="text-success font-bold">{t("charts.colorGreen")}</span>{" "}
|
|
{format(range.greenMin)}-{format(range.greenMax)} {unit}
|
|
</p>
|
|
<p>
|
|
<span className="text-warning font-bold">
|
|
{t("charts.colorOrange")}
|
|
</span>{" "}
|
|
{format(range.orangeMin)}-{format(range.greenMin)} {t("common.or")}{" "}
|
|
{format(range.greenMax)}-{format(range.orangeMax)} {unit}
|
|
</p>
|
|
<p>
|
|
<span className="text-destructive font-bold">
|
|
{t("charts.colorRed")}
|
|
</span>{" "}
|
|
{"< "}
|
|
{format(range.orangeMin)} {t("common.or")} {"> "}
|
|
{format(range.orangeMax)} {unit}
|
|
</p>
|
|
</>
|
|
);
|
|
}
|