From 2567620b6b898712fd4a97e4dd45e49c740e2fc9 Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Fri, 13 Oct 2023 02:13:07 -0400 Subject: [PATCH] refactor: second pass at CircularProgress --- .../lume/LumeDashboard/LumeDashboard.tsx | 58 ++++++++++--------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx index 271bb73..d33e8c3 100644 --- a/src/components/lume/LumeDashboard/LumeDashboard.tsx +++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx @@ -117,6 +117,7 @@ const NetworkIndicator = ({ network }: { network: Network }) => { ); }; + function getTextDimensions( fontSize: number, ratios: { width: number; height: number }, @@ -138,31 +139,33 @@ const CircularProgress = ({ width: 0, height: 0, }); - - const radius = 45; - const SVG_SIZE = radius * 2 + 10; // +10 to add some padding around - const STROKE_WIDTH = radius * 0.08; // 8% of the radius for the stroke width - const textSize = radius * 0.5; // half of the radius for text size - useEffect(() => { const testText = document.createElement("span"); testText.style.fontSize = `${textSize}px`; testText.style.position = "absolute"; - testText.style.left = "-9999px"; + testText.style.left = "-9999px"; // This effectively hides the element testText.textContent = "The quick brown fox jumps over the lazy dog"; + document.body.appendChild(testText); + const rect = testText.getBoundingClientRect(); + setFontRatio({ width: rect.width / textSize, height: rect.height / textSize, }); + + // Clean up after measurements document.body.removeChild(testText); - }, [textSize]); + }, []); - const { width: textWidth } = getTextDimensions(textSize, fontRatio); - - const circumference = 2 * Math.PI * radius; + const size = 55; + const progressWidth = 2; + const circleWidth = 2; + const radius = size / 2 - 10; + const circumference = 2 * radius * Math.PI; const offset = circumference * ((100 - chain.sync) / 100); + const textSize = 11; return ( + fontSize="26px" + fontWeight="normal" + style={{ transform: "rotate(90deg) translate(0px, -32px)" }}> {chain.sync}