Skip to content

Commit

Permalink
Spending Report: Add Last Month (#3132)
Browse files Browse the repository at this point in the history 
* AddLastMonth

* notes

* Add data for last month a year ago

* Adjustments for save button

* spending card fix

* notes

* fix typecheck

* fix averages
  • Loading branch information
@carkom
carkom committed Jul 31, 2024
1 parent 58eeee8 commit 2799dbe
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 38 deletions.
29 changes: 21 additions & 8 deletions packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ type CustomTooltipProps = {
thisMonth?: string;
lastYear?: string;
selection?: string;
compare?: string;
};

const CustomTooltip = ({
Expand All @@ -56,6 +57,7 @@ const CustomTooltip = ({
thisMonth,
lastYear,
selection,
compare,
}: CustomTooltipProps) => {
if (active && payload && payload.length) {
const comparison =
Expand Down Expand Up @@ -86,7 +88,7 @@ const CustomTooltip = ({
<div style={{ lineHeight: 1.5 }}>
{payload[0].payload.months[thisMonth].cumulative ? (
<AlignedText
left="This month:"
left={compare === 'thisMonth' ? 'This month:' : 'Last month:'}
right={amountToCurrency(
payload[0].payload.months[thisMonth].cumulative * -1,
)}
Expand All @@ -96,10 +98,12 @@ const CustomTooltip = ({
<AlignedText
left={
selection === 'average'
? 'Average'
? 'Average:'
: selection === lastYear
? 'Last year'
: 'Last month'
? 'Last year:'
: compare === 'thisMonth'
? 'Last month:'
: '2 months ago:'
}
right={amountToCurrency(comparison)}
/>
Expand All @@ -125,19 +129,27 @@ type SpendingGraphProps = {
data: SpendingEntity;
compact?: boolean;
mode: string;
compare: string;
};

export function SpendingGraph({
style,
data,
compact,
mode,
compare,
}: SpendingGraphProps) {
const privacyMode = usePrivacyMode();
const balanceTypeOp = 'cumulative';
const thisMonth = monthUtils.currentMonth();
const lastMonth = monthUtils.subMonths(monthUtils.currentMonth(), 1);
const lastYear = monthUtils.prevYear(monthUtils.currentMonth());
const thisMonth = monthUtils.subMonths(
monthUtils.currentMonth(),
compare === 'thisMonth' ? 0 : 1,
);
const previousMonth = monthUtils.subMonths(
monthUtils.currentMonth(),
compare === 'thisMonth' ? 1 : 2,
);
const lastYear = monthUtils.prevYear(thisMonth);
let selection;
switch (mode) {
case 'average':
Expand All @@ -147,7 +159,7 @@ export function SpendingGraph({
selection = lastYear;
break;
default:
selection = lastMonth;
selection = previousMonth;
break;
}

Expand Down Expand Up @@ -256,6 +268,7 @@ export function SpendingGraph({
thisMonth={thisMonth}
lastYear={lastYear}
selection={selection}
compare={compare}
/>
}
formatter={numberFormatterTooltip}
Expand Down
107 changes: 90 additions & 17 deletions packages/desktop-client/src/components/reports/reports/Spending.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { AlignedText } from '../../common/AlignedText';
import { Block } from '../../common/Block';
import { Button } from '../../common/Button';
import { Paragraph } from '../../common/Paragraph';
import { Select } from '../../common/Select';
import { Text } from '../../common/Text';
import { Tooltip } from '../../common/Tooltip';
import { View } from '../../common/View';
Expand Down Expand Up @@ -45,15 +46,19 @@ export function Spending() {
);
const [spendingReportTime = 'lastMonth', setSpendingReportTime] =
useLocalPref('spendingReportTime');
const [spendingReportCompare = 'thisMonth', setSpendingReportCompare] =
useLocalPref('spendingReportCompare');

const [dataCheck, setDataCheck] = useState(false);
const [compare, setCompare] = useState(spendingReportCompare);
const [mode, setMode] = useState(spendingReportTime);

const parseFilter = spendingReportFilter && JSON.parse(spendingReportFilter);
const filterSaved =
JSON.stringify(parseFilter.conditions) === JSON.stringify(conditions) &&
parseFilter.conditionsOp === conditionsOp &&
spendingReportTime === mode;
spendingReportTime === mode &&
spendingReportCompare === compare;

useEffect(() => {
const checkFilter =
Expand All @@ -70,8 +75,9 @@ export function Spending() {
conditions,
conditionsOp,
setDataCheck,
compare,
});
}, [categories, conditions, conditionsOp]);
}, [categories, conditions, conditionsOp, compare]);

const data = useReport('default', getGraphData);
const navigate = useNavigate();
Expand All @@ -89,6 +95,7 @@ export function Spending() {
}),
);
setSpendingReportTime(mode);
setSpendingReportCompare(compare);
};

const showAverage =
Expand All @@ -99,12 +106,20 @@ export function Spending() {
) > 0;

const todayDay =
monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
compare === 'lastMonth'
? 27
: monthUtils.getDay(monthUtils.currentDay()) - 1;
: monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
? 27
: monthUtils.getDay(monthUtils.currentDay()) - 1;

const showLastYear = Math.abs(data.intervalData[27].lastYear) > 0;
const showLastMonth = Math.abs(data.intervalData[27].lastMonth) > 0;
const showLastYear =
Math.abs(
data.intervalData[27][
compare === 'thisMonth' ? 'lastYear' : 'lastYearPrevious'
],
) > 0;
const showPreviousMonth =
Math.abs(data.intervalData[27][spendingReportTime]) > 0;
return (
<Page
header={
Expand Down Expand Up @@ -231,7 +246,7 @@ export function Spending() {
marginBottom: 5,
}}
>
{showLastMonth && (
{showPreviousMonth && (
<View
style={{
...styles.mediumText,
Expand All @@ -240,24 +255,49 @@ export function Spending() {
}}
>
<AlignedText
left={<Block>Spent MTD:</Block>}
left={
<Block>
Spent{' '}
{compare === 'thisMonth' ? 'MTD' : 'Last Month'}:
</Block>
}
right={
<Text>
<PrivacyFilter blurIntensity={5}>
{amountToCurrency(
Math.abs(data.intervalData[todayDay].thisMonth),
Math.abs(
data.intervalData[todayDay][
compare === 'thisMonth'
? 'thisMonth'
: 'lastMonth'
],
),
)}
</PrivacyFilter>
</Text>
}
/>
<AlignedText
left={<Block>Spent Last MTD:</Block>}
left={
<Block>
Spent{' '}
{compare === 'thisMonth'
? ' Last MTD'
: '2 Months Ago'}
:
</Block>
}
right={
<Text>
<PrivacyFilter blurIntensity={5}>
{amountToCurrency(
Math.abs(data.intervalData[todayDay].lastMonth),
Math.abs(
data.intervalData[todayDay][
compare === 'thisMonth'
? 'lastMonth'
: 'twoMonthsPrevious'
],
),
)}
</PrivacyFilter>
</Text>
Expand All @@ -267,7 +307,11 @@ export function Spending() {
)}
{showAverage && (
<AlignedText
left={<Block>Spent Average MTD:</Block>}
left={
<Block>
Spent Average{compare === 'thisMonth' && ' MTD'}:
</Block>
}
right={
<Text>
<PrivacyFilter blurIntensity={5}>
Expand All @@ -281,7 +325,7 @@ export function Spending() {
)}
</View>
</View>
{!showLastMonth ? (
{!showPreviousMonth ? (
<View style={{ marginTop: 30 }}>
<h1>Additional data required to generate graph</h1>
<Paragraph>
Expand All @@ -298,18 +342,46 @@ export function Spending() {
flexDirection: 'row',
}}
>
<Text
style={{
paddingRight: 5,
}}
>
Compare
</Text>
<Select
value={compare}
onChange={e => {
setCompare(e);
if (mode === 'lastMonth') setMode('twoMonthsPrevious');
if (mode === 'twoMonthsPrevious') setMode('lastMonth');
}}
options={[
['thisMonth', 'this month'],
['lastMonth', 'last month'],
]}
/>
<Text
style={{
paddingRight: 10,
paddingLeft: 5,
}}
>
Compare this month to:
to the:
</Text>
<ModeButton
selected={mode === 'lastMonth'}
onSelect={() => setMode('lastMonth')}
selected={['lastMonth', 'twoMonthsPrevious'].includes(
mode,
)}
onSelect={() =>
setMode(
compare === 'thisMonth'
? 'lastMonth'
: 'twoMonthsPrevious',
)
}
>
Last month
Month previous
</ModeButton>
{showLastYear && (
<ModeButton
Expand All @@ -335,6 +407,7 @@ export function Spending() {
compact={false}
data={data}
mode={mode}
compare={compare}
/>
) : (
<LoadingIndicator message="Loading report..." />
Expand Down
15 changes: 11 additions & 4 deletions packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,31 @@ export function SpendingCard() {
const [isCardHovered, setIsCardHovered] = useState(false);
const [spendingReportFilter = ''] = useLocalPref('spendingReportFilter');
const [spendingReportTime = 'lastMonth'] = useLocalPref('spendingReportTime');
const [spendingReportCompare = 'thisMonth'] = useLocalPref(
'spendingReportCompare',
);

const parseFilter = spendingReportFilter && JSON.parse(spendingReportFilter);
const getGraphData = useMemo(() => {
return createSpendingSpreadsheet({
categories,
conditions: parseFilter.conditions,
conditionsOp: parseFilter.conditionsOp,
compare: spendingReportCompare,
});
}, [categories, parseFilter]);
}, [categories, parseFilter, spendingReportCompare]);

const data = useReport('default', getGraphData);
const todayDay =
monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
spendingReportCompare === 'lastMonth'
? 27
: monthUtils.getDay(monthUtils.currentDay()) - 1;
: monthUtils.getDay(monthUtils.currentDay()) - 1 >= 28
? 27
: monthUtils.getDay(monthUtils.currentDay()) - 1;
const difference =
data &&
data.intervalData[todayDay][spendingReportTime] -
data.intervalData[todayDay].thisMonth;
data.intervalData[todayDay][spendingReportCompare];
const showLastMonth = data && Math.abs(data.intervalData[27].lastMonth) > 0;

return (
Expand Down Expand Up @@ -99,6 +105,7 @@ export function SpendingCard() {
compact={true}
data={data}
mode={spendingReportTime}
compare={spendingReportCompare}
/>
) : (
<LoadingIndicator message="Loading report..." />
Expand Down
Loading

0 comments on commit 2799dbe

Please sign in to comment.