Import source: web/src/components/RadialDay
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,257 @@
|
|||||||
|
import { memo, useMemo, useState } from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import type { Bucket, LiveTarget } from "../lib/types";
|
||||||
|
import { arcPath, polar } from "../lib/geometry";
|
||||||
|
import { fmtHour, fmtLatency, fmtNumber } from "../lib/format";
|
||||||
|
import { useUI } from "../lib/ui";
|
||||||
|
|
||||||
|
const CX = 160;
|
||||||
|
const CY = 160;
|
||||||
|
const R_SEG = 118; // segment centerline radius
|
||||||
|
const SEG_W = 17; // segment stroke width
|
||||||
|
const GAP_DEG = 2.6;
|
||||||
|
const HOUR_MS = 3_600_000;
|
||||||
|
|
||||||
|
interface HourSlot {
|
||||||
|
start: number; // unix ms, aligned to the hour
|
||||||
|
hourOfDay: number; // local clock hour 0..23
|
||||||
|
total: number;
|
||||||
|
failed: number;
|
||||||
|
avgLatency: number;
|
||||||
|
isCurrent: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Folds per-target hourly buckets into 24 wall-clock slots. */
|
||||||
|
function buildSlots(bucketLists: Bucket[][]): HourSlot[] {
|
||||||
|
const nowHour = Math.floor(Date.now() / HOUR_MS) * HOUR_MS;
|
||||||
|
const slots: HourSlot[] = [];
|
||||||
|
for (let i = 23; i >= 0; i--) {
|
||||||
|
const start = nowHour - i * HOUR_MS;
|
||||||
|
slots.push({
|
||||||
|
start,
|
||||||
|
hourOfDay: new Date(start).getHours(),
|
||||||
|
total: 0,
|
||||||
|
failed: 0,
|
||||||
|
avgLatency: 0,
|
||||||
|
isCurrent: i === 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const byStart = new Map(slots.map((s) => [s.start, s]));
|
||||||
|
for (const buckets of bucketLists) {
|
||||||
|
for (const b of buckets) {
|
||||||
|
const slot = byStart.get(Math.floor(b.start / HOUR_MS) * HOUR_MS);
|
||||||
|
if (!slot) continue;
|
||||||
|
// latency: weighted mean across targets
|
||||||
|
const okHere = b.total - b.failed;
|
||||||
|
const okBefore = slot.total - slot.failed;
|
||||||
|
if (okHere > 0) {
|
||||||
|
slot.avgLatency =
|
||||||
|
(slot.avgLatency * okBefore + b.avg_latency_ms * okHere) /
|
||||||
|
Math.max(1, okBefore + okHere);
|
||||||
|
}
|
||||||
|
slot.total += b.total;
|
||||||
|
slot.failed += b.failed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return slots;
|
||||||
|
}
|
||||||
|
|
||||||
|
function slotColor(s: HourSlot): string {
|
||||||
|
if (s.total === 0) return "var(--color-ink-800)";
|
||||||
|
if (s.failed === s.total) return "var(--color-down)";
|
||||||
|
if (s.failed > 0) return "var(--color-warn)";
|
||||||
|
return "var(--color-up)";
|
||||||
|
}
|
||||||
|
|
||||||
|
const HourMarks = memo(function HourMarks({ lang }: { lang: "en" | "fa" }) {
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
{[0, 6, 12, 18].map((h) => {
|
||||||
|
const p = polar(CX, CY, 146, h * 15);
|
||||||
|
return (
|
||||||
|
<text
|
||||||
|
key={h}
|
||||||
|
x={p.x}
|
||||||
|
y={p.y + 3}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontFamily="var(--font-mono)"
|
||||||
|
fontSize={9}
|
||||||
|
fill="var(--color-paper-faint)"
|
||||||
|
className="tabular"
|
||||||
|
>
|
||||||
|
{fmtHour(lang, h)}
|
||||||
|
</text>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{Array.from({ length: 24 }, (_, h) => {
|
||||||
|
if (h % 6 === 0) return null;
|
||||||
|
const p1 = polar(CX, CY, 143, h * 15);
|
||||||
|
const p2 = polar(CX, CY, 147, h * 15);
|
||||||
|
return (
|
||||||
|
<line
|
||||||
|
key={h}
|
||||||
|
x1={p1.x}
|
||||||
|
y1={p1.y}
|
||||||
|
x2={p2.x}
|
||||||
|
y2={p2.y}
|
||||||
|
stroke="var(--color-ink-700)"
|
||||||
|
strokeWidth={0.6}
|
||||||
|
opacity={0.7}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
interface RadialDayProps {
|
||||||
|
targets: LiveTarget[];
|
||||||
|
dayBuckets: Record<string, Bucket[]>;
|
||||||
|
/** Restrict to a single target id (detail view). */
|
||||||
|
only?: string;
|
||||||
|
size?: number;
|
||||||
|
caption?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Circular visualization #3 — the day dial.
|
||||||
|
* A clock face where each of the last 24 hours is one segment placed at
|
||||||
|
* its true wall-clock position, colored by status. A full day, one glance.
|
||||||
|
*/
|
||||||
|
export function RadialDay({
|
||||||
|
targets,
|
||||||
|
dayBuckets,
|
||||||
|
only,
|
||||||
|
size,
|
||||||
|
caption = true,
|
||||||
|
}: RadialDayProps) {
|
||||||
|
const { t, lang, reduced } = useUI();
|
||||||
|
const [hover, setHover] = useState<HourSlot | null>(null);
|
||||||
|
|
||||||
|
const slots = useMemo(() => {
|
||||||
|
const lists = only
|
||||||
|
? [dayBuckets[only] ?? []]
|
||||||
|
: targets.map((x) => dayBuckets[x.id] ?? []);
|
||||||
|
return buildSlots(lists);
|
||||||
|
}, [targets, dayBuckets, only]);
|
||||||
|
|
||||||
|
const today = new Intl.DateTimeFormat(lang === "fa" ? "fa-IR" : "en-US", {
|
||||||
|
weekday: "short",
|
||||||
|
day: "numeric",
|
||||||
|
month: "short",
|
||||||
|
}).format(new Date());
|
||||||
|
|
||||||
|
const current = slots.find((s) => s.isCurrent)!;
|
||||||
|
const handAngle = ((Date.now() % (24 * HOUR_MS)) / (24 * HOUR_MS)) * 360;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<figure className="relative select-none">
|
||||||
|
{caption && (
|
||||||
|
<figcaption className="microlabel mb-3 flex items-baseline gap-4">
|
||||||
|
<span>{t.dial}</span>
|
||||||
|
<span className="rule-fade flex-1" />
|
||||||
|
<span>{t.systemDay}</span>
|
||||||
|
</figcaption>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 320 320"
|
||||||
|
style={size ? { width: size, height: size } : undefined}
|
||||||
|
className={size ? "block" : "w-full max-w-[400px] mx-auto block"}
|
||||||
|
role="img"
|
||||||
|
aria-label={t.systemDay}
|
||||||
|
>
|
||||||
|
<HourMarks lang={lang} />
|
||||||
|
|
||||||
|
{/* structure hairlines */}
|
||||||
|
<circle cx={CX} cy={CY} r={R_SEG - SEG_W / 2 - 4} fill="none" stroke="var(--color-ink-800)" strokeWidth={0.5} opacity={0.6} />
|
||||||
|
<circle cx={CX} cy={CY} r={R_SEG + SEG_W / 2 + 4} fill="none" stroke="var(--color-ink-800)" strokeWidth={0.5} opacity={0.6} />
|
||||||
|
|
||||||
|
{/* the 24 hour segments at their true clock positions —
|
||||||
|
hours without data stay hairline-thin; data carries the weight */}
|
||||||
|
{slots.map((slot, i) => {
|
||||||
|
const a0 = slot.hourOfDay * 15 + GAP_DEG / 2;
|
||||||
|
const a1 = (slot.hourOfDay + 1) * 15 - GAP_DEG / 2;
|
||||||
|
const color = slotColor(slot);
|
||||||
|
const hasData = slot.total > 0;
|
||||||
|
const isHover = hover?.start === slot.start;
|
||||||
|
const restOpacity = !hasData ? 0.55 : isHover ? 1 : slot.isCurrent ? 0.95 : 0.8;
|
||||||
|
return (
|
||||||
|
<motion.path
|
||||||
|
key={slot.start}
|
||||||
|
d={arcPath(CX, CY, R_SEG, a0, a1)}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
strokeWidth={!hasData ? 2.5 : isHover ? SEG_W + 4 : SEG_W}
|
||||||
|
initial={reduced ? false : { opacity: 0, scale: 0.92 }}
|
||||||
|
animate={{ opacity: restOpacity, scale: 1 }}
|
||||||
|
transition={
|
||||||
|
reduced
|
||||||
|
? { duration: 0 }
|
||||||
|
: { type: "spring", stiffness: 110, damping: 17, delay: 0.25 + i * 0.028 }
|
||||||
|
}
|
||||||
|
style={{ transformOrigin: "160px 160px", cursor: "pointer", transition: "stroke-width 0.18s" }}
|
||||||
|
onMouseEnter={() => setHover(slot)}
|
||||||
|
onMouseLeave={() => setHover(null)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* now hand — brass, sweeps the full day like a 24h watch */}
|
||||||
|
<motion.g
|
||||||
|
initial={reduced ? false : { opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: reduced ? 0 : 1, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<line
|
||||||
|
x1={polar(CX, CY, 88, handAngle).x}
|
||||||
|
y1={polar(CX, CY, 88, handAngle).y}
|
||||||
|
x2={polar(CX, CY, R_SEG - SEG_W / 2 - 7, handAngle).x}
|
||||||
|
y2={polar(CX, CY, R_SEG - SEG_W / 2 - 7, handAngle).y}
|
||||||
|
stroke="var(--color-brass)"
|
||||||
|
strokeWidth={1}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx={polar(CX, CY, 88, handAngle).x}
|
||||||
|
cy={polar(CX, CY, 88, handAngle).y}
|
||||||
|
r={1.75}
|
||||||
|
fill="var(--color-brass)"
|
||||||
|
/>
|
||||||
|
</motion.g>
|
||||||
|
|
||||||
|
{/* center: hovered hour detail, or today's date */}
|
||||||
|
{hover ? (
|
||||||
|
<g>
|
||||||
|
<text x={CX} y={CY - 14} textAnchor="middle" fontFamily="var(--font-mono)" fontSize={11} fill="var(--color-paper)" className="tabular">
|
||||||
|
{fmtHour(lang, hover.hourOfDay)}:00–{fmtHour(lang, (hover.hourOfDay + 1) % 24)}:00
|
||||||
|
</text>
|
||||||
|
{hover.total > 0 ? (
|
||||||
|
<>
|
||||||
|
<text x={CX} y={CY + 6} textAnchor="middle" fontFamily="var(--font-mono)" fontSize={10} fill={slotColor(hover)} className="tabular">
|
||||||
|
{fmtNumber(lang, hover.total - hover.failed)}/{fmtNumber(lang, hover.total)} {t.checks}
|
||||||
|
</text>
|
||||||
|
<text x={CX} y={CY + 24} textAnchor="middle" fontFamily="var(--font-mono)" fontSize={9} fill="var(--color-paper-faint)" className="tabular">
|
||||||
|
{hover.avgLatency > 0 ? fmtLatency(lang, hover.avgLatency) : "—"}
|
||||||
|
</text>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<text x={CX} y={CY + 8} textAnchor="middle" fontFamily="var(--font-mono)" fontSize={9} fill="var(--color-paper-faint)">
|
||||||
|
{t.noData}
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
</g>
|
||||||
|
) : (
|
||||||
|
<g>
|
||||||
|
<text x={CX} y={CY - 2} textAnchor="middle" fontFamily="var(--font-display)" fontSize={22} fill="var(--color-paper)">
|
||||||
|
{today}
|
||||||
|
</text>
|
||||||
|
<text x={CX} y={CY + 20} textAnchor="middle" fontFamily="var(--font-mono)" fontSize={8} letterSpacing={lang === "fa" ? 0 : 1.5} fill="var(--color-paper-faint)" className="tabular">
|
||||||
|
{fmtNumber(lang, current.total - current.failed)}/{fmtNumber(lang, current.total)} {t.checks} · {t.now}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
</figure>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user