# Health Reports > Health reports over a period with averages that skip missing days, a one-figure trend chart, meals and caffeine per day, and each engine's days on and off protocol. Source: https://docs.nasaqui.com/components/health-reports ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/health-reports.json ``` A report over 7, 30 or 90 days. Averages skip days with no reading instead of counting them as zero. One chart shows one figure at a time (water, steps, sleep, weight, resting heart rate). Meals and caffeine are stacked bars per day with a legend. A table gives each day-judging engine's days on protocol, off it and not judged, with streaks. An optional export button hands the work to the host. ## When to use - The weekly or monthly review screen. ## When not to use - One day: use [`DailySummary`](https://docs.nasaqui.com/components/daily-summary). - One engine's history: use [`EngineDetails`](https://docs.nasaqui.com/components/engine-details). ## Import ```tsx import { HealthReport } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { HealthReport, reportToCsv } from "@fadymondy/nasaq/web"; load(n)} onExport={async () => { download(reportToCsv(days)); }} />; ``` ## Anatomy ``` HealthReport data-slot="health-report" ├─ header h1, lede, Export button, period ToggleGroup ├─ Averages StatGrid ├─ Trend figure ToggleGroup, ChartContainer (bars or line) ├─ Meals / Caffeine stacked bar Cards └─ Protocol days Table ``` ## API | Prop | Type | Notes | | --- | --- | --- | | `days` | `ReportDay[]` | Oldest first. Missing figures are left out. | | `engines` | `EngineReport[]` | Per-engine `HistoryDay[]` for the same period. | | `periods` / `period` / `onPeriodChange` | | Default `[7, 30, 90]`. | | `onExport` | `() => Promise` | Omit to hide the button. | | `loading`, `error`, `onRetry` | | Skeleton, the server's message, retry. | | `labels` | `Partial` | Override any string. | Helpers exported from the folder: `summariseReport`, `average`, `metricSeries`, `reportToCsv`. ## Code ### React ```tsx import { HealthReport, reportToCsv } from "@fadymondy/nasaq/web"; load(n)} onExport={async () => { download(reportToCsv(days)); }} />; ``` ### shadcn ```tsx import { HealthReport, reportToCsv } from "@/components/ui/health-reports"; load(n)} onExport={async () => { download(reportToCsv(days)); }} />; ``` ### Vue ```vue ``` ### Blade ```blade @php $days = []; $history = []; for ($i = 0; $i < 7; $i++) { $date = sprintf('2026-09-%02d', 23 + $i); $days[] = ['date' => $date, 'waterMl' => 2000 + $i * 150, 'steps' => 6000 + $i * 400, 'sleepMinutes' => 420 + $i * 5, 'weightKg' => round(84.2 - $i * 0.1, 1), 'meals' => ['total' => 3, 'safe' => 3 - ($i % 2), 'unsafe' => $i % 2]]; $history[] = ['date' => $date, 'verdict' => $i === 2 ? 'off_protocol' : 'on_protocol', 'entries' => 6]; } @endphp {{-- nq_hr_csv($days) builds the CSV the host serves when the Export button dispatches "nq-export". --}} ``` ### HTML + Alpine ```html

Reports

Your recent days, in counts and averages. Days with no reading are left out, never counted as zero.

Period

Averages

Across the 7 days that reported each figure.

Average water
2,450 mL
Average steps
7,200 steps
Average sleep
7 hr 15 min
Average resting heart rate
Not enough readings
Weight change
-0.6 kg
Days with shutdown violations
0 days

Trend

No readings in this period for this figure.

Meals

Meals per day by safety.

Protocol days

For each engine that judges days: days on protocol, off it, and days it declined to judge.

Engine On protocol Off protocol Not judged Current streak Best streak
Hydration 6 days 1 day 0 days 4 days 4 days
```