Pular para o conteúdo

Report page template

patterns specs/patterns/report-page.kmd

The parameterized-report scaffold: a filter/parameter panel, a Run action, and a tabular and/or graphical result the user reads or exports (CSV/PDF/print). Defines the run lifecycle (empty → running → result → error), how parameters are captured and shown on the output, and the export/print contract. More document than console — distinct from a live dashboard. Reuses the data-table and chart components. Modeled after the gov.br transactional `relatorios` template.

Quando este padrão se aplica

Triggers primários

Todos os triggers

Corpo da especificação

Template — Report page

Status: v0.1.0 — Draft. Promoted from the KDS × gov.br Design System gap analysis (tools/design-gen/docs/govbr-ds-gap-analysis.md, GVB-18). Source: gov.br Padrão Digital transactional relatorios template.

R1 — When to use (vs dashboard / data-table)

  • Report (this): the user picks parameters, runs, and reads/exports a result — a document-like, reproducible output. The parameters are first-class and recorded on the output.
  • Dashboard (specs/patterns/dashboard-page.kmd): an always-on overview that refreshes to current state — no explicit "run".
  • Admin data table (specs/patterns/admin-data-table.kmd): the live working list — a report may render as a table but is a snapshot to read/export, not a workbench.

R2 — Parameter panel

  • A clear parameter/filter panel captures the report inputs (date range, entity, grouping, format) with sensible defaults and required marking (specs/patterns/form-validation.kmd for validation).
  • Parameters are explicit — the report does not run until the user chooses to (R3), so an expensive query is intentional. Offer saved/last parameter sets where useful.

R3 — Run lifecycle

The output area has four explicit states:

  1. Empty / pre-run — a prompt to set parameters and Run (an specs/patterns/empty-state.kmd message, not a blank).
  2. Running — a progress/skeleton state; long-running reports remain cancellable and never freeze the page.
  3. Result — the rendered output (R4) with the parameters echoed on it (so an exported/printed copy is self-describing) and a generated-at timestamp.
  4. Error — a scoped, retryable message; parameters are preserved so the user can adjust and re-run.

R4 — Output: tabular and/or graphical

  • Tabular results reuse the data-table (sort, sticky header, horizontal scroll within the container per specs/patterns/content-overflow.kmd) — but read-optimized (no row-edit chrome).
  • Graphical results follow the dashboard chart rules (labeled axes/units, never color-alone, accessible values behind the chart).
  • Large results paginate or scroll within a bounded region; totals/ subtotals are clearly distinguished from rows.

R5 — Export & print

  • Offer export in the formats the data warrants: CSV for data, PDF/print for the formatted document. Export reflects the current parameters and includes the parameter echo + timestamp (R3).
  • The print layout is a real print stylesheet (page breaks, no app chrome, readable mono/figures), not a screenshot of the console.
  • Export actions are clearly labeled and announce completion; a large export runs without freezing the UI.

R6 — Accessibility & i18n

  • Real <h1>, landmarked panel/output regions, logical tab order from parameters → Run → result.
  • Numbers/dates/currencies format per locale; the parameter echo and timestamp are localized (the timestamp carries its timezone).
  • All chrome (parameter labels, Run/Export, state copy) is translatable per specs/i18n/contract.kmd; exported column headers are localized.

Não-escopo

  • The always-on overview (specs/patterns/dashboard-page.kmd).
  • The live editing list (specs/patterns/crud-page.kmd, specs/patterns/admin-data-table.kmd).
  • Scheduled/emailed report delivery (an ops/automation concern).
  • The reporting query engine / data pipeline.

Referências