From 11ceeb7916934c835d9ab59ddc458759a79413ca Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Fri, 13 Oct 2023 01:49:52 -0400 Subject: [PATCH] refactor: initial pass at rewriting the CircularProgress component --- .../lume/LumeDashboard/LumeDashboard.tsx | 78 +++++++++++++------ 1 file changed, 56 insertions(+), 22 deletions(-) diff --git a/src/components/lume/LumeDashboard/LumeDashboard.tsx b/src/components/lume/LumeDashboard/LumeDashboard.tsx index f570339..271bb73 100644 --- a/src/components/lume/LumeDashboard/LumeDashboard.tsx +++ b/src/components/lume/LumeDashboard/LumeDashboard.tsx @@ -117,6 +117,15 @@ const NetworkIndicator = ({ network }: { network: Network }) => { ); }; +function getTextDimensions( + fontSize: number, + ratios: { width: number; height: number }, +) { + const width = fontSize * ratios.width; + const height = fontSize * ratios.height; + + return { width, height }; +} const CircularProgress = ({ chain, @@ -125,8 +134,35 @@ const CircularProgress = ({ chain: Network; className?: string; }) => { - const progressOffset = ((100 - chain.sync) / 100) * 282.74; // These math are not mathing - const textOffset = (chain.sync / 100) * (30 - 44) + 44; + const [fontRatio, setFontRatio] = useState({ + 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.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, + }); + document.body.removeChild(testText); + }, [textSize]); + + const { width: textWidth } = getTextDimensions(textSize, fontRatio); + + const circumference = 2 * Math.PI * radius; + const offset = circumference * ((100 - chain.sync) / 100); return ( + strokeWidth={STROKE_WIDTH} + strokeDasharray={`${circumference}px`}> + strokeDasharray={`${circumference}px`}> + fontSize={`${textSize}px`} + fontWeight="normal"> {chain.sync}