Skip to content

feat: migrate duration / participants / issues / gum charts to summary endpoints (Phase 2 + 3 of #20)#28

Open
Boanerges1996 wants to merge 2 commits intopeermetrics:masterfrom
Boanerges1996:feat/phase2-3-chart-migrations
Open

feat: migrate duration / participants / issues / gum charts to summary endpoints (Phase 2 + 3 of #20)#28
Boanerges1996 wants to merge 2 commits intopeermetrics:masterfrom
Boanerges1996:feat/phase2-3-chart-migrations

Conversation

@Boanerges1996
Copy link
Copy Markdown
Contributor

Summary

Depends on peermetrics/api#26.

Rewrites four charts to self-fetch from the new server-side summary endpoints instead of receiving a big conferences/issues array as a prop:

  • `conferenceDurationChart.vue` → `/conferences/duration-summary`
    • Click-to-detail now pages matching conferences via `duration_gte` / `duration_lt` filters (up to 200 per page, no silent 50-cap)
  • `noParticipantsChart.vue` → `/conferences/participant-count-summary`
  • `mostCommongIssuesChart.vue` → `/issues/summary`
    • Click-to-detail uses the new `issue_code=` filter on `/conferences`
  • `gumChart.vue` → `/issues/gum-summary`

Each chart now owns its own loading state, so none of them block on the big `/conferences` fetch in app.vue anymore. `graphsTab.vue` stops passing `:conferences` / `:issues` props for these four charts.

Test plan

  • Open dashboard and confirm all four charts render data without a spinner timeout
  • Click a bar in the duration chart and confirm the modal populates matching conferences
  • Click a slice of the most-common-issues chart and confirm filtered conferences appear
  • Confirm pagination through click-to-detail lists more than 50 rows when applicable

🤖 Generated with Claude Code

…oints

Phases 2 + 3 of peermetrics#20 — migrates the remaining charts that aggregated data
client-side to self-fetch pre-computed summaries. Companion to api PR.

Changes:
- conferenceDurationChart.vue — fetches /conferences/duration-summary
  Click-to-detail paginates through matching conferences via the new
  duration_gte / duration_lt filters on /v1/conferences.
- noParticipantsChart.vue — fetches /conferences/participant-count-summary.
- mostCommongIssuesChart.vue — fetches /issues/summary. Click-to-detail
  uses the new issue_code filter on /v1/conferences.
- gumChart.vue — fetches /issues/gum-summary.
- graphsTab.vue — drops prop dependencies for the migrated charts so
  they can mount and render immediately without waiting for the parent's
  (now-stale for these charts) conferences/issues arrays.
- peermetrics.js — new URL entries for the four summary endpoints.

After this PR, the only charts that still depend on the parent's big
conferences/sessions/connections arrays are: call setup time, relayed
connections, browsers, OS, map — those come in Phase 4+5.
…sChart

peermetrics.get() auto-unwraps `response.data` to the array, so
`res.data || []` evaluates to `[]` and the chart renders empty.
Match the pattern used in gumChart/conferenceDurationChart:
`Array.isArray(res) ? res : (res.data || [])` handles both shapes.

Found while testing against a prod-cloned local DB — the issues
summary endpoint returned 10 rows but the chart silently rendered
empty because of this unwrap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant