跳到主要内容

Data Chart

为分析界面设计的 17 个图表 Recipe。

Catalog 有六个公开 Component Contract。本页聚焦其中唯一的 Chart Contract：data.chart； analysis.report、layout.stack、layout.grid、data.metric 与 analysis.insight 负责把图表 组合成完整分析答案。data.chart 通过 spec.recipe Discriminant 选择 17 种设计之一：

  1. Steps Bars
  2. Pipeline Stage Bars
  3. Sleep Score
  4. Revenue per Account Scatter
  5. Tracked Time Sankey
  6. Visitors Radial
  7. Visitors Radar
  8. Activity Calendar
  9. Revenue Smooth Area
  10. Active Users Heatmap
  11. Sign-up Funnel
  12. Earned so Far Bars
  13. Contributions Heatmap
  14. Sessions + Conversion Combo
  15. Devices Bars
  16. Visitors Stacked Area
  17. Activity Rings

Recipe 定义的是信息结构，不是任意视觉参数。Authoring Spec 只保存 Typed Resource Binding； Row 由 Host 解析，并且只在 Node-scoped Render Projection 中校验。Recipe 不能包含原始颜色、 CSS、Callback、React Props 或 SVG Markup。

视觉主题由 Host 通过 .og-ui 上的 --og-* CSS 属性控制。颜色角色、图表强调色、阴影和完整 圆角体系都能在不修改 ChartSpec 的情况下覆盖。--og-radius-base 会调整整套圆角比例， --og-radius-panel、--og-radius-card 等语义 Token 也可以单独覆盖。

下面每个预览都从官方 Authoring Fixture 开始，通过 Resource Gateway 发布数据集，再经过真实的 SurfaceController、GenerativeSurface 与 Verified Renderer Registry 解析。组件目录不使用 仅为文档制作的仿制实现。

Steps bars

A selected day, weekly date range, and seven daily goal tracks.

data.chart / 01

Pipeline stage bars

Six pipeline stages with conversion progress, period change, and compact totals.

data.chart / 02

Sleep score

Three scored sleep contributors combined into one segmented daily score.

data.chart / 03

Revenue per account

Tiered account revenue against sessions, with bubble scale and group averages.

data.chart / 04

Tracked time

Interactive weighted flows from five tracked-time sources into seven destinations.

data.chart / 05

Visitors radial

A focused radial total with a restrained categorical breakdown.

data.chart / 06

Visitors radar

A multi-dimensional visitor profile on a shared comparable scale.

data.chart / 07

Activity calendar

Daily intensity arranged in a familiar month calendar.

data.chart / 08

Revenue smooth area

Continuous revenue movement with a derived headline value.

data.chart / 09

Active users heatmap

Activity concentration across day and time buckets.

data.chart / 10

Sign-up funnel

Conversion and drop-off across ordered onboarding stages.

data.chart / 11

Earned so far

Cumulative earnings against an optional target or comparison.

data.chart / 12

Contributions heatmap

Long-range daily contribution density in a compact weekly grid.

data.chart / 13

Sessions and conversion

Volume bars and conversion trend aligned on the same timeline.

data.chart / 14

Devices

Device share rendered as direct, readable horizontal bars.

data.chart / 15

Visitors stacked area

Visitor composition and total movement across time.

data.chart / 16

Activity rings

Several bounded progress measures in one compact status surface.

data.chart / 17