From 3e72d575d4a57e34686db03d38d316c94b5bcd41 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Fri, 5 Dec 2025 13:17:44 +0100
Subject: [PATCH] fix(ui): format Risk Score tooltip to match ThreatScore style

- Display Risk Score as percentage (0-100%) with dotted line separator
- Match visual style of ThreatScore tooltip component
---
 .../risk-plot/risk-plot-client.tsx            | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/ui/app/(prowler)/_new-overview/graphs-tabs/risk-plot/risk-plot-client.tsx b/ui/app/(prowler)/_new-overview/graphs-tabs/risk-plot/risk-plot-client.tsx
index b29b1160dd..b5f77b005a 100644
--- a/ui/app/(prowler)/_new-overview/graphs-tabs/risk-plot/risk-plot-client.tsx
+++ b/ui/app/(prowler)/_new-overview/graphs-tabs/risk-plot/risk-plot-client.tsx
@@ -108,19 +108,26 @@ const CustomTooltip = ({ active, payload }: TooltipProps) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     const riskColor = getRiskScoreColor(data.x);
+    // Convert Risk Score (0-10) to percentage (0-100) for display
+    const riskScorePercentage = Math.round(data.x * 10);
 
     return (
       <div className="border-border-neutral-tertiary bg-bg-neutral-tertiary pointer-events-none min-w-[200px] rounded-xl border p-3 shadow-lg">
         <p className="text-text-neutral-primary mb-2 text-sm font-semibold">
           {data.name}
         </p>
-        <p className="text-text-neutral-secondary text-sm font-medium">
-          {/* Dynamic color based on risk level - required inline style */}
-          <span style={{ color: riskColor, fontWeight: "bold" }}>
-            {data.x}
-          </span>{" "}
-          Risk Score
-        </p>
+        <div className="flex items-end gap-1">
+          <p className="text-text-neutral-primary text-xs leading-5 font-medium">
+            Risk Score
+          </p>
+          <div className="border-text-neutral-primary mb-[4px] flex-1 border-b border-dotted" />
+          <p
+            className="text-xs leading-5 font-medium"
+            style={{ color: riskColor }}
+          >
+            {riskScorePercentage}%
+          </p>
+        </div>
         <div className="mt-2">
           <AlertPill value={data.y} />
         </div>