跳到正文
misoto22 design

数据

BigNumber

一个数字,用标题的字号。

什么时候用它

要报的就只有一个数。给单个值画图,图形本身不承载任何信息,读者还得去解码一根坐标轴,才能拿回那个本可以直接印出来的数字。

示例

default

Monthly revenue$48,210+12.4%up, bettervs last month
Error rate2.4%+8%up, worsevs last week
Active projects1,2040%no changevs last month

with sparkline

Monthly revenue$48,210+12.4%up, bettervs last month
p95 latency1.34s-29%down, bettervs last week

说明

一个数字,用标题的字号。

这是仪表盘最常需要、而绝大多数图表库都不提供的形式,理由是「它不算图表」。可只要要报的就只有一个数,它就是正确答案:给单个值画图,图形的形状什么都不承载,读者还得去解码一根坐标轴,才能拿回那个本可以直接印出来的数字。

变化量才是它比一个 <p> 更值得存在的地方。方向由调用处通过 intent 说明,绝不推断:「错误率降了 12%」是好消息,「收入降了 12%」不是,而没有哪个组件分得清自己手上拿的是哪一个。方向已知时,由箭头和文字承担它——状态色是第三重信号,绝不是唯一的一重。

属性

BigNumber props
属性类型默认值说明
label必填ReactNode这个数字数的是什么。
value必填ReactNode数字本身,**已经格式化好**——这个组件不去猜单位。
childrenReactNode一条迷你折线、一句注解、一个说明。放在数字下面。
classNamestring
deltaBigNumberDelta

类型

TSX
export type DeltaIntent = 'up-is-good' | 'down-is-good' | 'neutral'

无障碍

  • 变化的方向由调用处通过 intent 明说,绝不从正负号推断:「错误率降了 12%」是好消息,「收入降了 12%」不是,而组件无从判断自己手上拿的是哪一个。
  • 方向由箭头和文字承担,状态色是第三重信号、绝不是唯一的一重——所以这个读法在灰度、强制颜色和色盲情况下都还成立。
  • value 接收的是**已经格式化好**的值。这个组件不去猜单位、货币或地区格式。