You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
// frontend/components/journey/Gauge.tsx — 반원 게이지 (원본 Gauge)
|
|
import type { JourneyGauge } from "@/lib/types";
|
|
|
|
const LEN = Math.PI * 64;
|
|
|
|
export function Gauge({ pct, tone, val, unit, label, sub }: JourneyGauge) {
|
|
const color = tone === "ink" ? "var(--ink)" : `var(--${tone})`;
|
|
return (
|
|
<div className="gauge">
|
|
<svg viewBox="0 0 160 104" aria-hidden>
|
|
<path
|
|
d="M16 88 A64 64 0 0 1 144 88"
|
|
fill="none"
|
|
stroke="var(--card-2)"
|
|
strokeWidth="13"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M16 88 A64 64 0 0 1 144 88"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth="13"
|
|
strokeLinecap="round"
|
|
strokeDasharray={`${(LEN * pct) / 100} ${LEN}`}
|
|
/>
|
|
</svg>
|
|
<div
|
|
style={{
|
|
marginTop: "-50px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div className="gval">{val}</div>
|
|
<div className="gunit">{unit}</div>
|
|
</div>
|
|
<div className="glabel">{label}</div>
|
|
<div className="gsub">{sub}</div>
|
|
</div>
|
|
);
|
|
}
|