// widgets.jsx — visual atoms for the 標靶招募分析 dashboard
// Multi-ring, dial, mini bar chart, sparkline, glyphs, etc.
const { useState, useEffect, useRef } = React;
// ─────────────────────────────────────────────────────────────
// Concentric multi-ring with orbital glyphs (the "命盤環")
// ─────────────────────────────────────────────────────────────
function MultiRing({ a = 0.78, b = 0.62, c = 0.50, size = 158 }) {
const cx = size / 2, cy = size / 2;
const R = [size * 0.43, size * 0.33, size * 0.23];
const W = size * 0.07;
const ring = (r, prog, color, glow) => {
const C = 2 * Math.PI * r;
return (
);
};
// orbital glyphs — small floating tags inside rings
const glyphs = [
{ angle: 70, r: R[0] - W*0.2, color: 'var(--pink-soft)', symbol: '♕' }, // 命主
{ angle: 160, r: R[0] - W*0.2, color: 'var(--purple)', symbol: '☉' }, // 天命
{ angle: 230, r: R[1] - W*0.2, color: 'var(--neon-green)',symbol: '✦' }, // 共振
{ angle: 310, r: R[1] - W*0.2, color: 'var(--amber)', symbol: '⚖' }, // 阿卡西
{ angle: 40, r: R[2] - W*0.2, color: 'var(--magenta)', symbol: '✶' }, // 標靶
];
return (
);
}
// ─────────────────────────────────────────────────────────────
// Mini-ring used in the phase strip (one per day)
// ─────────────────────────────────────────────────────────────
function PhaseRing({ active = false, label, day, scores = [0.7, 0.5, 0.4], dim = false }) {
const size = 42, cx = size/2, cy = size/2;
const R = [size*0.42, size*0.30, size*0.18];
const W = size*0.10;
const colors = active
? ['var(--purple)', 'var(--neon-green)', 'var(--magenta)']
: ['rgba(176,124,255,0.55)', 'rgba(43,212,168,0.55)', 'rgba(255,93,162,0.55)'];
if (dim) {
return (
{label}
{day}
);
}
const ring = (r, p, color) => {
const C = 2*Math.PI*r;
return (
);
};
return (
{label}
{day}
);
}
// ─────────────────────────────────────────────────────────────
// Hourly tick bar (the strip under the main card)
// ─────────────────────────────────────────────────────────────
function TickStrip({ ticks = 27, peakIdx = [3,4,8,9,10,14,15,19,20] }) {
return (