Merge pull request #3498 from OneCommunityGlobal/guirong-team-stats-chart

Guirong-Team Stats Bar Chart

Author: one-community

src/components/TotalOrgSummary/TeamStats/TeamStatsBarChart.jsx

@@ -7,11 +7,14 @@ import {
   ResponsiveContainer,
   Cell,
   LabelList,
+  Label,
 } from 'recharts';
 import './TeamStatsBarChart.css';
+import { useSelector } from 'react-redux';
 import TeamStatsBarLabel from './TeamStatsBarLabel';
 
 function TeamStatsBarChart({ data, yAxisLabel }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
   const totalValue = data.reduce((acc, item) => acc + item.value, 0);
   const renderCustomLabel = props => {
     const { x, y, width, height, index } = props;
@@ -39,8 +42,24 @@ function TeamStatsBarChart({ data, yAxisLabel }) {
           data={data}
           margin={{ top: 20, right: 150, left: 20, bottom: 20 }}
         >
-          <XAxis type="number" />
-          <YAxis type="category" dataKey={yAxisLabel} className="team-stats-y-axis" />
+          <XAxis type="number" tick={{ fill: darkMode ? 'white' : '#666' }}>
+            <Label
+              value="Total Volunteers"
+              position="insideBottom"
+              offset={-10}
+              style={{
+                fontWeight: 'bold',
+                fill: darkMode ? 'white' : '#666',
+                color: darkMode ? 'white' : '#666',
+              }}
+            />
+          </XAxis>
+          <YAxis
+            type="category"
+            dataKey={yAxisLabel}
+            className="team-stats-y-axis"
+            tick={{ fill: darkMode ? 'white' : '#666' }}
+          />
           <Tooltip />
           <Bar dataKey="value" fill="#1B6DDF">
             {data.map((_, index) => (

src/components/TotalOrgSummary/TeamStats/TeamStatsBarLabel.jsx

@@ -1,10 +1,19 @@
+import { useSelector } from 'react-redux';
+
 function TeamStatsBarLabel({ x, y, width, height, value, change, percentage }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  let changeColor;
+  if (change >= 0) {
+    changeColor = darkMode ? 'lightgreen' : 'green';
+  } else {
+    changeColor = 'red';
+  }
   return (
     <g>
       <text
         x={x + width + 30}
         y={y + height / 2 - 20}
-        fill="#000"
+        fill={darkMode ? 'white' : '#000'}
         fontSize="12"
         textAnchor="start"
         dominantBaseline="middle"
@@ -15,7 +24,7 @@ function TeamStatsBarLabel({ x, y, width, height, value, change, percentage }) {
       <text
         x={x + width + 20}
         y={y + height / 2}
-        fill="#666"
+        fill={darkMode ? 'white' : '#666'}
         fontSize="12"
         textAnchor="start"
         dominantBaseline="middle"
@@ -26,7 +35,7 @@ function TeamStatsBarLabel({ x, y, width, height, value, change, percentage }) {
       <text
         x={x + width + 10}
         y={y + height / 2 + 20}
-        fill={change >= 0 ? 'green' : 'red'}
+        fill={changeColor}
         fontSize="12"
         textAnchor="start"
         dominantBaseline="middle"

src/components/TotalOrgSummary/TotalOrgSummary.css

@@ -50,6 +50,6 @@
   margin: 10px;
 }
 
-.chart-title.dark-mode p{
+.chart-title.dark-mode p {
   color: white;
 }

src/components/TotalOrgSummary/VolunteerTrendsLineChart/styles.css

@@ -6,7 +6,7 @@
   position: absolute !important;
   z-index: 1;
   transform: translateX(-50%);
-  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2) ;
+  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .chart-container {
@@ -23,7 +23,7 @@
 }
 
 .custom-date-range > span {
- font-weight: bold;
+  font-weight: bold;
 }
 
 .date-filter-container {
@@ -35,12 +35,12 @@
 
 .date-filter-container > select {
   margin-top: 0;
-  width: min-content
+  width: min-content;
 }
 
 @media (max-width: 500px) {
   .chart-container {
     justify-content: start;
     overflow: scroll;
   }
-}
+}