lanyuanxiaoyao
48a9e96ec2
- 卡片宽度从 280px 调整为 270px，确保 StatusBar 30 个色块完整显示 - 布局从水平两行改为垂直三层：标题行、StatusBar、Sparkline 各占一行 - Sparkline 从固定 80x32px 改为占满宽度（约 238px x 40px） - 三层之间使用 12px gap 间距 - 类名重构：card-row-1 -> card-header，拆分 card-row-2 为 card-status-bar 和 card-sparkline
26 lines
712 B
TypeScript
26 lines
712 B
TypeScript
import { Line, LineChart, ResponsiveContainer } from "recharts";
|
|
import type { RecentSample } from "../../shared/api";
|
|
|
|
interface MiniSparklineProps {
|
|
data: RecentSample[];
|
|
}
|
|
|
|
export function MiniSparkline({ data }: MiniSparklineProps) {
|
|
const chartData = data
|
|
.filter((s) => s.durationMs !== null)
|
|
.map((s) => ({ duration: s.durationMs! }))
|
|
.reverse();
|
|
|
|
if (chartData.length === 0) {
|
|
return <span className="sparkline-empty">-</span>;
|
|
}
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={40}>
|
|
<LineChart data={chartData}>
|
|
<Line type="monotone" dataKey="duration" stroke="#356dd2" strokeWidth={1.5} dot={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|