Merge pull request #2409 from OneCommunityGlobal/Carlos_NewPieChart_Hour_visualization_by_Team_Member__Project_Reports

Carlos new pie chart hour visualization by team member  project reports

Author: one-community

package-lock.json

@@ -63,6 +63,7 @@
     "reactjs-popup": "^2.0.5",
     "reactstrap": "^8.4.1",
     "read-excel-file": "^5.5.3",
+    "recharts": "^2.12.7",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
     "redux-concatenate-reducers": "^1.0.0",

package.json

@@ -240,3 +240,21 @@ export function postTimeEntry(timeEntryObj) {
     );
   };
 };
+
+export function getTimeEntryByProjectSpecifiedPeriod(projectId, fromDate, toDate) {
+  const request = httpService.get(`${APIEndpoint}/TimeEntry/projects/${projectId}/${fromDate}/${toDate}`);
+
+  return dispatch => {
+    return new Promise((resolve, reject) => {
+      request.then(({ data }) => {
+        dispatch({
+          type: 'GET_TIME_ENTRY_By_Project_FOR_SPECIFIED_PERIOD',
+          payload: data,
+        });
+        resolve(data);
+      }).catch(error => {
+        reject(error);
+      });
+    });
+  };
+};

src/actions/index.js

@@ -133,7 +133,11 @@ export default function ItemsTable({
                       <td key={label}>{getNestedValue(el, key)}</td>
                     ))}
                     <td className="items_cell">
-                      <button type="button" onClick={() => handleEditRecordsClick(el, 'Update')}>
+                      <button
+                        type="button"
+                        onClick={() => handleEditRecordsClick(el, 'Update')}
+                        aria-label="Edit Record"
+                      >
                         <BiPencil />
                       </button>
                       <Button

src/components/BMDashboard/ItemList/ItemsTable.jsx

@@ -306,6 +306,7 @@ function LogTools() {
                       isMulti
                       styles={multiSelectCustomStyles}
                       onChange={handleCodeSelect}
+                      aria-label="Select Tool Code"
                     />
                   </td>
                 </tr>

src/components/BMDashboard/LogTools/LogTools.jsx

@@ -156,7 +156,11 @@ export default function ToolItemsTable({
                     </td>
                     <td>{el.code}</td>
                     <td className="items_cell">
-                      <button type="button" onClick={() => handleEditRecordsClick(el, 'Update')}>
+                      <button
+                        type="button"
+                        onClick={() => handleEditRecordsClick(el, 'Update')}
+                        aria-label="Edit Record"
+                      >
                         <BiPencil />
                       </button>
                       <Button

src/components/BMDashboard/ToolItemList/ToolItemsTable.jsx

@@ -225,7 +225,7 @@ function LeaderBoard({
           </thead>
           <tbody className="my-custome-scrollbar">
             <tr className={darkMode ? 'bg-yinmn-blue' : ''}>
-              <td />
+              <td aria-label="Placeholder" />
               <th scope="row" className="leaderboard-totals-container">
                 <span>{organizationData.name}</span>
                 {viewZeroHouraMembers(loggedInUser.role) && (
@@ -234,11 +234,11 @@ function LeaderBoard({
                   </span>
                 )}
               </th>
-              <td className="align-middle" />
+              <td className="align-middle" aria-label="Description" />
               <td className="align-middle">
                 <span title="Tangible time">{organizationData.tangibletime || ''}</span>
               </td>
-              <td className="align-middle">
+              <td className="align-middle" aria-label="Description">
                 <Progress
                   title={`TangibleEffort: ${organizationData.tangibletime} hours`}
                   value={organizationData.barprogress}
@@ -404,6 +404,7 @@ function LeaderBoard({
                           handleTimeOffModalOpen(data);
                         }}
                         style={{ width: '35px', height: 'auto' }}
+                        aria-label="View Time Off Requests"
                       >
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
@@ -433,7 +434,7 @@ function LeaderBoard({
                 <td className="align-middle" id={`id${item.personId}`}>
                   <span title="Tangible time">{item.tangibletime}</span>
                 </td>
-                <td className="align-middle">
+                <td className="align-middle" aria-label="Description or purpose of the cell">
                   <Link
                     to={`/timelog/${item.personId}`}
                     title={`TangibleEffort: ${item.tangibletime} hours`}

src/components/LeaderBoard/Leaderboard.jsx

@@ -57,7 +57,7 @@ export const PeopleTasksPieChart = ({darkMode}) => {
             darkMode={darkMode}
           />}
           {showViewAllTasksButton && (
-         <div>               
+         <div>
            {showAllTasks &&   <PieChart
                 pieChartId={'allTasksPieChart'}
                 data={tasksWithLoggedHoursById}

src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx

@@ -0,0 +1,17 @@
+
+.pie-chart-title{
+  text-align: left;
+  margin-bottom: 24px;
+
+}
+.pie-chart-description{
+  display: flex;
+  justify-content: space-around;
+  alignItems: center;
+  backgroundColor: white;
+  overflow: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+
+}