From 25e80cb87cba42467db948a77ab77108d15ef900 Mon Sep 17 00:00:00 2001 From: Mehul Date: Sat, 2 Nov 2024 23:53:43 -0400 Subject: [PATCH 1/3] added total event count graph --- src/app/dashboard/page.tsx | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index c293c83..ae592e6 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -113,6 +113,12 @@ const chartConfig = { }, } satisfies ChartConfig; +const categoryChartConfig = { + label: { + color: "hsl(var(--background))", + }, +}; + const totalAttendeesData = [ { name: "Online", value: 1200 }, { name: "In-person", value: 800 }, @@ -152,8 +158,11 @@ export default function Page() { const [organisedEvent, setOrganisedEvent]: any = useState([]); const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); + const [totalEventCount, setTotalEventCount] = useState(0); + const [totalAttendeesCount, setTotalAttendeesCount] = useState(0); const [chartData, setChartData] = useState([]); + const [formatChartData, setFormatChartData] = useState([]); const [eventcount, seteventCount] = useState(""); const {getPermission} = useKindeBrowserClient(); @@ -183,8 +192,29 @@ export default function Page() { if (error) { console.log(error); } - { - // console.log(organised_events); + else { + // Calculate total events and total attendees + setTotalEventCount(organised_events?.length || 0); + // Count the occurrences of each event category + const categoryCounts: any = organised_events?.reduce>( + (acc, curr) => { + acc[curr.event_category] = (acc[curr.event_category] || 0) + 1; + return acc; + }, {} + ); + + // Prepare chart data for the pie chart + const formattedChartData: any= Object.entries(categoryCounts).map( + ([category, count]) => ({ + category, + eventcount: count, + fill: categoryColors[category as keyof typeof categoryColors] || "var(--color-other)", + }) + ); + + console.log(formattedChartData); + + setFormatChartData(formattedChartData); setLoading(true); setOrganisedEvent(organised_events); setLoading(false); @@ -327,7 +357,7 @@ export default function Page() { y={viewBox.cy} className="fill-white text-3xl font-bold" > - {eventcount.toLocaleString()} + {totalEventCount} Date: Sun, 3 Nov 2024 01:34:03 -0500 Subject: [PATCH 2/3] Added total Participants chart --- src/app/dashboard/page.tsx | 154 ++++++++++++++++++++++--------------- 1 file changed, 94 insertions(+), 60 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index ae592e6..f55b8cd 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -87,6 +87,22 @@ const chartConfig2 = { }, } satisfies ChartConfig; + +const barChartConfig = { + category: { + label: "category", + color: "hsl(var(--chart-1))", + }, + count: { + label: "count", + color: "hsl(var(--chart-2))", + }, + label: { + color: "hsl(var(--background))", + }, +} satisfies ChartConfig; + + const chartConfig = { visitors: { label: "Visitors", @@ -159,7 +175,7 @@ export default function Page() { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [totalEventCount, setTotalEventCount] = useState(0); - const [totalAttendeesCount, setTotalAttendeesCount] = useState(0); + const [totalAttendees, setTotalAttendees] = useState([]); const [chartData, setChartData] = useState([]); const [formatChartData, setFormatChartData] = useState([]); @@ -193,7 +209,7 @@ export default function Page() { console.log(error); } else { - // Calculate total events and total attendees + // Calculate total events setTotalEventCount(organised_events?.length || 0); // Count the occurrences of each event category const categoryCounts: any = organised_events?.reduce>( @@ -224,6 +240,36 @@ export default function Page() { organizeEvents(); }, [user]); + /* Total participants grouped by event category */ + useEffect(() => { + const eventCategory: any = async () => { + const { data, error } = await supabase.from('event_participants') + .select(` + event_id, + event_details (event_category) + `); + + if (error) { + console.error('Error fetching participants:', error); + } else { + // Process the data to count participants per category + const counts = data.reduce((acc: any, participant: any) => { + const category = participant.event_details.event_category; + acc[category] = (acc[category] || 0) + 1; + return acc; + }, {}); + + const totalParticipants = Object.entries(counts).map(([category, count]) => ({ + category, + count, + })); + setTotalAttendees(totalParticipants); + console.log('Participant counts -', totalParticipants); + } + } + eventCategory(); + }, []); + useEffect(() => { const fetchEventStats = async () => { setLoading(true); @@ -431,64 +477,52 @@ export default function Page() { - - - Average Rating - - - - - - value.slice(0, 3)} - hide - /> - - - } - /> - - - - - - - + + + Total Participants + + + + + + value} // Return the full value + /> + + + } + /> + + + + + + From 51eb0eeac8941f91b22c9dbd20d865dd2788e11e Mon Sep 17 00:00:00 2001 From: Mehul Date: Mon, 4 Nov 2024 01:55:23 -0500 Subject: [PATCH 3/3] Added participantsByTitle chart --- src/app/dashboard/page.tsx | 85 ++++++++++++++++++++++++++++++++------ 1 file changed, 73 insertions(+), 12 deletions(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index f55b8cd..91d37d5 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -176,6 +176,7 @@ export default function Page() { const [loading, setLoading] = useState(true); const [totalEventCount, setTotalEventCount] = useState(0); const [totalAttendees, setTotalAttendees] = useState([]); + const [totalAttendeesByEvent, setTotalAttendeesByEvent] = useState([]); const [chartData, setChartData] = useState([]); const [formatChartData, setFormatChartData] = useState([]); @@ -222,21 +223,17 @@ export default function Page() { // Prepare chart data for the pie chart const formattedChartData: any= Object.entries(categoryCounts).map( ([category, count]) => ({ - category, - eventcount: count, - fill: categoryColors[category as keyof typeof categoryColors] || "var(--color-other)", + category, + eventcount: count, + fill: categoryColors[category as keyof typeof categoryColors] || "var(--color-other)", }) ); - - console.log(formattedChartData); - setFormatChartData(formattedChartData); setLoading(true); setOrganisedEvent(organised_events); setLoading(false); } }; - organizeEvents(); }, [user]); @@ -246,12 +243,13 @@ export default function Page() { const { data, error } = await supabase.from('event_participants') .select(` event_id, - event_details (event_category) + event_details (event_category, event_title) `); if (error) { console.error('Error fetching participants:', error); } else { + // Process the data to count participants per category const counts = data.reduce((acc: any, participant: any) => { const category = participant.event_details.event_category; @@ -259,12 +257,24 @@ export default function Page() { return acc; }, {}); - const totalParticipants = Object.entries(counts).map(([category, count]) => ({ + const participantsByCategory = Object.entries(counts).map(([category, count]) => ({ category, count, })); - setTotalAttendees(totalParticipants); - console.log('Participant counts -', totalParticipants); + setTotalAttendees(participantsByCategory); + + // Process the data to count participants per event title + const countsByEvent = data.reduce((acc: any, participant: any) => { + const title = participant.event_details.event_title; + acc[title] = (acc[title] || 0) + 1; + return acc; + }, {}); + + const participantsByTitle = Object.entries(countsByEvent).map(([title, count]) => ({ + title, + count, + })); + setTotalAttendeesByEvent(participantsByTitle); } } eventCategory(); @@ -423,6 +433,7 @@ export default function Page() { +{/* @@ -475,11 +486,61 @@ export default function Page() { +*/} + + + + + Participants By Event + + + + + + value} // Return the full value + /> + + + } + /> + + + + + + + - Total Participants + Participants By Category