2023-02-06 10:01:03 -08:00
|
|
|
import clsx from 'clsx';
|
2022-04-22 08:13:30 -07:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
interface IProgressCircle {
|
2023-02-15 13:26:27 -08:00
|
|
|
progress: number
|
|
|
|
radius?: number
|
|
|
|
stroke?: number
|
|
|
|
title?: string
|
2022-04-22 08:13:30 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {
|
|
|
|
const progressStroke = stroke + 0.5;
|
|
|
|
const actualRadius = radius + progressStroke;
|
|
|
|
const circumference = 2 * Math.PI * radius;
|
|
|
|
const dashoffset = circumference * (1 - Math.min(progress, 1));
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div title={title}>
|
|
|
|
<svg
|
|
|
|
width={actualRadius * 2}
|
|
|
|
height={actualRadius * 2}
|
|
|
|
viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
|
|
|
|
>
|
|
|
|
<circle
|
2022-07-22 10:30:16 -07:00
|
|
|
className='stroke-gray-500 dark:stroke-white/20'
|
2022-04-22 08:13:30 -07:00
|
|
|
cx={actualRadius}
|
|
|
|
cy={actualRadius}
|
|
|
|
r={radius}
|
|
|
|
fill='none'
|
|
|
|
strokeWidth={stroke}
|
|
|
|
/>
|
|
|
|
<circle
|
2023-02-06 10:01:03 -08:00
|
|
|
className={clsx('stroke-primary-500', {
|
2022-07-22 10:30:16 -07:00
|
|
|
'stroke-secondary-500': progress > 1,
|
2022-04-22 08:13:30 -07:00
|
|
|
})}
|
|
|
|
style={{
|
|
|
|
strokeDashoffset: dashoffset,
|
|
|
|
strokeDasharray: circumference,
|
|
|
|
}}
|
|
|
|
cx={actualRadius}
|
|
|
|
cy={actualRadius}
|
|
|
|
r={radius}
|
|
|
|
fill='none'
|
|
|
|
strokeWidth={progressStroke}
|
|
|
|
strokeLinecap='round'
|
|
|
|
/>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ProgressCircle;
|