homeio

Publik
Fork dari doctor-io/homeio
Branch: main
Commit terakhir: 958d74616 Oktober 2026
1"use client";
2
3import { useMemo, useState } from "react";
4import type { HistoryMetricKey } from "@/lib/client/metrics-history";
5import type { MetricsHistoryPoint } from "@/lib/shared/contracts/system";
6import { PANEL_INSET } from "@/lib/ui/surface-tokens";
7import { cn } from "@/lib/utils";
8
9const WIDTH = 300;
10const HEIGHT = 64;
11
12export type ChartSeries = {
13  key: HistoryMetricKey;
14  label: string;
15  /** A text colour class; lines and fills use currentColor. */
16  className: string;
17};
18
19type MetricHistoryChartProps = {
20  points: MetricsHistoryPoint[];
21  series: ChartSeries[];
22  rangeMs: number;
23  now: number;
24  /** Lines break across gaps longer than this, such as a Homeio restart. */
25  gapMs: number;
26  /** Fixed top of the scale, 100 for percentages; otherwise fitted to the data. */
27  max?: number;
28  /** Fit the bottom of the scale to the data as well, for temperatures. */
29  fitMin?: boolean;
30  formatValue: (value: number) => string;
31  formatTime: (t: number) => string;
32  rangeLabel: string;
33  /**
34   * Spread a history shorter than the range across the whole width (the 15 min
35   * view). Otherwise the chart keeps the real time scale and greys out the
36   * part the server has no data for yet, so 1 h and 24 h look different.
37   */
38  fitToData?: boolean;
39  /** Shown instead of the chart while there is no reading; "Collecting…" by default. */
40  emptyLabel?: string;
41};
42
43type Segment = { x: number; y: number }[];
44
45function buildSegments(
46  points: MetricsHistoryPoint[],
47  key: HistoryMetricKey,
48  toX: (t: number) => number,
49  toY: (value: number) => number,
50  gapMs: number,
51) {
52  const segments: Segment[] = [];
53  let current: Segment = [];
54  let previousT: number | null = null;
55
56  for (const point of points) {
57    const value = point[key];
58    const gap = previousT !== null && point.t - previousT > gapMs;
59    if (typeof value !== "number" || gap) {
60      if (current.length > 0) segments.push(current);
61      current = [];
62    }
63    if (typeof value === "number") current.push({ x: toX(point.t), y: toY(value) });
64    previousT = point.t;
65  }
66  if (current.length > 0) segments.push(current);
67
68  // A lone point would draw nothing; give it a hair of width.
69  return segments.map((segment) =>
70    segment.length === 1 ? [segment[0], { x: segment[0].x + 1, y: segment[0].y }] : segment,
71  );
72}
73
74const f = (n: number) => n.toFixed(1);
75
76/**
77 * Tangents for a monotone cubic curve (Fritsch–Carlson): smooth corners that
78 * never overshoot a peak or dip below zero between two samples, so the curve
79 * stays honest about the data.
80 */
81function monotoneTangents(segment: Segment) {
82  const n = segment.length;
83  const slopes: number[] = [];
84  for (let i = 0; i < n - 1; i += 1) {
85    const dx = segment[i + 1].x - segment[i].x;
86    slopes.push(dx === 0 ? 0 : (segment[i + 1].y - segment[i].y) / dx);
87  }
88
89  const tangents = new Array<number>(n);
90  tangents[0] = slopes[0];
91  tangents[n - 1] = slopes[n - 2];
92  for (let i = 1; i < n - 1; i += 1) {
93    tangents[i] = slopes[i - 1] * slopes[i] <= 0 ? 0 : (slopes[i - 1] + slopes[i]) / 2;
94  }
95
96  for (let i = 0; i < n - 1; i += 1) {
97    if (slopes[i] === 0) {
98      tangents[i] = 0;
99      tangents[i + 1] = 0;
100      continue;
101    }
102    const a = tangents[i] / slopes[i];
103    const b = tangents[i + 1] / slopes[i];
104    const length = a * a + b * b;
105    if (length > 9) {
106      const scale = 3 / Math.sqrt(length);
107      tangents[i] = scale * a * slopes[i];
108      tangents[i + 1] = scale * b * slopes[i];
109    }
110  }
111  return tangents;
112}
113
114/** The curve through a segment's points, without its opening move. */
115function curveThrough(segment: Segment) {
116  if (segment.length < 3) {
117    return segment.slice(1).map((p) => `L${f(p.x)},${f(p.y)}`).join("");
118  }
119  const tangents = monotoneTangents(segment);
120  let path = "";
121  for (let i = 0; i < segment.length - 1; i += 1) {
122    const from = segment[i];
123    const to = segment[i + 1];
124    const third = (to.x - from.x) / 3;
125    path +=
126      `C${f(from.x + third)},${f(from.y + tangents[i] * third)} ` +
127      `${f(to.x - third)},${f(to.y - tangents[i + 1] * third)} ${f(to.x)},${f(to.y)}`;
128  }
129  return path;
130}
131
132function linePath(segments: Segment[]) {
133  return segments.map((segment) => `M${f(segment[0].x)},${f(segment[0].y)}${curveThrough(segment)}`).join("");
134}
135
136function areaPath(segments: Segment[]) {
137  return segments
138    .map((segment) => {
139      const first = segment[0];
140      const last = segment[segment.length - 1];
141      return `M${f(first.x)},${HEIGHT}L${f(first.x)},${f(first.y)}${curveThrough(segment)}L${f(last.x)},${HEIGHT}Z`;
142    })
143    .join("");
144}
145
146export function MetricHistoryChart({
147  points,
148  series,
149  rangeMs,
150  now,
151  gapMs,
152  max,
153  fitMin,
154  formatValue,
155  formatTime,
156  rangeLabel,
157  fitToData = false,
158  emptyLabel = "Collecting…",
159}: MetricHistoryChartProps) {
160  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
161  const firstT = points[0]?.t;
162  // The right edge is the latest sample, not the clock: a 24 h point is the
163  // start of its minute, so ending at "now" left an empty strip on the right.
164  const end = points.at(-1)?.t ?? now;
165  const rangeStart = end - rangeMs;
166  const partial = firstT !== undefined && firstT - rangeStart > 2 * gapMs;
167  const start = fitToData && partial && firstT !== undefined ? firstT : rangeStart;
168  const span = Math.max(end - start, 1);
169
170  const scale = useMemo(() => {
171    const values = points.flatMap((point) =>
172      series.map((s) => point[s.key]).filter((v): v is number => typeof v === "number"),
173    );
174    if (values.length === 0) return null;
175    const dataMax = Math.max(...values);
176    const dataMin = Math.min(...values);
177    const bottom = fitMin ? Math.floor(dataMin - 2) : 0;
178    let top = max ?? dataMax * 1.15;
179    if (top <= bottom) top = bottom + 1;
180    return { bottom, top };
181  }, [points, series, max, fitMin]);
182
183  const toX = (t: number) => ((t - start) / span) * WIDTH;
184  const toY = (value: number) =>
185    scale ? HEIGHT - ((value - scale.bottom) / (scale.top - scale.bottom)) * HEIGHT : HEIGHT;
186
187  const hovered = hoverIndex !== null ? points[hoverIndex] : null;
188
189  function handleMove(event: React.MouseEvent<HTMLDivElement>) {
190    if (points.length === 0) return;
191    const rect = event.currentTarget.getBoundingClientRect();
192    const t = start + ((event.clientX - rect.left) / rect.width) * span;
193    let best = 0;
194    for (let i = 1; i < points.length; i += 1) {
195      if (Math.abs(points[i].t - t) < Math.abs(points[best].t - t)) best = i;
196    }
197    setHoverIndex(best);
198  }
199
200  return (
201    <div className="flex flex-col gap-1">
202      <div
203        className={cn(PANEL_INSET, "relative h-16 overflow-hidden")}
204        onMouseMove={handleMove}
205        onMouseLeave={() => setHoverIndex(null)}
206      >
207        {scale === null ? (
208          <span className="absolute inset-0 m-auto flex items-center justify-center text-xs text-muted-foreground/50">
209            {emptyLabel}
210          </span>
211        ) : (
212          <>
213            {!fitToData && partial && firstT !== undefined ? (
214              <div
215                className="absolute inset-y-0 left-0 flex items-center justify-center overflow-hidden border-r border-dashed border-glass-border/60 bg-[repeating-linear-gradient(135deg,transparent_0_6px,hsl(var(--foreground)/0.04)_6px_12px)]"
216                style={{ width: `${(toX(firstT) / WIDTH) * 100}%` }}
217              >
218                {toX(firstT) > WIDTH * 0.25 ? (
219                  <span className="whitespace-nowrap text-[10px] text-muted-foreground/50">No data yet</span>
220                ) : null}
221              </div>
222            ) : null}
223            <svg
224              viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
225              preserveAspectRatio="none"
226              className="absolute inset-0 size-full"
227              role="img"
228              aria-label={`${series.map((s) => s.label).join(" and ")} over the last ${rangeLabel}`}
229            >
230              {series.map((s) => {
231                const segments = buildSegments(points, s.key, toX, toY, gapMs);
232                return (
233                  <g key={s.key} className={s.className}>
234                    <path d={areaPath(segments)} fill="currentColor" fillOpacity={0.12} />
235                    <path
236                      d={linePath(segments)}
237                      fill="none"
238                      stroke="currentColor"
239                      strokeWidth={1.5}
240                      strokeLinejoin="round"
241                      vectorEffect="non-scaling-stroke"
242                    />
243                  </g>
244                );
245              })}
246              {hovered ? (
247                <line
248                  x1={toX(hovered.t)}
249                  x2={toX(hovered.t)}
250                  y1={0}
251                  y2={HEIGHT}
252                  className="text-foreground/40"
253                  stroke="currentColor"
254                  strokeWidth={1}
255                  vectorEffect="non-scaling-stroke"
256                />
257              ) : null}
258            </svg>
259          </>
260        )}
261
262        {hovered ? (
263          <div
264            className="pointer-events-none absolute top-1 z-10 rounded-md border border-glass-border/60 bg-popover/95 px-2 py-1 text-[10px] shadow-lg"
265            style={
266              toX(hovered.t) > WIDTH / 2
267                ? { right: `${100 - (toX(hovered.t) / WIDTH) * 100 + 2}%` }
268                : { left: `${(toX(hovered.t) / WIDTH) * 100 + 2}%` }
269            }
270          >
271            <div className="font-mono text-muted-foreground">{formatTime(hovered.t)}</div>
272            {series.map((s) => {
273              const value = hovered[s.key] ?? null;
274              return (
275                <div key={s.key} className="flex items-center gap-1.5 whitespace-nowrap font-mono">
276                  <span className={cn("size-1.5 rounded-full bg-current", s.className)} />
277                  {series.length > 1 ? <span className="text-muted-foreground">{s.label}</span> : null}
278                  <span className="text-foreground">{value === null ? "--" : formatValue(value)}</span>
279                </div>
280              );
281            })}
282          </div>
283        ) : null}
284      </div>
285
286      <div className="flex justify-between text-[10px] text-muted-foreground/60">
287        <span>
288          {partial && firstT !== undefined
289            ? fitToData
290              ? `Since ${formatTime(firstT)}`
291              : `${rangeLabel} ago · data since ${formatTime(firstT)}`
292            : `${rangeLabel} ago`}
293        </span>
294        <span>Now</span>
295      </div>
296    </div>
297  );
298}
299