From 86e5a01846e7b0961e46935c41e0db456de1d4ce Mon Sep 17 00:00:00 2001 From: jayyy-s Date: Fri, 31 May 2024 05:22:02 -0400 Subject: [PATCH 1/6] changed color discrepancy on pie chart --- .../Reports/PeopleReport/components/PeopleTasksPieChart.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx index 94d795977e..6b3e4f6842 100644 --- a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx +++ b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx @@ -32,6 +32,7 @@ export const PeopleTasksPieChart = ({darkMode}) => { return (
+
hi
{showProjectsPieChart && (
Projects With Completed Hours
@@ -51,7 +52,7 @@ export const PeopleTasksPieChart = ({darkMode}) => { }Tasks With Completed Hours`} {!showAllTasks && Date: Thu, 6 Jun 2024 01:11:17 -0400 Subject: [PATCH 2/6] refactored PieChart render so colors dont change on view all click --- .../components/PeopleTasksPieChart.jsx | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx index 6b3e4f6842..4274710c45 100644 --- a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx +++ b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx @@ -1,4 +1,4 @@ -import {useState}from 'react'; +import { useState } from 'react'; import { useSelector } from 'react-redux'; import { PieChart } from '../../../common/PieChart'; import { peopleTasksPieChartViewData } from '../selectors'; @@ -6,7 +6,7 @@ import { ReportPage } from '../../sharedComponents/ReportPage'; import { NewModal } from '../../../common/NewModal'; import './PeopleTasksPieChart.css'; -export const PeopleTasksPieChart = ({darkMode}) => { +export const PeopleTasksPieChart = ({ darkMode }) => { const { tasksWithLoggedHoursById, showTasksPieChart, @@ -14,7 +14,6 @@ export const PeopleTasksPieChart = ({darkMode}) => { tasksLegend, projectsWithLoggedHoursById, projectsWithLoggedHoursLegend, - displayedTasksWithLoggedHoursById, displayedTasksLegend, showViewAllTasksButton, } = useSelector(peopleTasksPieChartViewData); @@ -25,11 +24,10 @@ export const PeopleTasksPieChart = ({darkMode}) => { return null; } - function handleViewAll(){ + function handleViewAll() { setShowAllTasks(prev => !prev); } - return (
hi
@@ -50,30 +48,22 @@ export const PeopleTasksPieChart = ({darkMode}) => {
{`${ showViewAllTasksButton ? 'Last ' : '' }Tasks With Completed Hours`}
- {!showAllTasks && } + /> {showViewAllTasksButton && ( -
- {showAllTasks && } -
- {showAllTasks ? "Collapse": "View all"} +
+
+ {showAllTasks ? 'Collapse' : 'View all'}
-
+
)} )}
); - }; From a8ccff0646100786c220db999bdb19888631a819 Mon Sep 17 00:00:00 2001 From: jayyy-s Date: Thu, 6 Jun 2024 03:10:00 -0400 Subject: [PATCH 3/6] added chartLegend prop to PieChart to prevent error on chart hover --- .../PeopleReport/components/PeopleTasksPieChart.jsx | 4 ++-- src/components/common/PieChart/PieChart.jsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx index 4274710c45..7fee11fefc 100644 --- a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx +++ b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx @@ -3,7 +3,6 @@ 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 }) => { @@ -30,7 +29,6 @@ export const PeopleTasksPieChart = ({ darkMode }) => { return (
-
hi
{showProjectsPieChart && (
Projects With Completed Hours
@@ -38,6 +36,7 @@ export const PeopleTasksPieChart = ({ darkMode }) => { pieChartId={'projectsPieChart'} data={projectsWithLoggedHoursById} dataLegend={projectsWithLoggedHoursLegend} + chartLegend={projectsWithLoggedHoursLegend} dataLegendHeader="Hours" darkMode={darkMode} /> @@ -52,6 +51,7 @@ export const PeopleTasksPieChart = ({ darkMode }) => { pieChartId={'tasksPieChart'} data={tasksWithLoggedHoursById} dataLegend={showAllTasks ? tasksLegend : displayedTasksLegend} + chartLegend={tasksLegend} dataLegendHeader="Hours" darkMode={darkMode} /> diff --git a/src/components/common/PieChart/PieChart.jsx b/src/components/common/PieChart/PieChart.jsx index 11b884ad8e..5254217c77 100644 --- a/src/components/common/PieChart/PieChart.jsx +++ b/src/components/common/PieChart/PieChart.jsx @@ -6,7 +6,7 @@ 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 @@ -71,10 +71,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; }) From 904dc72c92fa3d8c6ee2d4c7c9d8c0f916d243fe Mon Sep 17 00:00:00 2001 From: jayyy-s Date: Wed, 19 Jun 2024 22:03:14 -0400 Subject: [PATCH 4/6] fix color discrepancy between legend and chart view all --- src/components/common/PieChart/PieChart.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/common/PieChart/PieChart.jsx b/src/components/common/PieChart/PieChart.jsx index 5254217c77..85ff77741b 100644 --- a/src/components/common/PieChart/PieChart.jsx +++ b/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, chartLegend, 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, chartLegend, pieChartId, dataLegend 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)); From 567ff51c93eef051a33275cc0a0d0944db74ab4f Mon Sep 17 00:00:00 2001 From: jayyy-s Date: Tue, 13 Aug 2024 23:34:14 -0400 Subject: [PATCH 5/6] fixed misalignment on smaller desktop viewports --- src/components/common/PieChart/PieChart.css | 4 ++++ src/components/common/PieChart/PieChart.jsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/common/PieChart/PieChart.css b/src/components/common/PieChart/PieChart.css index 60e59317a8..7daef3dfc5 100644 --- a/src/components/common/PieChart/PieChart.css +++ b/src/components/common/PieChart/PieChart.css @@ -63,4 +63,8 @@ div.tooltip-donut { border-radius: 8px; pointer-events: none; font-size: 1rem; +} + +div.pie-chart-legend-container { + min-width: 150px; } \ No newline at end of file diff --git a/src/components/common/PieChart/PieChart.jsx b/src/components/common/PieChart/PieChart.jsx index 85ff77741b..f8e4496205 100644 --- a/src/components/common/PieChart/PieChart.jsx +++ b/src/components/common/PieChart/PieChart.jsx @@ -116,7 +116,7 @@ export const PieChart = ({ return (
-
+
Name
{dataLegendHeader}
From 182c0646a1497c79acb41629ecc28ffed75ffd15 Mon Sep 17 00:00:00 2001 From: jayyy-s Date: Tue, 13 Aug 2024 23:37:03 -0400 Subject: [PATCH 6/6] fixed misalignment on smaller desktop viewports --- src/components/common/PieChart/PieChart.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/PieChart/PieChart.css b/src/components/common/PieChart/PieChart.css index 7daef3dfc5..b89e8e3e4b 100644 --- a/src/components/common/PieChart/PieChart.css +++ b/src/components/common/PieChart/PieChart.css @@ -50,15 +50,15 @@ @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; @@ -67,4 +67,4 @@ div.tooltip-donut { div.pie-chart-legend-container { min-width: 150px; -} \ No newline at end of file +}