feat: add missing RadarChartWithSelection and ScatterPlotWithSelection components

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";

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}
+    />
+  );
+}

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}
+    />
+  );
+}