From 36c700d92d35790b372190a785278662e2c6bdb2 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Sat, 13 Apr 2024 10:30:38 +0100
Subject: [PATCH] Custom Reports: Show Activity for donutGraph (#2583)
* Activate Click for donut
* notse
---
.../src/components/reports/ChooseGraph.tsx | 2 +
.../components/reports/graphs/DonutGraph.tsx | 87 +++++++++++++++++--
upcoming-release-notes/2583.md | 6 ++
3 files changed, 89 insertions(+), 6 deletions(-)
create mode 100644 upcoming-release-notes/2583.md
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index e68b99ef3..d84829a3c 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -125,6 +125,8 @@ export function ChooseGraph({
groupBy={groupBy}
balanceTypeOp={balanceTypeOp}
viewLabels={viewLabels}
+ showHiddenCategories={showHiddenCategories}
+ showOffBudget={showOffBudget}
/>
);
}
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index a129f6c30..f30d2560d 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -6,6 +6,9 @@ import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';
import { amountToCurrency } from 'loot-core/src/shared/util';
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
+import { useAccounts } from '../../../hooks/useAccounts';
+import { useCategories } from '../../../hooks/useCategories';
+import { useNavigate } from '../../../hooks/useNavigate';
import { theme, type CSSProperties } from '../../../style';
import { PrivacyFilter } from '../../PrivacyFilter';
import { Container } from '../Container';
@@ -177,6 +180,8 @@ type DonutGraphProps = {
balanceTypeOp: string;
compact?: boolean;
viewLabels: boolean;
+ showHiddenCategories?: boolean;
+ showOffBudget?: boolean;
};
export function DonutGraph({
@@ -186,10 +191,71 @@ export function DonutGraph({
balanceTypeOp,
compact,
viewLabels,
+ showHiddenCategories,
+ showOffBudget,
}: DonutGraphProps) {
const yAxis = groupBy === 'Interval' ? 'date' : 'name';
const splitData = groupBy === 'Interval' ? 'intervalData' : 'data';
+ const navigate = useNavigate();
+ const categories = useCategories();
+ const accounts = useAccounts();
+ const [pointer, setPointer] = useState('');
+
+ const onShowActivity = item => {
+ const amount = balanceTypeOp === 'totalDebts' ? 'lte' : 'gte';
+ const field = groupBy === 'Interval' ? null : groupBy.toLowerCase();
+ const hiddenCategories = categories.list
+ .filter(f => f.hidden)
+ .map(e => e.id);
+ const offBudgetAccounts = accounts.filter(f => f.offbudget).map(e => e.id);
+
+ const conditions = [
+ { field, op: 'is', value: item.id, type: 'id' },
+ {
+ field: 'date',
+ op: 'gte',
+ value: data.startDate,
+ options: { date: true },
+ type: 'date',
+ },
+ {
+ field: 'date',
+ op: 'lte',
+ value: data.endDate,
+ options: { date: true },
+ type: 'date',
+ },
+ balanceTypeOp !== 'totalTotals' && {
+ field: 'amount',
+ op: amount,
+ value: 0,
+ type: 'number',
+ },
+ hiddenCategories.length > 0 &&
+ !showHiddenCategories && {
+ field: 'category',
+ op: 'notOneOf',
+ value: hiddenCategories,
+ type: 'id',
+ },
+ offBudgetAccounts.length > 0 &&
+ !showOffBudget && {
+ field: 'account',
+ op: 'notOneOf',
+ value: offBudgetAccounts,
+ type: 'id',
+ },
+ ].filter(f => f);
+ navigate('/accounts', {
+ state: {
+ goBack: true,
+ conditions,
+ categoryId: item.id,
+ },
+ });
+ };
+
const getVal = obj => {
if (balanceTypeOp === 'totalDebts') {
return -1 * obj[balanceTypeOp];
@@ -200,10 +266,6 @@ export function DonutGraph({
const [activeIndex, setActiveIndex] = useState(0);
- const onPieEnter = (_, index) => {
- setActiveIndex(index);
- };
-
return (
<Container
style={{
@@ -216,7 +278,11 @@ export function DonutGraph({
<ResponsiveContainer>
<div>
{!compact && <div style={{ marginTop: '15px' }} />}
- <PieChart width={width} height={height}>
+ <PieChart
+ width={width}
+ height={height}
+ style={{ cursor: pointer }}
+ >
<Pie
activeIndex={activeIndex}
activeShape={compact ? ActiveShapeMobile : ActiveShape}
@@ -230,7 +296,16 @@ export function DonutGraph({
label={e =>
viewLabels && !compact ? customLabel(e) : <div />
}
- onMouseEnter={onPieEnter}
+ onMouseLeave={() => setPointer('')}
+ onMouseEnter={(_, index) => {
+ setActiveIndex(index);
+ if (!['Group', 'Interval'].includes(groupBy)) {
+ setPointer('pointer');
+ }
+ }}
+ onClick={
+ !['Group', 'Interval'].includes(groupBy) && onShowActivity
+ }
>
{data.legend.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
diff --git a/upcoming-release-notes/2583.md b/upcoming-release-notes/2583.md
new file mode 100644
index 000000000..04df9709a
--- /dev/null
+++ b/upcoming-release-notes/2583.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Enables the ability to show transactions when donut graph is clicked.
--
GitLab