fix: 학생 성적 표시 되는 부분 원. 하나도 안 맞춰도 회색 원 나오게 수정
This commit is contained in:
parent
f9309fd0c0
commit
db578e729d
@ -1,9 +1,10 @@
|
||||
import styles from './ReportCard.module.css';
|
||||
|
||||
export default function ReportCard({ allCount = 10, correctCount = 7 }) {
|
||||
const radius = 2 * Math.PI * 100;
|
||||
const radius = 100; // Radius of the circles
|
||||
const circumference = 2 * Math.PI * radius; // Circumference of the circles
|
||||
const percentage = allCount > 0 ? (correctCount / allCount) * 100 : 0;
|
||||
const strokeDashoffset = radius - (percentage / 100) * radius;
|
||||
const strokeDashoffset = circumference - (percentage / 100) * circumference;
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
@ -16,8 +17,17 @@ export default function ReportCard({ allCount = 10, correctCount = 7 }) {
|
||||
<circle
|
||||
cx="110"
|
||||
cy="110"
|
||||
r="100"
|
||||
strokeDasharray={radius}
|
||||
r={radius}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={0}
|
||||
transform="rotate(-90 110 110)"
|
||||
className={styles.circleBackground}
|
||||
/>
|
||||
<circle
|
||||
cx="110"
|
||||
cy="110"
|
||||
r={radius}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
transform="rotate(-90 110 110)"
|
||||
className={styles.circle}
|
||||
|
@ -16,6 +16,14 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.circleBackground {
|
||||
fill: none;
|
||||
stroke: var(--border-color);
|
||||
stroke-width: 20px;
|
||||
stroke-linecap: round;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
fill: none;
|
||||
stroke: var(--success-color);
|
||||
|
Loading…
Reference in New Issue
Block a user