feat: Status chart is ready

components/charts/StatusChart.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { Chip, Divider, Spacer } from "@nextui-org/react";
 import { TrendingUp } from "lucide-react";
 import * as React from "react";
 import { Label, Pie, PieChart } from "recharts";
 
+import { NotificationIcon, SuccessIcon } from "../icons";
 import {
   ChartConfig,
   ChartContainer,
@@ -11,11 +13,28 @@ import {
   ChartTooltipContent,
 } from "../ui";
 
+const calculatePercent = (
+  chartData: { findings: string; number: number; fill: string }[],
+) => {
+  const total = chartData.reduce((sum, item) => sum + item.number, 0);
+
+  return chartData.map((item) => ({
+    ...item,
+    percent: Math.round((item.number / total) * 100) + "%",
+  }));
+};
+
 const chartData = [
-  { findings: "Success", number: 436, fill: "var(--color-success)" },
+  {
+    findings: "Success",
+    number: 436,
+    fill: "var(--color-success)",
+  },
   { findings: "Fail", number: 293, fill: "var(--color-fail)" },
 ];
 
+const updatedChartData = calculatePercent(chartData);
+
 const chartConfig = {
   number: {
     label: "Findings",
@@ -51,7 +70,7 @@ export function StatusChart() {
     <div className="flex">
       <ChartContainer
         config={chartConfig}
-        className="mx-auto aspect-square min-h-[250px]"
+        className="mx-auto aspect-square min-w-[200px] md:min-h-[250px]"
       >
         <PieChart>
           <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
@@ -94,12 +113,45 @@ export function StatusChart() {
           </Pie>
         </PieChart>
       </ChartContainer>
-      <div className="flex flex-col justify-center gap-y-4 mx-6">
-        <div className="flex items-center font-medium leading-none gap-4">
+      <div className="flex flex-col justify-center gap-y-2 mx-6">
+        <div className="flex space-x-4">
+          <Chip
+            className="h-5"
+            variant="flat"
+            startContent={<SuccessIcon size={18} />}
+            color="success"
+            radius="lg"
+            size="md"
+          >
+            {chartData[0].number}
+          </Chip>
+          <Divider orientation="vertical" />
+          <span>{updatedChartData[0].percent}</span>
+          <Divider orientation="vertical" />
+        </div>
+        <div className="flex items-center font-light leading-none">
           No change from last scan
         </div>
-        <div className="flex items-center gap-2 leading-none text-muted-foreground">
-          +2 findings from last scan <TrendingUp className="h-4 w-4" />
+        <Spacer y={4} />
+        <div className="flex flex-col gap-2 leading-none text-muted-foreground">
+          <div className="flex space-x-4">
+            <Chip
+              className="h-5"
+              variant="flat"
+              startContent={<NotificationIcon size={18} />}
+              color="danger"
+              radius="lg"
+              size="md"
+            >
+              {chartData[1].number}
+            </Chip>
+            <Divider orientation="vertical" />
+            <span>{updatedChartData[1].percent}</span>
+            <Divider orientation="vertical" />
+          </div>
+          <div className="flex items-center font-medium leading-none gap-1">
+            +2 findings from last scan <TrendingUp className="h-4 w-4" />
+          </div>
         </div>
       </div>
     </div>

styles/globals.css

@@ -4,8 +4,8 @@
 
 @layer base {
   :root {
-    --chart-success: 149 80% 35%;
-    --chart-fail: 348 83% 50%;
+    --chart-success: 146 80% 35%;
+    --chart-fail: 339 90% 51%;
     --chart-1: 12 76% 61%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;