From 339fac280605bbd344ecb3387751a9ee43ffab69 Mon Sep 17 00:00:00 2001 From: Michael Clark <5285928+MikesGlitch@users.noreply.github.com> Date: Fri, 22 Nov 2024 15:52:27 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Summary=20Card:=20Change=20the?= =?UTF-8?q?=20font=20size=20implementation=20to=20be=20simpler=20&=20fix?= =?UTF-8?q?=20import=20dashboard=20(#3871)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * change the font size implementation to be simpler * release notes * setting the line height back * renames * condtion on the font changed event * fix type check * typecheck * clarifying comment * remove margin on left and right - not required * fix import * fix derp --- .../src/components/reports/SummaryNumber.tsx | 139 ++++++------------ .../loot-core/src/server/dashboard/app.ts | 1 + upcoming-release-notes/3871.md | 6 + 3 files changed, 48 insertions(+), 98 deletions(-) create mode 100644 upcoming-release-notes/3871.md diff --git a/packages/desktop-client/src/components/reports/SummaryNumber.tsx b/packages/desktop-client/src/components/reports/SummaryNumber.tsx index 5866b10c5af..7d2b9c1bcd0 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 CONTAINER_MARGIN = 8; type SummaryNumberProps = { value: number; @@ -32,61 +32,28 @@ 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 displayAmount = amountToCurrency(Math.abs(value)) + suffix; - 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; + const handleResize = debounce(() => { + if (!refDiv.current) return; - 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; + const { clientWidth, clientHeight } = refDiv.current; + const width = clientWidth; // no margin required on left and right + const height = clientHeight - CONTAINER_MARGIN * 2; // account for margin top and bottom - if (isUnderflowing && testFontSize < max) { - binarySearchFontSize(testFontSize, max, depth + 1); - } else { - setFontSize(testFontSize); - if (initialFontSize !== testFontSize && fontSizeChanged) { - fontSizeChanged(testFontSize); - } - } - } - }); - }; + const calculatedFontSize = Math.min( + (width * FONT_SIZE_SCALE_FACTOR) / displayAmount.toString().length, + height, // Ensure the text fits vertically by using the height as the limiting factor + ); - binarySearchFontSize(minFontSize, maxFontSize); - }; + setFontSize(calculatedFontSize); - const handleResize = debounce(() => { - adjustFontSizeBinary(14, 200); - }, 250); + if (calculatedFontSize !== initialFontSize && fontSizeChanged) { + fontSizeChanged(calculatedFontSize); + } + }, 100); const ref = useResizeObserver(handleResize); const mergedRef = useMergedRefs(ref, refDiv); @@ -95,53 +62,29 @@ export function SummaryNumber({ <> {loading && } {!loading && ( - <> -
- - {amountToCurrency(Math.abs(value))} - {suffix} - -
- - } - 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, - }} - > - - - + } + role="text" + aria-label={`${value < 0 ? 'Negative' : 'Positive'} amount: ${displayAmount}`} + style={{ + alignItems: 'center', + flexGrow: 1, + flexShrink: 1, + width: '100%', + height: '100%', + maxWidth: '100%', + fontSize, + lineHeight: 1, + margin: `${CONTAINER_MARGIN}px 0`, + justifyContent: 'center', + transition: animate ? 'font-size 0.3s ease' : '', + color: value < 0 ? chartTheme.colors.red : chartTheme.colors.blue, + }} + > + + )} ); 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( 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