Jay fix color discrepancy for pie chart in PeopleReport

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

@@ -1,20 +1,18 @@
-import {useState}from 'react';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { PieChart } from '../../../common/PieChart';
 import { peopleTasksPieChartViewData } from '../selectors';
 import { ReportPage } from '../../sharedComponents/ReportPage';
-import { NewModal } from '../../../common/NewModal';
 import './PeopleTasksPieChart.css';
 
-export const PeopleTasksPieChart = ({darkMode}) => {
+export const PeopleTasksPieChart = ({ darkMode }) => {
   const {
     tasksWithLoggedHoursById,
     showTasksPieChart,
     showProjectsPieChart,
     tasksLegend,
     projectsWithLoggedHoursById,
     projectsWithLoggedHoursLegend,
-    displayedTasksWithLoggedHoursById,
     displayedTasksLegend,
     showViewAllTasksButton,
   } = useSelector(peopleTasksPieChartViewData);
@@ -25,11 +23,10 @@ export const PeopleTasksPieChart = ({darkMode}) => {
     return null;
   }
 
-  function handleViewAll(){
+  function handleViewAll() {
     setShowAllTasks(prev => !prev);
   }
 
-
   return (
     <div className={`people-pie-charts-wrapper ${darkMode ? 'text-light' : ''}`}>
       {showProjectsPieChart && (
@@ -39,6 +36,7 @@ export const PeopleTasksPieChart = ({darkMode}) => {
             pieChartId={'projectsPieChart'}
             data={projectsWithLoggedHoursById}
             dataLegend={projectsWithLoggedHoursLegend}
+            chartLegend={projectsWithLoggedHoursLegend}
             dataLegendHeader="Hours"
             darkMode={darkMode}
           />
@@ -49,30 +47,23 @@ export const PeopleTasksPieChart = ({darkMode}) => {
           <h5 className="people-pie-charts-header">{`${
             showViewAllTasksButton ? 'Last ' : ''
           }Tasks With Completed Hours`}</h5>
-          {!showAllTasks && <PieChart
+          <PieChart
             pieChartId={'tasksPieChart'}
-            data={displayedTasksWithLoggedHoursById}
-            dataLegend={displayedTasksLegend}
+            data={tasksWithLoggedHoursById}
+            dataLegend={showAllTasks ? tasksLegend : displayedTasksLegend}
+            chartLegend={tasksLegend}
             dataLegendHeader="Hours"
             darkMode={darkMode}
-          />}
+          />
           {showViewAllTasksButton && (
-         <div>
-           {showAllTasks &&   <PieChart
-                pieChartId={'allTasksPieChart'}
-                data={tasksWithLoggedHoursById}
-                dataLegend={tasksLegend}
-                dataLegendHeader="Hours"
-                darkMode={darkMode}
-              />}
-               <div onClick={handleViewAll} className="show-all-tasks-button">
-                  {showAllTasks ? "Collapse":  "View all"}
+            <div>
+              <div onClick={handleViewAll} className="show-all-tasks-button">
+                {showAllTasks ? 'Collapse' : 'View all'}
               </div>
-        </div>
+            </div>
           )}
         </ReportPage.ReportBlock>
       )}
     </div>
   );
-
 };

src/components/common/PieChart/PieChart.css

@@ -50,17 +50,21 @@
 
 @media (max-width: 670px) {
   .pie-chart-wrapper {
-     flex-direction: column;
+    flex-direction: column;
   }
 }
 
 div.tooltip-donut {
   position: absolute;
   text-align: center;
-  padding: .5rem;
-  background: #FFFFFF;
+  padding: 0.5rem;
+  background: #ffffff;
   color: #313639;
   border-radius: 8px;
   pointer-events: none;
   font-size: 1rem;
-}
+}
+
+div.pie-chart-legend-container {
+  min-width: 150px;
+}

src/components/common/PieChart/PieChart.jsx

@@ -6,7 +6,14 @@ import { generateArrayOfUniqColors } from './colorsGenerator';
 import './PieChart.css';
 
 // eslint-disable-next-line import/prefer-default-export, react/function-component-definition
-export const PieChart = ({ data, dataLegend, pieChartId, dataLegendHeader, darkMode }) => {
+export const PieChart = ({
+  data,
+  dataLegend,
+  chartLegend,
+  pieChartId,
+  dataLegendHeader,
+  darkMode,
+}) => {
   const [totalHours, setTotalHours] = useState(0);
   const [colors] = useState(generateArrayOfUniqColors(Object.keys(data).length));
   // create the pie chart
@@ -27,9 +34,11 @@ export const PieChart = ({ data, dataLegend, pieChartId, dataLegendHeader, darkM
 
     return svg;
   };
-  const color = d3.scaleOrdinal().range(colors);
+  let color = d3.scaleOrdinal().range(colors);
   const pie = d3.pie().value(d => d[1]);
   useEffect(() => {
+    color = d3.scaleOrdinal().range(colors);
+
     // eslint-disable-next-line camelcase
     const data_ready = pie(Object.entries(data));
 
@@ -71,10 +80,10 @@ export const PieChart = ({ data, dataLegend, pieChartId, dataLegendHeader, darkM
           .duration(50)
           .style('opacity', 1)
           .style('visibility', 'visible');
-        const taskName = Object.keys(dataLegend).map(key => {
-          return dataLegend[key][0];
+        const taskName = Object.keys(chartLegend).map(key => {
+          return chartLegend[key][0];
         });
-        const index = Object.keys(dataLegend)
+        const index = Object.keys(chartLegend)
           .map(function(e) {
             return e;
           })
@@ -107,7 +116,7 @@ export const PieChart = ({ data, dataLegend, pieChartId, dataLegendHeader, darkM
   return (
     <div className={`pie-chart-wrapper ${darkMode ? 'text-light' : ''}`}>
       <div id={`pie-chart-container-${pieChartId}`} className="pie-chart" />
-      <div>
+      <div className="pie-chart-legend-container">
         <div className="pie-chart-legend-header">
           <div>Name</div>
           <div>{dataLegendHeader}</div>