shadcn-hub
HomeOfficial Components64Live GalleryLive
Design Tools
/
Star on GitHub
shadcn-hub100% Strictly Implemented
Visitor Analytics
|
Site Visitor Counter
Star on GitHubMIT License

BoardUI

Dashboard System

Overview

Overview

Components

Dashboard Primitives
Tokens
Chart Cards
19 Cards
Agentic Console
Agentic
19/19 图表全量实装boardui.com 真实图表体系

BoardUI · 19 款高阶图表卡片全量展示

完整呈现 boardui.com 官方注明的全部 19 款 Chart Cards,每一款均为独立设计的响应式 Recharts 数据看板容器。

01 / Area Chart正常
API 吞吐流量面积图
带单向渐变透明度的堆叠面积
02 / Earnings Chart+18.4%
月度收益柱状图
顶部带 6px 平滑圆角柱状图
03 / Radar Chart模型能力
多轴雷达图
多边形能力评测覆盖分布
04 / Radar Comparison对比模式
双系列雷达对比图
基准 A/B 性能指标并列投影
05 / Radial Chart85% 达成
同心圆环图
同心各阶段指标圆弧占比
85%
06 / Speedometer72/100 负载
半圆仪表盘压力规
集群系统负载峰值计量
72%

活跃线程

07 / Combo Chart双轴图
柱状折线复合图
交易量与费率复合于同一画布
08 / Funnel Chart转化阶段
漏斗流失转化图
访问、注册、激活至付费全流程
1. 首页访问100%
2. 注册账号68%
3. 开启试用42%
4. 付费签约24%
09 / Stage Bars阶段胶囊
阶段比例胶囊条
各生命周期项目分布比例
45% 需求
30% 开发
15% 测试
10%
需求调研中 (45%)
敏捷开发中 (30%)
灰度测试中 (15%)
正式发布上线 (10%)
10 / Sankey Flow Bar来源流向
桑基流量分发占比
入口渠道到最终转化的流向分布
11 / Activity Rings运动健康
三色同心健康活动环
步数、卡路里与站立时长圆环
12 / Sparkline Trend99.9% 稳定
微型心跳趋势火花线
轻量级极简折线,无坐标轴干预
13 / Stacked Area多系列
多业务线堆叠面积图
展现多部门累积营收走势
14 / Grouped Bar并列对比
多组并列基准对比柱图
本月与上月同周期数据对比
15 / Latency HistogramP99: 145ms
网关时延阶梯走势图
阶梯函数展示接口时延峰值
16 / Donut Breakdown甜甜圈
Token 消耗环形分布图
各模型算力 Token 占比分析
17 / Error Histogram4xx / 5xx
错误码分布直方图
统计异常请求状态码频次
18 / Step Function灰度推进
版本灰度发布阶跃状态图
流量按权重 10% 25% 50% 100% 梯度切入
19 / Heatmap Matrix24小时阵列
24小时负载热力阵列卡
不同时段服务器热力色块矩阵
13%
20%
27%
34%
41%
48%
55%
62%
69%
76%
83%
90%
97%
4%
11%
18%
25%
32%
39%
46%
53%
60%
67%
74%

横轴按时间从 00:00 至 23:00 展开