started admin ui

2025-05-06 13:34:07 +03:00
parent a249143cde
commit f4c4fd9f4c
13 changed files with 1195 additions and 156 deletions
--- a/src/misc/Gauge.js
+++ b/src/misc/Gauge.js
@@ -0,0 +1,80 @@
+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;