From 0f2e05ed1c88fa8aaa4a319bb5fe27e231acbfa5 Mon Sep 17 00:00:00 2001 From: Akshith <33996844+akshith312@users.noreply.github.com> Date: Thu, 8 Jan 2026 16:19:24 -0500 Subject: [PATCH] feat: Added hover info details and better interpretation of data --- .../EventPopularity/EventPopularity.jsx | 375 +++++++++++++----- .../EventPopularity.module.css | 36 ++ 2 files changed, 311 insertions(+), 100 deletions(-) create mode 100644 src/components/EventPopularity/EventPopularity.module.css diff --git a/src/components/EventPopularity/EventPopularity.jsx b/src/components/EventPopularity/EventPopularity.jsx index 004e0a1453..565f0469fa 100644 --- a/src/components/EventPopularity/EventPopularity.jsx +++ b/src/components/EventPopularity/EventPopularity.jsx @@ -1,5 +1,6 @@ 'use client'; +import { useState } from 'react'; import { Bar, BarChart, @@ -10,58 +11,87 @@ import { Tooltip, Legend, } from 'recharts'; +import styles from './EventPopularity.module.css'; // Sample data const eventTypeData = [ - { name: 'Event Type 1', registered: 75 }, - { name: 'Event Type 2', registered: 60 }, - { name: 'Event Type 3', registered: 55 }, - { name: 'Event Type 4', registered: 50 }, - { name: 'Event Type 5', registered: 45 }, - { name: 'Event Type 6', registered: 40 }, + { name: 'Community Volunteer Day', registered: 75 }, + { name: 'Skill Development Workshop', registered: 60 }, + { name: 'Networking Mixer', registered: 55 }, + { name: 'Environmental Cleanup', registered: 50 }, + { name: 'Youth Membership Program', registered: 45 }, + { name: 'Cultural Exchange Event', registered: 40 }, ]; const timeData = [ - { time: '9:00', registered: 8, attended: 12 }, - { time: '11:00', registered: 15, attended: 18 }, - { time: '13:00', registered: 20, attended: 25 }, - { time: '15:00', registered: 25, attended: 30 }, - { time: '17:00', registered: 18, attended: 20 }, - { time: '19:00', registered: 10, attended: 15 }, - { time: '21:00', registered: 5, attended: 8 }, + { time: '9:00 AM', registered: 8, attended: 12 }, + { time: '11:00 AM', registered: 15, attended: 18 }, + { time: '1:00 PM', registered: 20, attended: 25 }, + { time: '3:00 PM', registered: 25, attended: 30 }, + { time: '5:00 PM', registered: 18, attended: 20 }, + { time: '7:00 PM', registered: 10, attended: 15 }, + { time: '9:00 PM', registered: 5, attended: 8 }, ]; const participationCards = [ { - title: '5+', - subtitle: 'Repeated participation', + title: '5+ Events', + subtitle: 'Highly Engaged Members', + description: 'Users who attended 5 or more events', trend: '-10%', trendType: 'negative', participants: 3, }, { - title: '2+', - subtitle: 'Repeated participation', + title: '2-4 Events', + subtitle: 'Regular Participants', + description: 'Users who attended 2 to 4 events', trend: '+25%', trendType: 'positive', participants: 3, }, { - title: '<1', - subtitle: 'Repeated participation', + title: '1 Event', + subtitle: 'New/One-Time Attendees', + description: 'First-time or one-time participants', trend: '-5%', trendType: 'negative', participants: 3, }, { - title: '420', - subtitle: 'Total Members', + title: '420 Users', + subtitle: 'Total Active Members', + description: 'Total users with at least one event attendance', trend: '+20%', trendType: 'positive', }, ]; +const InfoTooltip = ({ text, children }) => { + const [showToolTip, setShowTooltip] = useState(false); + + return ( +
setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + {children} + {showToolTip && ( +
+ {text} +
+
+ )} +
+ ); +}; + export default function EventDashboard() { + const currentDate = new Date(); + const thirtyDaysAgo = new Date(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000); + const dateRangeLabel = `${thirtyDaysAgo.toLocaleDateString()} - ${currentDate.toLocaleDateString()}`; + return (
-

- Event Attendance Trend -

+

+ Event Attendance Dashboard +

+
+ Time Period: Last 30 days ({dateRangeLabel}) +
+
+ All metrics below reflect data from the selected time period +
+
+
-

- Event Registration Trend (Type) -

+

+ Event Registration by Type +

+ + + ? + + +
+
Event Name - Registered Members + Registered Users
{eventTypeData.map(event => (
{event.name} @@ -144,9 +233,9 @@ export default function EventDashboard() {
@@ -160,12 +249,15 @@ export default function EventDashboard() {
- {event.registered} + {event.registered} users
))} @@ -179,24 +271,48 @@ export default function EventDashboard() { }} > {[ - { title: '325', subtitle: 'Total Registered Members', isPrimary: true }, - { title: 'Event Type 1', subtitle: 'Most Popular Event Type' }, - { title: 'Event Type 6', subtitle: 'Least Popular Event Type' }, - ].map(card => ( + { + title: '325 Users', + subtitle: 'Total Registrations', + isPrimary: true, + description: 'Total users who registered across all event types', + }, + { + title: 'Community Volunteer Day', + subtitle: 'Most Popular', + description: 'Event type with highest registrations', + }, + { + title: 'Cultural Exchange Event', + subtitle: 'Least Popular', + description: 'Event type with lowest registrations', + }, + ].map((card, idx) => (
-

{card.title}

+

+ {card.title} +

{card.subtitle} @@ -215,28 +331,70 @@ export default function EventDashboard() { padding: '20px', }} > -

- Event Registration Trend (Time) -

+

+ Event Attendance by Time Slot +

+ + + ? + + +
+
- + - - - - - - - + + + + `${value} users`} + contentStyle={{ + background: '#333', + border: 'none', + borderRadius: '4px', + color: '#fff', + }} + /> + + +
@@ -248,48 +406,62 @@ export default function EventDashboard() { gap: '10px', }} > - {participationCards.map(card => ( + {participationCards.map((card, idx) => (

{card.title}

- + + + ? + +

{card.subtitle} @@ -298,33 +470,36 @@ export default function EventDashboard() {

- 👥 +{card.participants} + 👥 {card.participants} users
)}

- {card.trend} Monthly + {card.trend} vs last month

))} + diff --git a/src/components/EventPopularity/EventPopularity.module.css b/src/components/EventPopularity/EventPopularity.module.css new file mode 100644 index 0000000000..27b005ac4b --- /dev/null +++ b/src/components/EventPopularity/EventPopularity.module.css @@ -0,0 +1,36 @@ +.infotooltipHover { + position: relative; + display: inline-block; +} + +.infotooltipheading { + position: absolute; + bottom: 125%; + left: 50%; + transform: translateX(-50%); + background: #333; + color: white; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + z-index: 1000; + margin-bottom: 5px; +} + +.infotooltiptext { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #333; +} + +.infotooltipHover:hover .infotooltipheading, +.infotooltipHover:hover .infotooltiptext { + opacity: 1; + visibility: visible; +} +