Vikas taking over for Kanishk: Implement Event Participation Analytics landing page with functional dropdowns and CSS modules#4162
Conversation
…nctional dropdowns and CSS modules
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
one-community
added
the
High Priority - Please Review First
sumedhkumar96
left a comment
sumedhkumar96
left a comment
There was a problem hiding this comment.
Followed the instructions provided by the developer and verified all functionalities as stated:
1. Landing Page
✅ Header with navigation and metrics summary
✅ Engagement summary cards
✅ Pie chart and bar chart visualizations
✅ Analytics navigation section
2. Navigation Links to Sub-Pages
✅ Virtual vs. In-Person Attendance
✅ Estimated Event Value
✅ Participation Trends
✅ Event Performance Metrics
3. Dropdown Functionality
✅ Verified that dropdowns on each sub-page dynamically update the displayed data
4. Dark Mode Toggle
❌ Tested dark mode toggle, some fonts do not fully support theme switching
sumedhkumar96
assigned
sumedhkumar96 and
kanishkagarwal6101 and unassigned
sumedhkumar96
Aswin20010
left a comment
Aswin20010
left a comment
There was a problem hiding this comment.
Tested the landing page at /communityportal/reports/participation and verified that all sections — header, summary cards, charts, and navigation to sub-pages — load and function correctly. Dropdowns work as expected, and data updates dynamically across views.
However, in dark mode, the font contrast is low, making text and labels less visible in several areas. Functionality is solid, but readability needs improvement. Please enhance text contrast for better visibility before merging.
Aditya-gam
left a comment
Aditya-gam
left a comment
There was a problem hiding this comment.
- Tested the changes mentioned in this PR. All the links and pages work correctly and are visually readable in light mode.
- In dark mode, some of the titles and labels on the charts are dark-colored, making them difficult to see.
- The three-button links have no backlinks to the landing page.
TestVideo.mov
…ytics - Fixed dark mode text contrast across all components (cards, charts, tables) - Improved hover states for dark mode (no more white backgrounds) - Fixed dark mode horizontal stretching on sub-pages (100% viewport width) - Left-aligned main heading on landing page for better alignment - Enhanced readability with proper color contrast in dark mode - Fixed backlink button visibility in light mode - Ensured all content remains centered while dark background stretches full width
|
|
Thank you for the feedback everyone some things miss the eyes, but I have made sure to fix the issues outlined by you all. Please review the pages again and approve if all looks good! |
kanishkagarwal6101
requested review from
Aditya-gam,
Aswin20010 and
sumedhkumar96
There was a problem hiding this comment.
- Tested the changes mentioned in this PR. All links and pages work correctly and are visually readable in light mode.
- In dark mode, all titles and labels on the charts are now clearly readable with proper contrast.
- The comprehensive dark mode CSS fixes ensure that chart legends, axis labels, bar labels, and all text elements have sufficient contrast against the dark background.
- All analytics sub-pages (Virtual vs. In-Person Attendance, Estimated Event Value, Participation Trends, and Event Performance Metrics) now include backlinks to the participation landing page, improving navigation flow.
Testing:
Verified functionality across all pages:
- Landing page loads with all sections (header, engagement cards, charts, navigation)
- All four analytics sub-pages are accessible and functional
- Dropdown filters work correctly with dynamic data updates
- Dark mode toggle works properly throughout all components
- Navigation links function as expected
Test video demonstrating the functionality:
TestVideoUpdate.mov
Note:
- You should remove yarn.lock from the commit so there are no merge conflicts with development.
There was a problem hiding this comment.
Hi Kanishk,
I have reviewed your PR locally and most of the functionalities do work as per requirement but there are a few misses in the dark mode (point 1,2,3,4,5) and one in light mode(point 4):
In Estimated Event Value Analysis - The word Value in Monthly Value Trends overlaps the X-axis and the title and there is no data label for Y axis
In Participation Trends Analysis - The word Attendance in Monthly Participation Trends overlaps the title and there is no data label for Y axis
On the dashboard - The word Attendance in Monthly Engagement Trends overlaps the title
In Event Performance Metrics - When the Upcoming Events dropdown is selected in the Filter Events - the dates do not co-relate to the current system date
On the dashboard - In Upcoming Events - When selected filters that also show the words "More" and "Show Less" - their text color is black and does not correlate to dark mode
- Add dark mode styling for 'Drop-off rate' and 'No-show rate' text in DropOffTracking component - Fix duplicate CSS selectors to resolve stylelint errors - Fix CSS syntax error (extra closing brace) - Ensure text is visible in dark mode with proper color contrast
- Resolved yarn.lock merge conflict by accepting development version and regenerating - Merged latest changes from development branch
|
Hello All, I have made the fixes as per the feedback and i re-request your review again, please and thank you |
debadyuti23
left a comment
debadyuti23
left a comment
There was a problem hiding this comment.
Hi @kanishkagarwal6101 after landing the webpage, these are my observations in the video shown below.
PR_4162.mp4
In short:
- every functionality is working
- in dark mode some boxes dont render with appropriate color. Here's a screenshot of the broken dark mode
Therefore would request to resolve this bug since other reviewers are also having issues with dark mode
There was a problem hiding this comment.
Hi Kanishk, great work with the page. All functionality except dark mode is working great. My video below of the run through showcases this as well as highlights the issues with the dark mode toggle. Some of the dark mode toggle issues are: The boxes for no-show rate insights and Drop off and now show rate tracking.
Video of my run-through highlighting the issues: https://www.dropbox.com/scl/fi/hexzbsxh9am08co8u3i74/PR-4162-Recording.mov?rlkey=72bphz7hje7vlhghuyzhrmhlw&st=6b8i756k&dl=0
…ttons, and filter dropdowns
|
|
Hello all, I have fixed the dark mode caveats please re review the pr. Your feedback helps a lot thank you. |
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Kanishk,
I have re-reviewed the PR locally and all the errors i have pointed appear to be fixed except i could not test The Show More or Show Less probably due to the counts of event being less.
rohanrastogi311
left a comment
rohanrastogi311
left a comment
There was a problem hiding this comment.
Hi Kanishk,
Well done on the fix. Dark mode issues are rectified.
Vikas-8055
left a comment
Vikas-8055
left a comment
There was a problem hiding this comment.
Hi Kanishk,
I have thoroughly tested this PR locally and all functionalities work as expected. The landing page loads correctly with all sections (header, engagement cards, charts, and navigation links). All sub-pages (Virtual vs. In-Person, Event Value, Participation Trends, Event Performance) navigate properly and display data correctly. Dropdown filters work smoothly and update data dynamically. Dark mode implementation is excellent - all text, charts, and labels have proper contrast and are clearly readable with no overlap issues. Responsive design adapts well to different screen sizes. Overall, the analytics dashboard is clean, intuitive, and fully functional.
Shravan-neelamsetty
left a comment
Shravan-neelamsetty
left a comment
There was a problem hiding this comment.
Hi Kanishk, I tested this PR locally by navigating to /communityportal/reports/participation and verified all the functionalities. The landing page loads correctly with all sections including the header, engagement summary cards, pie chart, bar chart visualizations, and analytics navigation. All four sub-pages (Virtual vs. In-Person Attendance, Estimated Event Value, Participation Trends, and Event Performance Metrics) are accessible and working properly. The dropdown filters work smoothly and update data dynamically. Dark mode implementation looks good with proper text contrast across all pages and charts. Backlinks to the landing page are working as expected.
Ganesh112001
left a comment
Ganesh112001
left a comment
There was a problem hiding this comment.
Hi Kanishk, I tested this PR locally following the provided steps and verified that all functionality works perfectly as intended. After checking out the kanishk_design_the_landing_page_analytics_eventPopularity branch, installing dependencies, and starting both servers, I navigated to /communityportal/reports/participation and confirmed the landing page is now fully accessible with all components rendering correctly. The comprehensive analytics dashboard displays beautifully with the header showing event metrics summary, engagement summary KPI cards, pie chart for event type popularity, bar chart for monthly engagement trends, and navigation links to all four sub-pages. I thoroughly tested each sub-page (Virtual vs. In-Person Attendance, Estimated Event Value, Participation Trends, and Event Performance Metrics) and verified that all functional dropdowns work smoothly with data updating dynamically based on selections. The CSS modules conversion is clean with consistent styling across all components, and dark mode support works flawlessly across every page with proper contrast and theme adaptation. No console errors were observed during testing, and the routing fix successfully makes the page accessible via direct URL. This is a comprehensive and polished implementation that successfully resolves the urgent accessibility issue while delivering a complete, professional analytics solution. Everything functions perfectly and is ready for merge.
|
Hi Kanishk, I am reviewed you PR and everything works well as expected. 
|
There was a problem hiding this comment.
Hi Kanishk,
I tested the landing page at /communityportal/reports/participation and confirmed that all major sections—including the header, summary cards, charts, and navigation to analytics sub-pages—load and function as expected. The dropdowns behave correctly, and the data updates dynamically across different views. Overall, I’ve reviewed your PR and everything works well as intended.
roshini1212
left a comment
roshini1212
left a comment
There was a problem hiding this comment.
Tested the landing page at /communityportal/reports/participation—all sections load correctly: header with metrics, engagement cards, pie/bar charts, and analytics navigation. Navigation to sub-pages (Virtual vs. In-Person, Event Value, Trends, Metrics) works, dropdowns update data dynamically, and all components support light/dark mode switching perfectly.
|
Hi @kanishkagarwal6101 |
No UI or functional issues observed |
ManojPuttaswamy
left a comment
ManojPuttaswamy
left a comment
There was a problem hiding this comment.
Landing page loads fine with all sections, navigation links are working as expected, UI looks fine in dark mode.
Suggestion: Using a plain tag causes a full page reload instead of a client-side navigation. Use React Router, and also using array index as key is an anti-pattern. Since navigationItems has stable titles, key={item.title} would be more appropriate.
|
Tested the initial/default flow and everything else looks fine from my side. The only issue I found is in the Virtual vs In-Person Attendance page: |
one-community
changed the title
rajanidi1999
left a comment
rajanidi1999
left a comment
There was a problem hiding this comment.
Hi,
I have tested your PR and its running successfully
rithika-paii
left a comment
rithika-paii
left a comment
There was a problem hiding this comment.
Hi Vikas,
I reviewed this PR #4162 and tested the changes locally in both light and dark modes, as well as across different screen sizes. The functionality works as expected, and I did not encounter any issues during testing.
Approved from my end.
PR.4162.-.approved.mov
20 participants
Description
Implemented the Event Participation Analytics landing page at
/communityportal/reports/participationwith comprehensive analytics dashboard, functional dropdowns, and CSS modules conversion. This addresses the urgent issue where the event registration page was only showing month/year view and the registration form/page was not accessible.Fixes # (Event Participation Analytics landing page accessibility and functionality)
Related PRS (if any):
This frontend PR implements the complete Event Participation Analytics landing page as specified in the requirements.
Main changes explained:
src/routes.jsxto make/communityportal/reports/participationaccessibleMyCases.jsx→ usesMyCases.module.cssDropOffTracking.jsx→ usesParticipation.module.cssNoShowInsights.jsx→ usesParticipation.module.cssEventParticipationHeader.jsx- Header with navigation and event metrics summaryEngagementSummaryCards.jsx- Key performance indicator cardsEventTypePieChart.jsx- Pie chart for event type popularity visualizationEngagementBarChart.jsx- Bar chart for monthly engagement trendsAnalyticsNavigation.jsx- Navigation links to detailed analytics sub-pagesVirtualVsInPerson.jsx- Compare virtual vs in-person attendance patternsEventValue.jsx- Analyze estimated event value and ROI calculationsParticipationTrends.jsx- Track participation growth over timeEventPerformance.jsx- Detailed individual event performance metricsParticipation.module.css- Main styles for all participation componentsMyCases.module.css- Specific styles for MyCases componentHow to test:
kanishk_design_the_landing_page_analytics_eventPopularitynpm installto install dependenciesnpm startto start the app locally/communityportal/reports/participationScreenshots or videos of changes:
Note: