feat(reports): SVG bar chart on every report detail page (MAPPS-297) #336

Merged

YousifShkara merged 1 commit from feat/MAPPS-297-report-charts into main

2026-06-25 08:05:09 +02:00

YousifShkara commented

2026-06-25 07:47:42 +02:00

Owner

The report-detail page rendered summary tiles + a breakdown table
but no chart. AC: "every report has at least one chart".

Ships a hand-rolled SVG BarChart component (no JS charting dep added
to the wasm bundle) and wires it into the report-detail render
pipeline:

Reports with a breakdown (tickets opened-by-status, billing A/R
aging, projects by status, etc.): chart sits in the breakdown Card,
table sits below it. Both render off the same data so a row can be
read in the chart or scanned in the table.
Reports without a breakdown (time, where the summary itself carries
the numeric series): the summary tiles get a parallel chart Card
rendered as a horizontal bar chart of the numeric summary metrics.

Value parsing tolerates plain ints, decimals, currency ("$1,234.56"),
and percentages ("87%"); rows that cannot parse (free-form labels) are
silently dropped from the chart but kept in the table, so the chart
never crashes on a non-numeric value.

The chart auto-scales to the maximum value, uses the existing
fill-accent + fill-surface-2 theme tokens so light/dark + tenant-accent
overrides apply for free, and falls back to a "No data to chart"
state when the series is empty.

Acceptance criteria:

"Charts coming soon" placeholder is gone everywhere: the literal
string was already missing from main; the gap was that the reports
surface rendered tables only with no visualization at all. Fixed.
Every report has at least one chart: the breakdown-or-summary
fallback in ReportDetailPage guarantees at least one BarChart Card
renders for every report_type that returns numeric data.

#MAPPS-297

The report-detail page rendered summary tiles + a breakdown table but no chart. AC: "every report has at least one chart". Ships a hand-rolled SVG BarChart component (no JS charting dep added to the wasm bundle) and wires it into the report-detail render pipeline: - Reports with a breakdown (tickets opened-by-status, billing A/R aging, projects by status, etc.): chart sits in the breakdown Card, table sits below it. Both render off the same data so a row can be read in the chart or scanned in the table. - Reports without a breakdown (time, where the summary itself carries the numeric series): the summary tiles get a parallel chart Card rendered as a horizontal bar chart of the numeric summary metrics. Value parsing tolerates plain ints, decimals, currency ("$1,234.56"), and percentages ("87%"); rows that cannot parse (free-form labels) are silently dropped from the chart but kept in the table, so the chart never crashes on a non-numeric value. The chart auto-scales to the maximum value, uses the existing fill-accent + fill-surface-2 theme tokens so light/dark + tenant-accent overrides apply for free, and falls back to a "No data to chart" state when the series is empty. Acceptance criteria: - "Charts coming soon" placeholder is gone everywhere: the literal string was already missing from main; the gap was that the reports surface rendered tables only with no visualization at all. Fixed. - Every report has at least one chart: the breakdown-or-summary fallback in ReportDetailPage guarantees at least one BarChart Card renders for every report_type that returns numeric data. #MAPPS-297

YousifShkara self-assigned this

2026-06-25 07:47:42 +02:00

YousifShkara added 1 commit

2026-06-25 07:47:42 +02:00

feat(reports): SVG bar chart on every report detail page (MAPPS-297)

Check / fmt + clippy + tests (pull_request) Successful in 1m12s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

f10dc8169c

The report-detail page rendered summary tiles + a breakdown table
but no chart. AC: "every report has at least one chart".

Ships a hand-rolled SVG BarChart component (no JS charting dep added
to the wasm bundle) and wires it into the report-detail render
pipeline:
- Reports with a breakdown (tickets opened-by-status, billing A/R
  aging, projects by status, etc.): chart sits in the breakdown Card,
  table sits below it. Both render off the same data so a row can be
  read in the chart or scanned in the table.
- Reports without a breakdown (time, where the summary itself carries
  the numeric series): the summary tiles get a parallel chart Card
  rendered as a horizontal bar chart of the numeric summary metrics.

Value parsing tolerates plain ints, decimals, currency ("$1,234.56"),
and percentages ("87%"); rows that cannot parse (free-form labels) are
silently dropped from the chart but kept in the table, so the chart
never crashes on a non-numeric value.

The chart auto-scales to the maximum value, uses the existing
fill-accent + fill-surface-2 theme tokens so light/dark + tenant-accent
overrides apply for free, and falls back to a "No data to chart"
state when the series is empty.

Acceptance criteria:
- "Charts coming soon" placeholder is gone everywhere: the literal
  string was already missing from main; the gap was that the reports
  surface rendered tables only with no visualization at all. Fixed.
- Every report has at least one chart: the breakdown-or-summary
  fallback in ReportDetailPage guarantees at least one BarChart Card
  renders for every report_type that returns numeric data.

#MAPPS-297

YousifShkara merged commit a7a6e38475 into main

2026-06-25 08:05:09 +02:00

YousifShkara deleted branch feat/MAPPS-297-report-charts

2026-06-25 08:05:09 +02:00

YousifShkara referenced this pull request from a commit

2026-06-25 08:05:10 +02:00

Merge pull request 'feat(reports): SVG bar chart on every report detail page (MAPPS-297)' (#336) from feat/MAPPS-297-report-charts into main