fix: match score: update logic for filled and half filled scores

EightfoldAI · Aug 2, 2022 · 3f8dab5 · 3f8dab5
1 parent e767e7f
commit 3f8dab5
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/src/components/MatchScore/MatchScore.tsx b/src/components/MatchScore/MatchScore.tsx
@@ -17,7 +17,14 @@ export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
         ref: Ref<HTMLDivElement>
     ) => {
         const absTotal: number = Math.abs(total);
+        const absScore: number = Math.round(score);
+        const fullCircles: number = Math.trunc(Math.round(score * 2.0) / 2.0);
+        const halfCircle: number = Math.trunc(
+            Math.ceil(score - fullCircles - 0.25)
+        );
+        const emptyCircles: number = total - fullCircles - halfCircle;
         const matchScoreLabelClasses = mergeClasses(styles.label, 'body2');
+
         return (
             <Atom<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
                 of="div"
@@ -26,22 +33,22 @@ export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
                 classes={[classNames, styles.matchScoreContainer]}
                 aria-label={ariaLabel}
             >
-                {getArrayOfSize(Math.min(Math.floor(score), absTotal)).map(
-                    (_val, index) => (
-                        <MatchScoreCircle fill="full" key={index} />
-                    )
-                )}
-                {Math.floor(score) !== score && (
-                    <MatchScoreCircle fill="half" />
-                )}
-                {getArrayOfSize(Math.max(Math.floor(absTotal - score), 0)).map(
-                    (_val, index) => (
-                        <MatchScoreCircle key={index} />
-                    )
-                )}
+                {/* Full */}
+                {getArrayOfSize(fullCircles).map((_val, index) => (
+                    <MatchScoreCircle fill="full" key={index} />
+                ))}
+
+                {/* Half */}
+                {!!halfCircle && <MatchScoreCircle fill="half" />}
+
+                {/* Remaining empty circles */}
+                {getArrayOfSize(emptyCircles).map((_val, index) => (
+                    <MatchScoreCircle key={index} />
+                ))}
+
                 {!hideLabel && (
                     <p className={matchScoreLabelClasses}>
-                        {score}/{absTotal}
+                        {absScore}/{absTotal}
                     </p>
                 )}
             </Atom>