Skip to content

Commit

Permalink
Custom Reports: Show Activity for donutGraph (#2583)
Browse files Browse the repository at this point in the history
* Activate Click for donut

* notse
  • Loading branch information
carkom authored Apr 13, 2024
1 parent eed6105 commit 36c700d
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@ export function ChooseGraph({
groupBy={groupBy}
balanceTypeOp={balanceTypeOp}
viewLabels={viewLabels}
showHiddenCategories={showHiddenCategories}
showOffBudget={showOffBudget}
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -177,6 +180,8 @@ type DonutGraphProps = {
balanceTypeOp: string;
compact?: boolean;
viewLabels: boolean;
showHiddenCategories?: boolean;
showOffBudget?: boolean;
};

export function DonutGraph({
Expand All @@ -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];
Expand All @@ -200,10 +266,6 @@ export function DonutGraph({

const [activeIndex, setActiveIndex] = useState(0);

const onPieEnter = (_, index) => {
setActiveIndex(index);
};

return (
<Container
style={{
Expand All @@ -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}
Expand All @@ -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} />
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/2583.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [carkom]
---

Enables the ability to show transactions when donut graph is clicked.

0 comments on commit 36c700d

Please sign in to comment.