From 57584875842a4142d959bd94ffe3f849d5e52bc3 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Tue, 21 Oct 2025 16:20:57 +0200
Subject: [PATCH] feat: add missing RadarChartWithSelection and
 ScatterPlotWithSelection components

---
 ui/components/overview/index.ts               |  2 ++
 .../overview/radar-chart-with-selection.tsx   | 26 ++++++++++++++
 .../overview/scatter-plot-with-selection.tsx  | 34 +++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 ui/components/overview/radar-chart-with-selection.tsx
 create mode 100644 ui/components/overview/scatter-plot-with-selection.tsx

diff --git a/ui/components/overview/index.ts b/ui/components/overview/index.ts
index e2beebb034..1495506fc1 100644
--- a/ui/components/overview/index.ts
+++ b/ui/components/overview/index.ts
@@ -6,3 +6,5 @@ export * from "./findings-by-status-chart/skeleton-findings-status-chart";
 export * from "./new-findings-table/link-to-findings/link-to-findings";
 export * from "./provider-overview/provider-overview";
 export * from "./provider-overview/skeleton-provider-overview";
+export * from "./radar-chart-with-selection";
+export * from "./scatter-plot-with-selection";
diff --git a/ui/components/overview/radar-chart-with-selection.tsx b/ui/components/overview/radar-chart-with-selection.tsx
new file mode 100644
index 0000000000..28e489d602
--- /dev/null
+++ b/ui/components/overview/radar-chart-with-selection.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { RadarChart } from "@/components/graphs";
+
+interface RadarChartWithSelectionProps {
+  percentage?: number;
+  label?: string;
+  color?: string;
+  height?: number;
+}
+
+export function RadarChartWithSelection({
+  percentage = 78,
+  label = "Overall Compliance",
+  color = "var(--chart-success-color)",
+  height = 350,
+}: RadarChartWithSelectionProps) {
+  return (
+    <RadarChart
+      percentage={percentage}
+      label={label}
+      color={color}
+      height={height}
+    />
+  );
+}
diff --git a/ui/components/overview/scatter-plot-with-selection.tsx b/ui/components/overview/scatter-plot-with-selection.tsx
new file mode 100644
index 0000000000..558eaac37e
--- /dev/null
+++ b/ui/components/overview/scatter-plot-with-selection.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { ScatterPlot } from "@/components/graphs";
+
+interface DataPoint {
+  x: number;
+  y: number;
+  provider: string;
+  name: string;
+  size: number;
+}
+
+interface ScatterPlotWithSelectionProps {
+  data: DataPoint[];
+  height?: number;
+  xLabel?: string;
+  yLabel?: string;
+}
+
+export function ScatterPlotWithSelection({
+  data,
+  height = 400,
+  xLabel = "Risk Score",
+  yLabel = "Compliance %",
+}: ScatterPlotWithSelectionProps) {
+  return (
+    <ScatterPlot
+      data={data}
+      height={height}
+      xLabel={xLabel}
+      yLabel={yLabel}
+    />
+  );
+}