fix(ui): apply provider/account filters to Findings Severity Over Time chart (#10103)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/CHANGELOG.md

@@ -22,6 +22,10 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Attack Paths: Catches not found and permissions (for read only queries) errors [(#10140)](https://github.com/prowler-cloud/prowler/pull/10140)
 - Provider connection flow was unified into a modal wizard with AWS Organizations bulk onboarding, safer secret retry handling, and more stable E2E coverage [(#10153)](https://github.com/prowler-cloud/prowler/pull/10153) [(#10154)](https://github.com/prowler-cloud/prowler/pull/10154) [(#10155)](https://github.com/prowler-cloud/prowler/pull/10155) [(#10156)](https://github.com/prowler-cloud/prowler/pull/10156) [(#10157)](https://github.com/prowler-cloud/prowler/pull/10157) [(#10158)](https://github.com/prowler-cloud/prowler/pull/10158)
 
+### 🐞 Fixed
+
+- Findings Severity Over Time chart on Overview not responding to provider and account filters, and chart clipping at Y-axis maximum values [(#10103)](https://github.com/prowler-cloud/prowler/pull/10103)
+
 ### 🔐 Security
 
 - npm dependencies updated to resolve 11 Dependabot alerts (4 HIGH, 7 MEDIUM): fast-xml-parser, @modelcontextprotocol/sdk, tar, @isaacs/brace-expansion, hono, lodash, lodash-es [(#10052)](https://github.com/prowler-cloud/prowler/pull/10052)

ui/app/(prowler)/_overview/severity-over-time/_components/finding-severity-over-time.tsx

@@ -29,6 +29,25 @@ export const FindingSeverityOverTime = ({
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Sync data when SSR re-delivers filtered results (e.g. provider/account filter change).
+  // Uses the "set state during render" pattern so the update is synchronous — no flash of stale data.
+  const [prevInitialData, setPrevInitialData] = useState(initialData);
+  if (initialData !== prevInitialData) {
+    setPrevInitialData(initialData);
+    setData(initialData);
+    setError(null);
+    setTimeRange(DEFAULT_TIME_RANGE);
+  }
+
+  const getActiveProviderFilters = (): Record<string, string> => {
+    const filters: Record<string, string> = {};
+    const providerType = searchParams.get("filter[provider_type__in]");
+    const providerId = searchParams.get("filter[provider_id__in]");
+    if (providerType) filters["filter[provider_type__in]"] = providerType;
+    if (providerId) filters["filter[provider_id__in]"] = providerId;
+    return filters;
+  };
+
   const handlePointClick = ({
     point,
     dataKey,
@@ -59,14 +78,9 @@ export const FindingSeverityOverTime = ({
     }
 
     // Preserve provider filters from overview
-    const providerType = searchParams.get("filter[provider_type__in]");
-    const providerId = searchParams.get("filter[provider_id__in]");
-
-    if (providerType) {
-      params.set("filter[provider_type__in]", providerType);
-    }
-    if (providerId) {
-      params.set("filter[provider_id__in]", providerId);
+    const providerFilters = getActiveProviderFilters();
+    for (const [key, value] of Object.entries(providerFilters)) {
+      params.set(key, value);
     }
 
     router.push(`/findings?${params.toString()}`);
@@ -80,6 +94,7 @@ export const FindingSeverityOverTime = ({
     try {
       const result = await getSeverityTrendsByTimeRange({
         timeRange: newRange,
+        filters: getActiveProviderFilters(),
       });
 
       if (result.status === "success") {

ui/components/graphs/line-chart.tsx

@@ -190,13 +190,13 @@ export function LineChart({
     <div className="w-full">
       <ChartContainer
         config={chartConfig}
-        className="w-full overflow-hidden"
+        className="w-full"
         style={{ height, aspectRatio: "auto" }}
       >
         <RechartsLine
           data={data}
           margin={{
-            top: 10,
+            top: 20,
             left: 0,
             right: 30,
             bottom: 40,
@@ -222,6 +222,7 @@ export function LineChart({
             tickLine={false}
             axisLine={false}
             tickMargin={8}
+            padding={{ top: 20 }}
             tick={{
               fill: "var(--color-text-neutral-secondary)",
               fontSize: AXIS_FONT_SIZE,