78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
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
|