feat(ui): overview charts display improved (#8492)

Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
Co-authored-by: Pablo Lara <larabjj@gmail.com>

ui/CHANGELOG.md

@@ -21,6 +21,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Field for `Assume Role` in AWS role credentials form shown again [(#8484)](https://github.com/prowler-cloud/prowler/pull/8484)
 - `GitHub` submenu to High Risk Findings [(#8488)](https://github.com/prowler-cloud/prowler/pull/8488)
+- Improved Overview chart `Findings by Severity` spacing [(#8491)](https://github.com/prowler-cloud/prowler/pull/8491)
 
   
 ---

ui/components/overview/findings-by-severity-chart/findings-by-severity-chart.tsx

@@ -73,15 +73,15 @@ export const FindingsBySeverityChart = ({
     <Card className="h-full dark:bg-prowler-blue-400">
       <CardBody>
         <div className="my-auto">
-          <ChartContainer config={chartConfig}>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[450px] w-full"
+          >
             <BarChart
               accessibilityLayer
               data={chartData}
               layout="vertical"
-              barGap={2}
-              height={200}
-              margin={{ left: 50 }}
-              width={500}
+              margin={{ left: 72, right: 16, top: 8, bottom: 8 }}
             >
               <YAxis
                 dataKey="severity"
@@ -104,7 +104,7 @@ export const FindingsBySeverityChart = ({
                 dataKey="findings"
                 layout="vertical"
                 radius={12}
-                barSize={20}
+                barSize={26}
                 onClick={(data) => {
                   const severity = data.severity as keyof typeof chartConfig;
                   const link = chartConfig[severity]?.link;
@@ -119,6 +119,14 @@ export const FindingsBySeverityChart = ({
                   offset={5}
                   className="fill-foreground font-bold"
                   fontSize={11}
+                  formatter={(value: number) => (value === 0 ? "" : value)}
+                />
+                <LabelList
+                  position="insideLeft"
+                  offset={6}
+                  className="fill-foreground font-bold"
+                  fontSize={11}
+                  formatter={(value: number) => (value === 0 ? "0" : "")}
                 />
               </Bar>
             </BarChart>

ui/components/overview/findings-by-status-chart/findings-by-status-chart.tsx

@@ -121,7 +121,7 @@ export const FindingsByStatusChart: React.FC<FindingsByStatusChartProps> = ({
   return (
     <Card className="h-full dark:bg-prowler-blue-400">
       <CardBody>
-        <div className="flex h-full flex-col items-center justify-between">
+        <div className="flex h-full flex-col items-center justify-around">
           <ChartContainer
             config={chartConfig}
             className="aspect-square w-[250px] min-w-[250px]"