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-200 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;
|