feat(MED-100): update analysis level bars

app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx

@@ -85,35 +85,43 @@ const AnalysisLevelBar = ({
     return calculated;
   }, [value, upper, lower]);
 
+  const [isVeryLow, isLow, isHigh, isVeryHigh] = useMemo(() => [
+    level === AnalysisResultLevel.VERY_LOW,
+    level === AnalysisResultLevel.LOW,
+    level === AnalysisResultLevel.HIGH,
+    level === AnalysisResultLevel.VERY_HIGH,
+  ], [level, value, upper, lower]);
+
+  const hasAbnormalLevel = isVeryLow || isLow || isHigh || isVeryHigh;
+
   return (
     <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
       {normLowerIncluded && (
         <>
           <Level
-            isActive={level === AnalysisResultLevel.VERY_LOW}
+            isActive={isVeryLow}
             color="destructive"
             isFirst
           />
-          <Level isActive={level === AnalysisResultLevel.LOW} color="warning" />
+          <Level isActive={isLow} color="warning" />
         </>
       )}
 
       <Level
         isFirst={!normLowerIncluded}
         isLast={!normUpperIncluded}
-        color={level === AnalysisResultLevel.NORMAL ? "success" : "warning"}
-        isActive
+        {...(hasAbnormalLevel ? { color: "warning", isActive: false } : { color: "success", isActive: true })}
         arrowLocation={arrowLocation}
       />
 
       {normUpperIncluded && (
         <>
           <Level
-            isActive={level === AnalysisResultLevel.HIGH}
+            isActive={isHigh}
             color="warning"
           />
           <Level
-            isActive={level === AnalysisResultLevel.VERY_HIGH}
+            isActive={isVeryHigh}
             color="destructive"
             isLast
           />

app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx

@@ -108,7 +108,7 @@ const Analysis = ({
             <div className="text-muted-foreground text-sm">{unit}</div>
           </div>
           <div className="text-muted-foreground mx-8 flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0">
-            {normLower} - {normUpper}
+            {normLower} - {normUpper} %
             <div>
               <Trans i18nKey="analysis-results:results.range.normal" />
             </div>
@@ -120,19 +120,17 @@ const Analysis = ({
             level={analysisResultLevel!}
           />
         </>
-      ) : (
+      ) : (isCancelled ? null : (
         <>
           <div className="flex items-center gap-3 sm:ml-auto">
-            {!isCancelled && (
             <div className="font-semibold">
               <Trans i18nKey="analysis-results:waitingForResults" />
             </div>
-            )}
           </div>
           <div className="mx-8 w-[60px]"></div>
           <AnalysisLevelBarSkeleton />
         </>
-      )}
+      ))}
     </div>
   );
 };