diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png index 2f01d4b21a4..8b6fb7dfc07 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png index 2619303ee1f..e821884d439 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png index e91f7df9a86..986929ddd5d 100644 Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx index e477e6e3491..a743ac84462 100644 --- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx +++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx @@ -137,7 +137,6 @@ export function ChooseGraph({ return ( { } = props; const yAxis = payload.name ?? payload.date; + const sin = Math.sin(-RADIAN * 240); + const my = cy + outerRadius * sin; + const ey = my - 5; + return ( - + {`${yAxis}`} - + {`${amountToCurrency(value)}`} - + {`${(percent * 100).toFixed(2)}%`} @@ -184,7 +206,6 @@ type DonutGraphProps = { filters: RuleConditionEntity[]; groupBy: string; balanceTypeOp: balanceTypeOpType; - compact?: boolean; viewLabels: boolean; showHiddenCategories?: boolean; showOffBudget?: boolean; @@ -197,7 +218,6 @@ export function DonutGraph({ filters, groupBy, balanceTypeOp, - compact, viewLabels, showHiddenCategories, showOffBudget, @@ -211,7 +231,7 @@ export function DonutGraph({ const accounts = useAccounts(); const [pointer, setPointer] = useState(''); - const getVal = obj => { + const getVal = (obj: DataEntity) => { if (['totalDebts', 'netDebts'].includes(balanceTypeOp)) { return -1 * obj[balanceTypeOp]; } else { @@ -221,71 +241,82 @@ export function DonutGraph({ const [activeIndex, setActiveIndex] = useState(0); + // Sort the data in the pie chart + const unsortedData = data[splitData]; + const sortedData = unsortedData.slice().sort((a, b) => getVal(b) - getVal(a)); + return ( - - {(width, height) => - data[splitData] && ( - -
- {!compact &&
} - - getVal(val)} - nameKey={yAxis} - isAnimationActive={false} - data={data[splitData]} - innerRadius={Math.min(width, height) * 0.2} - fill="#8884d8" - labelLine={false} - label={e => - viewLabels && !compact ? customLabel(e) :
- } - onMouseLeave={() => setPointer('')} - onMouseEnter={(_, index) => { - setActiveIndex(index); - if (!['Group', 'Interval'].includes(groupBy)) { - setPointer('pointer'); - } - }} - onClick={item => - ((compact && showTooltip) || !compact) && - !['Group', 'Interval'].includes(groupBy) && - showActivity({ - navigate, - categories, - accounts, - balanceTypeOp, - filters, - showHiddenCategories, - showOffBudget, - type: 'totals', - startDate: data.startDate, - endDate: data.endDate, - field: groupBy.toLowerCase(), - id: item.id, - }) - } + + {(width, height) => { + const compact = height <= 300 || width <= 300; + + return ( + sortedData && ( + +
+ {!compact &&
} + - {data.legend.map((entry, index) => ( - - ))} - - -
- - ) - } + getVal(val)} + nameKey={yAxis} + isAnimationActive={false} + data={sortedData} + innerRadius={Math.min(width, height) * 0.2} + fill="#8884d8" + labelLine={false} + label={e => + viewLabels && !compact ? customLabel(e) :
+ } + startAngle={90} + endAngle={-270} + onMouseLeave={() => setPointer('')} + onMouseEnter={(_, index) => { + setActiveIndex(index); + if (!['Group', 'Interval'].includes(groupBy)) { + setPointer('pointer'); + } + }} + onClick={item => + ((compact && showTooltip) || !compact) && + !['Group', 'Interval'].includes(groupBy) && + showActivity({ + navigate, + categories, + accounts, + balanceTypeOp, + filters, + showHiddenCategories, + showOffBudget, + type: 'totals', + startDate: data.startDate, + endDate: data.endDate, + field: groupBy.toLowerCase(), + id: item.id, + }) + } + > + {data.legend.map((entry, index) => ( + + ))} + + +
+ + ) + ); + }} ); } diff --git a/upcoming-release-notes/3855.md b/upcoming-release-notes/3855.md new file mode 100644 index 00000000000..028980feeff --- /dev/null +++ b/upcoming-release-notes/3855.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [MatissJanis] +--- + +Dashboards: sort pie-chart according to balances; add more spacing for labels.