Compare commits

...

3 Commits

4 changed files with 37 additions and 29 deletions

View File

@ -1,3 +1,5 @@
# [0.1.0-develop.35](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.34...v0.1.0-develop.35) (2023-10-13)
# [0.1.0-develop.34](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.33...v0.1.0-develop.34) (2023-10-13) # [0.1.0-develop.34](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.33...v0.1.0-develop.34) (2023-10-13)
# [0.1.0-develop.33](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.32...v0.1.0-develop.33) (2023-10-12) # [0.1.0-develop.33](https://git.lumeweb.com/LumeWeb/sdk/compare/v0.1.0-develop.32...v0.1.0-develop.33) (2023-10-12)

4
npm-shrinkwrap.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.34", "version": "0.1.0-develop.35",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.34", "version": "0.1.0-develop.35",
"dependencies": { "dependencies": {
"@lumeweb/kernel-network-registry-client": "0.1.0-develop.10", "@lumeweb/kernel-network-registry-client": "0.1.0-develop.10",
"@lumeweb/libkernel": "0.1.0-develop.65", "@lumeweb/libkernel": "0.1.0-develop.65",

View File

@ -1,6 +1,6 @@
{ {
"name": "@lumeweb/sdk", "name": "@lumeweb/sdk",
"version": "0.1.0-develop.34", "version": "0.1.0-develop.35",
"type": "module", "type": "module",
"main": "lib/index.js", "main": "lib/index.js",
"types": "lib/src/index.d.ts", "types": "lib/src/index.d.ts",

View File

@ -117,6 +117,7 @@ const NetworkIndicator = ({ network }: { network: Network }) => {
</div> </div>
); );
}; };
function getTextDimensions( function getTextDimensions(
fontSize: number, fontSize: number,
ratios: { width: number; height: number }, ratios: { width: number; height: number },
@ -138,31 +139,33 @@ const CircularProgress = ({
width: 0, width: 0,
height: 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(() => { useEffect(() => {
const testText = document.createElement("span"); const testText = document.createElement("span");
testText.style.fontSize = `${textSize}px`; testText.style.fontSize = `${textSize}px`;
testText.style.position = "absolute"; 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"; testText.textContent = "The quick brown fox jumps over the lazy dog";
document.body.appendChild(testText); document.body.appendChild(testText);
const rect = testText.getBoundingClientRect(); const rect = testText.getBoundingClientRect();
setFontRatio({ setFontRatio({
width: rect.width / textSize, width: rect.width / textSize,
height: rect.height / textSize, height: rect.height / textSize,
}); });
// Clean up after measurements
document.body.removeChild(testText); document.body.removeChild(testText);
}, [textSize]); }, []);
const { width: textWidth } = getTextDimensions(textSize, fontRatio); const size = 55;
const progressWidth = 2;
const circumference = 2 * Math.PI * radius; const circleWidth = 2;
const radius = size / 2 - 10;
const circumference = 2 * radius * Math.PI;
const offset = circumference * ((100 - chain.sync) / 100); const offset = circumference * ((100 - chain.sync) / 100);
const textSize = 11;
return ( return (
<svg <svg
@ -170,36 +173,39 @@ const CircularProgress = ({
className, className,
chainIndicatorVariant({ syncState: chain.syncState }), chainIndicatorVariant({ syncState: chain.syncState }),
])} ])}
width={SVG_SIZE} width={size}
height={SVG_SIZE} height={size}
viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`} viewBox={`-${size * 0.125} -${size * 0.125} ${size * 1.25} ${
size * 1.25
}`}
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ transform: "rotate(-90deg)" }}> style={{ transform: "rotate(-90deg)" }}>
<circle <circle
r={radius} r={size / 2 - 10}
cx={SVG_SIZE / 2} cx={size / 2}
cy={SVG_SIZE / 2} cy={size / 2}
fill="transparent" fill="transparent"
stroke="#e0e0e0" stroke="#e0e0e0"
strokeWidth={STROKE_WIDTH} strokeWidth={`${circleWidth}px`}
strokeDasharray={`${circumference}px`}></circle> strokeDasharray={`${circumference}px`}></circle>
<circle <circle
r={radius} r={size / 2 - 10}
cx={SVG_SIZE / 2} cx={size / 2}
cy={SVG_SIZE / 2} cy={size / 2}
stroke="currentColor" stroke="currentColor"
strokeWidth={STROKE_WIDTH} strokeWidth={`${progressWidth}px`}
strokeLinecap="round" strokeLinecap="round"
strokeDashoffset={`${offset}px`} strokeDashoffset={`${offset}px`}
fill="transparent" fill="transparent"
strokeDasharray={`${circumference}px`}></circle> strokeDasharray={`${circumference}px`}></circle>
<text <text
x={(SVG_SIZE - textWidth) / 2} x="4px"
y={(SVG_SIZE + textSize) / 2} // Adding half of the text size for vertical centering y="25px"
fill="currentColor" fill="currentColor"
fontSize={`${textSize}px`} fontSize="26px"
fontWeight="normal"> fontWeight="normal"
style={{ transform: "rotate(90deg) translate(0px, -32px)" }}>
{chain.sync} {chain.sync}
</text> </text>
</svg> </svg>