From 603c90b5e4b8f6b001e092575a9075e3d8db3ae7 Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:41:23 +0000 Subject: [PATCH 01/11] change the font size implementation to be simpler --- .../src/components/reports/SummaryNumber.tsx | 136 +++++------------- 1 file changed, 39 insertions(+), 97 deletions(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 5866b10c5af..27470619ea9 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -12,8 +12,8 @@ import { PrivacyFilter } from '../PrivacyFilter'; import { chartTheme } from './chart-theme'; import { LoadingIndicator } from './LoadingIndicator'; -const FONT_SIZE_SCALE_FACTOR = 0.9; -const MAX_RECURSION_DEPTH = 10; +const FONT_SIZE_SCALE_FACTOR = 1.6; +const FONT_PADDING = 8; type SummaryNumberProps = { value: number; @@ -32,61 +32,24 @@ export function SummaryNumber({ initialFontSize = 14, fontSizeChanged, }: SummaryNumberProps) { - const [fontSize, setFontSize] = useState(0); + const [fontSize, setFontSize] = useState(initialFontSize); const refDiv = useRef(null); - const offScreenRef = useRef(null); - const adjustFontSizeBinary = (minFontSize: number, maxFontSize: number) => { - if (!offScreenRef.current || !refDiv.current) return; - - const offScreenDiv = offScreenRef.current; - const refDivCurrent = refDiv.current; - - const binarySearchFontSize = ( - min: number, - max: number, - depth: number = 0, - ) => { - if (depth >= MAX_RECURSION_DEPTH) { - setFontSize(min); - return; - } - - const testFontSize = (min + max) / 2; - offScreenDiv.style.fontSize = `${testFontSize}px`; - - requestAnimationFrame(() => { - const isOverflowing = - offScreenDiv.scrollWidth > refDivCurrent.clientWidth || - offScreenDiv.scrollHeight > refDivCurrent.clientHeight; - - if (isOverflowing) { - binarySearchFontSize(min, testFontSize, depth + 1); - } else { - const isUnderflowing = - offScreenDiv.scrollWidth <= - refDivCurrent.clientWidth * FONT_SIZE_SCALE_FACTOR || - offScreenDiv.scrollHeight <= - refDivCurrent.clientHeight * FONT_SIZE_SCALE_FACTOR; - - if (isUnderflowing && testFontSize < max) { - binarySearchFontSize(testFontSize, max, depth + 1); - } else { - setFontSize(testFontSize); - if (initialFontSize !== testFontSize && fontSizeChanged) { - fontSizeChanged(testFontSize); - } - } - } - }); - }; + const displayAmount = amountToCurrency(Math.abs(value)); + const handleResize = debounce(() => { + const { clientWidth, clientHeight } = refDiv.current; + const widthWithPadding = clientWidth - FONT_PADDING * 2; // padding left and right + const heightWithPadding = clientHeight - FONT_PADDING * 2; // padding top and bottom - binarySearchFontSize(minFontSize, maxFontSize); - }; + const calculatedFontSize = Math.min( + (widthWithPadding * FONT_SIZE_SCALE_FACTOR) / + displayAmount.toString().length, + heightWithPadding, // Ensure the text fits vertically by using the height as the limiting factor + ); - const handleResize = debounce(() => { - adjustFontSizeBinary(14, 200); - }, 250); + setFontSize(calculatedFontSize); + fontSizeChanged(calculatedFontSize); + }, 100); const ref = useResizeObserver(handleResize); const mergedRef = useMergedRefs(ref, refDiv); @@ -95,53 +58,32 @@ export function SummaryNumber({ <> {loading && } {!loading && ( - <> -
+ } + role="text" + aria-label={`${value < 0 ? 'Negative' : 'Positive'} amount: ${displayAmount}${suffix}`} + style={{ + alignItems: 'center', + flexGrow: 1, + flexShrink: 1, + width: '100%', + height: '100%', + maxWidth: '100%', + fontSize, + lineHeight: 0.85, + margin: FONT_PADDING, + justifyContent: 'center', + transition: animate ? 'font-size 0.3s ease' : '', + color: value < 0 ? chartTheme.colors.red : chartTheme.colors.blue, + }} + > +
- - } - role="text" - aria-label={`${value < 0 ? 'Negative' : 'Positive'} amount: ${amountToCurrency(Math.abs(value))}${suffix}`} - style={{ - alignItems: 'center', - flexGrow: 1, - flexShrink: 1, - width: '100%', - height: '100%', - maxWidth: '100%', - fontSize: `${fontSize}px`, - lineHeight: 1, - padding: 8, - justifyContent: 'center', - transition: animate ? 'font-size 0.3s ease' : '', - color: value < 0 ? chartTheme.colors.red : chartTheme.colors.blue, - }} - > - - - + + )} ); From 59875e000aba09fe06fadd2c55ab7b3f3c664aca Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:42:42 +0000 Subject: [PATCH 02/11] release notes --- upcoming-release-notes/3871.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/3871.md diff --git a/upcoming-release-notes/3871.md b/upcoming-release-notes/3871.md new file mode 100644 index 00000000000..086300043c5 --- /dev/null +++ b/upcoming-release-notes/3871.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MikesGlitch] +--- + +Summary Report: Update font size implementation to be simpler From 702e9e17fe62625b6b2ad2c1965544ed0257eb4e Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:47:43 +0000 Subject: [PATCH 03/11] setting the line height back --- .../desktop-client/src/components/reports/SummaryNumber.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 27470619ea9..5a1713f266f 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -70,7 +70,7 @@ export function SummaryNumber({ height: '100%', maxWidth: '100%', fontSize, - lineHeight: 0.85, + lineHeight: 1, margin: FONT_PADDING, justifyContent: 'center', transition: animate ? 'font-size 0.3s ease' : '', From c94300419534aef299891a964d74bb4ca1397e9f Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:48:49 +0000 Subject: [PATCH 04/11] renames --- .../src/components/reports/SummaryNumber.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 5a1713f266f..e4b10852afd 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -13,7 +13,7 @@ import { chartTheme } from './chart-theme'; import { LoadingIndicator } from './LoadingIndicator'; const FONT_SIZE_SCALE_FACTOR = 1.6; -const FONT_PADDING = 8; +const CONTAINER_MARGIN = 8; type SummaryNumberProps = { value: number; @@ -38,13 +38,12 @@ export function SummaryNumber({ const displayAmount = amountToCurrency(Math.abs(value)); const handleResize = debounce(() => { const { clientWidth, clientHeight } = refDiv.current; - const widthWithPadding = clientWidth - FONT_PADDING * 2; // padding left and right - const heightWithPadding = clientHeight - FONT_PADDING * 2; // padding top and bottom + const width = clientWidth - CONTAINER_MARGIN * 2; // margin left and right + const height = clientHeight - CONTAINER_MARGIN * 2; // margin top and bottom const calculatedFontSize = Math.min( - (widthWithPadding * FONT_SIZE_SCALE_FACTOR) / - displayAmount.toString().length, - heightWithPadding, // Ensure the text fits vertically by using the height as the limiting factor + (width * FONT_SIZE_SCALE_FACTOR) / displayAmount.toString().length, + height, // Ensure the text fits vertically by using the height as the limiting factor ); setFontSize(calculatedFontSize); @@ -71,7 +70,7 @@ export function SummaryNumber({ maxWidth: '100%', fontSize, lineHeight: 1, - margin: FONT_PADDING, + margin: CONTAINER_MARGIN, justifyContent: 'center', transition: animate ? 'font-size 0.3s ease' : '', color: value < 0 ? chartTheme.colors.red : chartTheme.colors.blue, From 043035ad48c5b0e4352fe08d5b5002c8928571cf Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:50:32 +0000 Subject: [PATCH 05/11] condtion on the font changed event --- .../desktop-client/src/components/reports/SummaryNumber.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index e4b10852afd..9bcddd18e1f 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -47,7 +47,10 @@ export function SummaryNumber({ ); setFontSize(calculatedFontSize); - fontSizeChanged(calculatedFontSize); + + if (calculatedFontSize !== initialFontSize) { + fontSizeChanged(calculatedFontSize); + } }, 100); const ref = useResizeObserver(handleResize); From 64210e116a11d528a43359539496017d8d1cfade Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:57:01 +0000 Subject: [PATCH 06/11] fix type check --- .../desktop-client/src/components/reports/SummaryNumber.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 9bcddd18e1f..5d5d91a409c 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -37,6 +37,8 @@ export function SummaryNumber({ const displayAmount = amountToCurrency(Math.abs(value)); const handleResize = debounce(() => { + if (!refDiv.current) return; + const { clientWidth, clientHeight } = refDiv.current; const width = clientWidth - CONTAINER_MARGIN * 2; // margin left and right const height = clientHeight - CONTAINER_MARGIN * 2; // margin top and bottom From 076f9cc3de389796db62b3b8c9ec26f3dd1af710 Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 20:57:47 +0000 Subject: [PATCH 07/11] typecheck --- .../desktop-client/src/components/reports/SummaryNumber.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 5d5d91a409c..e8bacd39f89 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -50,7 +50,7 @@ export function SummaryNumber({ setFontSize(calculatedFontSize); - if (calculatedFontSize !== initialFontSize) { + if (calculatedFontSize !== initialFontSize && fontSizeChanged) { fontSizeChanged(calculatedFontSize); } }, 100); From fc44c509946c340aae30839f4d7cbdfa78eb0dc8 Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 21:01:59 +0000 Subject: [PATCH 08/11] clarifying comment --- .../desktop-client/src/components/reports/SummaryNumber.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index e8bacd39f89..53ea13d1f4d 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -40,8 +40,8 @@ export function SummaryNumber({ if (!refDiv.current) return; const { clientWidth, clientHeight } = refDiv.current; - const width = clientWidth - CONTAINER_MARGIN * 2; // margin left and right - const height = clientHeight - CONTAINER_MARGIN * 2; // margin top and bottom + const width = clientWidth - CONTAINER_MARGIN * 2; // account for margin left and right + const height = clientHeight - CONTAINER_MARGIN * 2; // account for margin top and bottom const calculatedFontSize = Math.min( (width * FONT_SIZE_SCALE_FACTOR) / displayAmount.toString().length, From 17d547fe40e1f7110209ab90cb01f7d3c04b1ceb Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 21:41:58 +0000 Subject: [PATCH 09/11] remove margin on left and right - not required --- .../desktop-client/src/components/reports/SummaryNumber.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 53ea13d1f4d..6b8b394592b 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -40,7 +40,7 @@ export function SummaryNumber({ if (!refDiv.current) return; const { clientWidth, clientHeight } = refDiv.current; - const width = clientWidth - CONTAINER_MARGIN * 2; // account for margin left and right + const width = clientWidth; // no margin required on left and right const height = clientHeight - CONTAINER_MARGIN * 2; // account for margin top and bottom const calculatedFontSize = Math.min( @@ -75,7 +75,7 @@ export function SummaryNumber({ maxWidth: '100%', fontSize, lineHeight: 1, - margin: CONTAINER_MARGIN, + margin: `${CONTAINER_MARGIN}px 0`, justifyContent: 'center', transition: animate ? 'font-size 0.3s ease' : '', color: value < 0 ? chartTheme.colors.red : chartTheme.colors.blue, From 224fc3d4bdd7906df262e6e20ae6cd06d9c69ead Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Thu, 21 Nov 2024 22:45:54 +0000 Subject: [PATCH 10/11] fix import --- packages/loot-core/src/server/dashboard/app.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/loot-core/src/server/dashboard/app.ts b/packages/loot-core/src/server/dashboard/app.ts index fd00f682609..b4fbef11130 100644 --- a/packages/loot-core/src/server/dashboard/app.ts +++ b/packages/loot-core/src/server/dashboard/app.ts @@ -81,6 +81,7 @@ const exportModel = { 'spending-card', 'custom-report', 'markdown-card', + 'summary-card', ].includes(widget.type) ) { throw new ValidationError( From a2fbceb04495ec2bae7cdf24e7a5ecca3b0459d4 Mon Sep 17 00:00:00 2001 From: Mike Clark Date: Fri, 22 Nov 2024 10:33:10 +0000 Subject: [PATCH 11/11] fix derp --- .../src/components/reports/SummaryNumber.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 6b8b394592b..7d2b9c1bcd0 100644 --- a/packages/desktop-client/src/components/reports/SummaryNumber.tsx +++ b/packages/desktop-client/src/components/reports/SummaryNumber.tsx @@ -34,8 +34,8 @@ export function SummaryNumber({ }: SummaryNumberProps) { const [fontSize, setFontSize] = useState(initialFontSize); const refDiv = useRef(null); + const displayAmount = amountToCurrency(Math.abs(value)) + suffix; - const displayAmount = amountToCurrency(Math.abs(value)); const handleResize = debounce(() => { if (!refDiv.current) return; @@ -65,7 +65,7 @@ export function SummaryNumber({ } role="text" - aria-label={`${value < 0 ? 'Negative' : 'Positive'} amount: ${displayAmount}${suffix}`} + aria-label={`${value < 0 ? 'Negative' : 'Positive'} amount: ${displayAmount}`} style={{ alignItems: 'center', flexGrow: 1, @@ -82,10 +82,7 @@ export function SummaryNumber({ }} > )}