Repository navigation
Charts and Graphs
This guide covers the Overview and Comparison View graphs on the home (agency or admin) dashboard: what they show, how to use them, and how date ranges and colors work.
Graphs always use the active experiment and non-archived reports only. For study waves and archiving, see Archiving.
- Open Home from the side navigation (agency or admin dashboard).
- Use the Overview / Comparison View toggle above the graph area.
- The reports table below the graphs is separate; its filters (including “Show archived” for admins) do not change the charts.
Overview shows top trending topics for three windows ending at the start of today (today’s reports are excluded):
| Chart | Window |
|---|---|
| Yesterday’s Reports | Previous calendar day |
| Three Days Ago | Past 3 days |
| Seven Days Ago | Past 7 days |
Up to three topics appear per chart, ranked by report count (highest first). If a window has no reports, you see “No topics reported.”
| Role | Data scope |
|---|---|
| Agency | That agency’s active topics and reports |
| Admin | All agencies’ active topics combined (deduped), all matching reports |
Slices use the Futuristic Robot palette by size (data is sorted largest → smallest):
| Slice | Color name | Hex |
|---|---|---|
| Largest | Trapped Darkness | #071C2C |
| Middle | Blue Prince | #688390 |
| Smallest | Ginkgo Green | #A2AAA4 |
Comparison View lets you plot report counts over time for one or more topics on a shared date range.
- Select topics — Choose at least one active topic (multi-select).
- Select dates — Pick a range on the calendar (or keep the default).
- Graph — Line chart: one series per topic, X = date, Y = number of reports that day.
After the graph loads, the menu bar lets you change topics or dates, refresh, or clear (back to topic selection).
| Rule | Detail |
|---|---|
| Allowed length | 3–30 days inclusive |
| Default | Last 7 days through today |
| Future dates | Not allowed (maxDate = today) |
| Next on dates step | Shown when the current range is valid (including the default) |
If the range is invalid, an error alert explains the limit. Copy in the UI may say “three weeks”; the enforced maximum is 30 days.
Comparison series use the same Futuristic Robot palette (dark → light). Each topic keeps a stable color for the session even if you reorder the selection.
| Order | Color name | Hex |
|---|---|---|
| 1 | Trapped Darkness | #071C2C |
| 2 | Gibraltar Sea | #103A54 |
| 3 | Berry Blue | #315D77 |
| 4 | Blue Prince | #688390 |
| 5 | Ginkgo Green | #A2AAA4 |
| 6 | Pacific Fog | #DBDDD5 |
Additional topics beyond six use generated hues.
- While data loads, a spinner and short status message appear.
- After you change topics or dates on the plotted view, use Refresh to reload the chart.
- A green alert reminds you when the selection has changed but the chart has not been refreshed yet.
| Symptom | Likely cause |
|---|---|
| Counts look “low” after a study rollover | Older reports were archived; graphs exclude them (see Archiving). |
| Agency graph empty / stuck loading | Agency user needs a valid agencyId claim before scoped queries run. |
| Comparison Next missing on dates | Range outside 3–30 days (or incomplete single-day selection). |
| Overview slow (older builds) | Many per-topic queries; current code uses one 7-day range query then buckets by day. |
| Piece | Location |
|---|---|
| Toggle + data load (Overview) | components/dashboard/TagGraph.jsx |
| Pie charts | components/dashboard/OverviewGraph.jsx |
| Comparison wizard | components/analytics/ComparisonGraphSetup.jsx |
| Comparison chart + fetch | components/analytics/ComparisonGraphPlotted.jsx |
| Comparison controls | components/analytics/ComparisonGraphMenu.jsx |
| Shared report queries |
utils/reports-queries.js (buildActiveReportsQuery) |
Overview fetch: one Firestore range query for the past 7 days (agency-scoped when needed), then client-side counts for the 1 / 3 / 7 day windows.
Comparison fetch: one range query per selected topic (in parallel) over the chosen dates, then client-side daily buckets.
Both paths filter by active experimentId and archived == false. Composite indexes for those filters live in firestore.indexes.json.
More on cohorts and archive fields: Technical Documentation and Archiving.