From 53497721f3870d04cc19d85ece300a4df686df4f Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Tue, 21 Oct 2025 16:24:32 +0200
Subject: [PATCH] fix: add sample data to RadarChartWithSelection component

---
 .../overview/radar-chart-with-selection.tsx   | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/ui/components/overview/radar-chart-with-selection.tsx b/ui/components/overview/radar-chart-with-selection.tsx
index 28e489d602..d90beeb69a 100644
--- a/ui/components/overview/radar-chart-with-selection.tsx
+++ b/ui/components/overview/radar-chart-with-selection.tsx
@@ -1,26 +1,38 @@
 "use client";
 
+import { useState } from "react";
+
 import { RadarChart } from "@/components/graphs";
+import type { RadarDataPoint } from "@/components/graphs/types";
 
 interface RadarChartWithSelectionProps {
-  percentage?: number;
-  label?: string;
-  color?: string;
+  data?: RadarDataPoint[];
   height?: number;
 }
 
+const sampleRadarData: RadarDataPoint[] = [
+  { category: "IAM", value: 85, change: 5 },
+  { category: "Storage", value: 72, change: -2 },
+  { category: "Network", value: 88, change: 8 },
+  { category: "Compute", value: 76, change: 3 },
+  { category: "Database", value: 82, change: -1 },
+  { category: "Encryption", value: 91, change: 6 },
+];
+
 export function RadarChartWithSelection({
-  percentage = 78,
-  label = "Overall Compliance",
-  color = "var(--chart-success-color)",
-  height = 350,
+  data = sampleRadarData,
+  height = 400,
 }: RadarChartWithSelectionProps) {
+  const [selectedPoint, setSelectedPoint] = useState<RadarDataPoint | null>(
+    null,
+  );
+
   return (
     <RadarChart
-      percentage={percentage}
-      label={label}
-      color={color}
+      data={data}
       height={height}
+      selectedPoint={selectedPoint}
+      onSelectPoint={setSelectedPoint}
     />
   );
 }