Rehab_React_Vite/src/components/CircularProgressDisplay.tsx

78 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type React from "react"
interface CircularProgressDisplayProps {
overallProgress: number
totalCourses: number
totalExercises: number
}
const CircularProgressDisplay: React.FC<CircularProgressDisplayProps> = ({
overallProgress,
totalCourses,
totalExercises,
}) => {
const radius = 40
const circumference = 2 * Math.PI * radius
// For the "Courses" ring (blue)
const coursesProgress = (totalCourses / 5) * 100 // Assuming max 5 courses for visual representation
const coursesStrokeDashoffset = circumference - (coursesProgress / 100) * circumference
// For the "Exercises" ring (green)
const exercisesProgress = (totalExercises / 50) * 100 // Assuming max 50 exercises for visual representation
const exercisesStrokeDashoffset = circumference - (exercisesProgress / 100) * circumference
return (
<div className="relative w-32 h-32 mx-auto flex items-center justify-center">
<svg className="w-full h-full" viewBox="0 0 100 100">
{/* Overall Progress Background Circle */}
<circle
className="text-gray-200"
strokeWidth="8"
stroke="currentColor"
fill="transparent"
r={radius}
cx="50"
cy="50"
/>
{/* Courses Ring (Blue) */}
<circle
className="text-blue-500"
strokeWidth="8"
strokeDasharray={circumference}
strokeDashoffset={coursesStrokeDashoffset}
strokeLinecap="round"
stroke="currentColor"
fill="transparent"
r={radius}
cx="50"
cy="50"
transform="rotate(-90 50 50)"
/>
{/* Exercises Ring (Green) */}
<circle
className="text-green-500"
strokeWidth="8"
strokeDasharray={circumference}
strokeDashoffset={exercisesStrokeDashoffset}
strokeLinecap="round"
stroke="currentColor"
fill="transparent"
r={radius - 10} // Slightly smaller radius for the inner ring
cx="50"
cy="50"
transform="rotate(-90 50 50)"
/>
</svg>
<div className="absolute text-center">
<div className="text-3xl font-black text-gray-800">{overallProgress}%</div>
<div className="text-xs text-gray-600 font-semibold">Общий прогресс</div>
</div>
</div>
)
}
export default CircularProgressDisplay