fix: add html metrics support for compare (#1744)

* fix: add html metrics support for compare

* fix: add html metrics support for compare

* fix(linting): code formatting

* chore: fix test to include request header

* fix(linting): code formatting

* chore: add unit tests for the compat file

* fix(linting): code formatting

---------

Co-authored-by: Azory YData Bot <azory@ydata.ai>

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>
+
+

tests/issues/test_issue537.py

@@ -34,7 +34,15 @@ def test_multiprocessing_describe1d(config, summarizer, typeset):
 
     def download_and_process_data():
         """Downloads and processes the dataset into a Pandas DataFrame."""
-        response = requests.get("https://ndownloader.figshare.com/files/5976042")
+        headers = {
+            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+            "AppleWebKit/537.36 (KHTML, like Gecko) "
+            "Chrome/122.0.0.0 Safari/537.36"
+        }
+        response = requests.get(
+            "https://ndownloader.figshare.com/files/5976042", headers=headers
+        )
+
         response.raise_for_status()  # Ensure successful download
 
         file = decompress(response.content)

tests/unit/test_pandas/test_compat.py

@@ -0,0 +1,46 @@
+import unittest
+
+import pandas as pd
+
+from ydata_profiling.utils.compat import optional_option_context, pandas_version_info
+
+
+class TestCompatUtils(unittest.TestCase):
+    def test_pandas_version_info_format(self):
+        version_info = pandas_version_info()
+        self.assertIsInstance(version_info, tuple)
+        self.assertTrue(all(isinstance(i, int) for i in version_info))
+
+        expected_prefix = tuple(
+            int(x) for x in pd.__version__.split(".")[: len(version_info)]
+        )
+        self.assertEqual(version_info, expected_prefix)
+
+    def test_optional_option_context_with_existing_option(self):
+        option = "display.max_rows"
+        original_value = pd.get_option(option)
+
+        with optional_option_context(option, 123):
+            self.assertEqual(pd.get_option(option), 123)
+
+        self.assertEqual(pd.get_option(option), original_value)
+
+    def test_optional_option_context_with_missing_option(self):
+        class FakeOptionContext:
+            def __init__(self, *args, **kwargs):
+                raise pd.errors.OptionError("Simulated OptionError")
+
+        original_option_context = pd.option_context
+        pd.option_context = FakeOptionContext
+
+        try:
+            # Should not raise, even though the option is invalid
+            with optional_option_context("non.existent.option", 456):
+                pass
+        finally:
+            # Restore the original option_context
+            pd.option_context = original_option_context
+
+
+if __name__ == "__main__":
+    unittest.main()