Stat comparison
A compact before-and-after metric comparison.
Try it
Month comparison
Current versus previous period.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_stat_comparison.html" with label=label current=current previous=previous %}context = {'label': 'Orders', 'current': '128', 'previous': '112'}Guide
Add it to your project
- Include with formatted values and labels.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| current | string | Not set | Yes | Current formatted value. Constraint: Must match an identifier declared by the corresponding structured collection. |
| previous | string | Not set | Yes | Previous formatted value. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| label | string | Not set | No | Metric name. Constraint: Use concise visible text that identifies the control or measurement. |
| period_label | string | Not set | No | Visible comparison caption. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| trend | string | Not set | No | Caller-supplied direction. Allowed: up, down, flat. Constraint: Allowed values: `up`, `down`, `flat`. |
| trend_label | string | Not set | No | Visible delta. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| sentiment | string | Not set | No | Optional judgement colour. Allowed: good, bad. Constraint: Allowed values: `good`, `bad`. |
| size | string | md | No | Comparison tile scale. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Visible labels and values carry the comparison.
- Responsive
- No breakpoint-specific contract.
- Without JavaScript
- Static comparison.
Need help?
Troubleshooting
Contract check: (tabular numerals, VIZ-020: brickwork never formats or computes this).
Provide already formatted current and previous values plus an explicit trend; Brickwork does not infer comparison arithmetic from display strings.