fix: add html metrics support for compare

Author: fabclmnt

src/ydata_profiling/report/presentation/core/scores.py

@@ -3,6 +3,7 @@
 """
 from typing import Any, Dict, List, Optional
 
+from ydata_profiling.config import Style
 from ydata_profiling.report.presentation.core.item_renderer import ItemRenderer
 
 
@@ -11,15 +12,15 @@ def __init__(
         self,
         items: List[Dict],
         overall_score: float,
+        style: Style,
         name: Optional[str],
-        caption: Optional[str],
         **kwargs
     ):
         content = {
             "items": items,
             "overall_score": overall_score,
             "name": name,
-            "caption": caption,
+            "style": style
         }
 
         super().__init__("scores", content=content, **kwargs)

src/ydata_profiling/report/presentation/flavours/html/templates/scores.html

@@ -1,44 +1,78 @@
 <style>
   .progress {
-    height: 12px;
+    height: 18px;
     border-radius: 6px;
+    font-size: 0.9rem;
   }
 
   .overall-score {
     font-size: 2.5rem;
   }
+
+  .metric-subtitle {
+    font-size: 0.9rem;
+    color: #6c757d;
+  }
+
+  .dual-metric {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .dual-metric .metric {
+    min-width: 120px;
+  }
+
+  .card.metric-card {
+      min-height: 105px; /* Maior altura mínima do cartão */
+  }
 </style>
 
 <div class="container my-5">
   <!-- Overall Score -->
   <div class="row justify-content-center text-center mb-sm-3">
     <div class="col-12">
-      <div class="card shadow-sm p-4">
-        <h5 class="text-muted mb-2">Overall Data Quality Score</h5>
-        <div class="overall-score fw-bold text-primary">{{ overall_score }}</div>
-      </div>
+        <div class="card shadow-sm p-4">
+          <h5 class="text-muted mb-3">Overall Data Quality Score</h5>
+          <div class="dual-metric">
+            {% for i in range(overall_score | length) %}
+              <div class="metric">
+                {% if overall_score | length > 1 %}
+                <div class="metric-subtitle">{{ name[i]}}</div>
+                {% endif %}
+                <div class="overall-score fw-bold" style="color: {{ style.primary_color }}">{{ overall_score[i]}}</div>
+              </div>
+            {% endfor %}
+          </div>
+        </div>
     </div>
   </div>
 
   <!-- Metrics -->
-  <div class="row g-4 text-center">
+    <div class="row g-4 text-center">
     {% for metric in items %}
       <div class="col-lg-4 col-md-6 col-sm-12">
-        <div class="card shadow-sm p-3 h-100">
-          <div class="h6 text-muted">{{ metric.name }}</div>
-          <div class="progress bg-light">
-            <div
-              class="progress-bar"
-              role="progressbar"
-              style="width: {{ metric.value }}%; background-color: {{ metric.color }};"
-              aria-valuenow="{{ metric.value }}"
-              aria-valuemin="0"
-              aria-valuemax="100">
+        <div class="card shadow-sm p-3 h-100 metric-card">
+          <div class="h6 text-muted mb-2">{{ metric.name }}</div>
+          {% for j in range(metric.submetrics| length) %}
+            {% if metric.submetrics | length > 1 %}
+              <div class="metric-subtitle text-start">{{ name[j] }}</div>
+            {% endif %}
+            <div class="progress mb-2 bg-light">
+              <div
+                class="progress-bar"
+                style="width: {{ metric.submetrics[j].value  }}%; background-color: {{ metric.submetrics[j].color}};">
+                {{ metric.submetrics[j].value }}%
+              </div>
             </div>
-          </div>
-          <div class="fw-bold mt-2" style="color: {{ metric.color }};">{{ metric.value }}%</div>
+          {% endfor %}
         </div>
       </div>
     {% endfor %}
   </div>
 </div>
+
+