数据
BigNumber
一个数字,用标题的字号。
什么时候用它
要报的就只有一个数。给单个值画图,图形本身不承载任何信息,读者还得去解码一根坐标轴,才能拿回那个本可以直接印出来的数字。
示例
default
Monthly revenue$48,210
Error rate2.4%
Active projects1,204
with sparkline
Monthly revenue$48,210
p95 latency1.34s
说明
一个数字,用标题的字号。
这是仪表盘最常需要、而绝大多数图表库都不提供的形式,理由是「它不算图表」。可只要要报的就只有一个数,它就是正确答案:给单个值画图,图形的形状什么都不承载,读者还得去解码一根坐标轴,才能拿回那个本可以直接印出来的数字。
变化量才是它比一个 <p> 更值得存在的地方。方向由调用处通过 intent 说明,绝不推断:「错误率降了 12%」是好消息,「收入降了 12%」不是,而没有哪个组件分得清自己手上拿的是哪一个。方向已知时,由箭头和文字承担它——状态色是第三重信号,绝不是唯一的一重。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | ReactNode | 这个数字数的是什么。 | |
| value必填 | ReactNode | 数字本身,**已经格式化好**——这个组件不去猜单位。 | |
| children | ReactNode | 一条迷你折线、一句注解、一个说明。放在数字下面。 | |
| className | string | — | |
| delta | BigNumberDelta | — |
类型
export type DeltaIntent = 'up-is-good' | 'down-is-good' | 'neutral'无障碍
- 变化的方向由调用处通过 intent 明说,绝不从正负号推断:「错误率降了 12%」是好消息,「收入降了 12%」不是,而组件无从判断自己手上拿的是哪一个。
- 方向由箭头和文字承担,状态色是第三重信号、绝不是唯一的一重——所以这个读法在灰度、强制颜色和色盲情况下都还成立。
- value 接收的是**已经格式化好**的值。这个组件不去猜单位、货币或地区格式。