I am running one SVG Progress bar, Which code was present in Javascript and HTML and i converted this to the React js with tailwind css. After converting the code i found here is like after set the value and click the button number is increasing for the progress but progress bar is flickering and not showing the progress bars.
I tried so far:
Below is my complete code.
import React, {useRef, useState, useEffect} from 'react';
import './App.css';
function App() {
const [maxSpeed, setMaxSpeed] = useState(0);
const [tgtSpeed, setTgtSpeed] = useState(0);
const [q1Num, setQ1Num] = useState(0);
const [q2Num, setQ2Num] = useState(0);
const [q3Num, setQ3Num] = useState(0);
const [q4Num, setQ4Num] = useState(0);
const[ctgtSpeed, setCTgtSpeed] = useState(0);
const[qty, Setqty] = useState('');
const circleRef = useRef<any>(null);
const tickerRef = useRef<any>(null);
const drpDownRef = useRef<any>(null);
useEffect(() => {
tickerRef.current.setAttribute('transform', `rotate(${270 / 100 * 0})`);
circleRef.current.setAttribute('stroke-dashoffset', 100 - 0);
});
const splitNumber = (num = 1, parts = 1) => {
let n = Math.floor(num / parts);
const arr = [];
for (let i = 0; i < parts; i++){
arr.push(n)
};
return arr;
};
const MaxSpeedValue = (mxText:any) =>{
var splitData = splitNumber(parseInt(mxText), 4);
setQ1Num (splitData[0]);
setQ2Num(splitData[1] + splitData[2]);
setQ3Num(splitData[1] + splitData[2] + splitData[3]);;
setQ4Num(mxText);
setMaxSpeed(mxText);
}
const TargetSpeeValue=(event: any)=>{
setTgtSpeed(event.target.value);
}
const selectOption =(event: any)=> {
let dropdown = event.currentTarget;
// get the index of the selected option
let selectedIndex = dropdown.selectedIndex;
// get a selected option and text value using the text property
let selectedValue = dropdown.options[selectedIndex].text;
Setqty(selectedValue);
}
const StartProgress =()=>{
StartProgressSpeed();
}
const StartProgressSpeed = ()=>{
let degree = 0;
let percentage = 0;
let progressbar = document.querySelectorAll('.progress-bar');
progressbar.forEach(function (circle) {
const speedDiff = maxSpeed - tgtSpeed;
const circumference = 133;
var interval = setInterval(function () {
if (degree >= tgtSpeed) {
clearInterval(interval);
return;
}
degree += 1;
percentage = degree / maxSpeed;
const progressCalc = (circumference * percentage);
circleRef.current.setAttribute('stroke-dashoffset', 100 - degree);
tickerRef.current.setAttribute('transform', `rotate(${270 / 100 * degree})`);
setCTgtSpeed(degree);
setMaxSpeed(maxSpeed);
}, 50);
});
}
return (
<div className="App">
<div className="w-full h-full flex items-center justify-center">
<div className='mr-20'>
<input type="text" id="txtMaxSpeed" placeholder="Enter max speed" onChange={(e)=> MaxSpeedValue(e.target.value)} className="w-[142px]"/><br/><br/>
<input type="text" id="txtTargetSpeed" placeholder="Set target speed" className="w-[142px]" onChange={(e)=> TargetSpeeValue(e)}/><br/><br/>
<select id = "dropdown" ref={drpDownRef} onChange={(e)=> selectOption(e)} className="w-[100px]">
<option>-- Select --</option>
<option>C/h</option>
<option>ml</option>
<option>liter</option>
</select>
<br/><br/>
<button id="btnStart" className="bg-[skyblue] h-[43px] w-[100px] font-[bold] text-lg" onClick={()=> StartProgress()}>Start</button>
</div>
<svg className="progress-bar" width="300" height="300" viewBox="0 0 100 110" fill="none">
<defs>
<linearGradient id="lg1" x1="0.7" gradientTransform="rotate(45)">
<stop offset="0%" stopColor="#eee" />
<stop offset="100%" stopColor="#ddd" />
</linearGradient>
<mask id="m1">
<circle transform="rotate(135)" stroke="white"
strokeWidth="12" r="44" strokeDasharray="270 360"
pathLength="360"/>
</mask>
<radialGradient id="rg1">
<stop offset="0%" stopColor="#aaa" />
<stop offset="40%" stopColor="#ccc" />
<stop offset="90%" stopColor="white" />
</radialGradient>
</defs>
<ellipse cx="50" cy="102" rx="40" ry="8" fill="url(#rg1)" />
<g transform="translate(50 50)">
<circle stroke="#eee" strokeWidth="12" r="44"/>
<g mask="url(#m1)">
<rect transform="translate(-50 -50)" width="100" height="100"
fill="url(#lg1)" />
<circle stroke="#ccc" strokeWidth="12" r="44"
strokeDasharray=".5 4.5" pathLength="360"/>
<circle stroke="#bbb" strokeWidth="6" r="41"/>
</g>
<g transform="rotate(135)">
<circle id="c1" ref={circleRef} stroke="#0b60e9" strokeWidth="8" r="42"
strokeDasharray="0 133" pathLength="133.5"/>
</g>
<line transform="rotate(45) translate(38 0)" stroke="#aaa"
strokeWidth="1" x2="12" />
<line transform="rotate(135) translate(38 0)" stroke="#aaa"
strokeWidth="1" x2="12" />
<g id="g1" ref={tickerRef} transform="rotate(216)">
<line transform="rotate(-225) translate(38 0)" stroke="#000"
strokeWidth=".5" x2="12" />
<polygon transform="rotate(-225) translate(36 0)"
points="0,-4.5 0,4.5 5,0" fill="#000"/>
</g>
<text id="t3" x="10px" y="-13px" fontFamily="sans-serif" fontSize="9" fontWeight="200"
textAnchor="right" dominantBaseline="right" fill="#0b60e9">{qty}</text>
<text id="t1" fontFamily="sans-serif" fontSize="20" fontWeight="400"
textAnchor="middle" dominantBaseline="middle" fill="#0b60e9">{ctgtSpeed}</text>
<text id="t2" y="10" fontFamily="sans-serif" fontSize="9"
fontWeight="400" textAnchor="start" dominantBaseline="hanging" fill="#000">{maxSpeed}</text>
</g>
</svg>
<label id="lblQ1" className='absolute text-xl text-[#c8c8cc] font-bold left-[725px] top-[243px]'>{q1Num}</label>
<label id="lblQ2" className='absolute text-xl text-[#c8c8cc] font-bold left-[708px] top-[53px]'>{q2Num}</label>
<label id="lblQ3" className='absolute text-xl text-[#c8c8cc] font-bold left-[1015px] top-11'>{q3Num}</label>
<label id="lblMaxSpeed" className='absolute text-xl text-[#c8c8cc] font-bold left-[1015px] top-60'>{q4Num}</label>
</div>
</div>
);
}
export default App;
Expectation: So the logic here is like, After running application user can get three fields and one scale circle progress bar empty.
max value, target value and select size.
When user feed value in max field based on the value will get equal divide in four parts and will show near of the progress bar.
Expectation: Here max value will be the final value. But progress bar will run till target value only and the ticker which is a part of progress could also run till target value only.
Here user can feed more than 100 value. Could be any even number > 100, Same for target number as well.
Need help on this.