Merge pull request #2925 from OneCommunityGlobal/vedant-fix-checkbox-…

…and-label-alignment-PieChart Vedant fix checkbox and label alignment pie chart
OneCommunityGlobal · Dec 9, 2024 · 19b2ff4 · 19b2ff4
2 parents 9ad50b4 + 6c1bcf3
commit 19b2ff4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/components/Reports/ProjectReport/PiechartByProject/PieChartByProject.css b/src/components/Reports/ProjectReport/PiechartByProject/PieChartByProject.css
@@ -1,7 +1,15 @@
 .pie-chart-title {
-  text-align: center;
-  margin-bottom: 24px;
-  color: black; /* Default for light mode */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  flex-direction: row;
+  width: 100%;
+  margin-bottom: 16px;
+  padding: 0;
+  background-color: transparent;
+  color: white;
+  margin-top: 15px;
 }
 
 .dark-mode .pie-chart-title h4 {

diff --git a/src/components/Reports/ProjectReport/PiechartByProject/PieChartByProject.jsx b/src/components/Reports/ProjectReport/PiechartByProject/PieChartByProject.jsx
@@ -134,7 +134,7 @@ export function PieChartByProject({
 
   return (
     <div className={`${darkMode ? 'text-light' : ''} w-100`}>
-      <div className='pie-chart-title'><h4>Pie Charts</h4></div>
+      <div className={`${darkMode ? 'text-light' : ''} pie-chart-title w-100`}><h4>Pie Charts</h4></div>
       <div><h5>{projectName}</h5></div>
       <div className="pie-chart-description">
         <div>

diff --git a/src/components/Reports/ProjectReport/WbsPiechart/WbsPieChart.jsx b/src/components/Reports/ProjectReport/WbsPiechart/WbsPieChart.jsx
@@ -70,21 +70,23 @@ export function WbsPieChart({
     <div className={darkMode ? "text-light" : ""}>
       <h5> Owners, Managers and Admins in {projectName} </h5>
       <div className= "pie-chart-title" >
-        <div className= { darkMode ? 'text-light' : ''}>
+        <div>
           <label className={`${darkMode ? 'text-light' : ''} pr-4`} >{isChecked ? 'Weekly Commited Hours By Active Member(Hide Piechart)' : 'Weekly Commited Hours By Member(Show Piechart)'}</label>
           <input
             type="checkbox"
+            // className="pie-chart-checkbox"
             checked={isChecked}
             onChange={handleShowPieChart}
           />
-
         </div>
-      </div>
-      {isChecked && ( <div style={{textAlign:'left', marginLeft:'35%'}}>
-          <p className="fw-bold">Total Active Members:  {activeData.length}  </p>
-          <p className="fw-bold mb-0">Total Hours Commited: { totalHours.toFixed(2)} </p>
-
+      {isChecked && ( 
+        <div style={{ textAlign: 'left', margin: 'auto' }}>
+          <div style={{ textAlign: 'center' }}>
+          <p style={{ color: darkMode ? '#fff' : '#000', fontWeight: 'bold' }} className="fw-bold">Total Active Members:  {activeData.length}  </p>
+          <p style={{ color: darkMode ? '#fff' : '#000', fontWeight: 'bold' }} className="fw-bold mb-0">Total Hours Commited: { totalHours.toFixed(2)} </p>
+          </div>
       </div>)}
+      </div>
       {isChecked && (<div style={{ width: '100%', height: '32rem' }}>
         <ProjectPieChart userData={totalHours > 0 ? userData : noDataPlaceholder} windowSize={windowSize.width} darkMode={darkMode}/>
       </div>)}