From 58eeee825ea441657db7c58754014fff7de214c1 Mon Sep 17 00:00:00 2001
From: Matt Fiddaman <github@m.fiddaman.uk>
Date: Mon, 29 Jul 2024 23:49:25 +0100
Subject: [PATCH] add goal tooltip to balance in budget table (#3123)
* add goal tooltip to balance in budget table
* release note
* fix long goals over multiple months
---
.../budget/BalanceWithCarryover.tsx | 117 ++++++++++++++----
upcoming-release-notes/3123.md | 6 +
2 files changed, 101 insertions(+), 22 deletions(-)
create mode 100644 upcoming-release-notes/3123.md
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index ccaf49d17..d90ae1f26 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -3,10 +3,12 @@ import React, { type ComponentPropsWithoutRef } from 'react';
import { useFeatureFlag } from '../../hooks/useFeatureFlag';
import { SvgArrowThinRight } from '../../icons/v1';
-import { type CSSProperties } from '../../style';
+import { type CSSProperties, theme, styles } from '../../style';
+import { Tooltip } from '../common/Tooltip';
import { View } from '../common/View';
import { type Binding } from '../spreadsheet';
import { CellValue } from '../spreadsheet/CellValue';
+import { useFormat } from '../spreadsheet/useFormat';
import { useSheetValue } from '../spreadsheet/useSheetValue';
import { makeBalanceAmountStyle } from './util';
@@ -50,6 +52,21 @@ export function DefaultCarryoverIndicator({ style }: CarryoverIndicatorProps) {
);
}
+function GoalTooltipRow({ children }) {
+ return (
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ gap: 10,
+ }}
+ >
+ {children}
+ </div>
+ );
+}
+
export function BalanceWithCarryover({
carryover,
balance,
@@ -71,6 +88,34 @@ export function BalanceWithCarryover({
isGoalTemplatesEnabled ? goalValue : null,
longGoalValue === 1 ? balanceValue : budgetedValue,
);
+ const format = useFormat();
+
+ const differenceToGoal =
+ longGoalValue === 1 ? balanceValue - goalValue : budgetedValue - goalValue;
+
+ const balanceCellValue = (
+ <CellValue
+ {...props}
+ binding={balance}
+ type="financial"
+ getStyle={value =>
+ makeBalanceAmountStyle(
+ value,
+ isGoalTemplatesEnabled ? goalValue : null,
+ longGoalValue === 1 ? balanceValue : budgetedValue,
+ )
+ }
+ style={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ textAlign: 'right',
+ ...(!disabled && {
+ cursor: 'pointer',
+ }),
+ ...props.style,
+ }}
+ />
+ );
return (
<span
@@ -81,27 +126,55 @@ export function BalanceWithCarryover({
maxWidth: '100%',
}}
>
- <CellValue
- {...props}
- binding={balance}
- type="financial"
- getStyle={value =>
- makeBalanceAmountStyle(
- value,
- isGoalTemplatesEnabled ? goalValue : null,
- longGoalValue === 1 ? balanceValue : budgetedValue,
- )
- }
- style={{
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- textAlign: 'right',
- ...(!disabled && {
- cursor: 'pointer',
- }),
- ...props.style,
- }}
- />
+ {isGoalTemplatesEnabled && goalValue !== null ? (
+ <Tooltip
+ content={
+ <View style={{ padding: 10 }}>
+ <span style={{ fontWeight: 'bold' }}>
+ {differenceToGoal === 0 ? (
+ <span style={{ color: theme.noticeText }}>Fully funded</span>
+ ) : differenceToGoal > 0 ? (
+ <span style={{ color: theme.noticeText }}>
+ Overfunded ({format(differenceToGoal, 'financial')})
+ </span>
+ ) : (
+ <span style={{ color: theme.errorText }}>
+ Underfunded ({format(differenceToGoal, 'financial')})
+ </span>
+ )}
+ </span>
+ <GoalTooltipRow>
+ <div>Goal Type:</div>
+ <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
+ </GoalTooltipRow>
+ <GoalTooltipRow>
+ <div>Goal:</div>
+ <div>{format(goalValue, 'financial')}</div>
+ </GoalTooltipRow>
+ <GoalTooltipRow>
+ {longGoalValue !== 1 ? (
+ <>
+ <div>Budgeted:</div>
+ <div>{format(budgetedValue, 'financial')}</div>
+ </>
+ ) : (
+ <>
+ <div>Balance:</div>
+ <div>{format(balanceValue, 'financial')}</div>
+ </>
+ )}
+ </GoalTooltipRow>
+ </View>
+ }
+ style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+ placement="bottom"
+ triggerProps={{ delay: 750 }}
+ >
+ {balanceCellValue}
+ </Tooltip>
+ ) : (
+ balanceCellValue
+ )}
{carryoverValue && carryoverIndicator({ style: valueStyle })}
</span>
);
diff --git a/upcoming-release-notes/3123.md b/upcoming-release-notes/3123.md
new file mode 100644
index 000000000..18658cfdf
--- /dev/null
+++ b/upcoming-release-notes/3123.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [matt-fidd]
+---
+
+Add a goal information tooltip to the balance on the budget table
--
GitLab