数据
BigNumber - 大数字
一个数字，用标题的字号。
用法
什么时候用它
来自@misoto22/folio/charts
import { BigNumber } from '@misoto22/folio/charts'说明
一个数字，用标题的字号。
这是仪表盘最常需要、而绝大多数图表库都不提供的形式，理由是「它不算图表」。可只要要报的就只有一个数，它就是正确答案：给单个值画图，图形的形状什么都不承载，读者还得去解码一根坐标轴，才能拿回那个本可以直接印出来的数字。
变化量才是它比一个 <p> 更值得存在的地方。方向由调用处通过 intent 说明，绝不推断：「错误率降了 12%」是好消息，「收入降了 12%」不是，而没有哪个组件分得清自己手上拿的是哪一个。方向已知时，由箭头和文字承担它——状态色是第三重信号，绝不是唯一的一重。
结构
| 部件 | 说明 |
|---|---|
| 标签必填 | 这个数字数的是什么，作为眉题以 --ink-3-aa 排在它上方。没有任何东西在程序上把它和数值绑起来——没有 aria-labelledby，也没有 role——所以文档顺序就是这段关联的全部。 |
| 数值必填 | 那个数字本身，用编辑体、--fs-lead 字号、表格数字。交过来什么样就渲染什么样：不替它猜单位、货币或地区格式。 |
| 变化量 | 数字下面那一行，来自 delta：变化量走 format——不替换的话就是一个带正负号的百分比——再加上 --ink-3-aa 的 delta.label，说明它是相对什么的变化。 |
| 方向标记 | 在变化量里面：一个 aria-hidden 的箭头，向上、向下，为零时是平的；再加上状态色——--ok 或 --danger，还没有做出判断时是 --ink-2。两个载体，所以这个读法在灰度和强制颜色下都还成立。 |
| 判断 | 箭头旁边那几个 sr-only 的词——升还是降，设了 intent 之后再加上更好还是更差。读屏用户拿到的就是它，用来顶替那点状态色。 |
| 备注位 | children，隔着一段外边距排在数字下面：Sparkline、分母或者一句提醒就放这儿。 |
实践建议
推荐
- 要给这个数字一个可以对照的东西。孤零零一个数是读不出来的——48,210 在放到上个月旁边之前，谈不上好也谈不上坏——而这个组件正好留了两个位置来放它：delta 放一次比较，children 放下面那条 Sparkline 或者那个分母。
- delta.value 要按比值传。默认的格式化函数会乘一百再补上正负号，所以 0.124 印出来是 +12.4%，12.4 印出来是 +1240%。已经用百分点表示的变化量，得连着自己的 format 一起交过来。
- 凡是打算上色的 delta，都要设 intent。它默认是 neutral，把变化量渲染成 --ink-2，只说明往哪个方向动了——这对一个没有人做过判断的数字是对的，但很少是写收入卡片的那个人以为自己写下的东西。
- 没有读数时，就让 value 为 null。它会用 --ink-3-aa 印一个破折号，背后跟着一句 sr-only 的「No data」——那才叫一个谁都没有的数字；而标签下面的一行空白，在读者看来就是布局坏了。emptyValue 能换掉那个破折号。
避免
- 不要指望一个正好为零的 delta 还会带上 intent 的判断。没有方向可供 intent 去判，所以色调、箭头和播报出来的词都只说「no change」，到此为止——从前，“升为好”之下的一个零会被播报成「no change, worse」，而页面上根本没有显示任何判断。
- 不要把标签和数字分开。数值是一个 span 里的文字，不是一个被标注了名称的元素，而标签是排在它前面被读到的兄弟节点，所以一个把数字挪进单独一栏的布局——或者拿一个标签罩住两个数字——交给读屏软件的，是一个光秃秃、没有任何东西为它命名的数。
示例
默认
三个变化量，每一个的方向都由调用处声明，而不是从符号推断出来：错误数下降 12% 是好消息，收入下降 12% 不是，而没有哪个组件分得清自己手上握的是哪一个，所以是 intent 决定了一个变化被染成 ok 还是 danger。箭头和给读屏软件的那个词承载着同一个解读，正是这一点让它在灰度下、在强制色彩下、以及对一个分不出这两种色调的读者面前都还可读。变化量为零就是 flat——一个横向的箭头，完全不上色——这也是为什么一个 neutral 的 intent 仍然有话要说。
配迷你折线
每块仪表盘都会去拿的那种搭配：数字回答「多少」，它底下那条走势回答「怎么走到这儿的」，而不必为一根没人去读的坐标轴花掉一整块面板。children 就是那条走势的去处，位于标签、数字和变化量之下；这条 sparkline 收一个自己的 label，因为它上面那个标题命名的是另一个事实。一旦这个形状必须被精确读出，就立刻去拿 LineChart——按设计，一条 sparkline 没有任何坐标轴可供参照。
数据点与缺失值
这个组件拒绝去猜的两件事。变化量的默认格式是带符号的百分比，所以 0.6 会印成 +60%——对一个比值这是对的，而对一个本身就是百分比的比率则是错的，那里的变化是 0.6 个百分点；format 就是调用处用来说明自己手上握的是哪一种的东西。第二张卡片还没有数字、也完全没有变化量：value 收的是节点而不是数字，正是为了让调用处能在那儿印一个破折号，因为零是一种断言，而一个「无可对照」的变化没有方向可指。
类型
export type DeltaIntent = 'up-is-good' | 'down-is-good' | 'neutral'无障碍
- 变化的方向由调用处通过 intent 明说，绝不从正负号推断：「错误率降了 12%」是好消息，「收入降了 12%」不是，而组件无从判断自己手上拿的是哪一个。
- 方向由箭头和文字承担，状态色是第三重信号、绝不是唯一的一重——所以这个读法在灰度、强制颜色和色盲情况下都还成立。
- value 接收的是已经格式化好的值。这个组件不去猜单位、货币或地区格式。