React Usage

[FeeFiFoFumM]

Hello,

First of all, your repository has been very helpful to me due to its simplicity and fast performance, and I feel indebted to thank you for that. There’s one thing I haven’t been able to achieve: I wanted to give rounded corners to the half-circle using style.css to make its corners oval, but I couldn't do it. I’m sharing the React TypeScript code I’ve arranged below, and I would really appreciate it if you could get back to me.

` import React, { useEffect } from 'react'; import './style.css'; // CSS stil dosyanızı buradan içe aktarın. import meter from './svg-meter-gauge-needle.svg';

const GaugeTest: React.FC = () => {
const r: number = 400; // Çember yarıçapı

useEffect(() => {
    const circles: NodeListOf<SVGCircleElement> = document.querySelectorAll('.circle');
    const total_circles: number = circles.length;

    for (let i = 0; i < total_circles; i++) {
    circles[i].setAttribute('r', r.toString());
    }

    // Calc
    const meter_dimension: number = (r * 2) + 100;
    const wrapper: HTMLElement | null = document.querySelector('#wrapper');
    if (wrapper) {
    wrapper.style.width = meter_dimension + 'px';
    wrapper.style.height = meter_dimension + 'px';
    }

    // Stroke
    const cf: number = 2 * Math.PI * r;
    const semi_cf: number = cf / 2;
    const semi_cf_1by3: number = semi_cf / 3;
    const semi_cf_2by3: number = semi_cf_1by3 * 2;

    const outline_curves: SVGCircleElement | null = document.querySelector('#outline_curves');
    outline_curves?.setAttribute('stroke-dasharray', `${semi_cf},${cf}`);

    const low: SVGCircleElement | null = document.querySelector('#low');
    low?.setAttribute('stroke-dasharray', `${semi_cf},${cf}`);

    const avg: SVGCircleElement | null = document.querySelector('#avg');
    avg?.setAttribute('stroke-dasharray', `${semi_cf_2by3},${cf}`);

    const high: SVGCircleElement | null = document.querySelector('#high');
    high?.setAttribute('stroke-dasharray', `${semi_cf_1by3},${cf}`);

    const outline_ends: SVGCircleElement | null = document.querySelector('#outline_ends');
    outline_ends?.setAttribute('stroke-dasharray', `2,${semi_cf - 2}`);

    const mask: SVGCircleElement | null = document.querySelector('#mask');
    mask?.setAttribute('stroke-dasharray', `${semi_cf},${cf}`);

    outline_curves?.setAttribute('stroke', '#299D91');
    outline_ends?.setAttribute('stroke', '#299D91');

    const slider: HTMLInputElement | null = document.querySelector('#slider');
    const lbl: HTMLElement | null = document.querySelector('#lbl');
    const meter_needle: HTMLElement | null = document.querySelector('#meter_needle');

    const range_change_event = (): void => {
    if (slider && mask && meter_needle && lbl) {
        const percent: number = parseFloat(slider.value);
        const meter_value: number = semi_cf - ((percent * semi_cf) / 100);
        mask.setAttribute('stroke-dasharray', `${meter_value},${cf}`);
        meter_needle.style.transform = `rotate(${270 + ((percent * 180) / 100)}deg)`;
        lbl.textContent = `${percent}%`;
    }
    };

    slider?.addEventListener('input', range_change_event);
    return () => {
    slider?.removeEventListener('input', range_change_event);
    };
}, [r]); // useEffesct

return (
    <div>
    <div id="wrapper" className='relative m-auto'>
        <svg id="meter" className='bg-none'>
        <circle id="outline_curves" className="circle rounded-full" cx="50%" cy="50%"></circle>
        <circle id="low" className="circle range" cx="50%" cy="50%" stroke="#FDE47F"></circle>
        <circle id="avg" className="circle range" cx="50%" cy="50%" stroke="#7CCCE5"></circle>
        <circle id="high" className="circle range" cx="50%" cy="50%" stroke="#E04644"></circle>
        <circle id="mask" className="circle" cx="50%" cy="50%"></circle>
        <circle id="outline_ends" className="circle" cx="50%" cy="50%" r="50"></circle>
        </svg>
        <img id="meter_needle" src={meter} alt="Meter Needle" className='bg-none' />
        <input id="slider" type="range" min="0" max="100" defaultValue="0" />
        <label id="lbl" htmlFor="slider">0%</label>
    </div>
    </div>
);
};

export default GaugeTest;

`

[ShoomanKhatri]

i will try, can you explain what is the issue.....