网站
Metrics - 指标展示
指标面板、无障碍数据表格与图表布局。
用法
什么时候用它
组织指标和外部渲染的图表，无需在此引入图表引擎。
来自@misoto22/folio/website
import { MetricsRange } from '@misoto22/folio/website'说明
受控时间范围选择器。选中状态表示应用已成功加载的数据范围。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
由应用控制的时间范围
选中的时间范围和已格式化的读数保留在应用状态中。具名面板可以容纳列表、表格或由其他渲染器绘制的图表。
Library activity
Sample data
Period
Reading
- Articles opened
- 24
- Minutes reading
- 180
Collection
- Saved records
- 7
- Notes written
- 3
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
MetricsSection
仪表盘分区，不依赖图表引擎或领域响应模型。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| action | ReactNode | — | |
| caption | ReactNode | — | |
| title | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MetricsPanel
具名面板。子内容可使用单独导入的图表入口。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| title必填 | string | — | |
| caption | string | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MetricsPanelGrid
响应式网格共用分隔线和面板最小宽度。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| columns | 2 | 4 | 2 | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
MetricsEmptyState
时间序列为空时保留图表区域，并说明首次收到数据后将展示什么。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| description必填 | ReactNode | — | |
| title必填 | ReactNode | — |
MetricsList
已格式化的指标行，具有明确的名称与数值关系，并提供空状态。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| empty必填 | string | — | |
| items必填 | { id: string; label: ReactNode; value: ReactNode; icon?: ReactNode }[] | — | |
| label必填 | string | — |
MetricValue
展示传入的数值，并用辅助字号呈现单位。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| segments必填 | { text: string; unit?: boolean }[] | — |
MetricDelta
中性的方向标记，不将增加默认视为好事，也不将减少视为错误。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| direction必填 | 'up' | 'down' | 'steady' | — |
LiveCount
未知的实时计数不显示；实测零值则是有效读数。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| value必填 | number | null | — |