Merge pull request #4546 from OneCommunityGlobal/aseem-jobposting-analytics-avg-weeklyhours-minor-uichanges

Aseem job posting analytics avg weekly hours UI changes

Author: one-community

src/components/JobAnalytics/HoursPledgedChart/HoursPledgedChart.jsx

@@ -81,10 +81,11 @@ function HoursPledgedChart() {
 
     const processedData = Object.values(roleMap).map(roleData => ({
       role: roleData.role,
-      avgHours: roleData.totalHours / roleData.count,
+      avgHours: (roleData.totalHours / roleData.count).toFixed(2),
     }));
 
-    processedData.sort((a, b) => b.avgHours - a.avgHours);
+    processedData.sort((a, b) => Number(b.avgHours) - Number(a.avgHours));
+
     setChartData(processedData);
   }, [rawData, startDate, endDate, selectedRoles]);
 
@@ -124,9 +125,48 @@ function HoursPledgedChart() {
             onChange={setSelectedRoles}
             placeholder="Select Roles"
             styles={{
+              control: base => ({
+                ...base,
+                backgroundColor: darkMode ? '#1c2541' : base.backgroundColor,
+              }),
+              menu: base => ({
+                ...base,
+                backgroundColor: darkMode ? '#1c2541' : base.backgroundColor,
+              }),
+              option: (base, state) => ({
+                ...base,
+                backgroundColor: darkMode
+                  ? state.isFocused
+                    ? '#47526dff'
+                    : '#1c2541'
+                  : base.backgroundColor,
+                color: darkMode ? '#ffffff' : base.color,
+              }),
               placeholder: base => ({
                 ...base,
-                color: 'black',
+                color: darkMode ? '#ffffff' : base.color,
+              }),
+              input: base => ({
+                ...base,
+                color: darkMode ? '#ffffff' : base.color,
+              }),
+              multiValue: base => ({
+                ...base,
+                backgroundColor: darkMode ? '#47526d' : base.backgroundColor,
+              }),
+
+              multiValueLabel: base => ({
+                ...base,
+                color: darkMode ? '#ffffff' : base.color,
+              }),
+
+              multiValueRemove: base => ({
+                ...base,
+                color: darkMode ? '#ffffff' : base.color,
+                ':hover': {
+                  backgroundColor: darkMode ? '#5a6a85' : base[':hover']?.backgroundColor,
+                  color: '#ffffff',
+                },
               }),
             }}
           />
@@ -147,24 +187,35 @@ function HoursPledgedChart() {
             height={400}
             data={chartData}
             layout="vertical"
-            margin={{ top: 20, right: 30, left: 100, bottom: 20 }}
+            margin={{ top: 20, right: 80, left: 100, bottom: 60 }}
           >
             <CartesianGrid strokeDasharray="3 3" />
-            <XAxis type="number" dataKey="avgHours">
-              <Label value="Average Hours Pledged" position="insideBottom" offset={-10} />
+            <XAxis type="number" dataKey="avgHours" width={120} tickMargin={15}>
+              <Label value="Average Hours Pledged" position="insideBottom" offset={-20} dy={10} />
             </XAxis>
-            <YAxis type="category" dataKey="role">
+            <YAxis type="category" dataKey="role" width={120} tickMargin={15}>
               <Label
                 value="Name of Role"
                 angle={-90}
                 position="outsideCenter"
                 offset={-20}
-                dx={-50}
+                dx={-70}
               />
             </YAxis>
-            <Tooltip />
-            <Bar dataKey="avgHours" fill={darkMode ? '#225163' : '#8884d8'}>
-              <LabelList dataKey="avgHours" position="right" />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: darkMode ? '#1c2541' : '#ffffff',
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+              labelStyle={{
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+              itemStyle={{
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+            />
+            <Bar dataKey="avgHours" fill={darkMode ? '#9ca5f6ff' : '#8884d8'}>
+              <LabelList dataKey="avgHours" position="right" formatter={v => v} />
             </Bar>
           </BarChart>
         )}

src/components/JobAnalytics/HoursPledgedChart/HoursPledgedChart.module.css

@@ -50,6 +50,11 @@
   border-radius: 4px;
   width: 100%;
 }
+.darkMode .hpDateFilter input {
+  background-color: #1c2541;
+  color: #ffffff;
+  border: 1px solid #47526d;
+}
 
 label {
   font-weight: bold;