# 交互 — 工具提示和筛选器

HTML 图表默认是交互式的 — 悬停层是交付物的一部分，不是升级。省略它是例外（纯统计瓦片），且从来不是默认。以与静态渲染相同的关注度设计它。

## 工具提示和悬停

工具提示**增强，但从不设限**：工具提示显示的每个值也可以不通过它访问，通过直接标签或表格视图。键盘焦点与悬停显示相同的细节。

- **十字线找到 X。** 垂直准线跟踪指针并对齐到最近的数据位置。读者瞄准日期，从来不是一条 2px 线。
- **在条形和单元格上，标记是命中目标。** 不用十字线 — 每个条形、段、点或热力格携带其自己的 `pointermove`/`focus` 工具提示，显示类别和值，悬停的标记会抬起（轻微变亮或出现轮廓）以便读者看到它响应。
- **一个工具提示，所有系列。** 读出列表显示该 X 处的每个系列 — 指针永远不需要落在一条线或填充上才能获取值。
- **标签是不受信任的数据 — 使用 `textContent`。** 系列和类别名称通常来自 CSV 标题、工具输出或 API 响应。使用 `textContent` 或 `createTextNode` 将其插入工具提示/图例/表格 DOM，永远不要通过 `innerHTML` 字符串拼接。
- **值主导，标签跟随。** 在工具提示中，值是强对比度元素，系列名称是次要的 — 图例的层次结构在此处反转，因为这里读者有了系列，需要的是数字。
- **线条键，不是框。** 工具提示行使用系列颜色的短线段来标识其系列；在工具提示密度下，实心框是做标签工作的数据重量墨迹。（图例仍然镜像标记：条形/面积用矩形，线条用线。）
- **命中目标比标记更大。** 标记的悬停/焦点区域包括其 2px 表面间隙及更多 — 永远不只是绘制的像素。一个 8px 散点是没有人能可靠命中的针点；给每个点一个至少 **24px** 的透明的命中区域，或 — 对于密集散点 — 一个最近点 / Voronoi 层，使指针只需要是*最接近的*，而非正中。十字线已对折线和条形图上的 X 实现了这个效果；散点和气泡需要逐点版本。
- **被推出其标记的值驻留在工具提示中。** 当标签在条形内侧无法容纳时（见 `marks-and-anatomy.md`），该条的命中区域在悬停和聚焦时携带值 — 工具提示是其溢出之家，表格视图保持其无需悬停即可触达。

## 筛选器和时间范围

每个监控仪表盘需要相同的控件。这些是**标准 UI，不是图表标记** — 使用普通的 HTML 表单控件构建它们，样式与图表外观匹配。数据可视化仅添加组合规则：

- **一行，在所有图表之上。** 筛选器位于它们作用的内容上方的一行中左对齐 — 永不在图表卡片内，永不是每个图表一个。如果一个图表需要自己范围，它属于不同的仪表盘。
- **日期范围第一位。** 它是每个读者都会使用的筛选器；预设（今天、最近 7 / 30 / 90 天）在自定义范围之前。
- **筛选器作用其下方的所有内容。** 每个图表、统计和表格针对相同的切片重新渲染，因此数字始终一致。
- **重新获取时保持框架。** 在数据重新加载时，图表以降低的不透明度保持其先前渲染 — 没有骨架屏、没有布局跳动、没有闪烁。

好的日期选择器以列表形式列出预设（没有人会为了"最近 30 天"而与日历网格作战），以 16px 粗体对勾标记选择，保持悬停为幽灵色以使其从不与选择竞争，并将自定义范围隐藏在页脚的一条细线之后。（见 `palette.md` 获取参考规格。）
