feat: fix percentage bar showing 100 even though it should be 0 (#316)

Co-authored-by: Andreas Kienle <[email protected]>

Author: Lasserich

src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.module.css

@@ -51,15 +51,26 @@
 .labelGroup {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.label,
 .percentage {
   font-size: var(--label-font-size);
-  font-weight: 400;
+  font-weight: 600;
   color: var(--sapTextColor, #374151);
   transition: color 0.3s ease, font-weight 0.3s ease;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.label {
+  font-size: var(--label-font-size);
+  font-weight: 400;
+  color: var(--sapTextColor, #6b7280);
+  transition: color 0.3s ease, font-weight 0.3s ease;
+  flex: 1;
 }
 
 .label.healthy,

src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.tsx

@@ -44,17 +44,25 @@ export const MultiPercentageBar: React.FC<MultiPercentageBarProps> = ({
   style,
   animationDuration = 400, // Match CSS default
 }) => {
-  // Memoize filtered segments
+  // Memoize filtered segments for rendering only
   const filteredSegments = useMemo(() => {
-    return showOnlyNonZero ? segments.filter((segment) => segment.percentage > 0) : segments;
+    if (showOnlyNonZero) {
+      const nonZeroSegments = segments.filter((segment) => segment.percentage > 0);
+      if (nonZeroSegments.length === 0 && segments.length > 0) {
+        return segments;
+      }
+      return nonZeroSegments;
+    }
+    return segments;
   }, [segments, showOnlyNonZero]);
 
   if (filteredSegments.length === 0) {
     return null;
   }
 
-  const primaryPercentage = filteredSegments[0]?.percentage || 0;
-  const displayLabel = label || 'Healthy';
+  const primarySegment = segments[0];
+  const primaryPercentage = primarySegment?.percentage || 0;
+  const displayLabel = label || primarySegment?.label || 'Healthy';
   const allHealthy = isHealthy !== undefined ? isHealthy : primaryPercentage === 100;
 
   return (
@@ -78,10 +86,10 @@ export const MultiPercentageBar: React.FC<MultiPercentageBarProps> = ({
       {showLabels && (
         <div className={styles.labelContainer}>
           <div className={styles.labelGroup}>
+            <span className={`${styles.label} ${allHealthy ? styles.healthy : ''}`}>{displayLabel}</span>
             {showPercentage && (
               <span className={`${styles.percentage} ${allHealthy ? styles.healthy : ''}`}>{primaryPercentage}%</span>
             )}
-            <span className={`${styles.label} ${allHealthy ? styles.healthy : ''}`}>{displayLabel}</span>
           </div>
         </div>
       )}