chore: add severity's colors

components/charts/SeverityChart.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts";
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart/Chart";
+
+const chartData = [
+  { severity: "critical", findings: 32, fill: "var(--color-critical)" },
+  { severity: "high", findings: 78, fill: "var(--color-high)" },
+  { severity: "medium", findings: 117, fill: "var(--color-medium)" },
+  { severity: "low", findings: 39, fill: "var(--color-low)" },
+];
+
+const chartConfig = {
+  findings: {
+    label: "Findings",
+  },
+  critical: {
+    label: "Critical",
+    color: "hsl(var(--chart-critical))",
+  },
+  high: {
+    label: "High",
+    color: "hsl(var(--chart-fail))",
+  },
+  medium: {
+    label: "Medium",
+    color: "hsl(var(--chart-medium))",
+  },
+  low: {
+    label: "Low",
+    color: "hsl(var(--chart-low))",
+  },
+} satisfies ChartConfig;
+
+export const SeverityChart = () => {
+  return (
+    <ChartContainer config={chartConfig}>
+      <BarChart accessibilityLayer data={chartData} layout="vertical">
+        <YAxis
+          dataKey="severity"
+          type="category"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) =>
+            chartConfig[value as keyof typeof chartConfig]?.label
+          }
+        />
+        <XAxis dataKey="findings" type="number" hide>
+          <LabelList position="insideTop" offset={12} fontSize={12} />
+        </XAxis>
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent indicator="line" />}
+        />
+
+        <Bar dataKey="findings" layout="vertical" radius={12}>
+          <LabelList
+            position="insideRight"
+            offset={10}
+            className="fill-foreground font-bold"
+            fontSize={12}
+          />
+        </Bar>
+      </BarChart>
+    </ChartContainer>
+  );
+};

styles/globals.css

@@ -6,6 +6,10 @@
   :root {
     --chart-success: 146 80% 35%;
     --chart-fail: 339 90% 51%;
+    --chart-critical: 336 75% 39%;
+    --chart-high: 339 90% 51%;
+    --chart-medium: 26 100% 55%;
+    --chart-low: 46 97% 65%;
     --chart-1: 12 76% 61%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
@@ -13,6 +17,12 @@
   }
 
   .dark {
+    --chart-success: 146 80% 35%;
+    --chart-fail: 339 90% 51%;
+    --chart-critical: 336 75% 39%;
+    --chart-high: 339 90% 51%;
+    --chart-medium: 26 100% 55%;
+    --chart-low: 46 97% 65%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

tailwind.config.js

@@ -44,6 +44,12 @@ module.exports = {
             light: "#feefc7",
             lighter: "#FFF9EB",
           },
+          severity: {
+            critical: "#AC1954",
+            high: "#F31260",
+            medium: "#FA7315",
+            low: "#fcd34d",
+          },
         },
       },
       fontFamily: {