// ============================================================
// 共通UIコンポーネント(ダーク金融トレーダー系)
// ============================================================
const T = window.TOKENS;
// ─────────────────────────────────────────
// アイコン(ストローク型、細身)
// ─────────────────────────────────────────
const Icon = ({ name, size = 20, color = 'currentColor', stroke = 1.8 }) => {
const paths = {
home: ,
wallet: ,
cal: ,
chart: ,
more: ,
settings:,
plus: ,
check: ,
chevR: ,
chevL: ,
chevD: ,
chevU: ,
sync: ,
dot: ,
warn: ,
info: ,
close: ,
copy: ,
download:,
dl: ,
ea: ,
trash: ,
filter: ,
search: ,
external:,
zap: ,
shield: ,
edit: ,
tag: ,
minus: ,
play: ,
tester: ,
key: ,
server: ,
link: ,
circle: ,
};
return (
);
};
// ─────────────────────────────────────────
// ステータスドット
// ─────────────────────────────────────────
const StatusDot = ({ status = 'online', size = 8 }) => {
const c = status === 'online' ? T.profit :
status === 'stale' ? T.warn :
status === 'offline'? T.loss : T.fg3;
return (
);
};
// ─────────────────────────────────────────
// バッジ
// ─────────────────────────────────────────
const Badge = ({ children, tone = 'default', size = 'sm' }) => {
const tones = {
default: { bg: T.raised, fg: T.fg2, bd: T.line },
profit: { bg: T.profitBg, fg: T.profit, bd: 'rgba(34,197,94,0.25)' },
loss: { bg: T.lossBg, fg: T.loss, bd: 'rgba(244,63,94,0.25)' },
info: { bg: T.infoBg, fg: T.info, bd: 'rgba(59,130,246,0.25)' },
warn: { bg: T.warnBg, fg: T.warn, bd: 'rgba(245,158,11,0.25)' },
mt4: { bg: 'rgba(59,130,246,0.10)', fg: '#60A5FA', bd: 'rgba(59,130,246,0.25)' },
mt5: { bg: 'rgba(168,85,247,0.10)', fg: '#C084FC', bd: 'rgba(168,85,247,0.25)' },
};
const t = tones[tone] || tones.default;
const pad = size === 'xs' ? '2px 6px' : '3px 8px';
const fs = size === 'xs' ? 10 : 11;
return (
{children}
);
};
// ─────────────────────────────────────────
// 損益テキスト(色付き + 等幅)
// ─────────────────────────────────────────
const PnL = ({ value, size = 14, sign = true, compact = false, weight = 600, mono = true }) => {
if (value === null || value === undefined) {
return —;
}
const c = value > 0 ? T.profit : value < 0 ? T.loss : T.fg2;
return (
{window.fmt.jpy(value, { sign, compact })}
);
};
// ─────────────────────────────────────────
// ピル型セグメントタブ(スワイプ対応)
// ─────────────────────────────────────────
const PillTabs = ({ options, value, onChange }) => {
return (
{options.map(o => {
const active = o.value === value;
return (
);
})}
);
};
// ─────────────────────────────────────────
// カード
// ─────────────────────────────────────────
const Card = ({ children, style = {}, padding = 16, onClick }) => (
{children}
);
// ─────────────────────────────────────────
// メトリックカード(小)
// ─────────────────────────────────────────
const MetricCard = ({ label, value, sub, tone, tooltip, icon }) => {
return (
{label}
{tooltip && }
{value}
{sub && (
{sub}
)}
);
};
// ─────────────────────────────────────────
// スパークライン
// ─────────────────────────────────────────
const Sparkline = ({ data, width = 100, height = 32, color, fill = true }) => {
if (!data || data.length === 0) return null;
const values = data.map(d => typeof d === 'number' ? d : d.running);
const min = Math.min(...values);
const max = Math.max(...values);
const range = max - min || 1;
const step = width / (values.length - 1 || 1);
const points = values.map((v, i) => [i * step, height - ((v - min) / range) * height]);
const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const areaPath = `${path} L${width} ${height} L0 ${height} Z`;
const finalColor = color || (values[values.length - 1] >= values[0] ? T.profit : T.loss);
const id = 'sg-' + Math.random().toString(36).slice(2, 8);
return (
);
};
// ─────────────────────────────────────────
// ボタン
// ─────────────────────────────────────────
const Button = ({ children, variant = 'primary', size = 'md', onClick, disabled, style = {}, icon }) => {
const variants = {
primary: { bg: T.fg, fg: T.bg, bd: T.fg },
secondary: { bg: T.raised, fg: T.fg, bd: T.line },
ghost: { bg: 'transparent', fg: T.fg2, bd: 'transparent' },
profit: { bg: T.profit, fg: '#052E15', bd: T.profit },
loss: { bg: T.lossBg, fg: T.loss, bd: 'rgba(244,63,94,0.3)' },
info: { bg: T.info, fg: '#fff', bd: T.info },
};
const sizes = {
sm: { pad: '6px 12px', fs: 12, h: 30 },
md: { pad: '10px 16px', fs: 13, h: 40 },
lg: { pad: '14px 20px', fs: 14, h: 48 },
};
const v = variants[variant], s = sizes[size];
return (
);
};
// ─────────────────────────────────────────
// トップナビ(タイトルバー・ダーク版)
// ─────────────────────────────────────────
const TopBar = ({ title, right, left, sub }) => (
);
// ─────────────────────────────────────────
// ボトムタブ
// ─────────────────────────────────────────
const BottomTabs = ({ current, onChange }) => {
const tabs = [
{ id: 'home', icon: 'home', label: 'ホーム' },
{ id: 'acc', icon: 'wallet', label: '口座' },
{ id: 'cal', icon: 'cal', label: 'カレンダー' },
{ id: 'ana', icon: 'chart', label: '分析' },
{ id: 'more', icon: 'more', label: 'その他' },
];
return (
{tabs.map(t => {
const active = current === t.id;
return (
);
})}
);
};
// ─────────────────────────────────────────
// セクション見出し
// ─────────────────────────────────────────
const SectionHead = ({ title, action, actionLabel = '見る' }) => (
{title}
{action && (
)}
);
// ─────────────────────────────────────────
// 空状態ヒーロー(データ0)
// ─────────────────────────────────────────
const EmptyHero = ({ onStart }) => (
まだデータがありません
HUBを起動すると口座情報が自動で表示されます
);
// Global export
Object.assign(window, {
Icon, StatusDot, Badge, PnL, PillTabs, Card, MetricCard, Sparkline,
Button, TopBar, BottomTabs, SectionHead, EmptyHero,
});