80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
||
|
||
const CircularProgressIndicator = ({ value, color }) => {
|
||
const svgRef = useRef(null);
|
||
|
||
useEffect(() => {
|
||
if (!svgRef.current) return;
|
||
|
||
// Получаем элемент SVG
|
||
const svg = svgRef.current;
|
||
const circle = svg.querySelector("circle");
|
||
|
||
// Рассчитываем длину окружности
|
||
const circumference = circle.getAttribute("r") * 2 * Math.PI;
|
||
|
||
// Устанавливаем начальное значение (0%)
|
||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||
circle.style.strokeDashoffset = circumference;
|
||
|
||
// Анимируем заполнение
|
||
setTimeout(() => {
|
||
const offset = circumference - (value / 100) * circumference;
|
||
circle.style.transition = "stroke-dashoffset 500ms ease-in-out";
|
||
circle.style.strokeDashoffset = offset;
|
||
}, 0);
|
||
}, [value]);
|
||
|
||
console.log(color)
|
||
switch(color){
|
||
case "green":
|
||
color = "#1eeb07"
|
||
break;
|
||
case "red":
|
||
color = "#fc4a03"
|
||
break;
|
||
case "yellow":
|
||
color = "#f0fc03"
|
||
break;
|
||
case "orange":
|
||
color = "#ff9f43"
|
||
break;
|
||
}
|
||
|
||
|
||
return (
|
||
<div className="relative flex items-center justify-center mt-3">
|
||
{/* SVG для кругового прогресс-бара */}
|
||
<svg
|
||
ref={svgRef}
|
||
className="w-32 h-32"
|
||
viewBox="0 0 100 100"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle
|
||
cx="50"
|
||
cy="50"
|
||
r="45"
|
||
fill="transparent"
|
||
stroke={color}
|
||
strokeWidth="7"
|
||
className="fill-gray-50 dark:fill-gray-700"
|
||
strokeDasharray="0 282.74"
|
||
strokeDashoffset="282.74" // Начинаем снизу
|
||
strokeLinecap="round" // Закругляем торцы
|
||
transform="rotate(90 50 50)" // Поворачиваем начало вниз
|
||
/>
|
||
</svg>
|
||
|
||
{/* Текст в центре круга */}
|
||
<div className="absolute top-[44%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-3xl font-bold" style={{"color":color}}>
|
||
{value}
|
||
</div>
|
||
<div className="absolute top-[65%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-lg text-gray-500 dark:text-gray-400">
|
||
%
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CircularProgressIndicator; |