Merge pull request #5123 from OneCommunityGlobal/Neeraj_Hotfix_HiringAnalytics_Chart

Neeraj Fix Chart Rendering Issue and Dark Mode Legend

Author: one-community

src/components/ApplicantVolunteerRatio/ApplicantVolunteerRatio.jsx

@@ -49,17 +49,15 @@ function ApplicantVolunteerRatio() {
 
       if (validationError) setValidationError('');
 
-      if (selectedRoles.length === 0) {
-        setData([]);
-        return;
-      }
       try {
         setLoading(true);
         const filters = {};
         if (startDate) filters.startDate = startDate.toISOString().split('T')[0];
         if (endDate) filters.endDate = endDate.toISOString().split('T')[0];
         if (selectedRoles.length > 0) {
           filters.roles = selectedRoles.map(role => role.value).join(',');
+        } else {
+          filters.roles = ''; // fetch all roles
         }
 
         const response = await getAllApplicantVolunteerRatios(filters);
@@ -112,6 +110,8 @@ function ApplicantVolunteerRatio() {
     };
   }, [darkMode]);
 
+  const legendTextColor = darkMode ? '#e0e0e0' : '#333';
+
   if (loading) {
     return (
       <div className={`${styles.page} ${darkMode ? styles.dark : ''}`}>
@@ -280,11 +280,66 @@ function ApplicantVolunteerRatio() {
           >
             {viewMode === 'count' ? (
               <>
-                <span style={{ color: '#1976d2' }}>■ Total Applications</span>
-                <span style={{ color: '#43a047' }}>■ People Hired</span>
+                <span
+                  style={{
+                    color: legendTextColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                  }}
+                >
+                  <span
+                    style={{
+                      width: '12px',
+                      height: '12px',
+                      backgroundColor: '#1976d2',
+                      display: 'inline-block',
+                      borderRadius: '2px',
+                    }}
+                  />
+                  Total Applications
+                </span>
+
+                <span
+                  style={{
+                    color: legendTextColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                  }}
+                >
+                  <span
+                    style={{
+                      width: '12px',
+                      height: '12px',
+                      backgroundColor: '#43a047',
+                      display: 'inline-block',
+                      borderRadius: '2px',
+                    }}
+                  />
+                  People Hired
+                </span>
               </>
             ) : (
-              <span style={{ color: '#43a047' }}>■ People Hired (%)</span>
+              <span
+                style={{
+                  color: legendTextColor,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                }}
+              >
+                <span
+                  style={{
+                    width: '12px',
+                    height: '12px',
+                    backgroundColor: '#43a047',
+                    display: 'inline-block',
+                    borderRadius: '2px',
+                  }}
+                />
+                People Hired (%)
+              </span>
             )}
           </div>