StatsGrid
Implemented BlocksResponsive metric cards with labels, values and semantic trends.
A wdj composition built from the existing component library.
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Overview metrics
- Requests
- 128.4k +12%
- Synthetic last 24 hours
- Cache hit rate
- 98.2% +1.4%
- Synthetic edge traffic
- Errors
- 24 +3
- Synthetic last 24 hours
- Active resources
- 12
- Demo resources
Show template
{% load wdj %}
{% include "wdj/components/stats_grid.html" with metrics=block_metrics only %}
Two columns
- Requests
- 128.4k +12%
- Synthetic last 24 hours
- Cache hit rate
- 98.2% +1.4%
- Synthetic edge traffic
- Errors
- 24 +3
- Synthetic last 24 hours
- Active resources
- 12
- Demo resources
Show template
{% load wdj %}
{% include "wdj/components/stats_grid.html" with metrics=block_metrics columns=2 only %}
Empty and zero values
- Queued jobs
- 0
- Zero remains visible.
- Unavailable metric
- —
- Missing values use a dash.
Show template
{% load wdj %}
{% include "wdj/components/stats_grid.html" with metrics=block_zero_metrics columns=2 only %}
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| metrics | list[dict] | unset | Metrics; pass the documented value shown in the examples. |
| columns | number | unset | Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'. |
| class | string | "" | Class; pass the documented value shown in the examples. |