Graphs/Metric

Edit src/renderers/d3/composition/metric.ts and save to see changes across all configurations

Tests: 26Sections: 6

Filter:

Container Sizes3 metrics at different container dimensions

Tiny300×200 · 3 rows

Small400×250 · 3 rows

Medium600×350 · 3 rows

Large800×500 · 3 rows

Wide900×250 · 3 rows

Metric CountFrom a single KPI to a full dashboard row

1 metric400×300 · 1 rows

2 metrics600×300 · 2 rows

4 metrics (2x2)700×400 · 4 rows

6 metrics (3x2)800×450 · 6 rows

9 metrics (3x3)900×500 · 9 rows

Format ModesCurrency, percent, integer, decimal, and auto

Currency600×300 · 3 rows

Percent600×300 · 3 rows

Integer600×300 · 3 rows

Prefix + Suffix600×300 · 3 rows

Delta IndicatorsTrend arrows showing change from previous values

All up600×350 · 3 rows

All down600×350 · 3 rows

Mixed600×350 · 3 rows

No deltas600×350 · 3 rows

Grid ColumnsExplicit column count overrides vs auto layout

Auto (4 items)700×350 · 4 rows

Force 4 cols800×300 · 4 rows

Force 1 col400×500 · 3 rows

Edge CasesUnusual data shapes and values

Single metric400×300 · 1 rows

Very large values600×300 · 3 rows

Zero & negative600×300 · 3 rows

Long labels700×350 · 3 rows

12 metrics (max)900×500 · 12 rows