[Hacktoberfest][Web2.0] Implement dashboard graphs statistics - #1076
Open
cristian-ist wants to merge 1 commit into
Open
[Hacktoberfest][Web2.0] Implement dashboard graphs statistics#1076cristian-ist wants to merge 1 commit into
cristian-ist wants to merge 1 commit into
Conversation
|
@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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
chart.
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-4and--chart-5are close enoughto 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, whichseparate 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
XMLSerializerexport comesout 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
tscreports no errors in the new codeeslintreports no errors beyond the repo-widereact/react-in-jsx-scoperuleprettier --checkpassesknipreports nothing unusedThe 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.