Skip to content

[Hacktoberfest][Web2.0] Implement dashboard graphs statistics - #1076

Open
cristian-ist wants to merge 1 commit into
commitglobal:feature/frontend2.0-hackdayfrom
cristian-ist:votemonitor-1012
Open

[Hacktoberfest][Web2.0] Implement dashboard graphs statistics#1076
cristian-ist wants to merge 1 commit into
commitglobal:feature/frontend2.0-hackdayfrom
cristian-ist:votemonitor-1012

Conversation

@cristian-ist

Copy link
Copy Markdown

Summary

Implements the NGO admin statistics dashboard on the /elections/$electionRoundId/
route, which was an empty placeholder. Every chart from the current admin app is
carried over and rebuilt on the web2.0 design system.

Closes #1012

What's included

The charts. Observer accounts as a stacked proportion bar, observers on the
field and polling stations covered as radial meters, time spent observing as a
plain figure, and five time histograms as area charts — started forms, questions
answered, flagged answers, quick reports, and citizen reports.

Maximize. Every chart carries a maximize button that opens it in a dialog with
two tabs: the chart at full size, and a read-only table of the numbers behind it
with a copy-to-clipboard button. The clipboard payload is tab separated with a
header row, so pasting into a spreadsheet lands each value in its own cell.

Download. Every chart can be saved as a PNG, both from the card and from the
dialog.

Per-location breakdowns. The administrative levels the API returns get a tab
each, with seven cards per level showing the leading locations, a dialog with the
full list, and a CSV export.

Form choices

The forms follow the job the data does rather than the shapes of the current app:

  • Time spent observing is a single value, so it is a figure and not a one-bar
    chart.
  • The two ratios against a known total are meters rather than two-slice pies.
  • Observer accounts is a stacked proportion bar rather than a donut, so the three
    shares are compared along one axis instead of by angle, with the labels beside
    their segments.

Implementation notes

Colours come from the theme tokens, never hardcoded, so the dashboard works in
dark mode — the current app hardcodes hex values that would not survive the switch.

Worth flagging separately: the theme's --chart-4 and --chart-5 are close enough
to be indistinguishable (ΔE 7.4 in OKLab under normal vision, 5.6 under
deuteranopia), so a five-series categorical chart built on those tokens would be
unreadable. This dashboard only needs three slots and uses --chart-1..3, which
separate cleanly in both modes, but the token pair is worth revisiting.

Histogram buckets arrive in UTC and unordered. They are parsed to timestamps —
which lands them in the reader's own timezone — and sorted on a copy, since the
array belongs to the query cache. The x-axis is a time scale rather than
categories, so a gap between buckets shows up as a gap.

The PNG export copies computed styles onto a clone of the SVG before
serializing. Recharts paints with CSS custom properties, which only resolve while
the drawing is attached to the document, so a naive XMLSerializer export comes
out black. An opaque background is added because charts are transparent by design,
and the canvas is drawn at 2× so the file stays sharp.

A zero total is handled explicitly on the meters: without a fixed domain the
angle axis collapses and paints a full ring for a value of zero, which reads as
"complete" when nothing has happened yet.

One request feeds the page, so no two cards can show numbers from different
moments.

Verification

  • tsc reports no errors in the new code
  • eslint reports no errors beyond the repo-wide react/react-in-jsx-scope rule
  • prettier --check passes
  • knip reports nothing unused

The charts were checked visually against generated data. What is not covered by
automated checks is the PNG export and the clipboard copy, both of which depend on
browser APIs.

@vercel

vercel Bot commented Aug 12, 2026

Copy link
Copy Markdown

@cristian-ist is attempting to deploy a commit to the Code for Romania Team on Vercel.

A member of the Team first needs to authorize it.

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