diff --git a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx index f494738201..da9a0f6f49 100644 --- a/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx +++ b/src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx @@ -1,5 +1,8 @@ import { useState, useRef } from 'react'; import { useSelector } from 'react-redux'; +import { Tooltip } from 'reactstrap'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { ArrowUpDown, ArrowUp, ArrowDown, SquareArrowOutUpRight } from 'lucide-react'; import html2canvas from 'html2canvas'; import { jsPDF } from 'jspdf'; @@ -12,6 +15,7 @@ function NoShowInsights() { const [scopeFilter, setScopeFilter] = useState('My Event'); const [activeTab, setActiveTab] = useState('Event type'); const [sortOrder, setSortOrder] = useState('none'); + const [tooltipOpen, setTooltipOpen] = useState(false); const darkMode = useSelector(state => state.theme.darkMode); const insightsRef = useRef(null); const [isExportOpen, setIsExportOpen] = useState(false); @@ -27,6 +31,17 @@ function NoShowInsights() { }; const SortIcon = sortOrder === 'none' ? ArrowUpDown : sortOrder === 'asc' ? ArrowUp : ArrowDown; + const toggleTooltip = () => setTooltipOpen(!tooltipOpen); + + const getTooltipContent = () => { + let categoryDescription; + if (activeTab === 'Event type') categoryDescription = 'event types'; + else if (activeTab === 'Time') categoryDescription = 'time periods'; + else categoryDescription = 'locations'; + + return `Percentages represent the average no-show rate for each ${categoryDescription} (${activeTab}), aggregated from all matching events within the selected time range. Higher percentages indicate a higher likelihood of participants not attending.`; + }; + const calculateStats = filteredEvents => { const statsMap = new Map(); @@ -259,7 +274,23 @@ function NoShowInsights() { className={`${styles.insights} ${darkMode ? styles.insightsDark : ''}`} >