Skip to content

Commit 63ec810

Browse files
one-communityone-community
authored
Merge pull request #4584 from OneCommunityGlobal/Akshith-Fix-Header-Event-Popularity
Akshith-Fix-Header-Event-Popularity
2 parents 3b26f27 + 2b97805 commit 63ec810

3 files changed

Lines changed: 207 additions & 239 deletions

File tree

‎src/components/EventPopularity/EventPopularity.jsx‎

Lines changed: 66 additions & 238 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import {
1010
Tooltip,
1111
Legend,
1212
} from 'recharts';
13+
import styles from './EventPopularity.module.css';
14+
import { useSelector } from 'react-redux';
1315

1416
// Sample data
1517
const eventTypeData = [
@@ -62,254 +64,90 @@ const participationCards = [
6264
];
6365

6466
export default function EventDashboard() {
67+
const darkMode = useSelector(state => state.theme?.darkMode);
68+
6569
return (
66-
<div
67-
style={{
68-
maxWidth: '1200px',
69-
margin: '0 auto',
70-
padding: '20px',
71-
fontFamily: 'Arial, sans-serif',
72-
}}
73-
>
74-
<h1
75-
style={{
76-
fontSize: '24px',
77-
fontWeight: 'bold',
78-
marginBottom: '20px',
79-
textAlign: 'center',
80-
}}
81-
>
82-
Event Attendance Trend
83-
</h1>
84-
<div
85-
style={{
86-
display: 'grid',
87-
gridTemplateColumns: '1fr 1fr',
88-
gap: '20px',
89-
}}
90-
>
70+
<div className={`${styles.eventpopularity} ${darkMode ? styles.dark : ''}`}>
71+
<h1 className={styles.epheader}>Event Attendance Trend</h1>
72+
73+
<div className={styles.epgrid}>
9174
{/* Event Registration Trend (Type) */}
92-
<div
93-
style={{
94-
background: 'white',
95-
borderRadius: '8px',
96-
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
97-
padding: '20px',
98-
}}
99-
>
100-
<h2
101-
style={{
102-
fontSize: '18px',
103-
marginBottom: '15px',
104-
}}
105-
>
106-
Event Registration Trend (Type)
107-
</h2>
108-
<div
109-
style={{
110-
marginBottom: '20px',
111-
}}
112-
>
113-
<div
114-
style={{
115-
display: 'flex',
116-
justifyContent: 'space-between',
117-
fontSize: '14px',
118-
color: '#666',
119-
marginBottom: '10px',
120-
}}
121-
>
75+
<div className={styles.epCard}>
76+
<h2>Event Registration Trend (Type)</h2>
77+
78+
<div>
79+
<div className={styles.epRowLabel}>
12280
<span>Event Name</span>
12381
<span>Registered Members</span>
12482
</div>
83+
12584
{eventTypeData.map(event => (
126-
<div
127-
key={event.name}
128-
style={{
129-
display: 'flex',
130-
alignItems: 'center',
131-
marginBottom: '10px',
132-
}}
133-
>
134-
<span
135-
style={{
136-
width: '100px',
137-
marginRight: '10px',
138-
fontSize: '14px',
139-
color: '#666',
140-
}}
141-
>
142-
{event.name}
143-
</span>
144-
<div
145-
style={{
146-
flexGrow: 1,
147-
height: '8px',
148-
background: '#e0e0e0',
149-
borderRadius: '4px',
150-
overflow: 'hidden',
151-
}}
152-
>
85+
<div key={event.name} className={styles.epRowLabel}>
86+
<span className={styles.epEventName}>{event.name}</span>
87+
88+
<div className={styles.epProgressBar}>
15389
<div
154-
style={{
155-
height: '100%',
156-
background: '#4A90E2',
157-
width: `${(event.registered / 75) * 100}%`,
158-
}}
90+
className={styles.epProgressFill}
91+
style={{ width: `${(event.registered / 75) * 100}%` }}
15992
/>
16093
</div>
161-
<span
162-
style={{
163-
marginLeft: '10px',
164-
fontSize: '14px',
165-
color: '#666',
166-
}}
167-
>
168-
{event.registered}
169-
</span>
94+
95+
<span>{event.registered}</span>
17096
</div>
17197
))}
17298
</div>
17399

174-
<div
175-
style={{
176-
display: 'grid',
177-
gridTemplateColumns: 'repeat(3, 1fr)',
178-
gap: '10px',
179-
}}
180-
>
181-
{[
182-
{ title: '325', subtitle: 'Total Registered Members', isPrimary: true },
183-
{ title: 'Event Type 1', subtitle: 'Most Popular Event Type' },
184-
{ title: 'Event Type 6', subtitle: 'Least Popular Event Type' },
185-
].map(card => (
186-
<div
187-
key={card}
188-
style={{
189-
background: '#f5f5f5',
190-
borderRadius: '4px',
191-
padding: '10px',
192-
textAlign: 'center',
193-
}}
194-
>
195-
<h3 style={card.isPrimary ? { color: '#4A90E2' } : {}}>{card.title}</h3>
196-
<p
197-
style={{
198-
fontSize: '12px',
199-
color: '#666',
200-
}}
201-
>
202-
{card.subtitle}
203-
</p>
204-
</div>
205-
))}
100+
<div className={styles.epStatsGrid}>
101+
<div className={styles.epStatCard}>
102+
<h3 style={{ color: 'var(--ep-primary)' }}>325</h3>
103+
<p className={styles.epStatSubtitle}>Total Registered Members</p>
104+
</div>
105+
106+
<div className={styles.epStatCard}>
107+
<h3>Event Type 1</h3>
108+
<p className={styles.epStatSubtitle}>Most Popular Event Type</p>
109+
</div>
110+
111+
<div className={styles.epStatCard}>
112+
<h3>Event Type 6</h3>
113+
<p className={styles.epStatSubtitle}>Least Popular Event Type</p>
114+
</div>
206115
</div>
207116
</div>
208117

209118
{/* Event Registration Trend (Time) */}
210-
<div
211-
style={{
212-
background: 'white',
213-
borderRadius: '8px',
214-
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
215-
padding: '20px',
216-
}}
217-
>
218-
<h2
219-
style={{
220-
fontSize: '18px',
221-
marginBottom: '15px',
222-
}}
223-
>
224-
Event Registration Trend (Time)
225-
</h2>
226-
<div
227-
style={{
228-
marginBottom: '20px',
229-
}}
230-
>
231-
<ResponsiveContainer width="100%" height={200}>
232-
<BarChart data={timeData}>
233-
<CartesianGrid strokeDasharray="3 3" />
234-
<XAxis dataKey="time" />
235-
<YAxis />
236-
<Tooltip />
237-
<Legend />
238-
<Bar dataKey="registered" name="Registered Users" fill="#4A90E2" />
239-
<Bar dataKey="attended" name="Attended Users" fill="#82B7FF" />
240-
</BarChart>
241-
</ResponsiveContainer>
242-
</div>
119+
<div className={styles.epChartCard}>
120+
<h2>Event Registration Trend (Time)</h2>
243121

244-
<div
245-
style={{
246-
display: 'grid',
247-
gridTemplateColumns: 'repeat(4, 1fr)',
248-
gap: '10px',
249-
}}
250-
>
251-
{participationCards.map(card => (
252-
<div
253-
key={card}
254-
style={{
255-
background: '#f5f5f5',
256-
borderRadius: '4px',
257-
padding: '10px',
122+
<ResponsiveContainer width="100%" height={200}>
123+
<BarChart data={timeData}>
124+
<CartesianGrid stroke="var(--ep-grid-stroke)" strokeDasharray="3 3" />
125+
<XAxis dataKey="time" stroke="var(--ep-chart-tick)" />
126+
<YAxis stroke="var(--ep-chart-tick)" />
127+
<Tooltip
128+
contentStyle={{
129+
background: 'var(--ep-card-bg)',
130+
color: 'var(--ep-text-color)',
258131
}}
259-
>
260-
<div
261-
style={{
262-
display: 'flex',
263-
justifyContent: 'space-between',
264-
alignItems: 'center',
265-
marginBottom: '5px',
266-
}}
267-
>
268-
<h3
269-
style={{
270-
fontSize: '18px',
271-
margin: 0,
272-
}}
273-
>
274-
{card.title}
275-
</h3>
276-
<button
277-
type="button"
278-
style={{
279-
background: 'none',
280-
border: 'none',
281-
cursor: 'pointer',
282-
fontSize: '16px',
283-
}}
284-
>
285-
<span style={{ fontSize: '16px' }}>&#9654;</span>
286-
</button>
287-
</div>
288-
<p
289-
style={{
290-
fontSize: '12px',
291-
color: '#666',
292-
margin: '5px 0',
293-
}}
294-
>
295-
{card.subtitle}
296-
</p>
297-
{card.participants && (
298-
<div
299-
style={{
300-
fontSize: '12px',
301-
marginTop: '5px',
302-
}}
303-
>
304-
<span style={{ fontSize: '16px' }}>&#128101;</span> +{card.participants}
305-
</div>
306-
)}
132+
/>
133+
<Legend />
134+
<Bar dataKey="registered" fill="var(--ep-primary)" />
135+
<Bar dataKey="attended" fill="var(--ep-primary-2)" />
136+
</BarChart>
137+
</ResponsiveContainer>
138+
139+
<div className={styles.epParticipationGrid}>
140+
{participationCards.map(card => (
141+
<div key={card.title} className={styles.epParticipationCard}>
142+
<h3>{card.title}</h3>
143+
<p className={styles.epStatSubtitle}>{card.subtitle}</p>
144+
145+
{!!card.participants && <div> +{card.participants}</div>}
146+
307147
<p
308-
style={{
309-
fontSize: '12px',
310-
fontWeight: 'bold',
311-
color: card.trendType === 'positive' ? 'green' : 'red',
312-
}}
148+
className={
149+
card.trendType === 'positive' ? styles.trendPositive : styles.trendNegative
150+
}
313151
>
314152
{card.trend} Monthly
315153
</p>
@@ -318,16 +156,6 @@ export default function EventDashboard() {
318156
</div>
319157
</div>
320158
</div>
321-
<style>{`
322-
@media (max-width: 768px) {
323-
div {
324-
grid-template-columns: 1fr !important;
325-
}
326-
div > div:last-child > div:last-child {
327-
grid-template-columns: repeat(2, 1fr) !important;
328-
}
329-
}
330-
`}</style>
331159
</div>
332160
);
333161
}

0 commit comments

Comments
 (0)