Design feedback: subheader, controls layout, pie chart legend spacing - #9
Conversation
…acing Replaces the Developers logo with a Hebrew/English subheader block, widens and aligns the search bar and category toggle with the project grid, and adds breathing room between pie chart legend labels. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
📊 Code Quality Score: 30/100
Was this score accurate? 👍 Yes · 👎 No Scored by GitVelocity · How are scores calculated? |
The local dev API merge is no longer needed now that the production endpoint is up to date. Also fixes .gitignore: the unanchored data/ rule was accidentally shadowing src/data/ too; the anchored /data/ rule already covers the intended raw-dump exclusion. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR primarily applies UI/layout adjustments to the dashboard header, controls, and chart legends, and also includes functional changes to how submissions trend data is computed and displayed.
Changes:
- Replaces the header logo with a bilingual (Hebrew/English) subheader block and adds Cardo font support.
- Reworks dashboard controls layout (search + category select) and adjusts styling, including pie chart legend spacing and scrollbars.
- Updates submissions trend utilities to use
submission_date(ISO timestamp) and to chart through the most recently completed month, with corresponding test updates.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/techUsed.js | Renames the MCP technology label. |
| src/utils/submissionsTrend.js | Switches trend bucketing to submission_date and changes month windowing logic. |
| src/utils/tests/submissionsTrend.test.js | Updates tests to match new submission_date parsing and completed-month windowing. |
| src/Title.jsx | Replaces Developers logo with bilingual subheader content. |
| src/index.css | Adds header/subheader styles, adjusts controls layout, tweaks project card/category styling, and adds legend spacing. |
| src/data/fetchProjects.js | Refactors fetching into helper and improves fetch error message. |
| src/components/Controls.jsx | Wraps input/select into a row and updates search placeholder/copy. |
| src/components/charts/VibeCodedTrendChart.jsx | Reorders color map entries to match series ordering. |
| src/components/charts/types/PieChart.jsx | Adds a class hook for styling pie chart legend spacing. |
| src/components/charts/types/LineChart.jsx | Attempts to preserve legend order by disabling Recharts legend sorting. |
| src/components/charts/SubmissionsTrendChart.jsx | Changes the chart title text. |
| index.html | Adds Cardo font alongside EB Garamond. |
| .gitignore | Narrows data ignore rule to repo-root /data/. |
Suppressed comments (1)
src/utils/submissionsTrend.js:56
- The PR description focuses on design/layout tweaks, but this file introduces behavioral changes to analytics (switching trend calculations to
submission_dateand excluding the current month). Please update the PR description to reflect these functional changes or split them into a separate PR so reviewers can assess the data/logic change independently.
// Builds the data for SubmissionsTrendChart: total submission count per
// month, for the trailing 12 months ending at the most recently completed
// month before referenceDate.
export function getSubmissionsMonthlyTrend(projects, referenceDate = new Date()) {
const months = last12Months(mostRecentCompletedMonth(referenceDate))
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| // submission_date is an ISO timestamp like "2026-07-19T14:54:00+00:00", or | ||
| // null for projects that don't have one. Turns it into a { year, monthIndex } | ||
| // object in local time, or null when there's nothing to parse. | ||
| function parseSubmissionMonth(submissionDate) { | ||
| if (!submissionDate) return null | ||
|
|
||
| const monthIndex = MONTH_NAMES.indexOf(match[1]) | ||
| if (monthIndex === -1) return null | ||
| const date = new Date(submissionDate) | ||
| if (Number.isNaN(date.getTime())) return null | ||
|
|
||
| return { year: Number(match[2]), monthIndex } | ||
| return { year: date.getFullYear(), monthIndex: date.getMonth() } | ||
| } |
| {/* Legend's default itemSorter is 'value', which alphabetizes entries by | ||
| name — overriding the order series/<Line> below are declared in (e.g. | ||
| "Not vibe-coded" would sort before "Vibe-coded"). Disable it to keep | ||
| declaration order instead. */} | ||
| <Legend itemSorter={null} /> | ||
| {series.map(({ key, name, color }) => ( |
saengel
left a comment
There was a problem hiding this comment.
Overall looks great! Good work on a small, focused, branch-specific PR. Let's address some of the copilot feedback (I resolved the one that was irrelevant in my eyes) and then re-review before merging.
| <BarChart | ||
| data={data} | ||
| title="Submissions, past 12 months" | ||
| title="Submissions since August 2025" |
…der, safe legend sorter
- submissionsTrend.js: bucket submission months by UTC instead of local
time so results don't shift depending on the viewer's timezone
- index.css: allow the subheader description to wrap instead of forcing
nowrap, which caused horizontal overflow on narrow viewports
- LineChart.jsx: replace itemSorter={null} with a function that sorts
legend items by their declared series order, since Recharts expects
itemSorter to be callable
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
📊 Code Quality Score: 26/100
Was this score accurate? 👍 Yes · 👎 No Scored by GitVelocity · How are scores calculated? |
Summary
Test plan
🤖 Generated with Claude Code