From 124d2db9f1e42bf5396bcb294402ff154770cdd6 Mon Sep 17 00:00:00 2001 From: Alan Buscaglia Date: Wed, 22 Oct 2025 15:11:25 +0200 Subject: [PATCH] refactor(ui): rename graph components to kebab-case naming convention - Rename threat-map.tsx to map-chart.tsx - Add map-region-filter component - Update component exports in graphs and ui indices --- ui/components/graphs/index.ts | 2 +- .../graphs/{threat-map.tsx => map-chart.tsx} | 66 +++++-------------- ui/components/graphs/map-region-filter.tsx | 50 ++++++++++++++ ui/components/ui/index.ts | 2 +- ui/components/ui/select/index.ts | 12 ++++ 5 files changed, 79 insertions(+), 53 deletions(-) rename ui/components/graphs/{threat-map.tsx => map-chart.tsx} (88%) create mode 100644 ui/components/graphs/map-region-filter.tsx create mode 100644 ui/components/ui/select/index.ts diff --git a/ui/components/graphs/index.ts b/ui/components/graphs/index.ts index 2c26df99db..79d9b01e53 100644 --- a/ui/components/graphs/index.ts +++ b/ui/components/graphs/index.ts @@ -1,9 +1,9 @@ export { DonutChart } from "./donut-chart"; export { HorizontalBarChart } from "./horizontal-bar-chart"; export { LineChart } from "./line-chart"; +export { MapChart, type MapChartData, type MapChartProps } from "./map-chart"; export { RadarChart } from "./radar-chart"; export { RadialChart } from "./radial-chart"; export { SankeyChart } from "./sankey-chart"; export { ScatterPlot } from "./scatter-plot"; export { ChartLegend, type ChartLegendItem } from "./shared/chart-legend"; -export { ThreatMap } from "./threat-map"; diff --git a/ui/components/graphs/threat-map.tsx b/ui/components/graphs/map-chart.tsx similarity index 88% rename from ui/components/graphs/threat-map.tsx rename to ui/components/graphs/map-chart.tsx index c8b0742f58..586bb47b25 100644 --- a/ui/components/graphs/threat-map.tsx +++ b/ui/components/graphs/map-chart.tsx @@ -16,14 +16,6 @@ import type { Topology, } from "topojson-specification"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; - import { HorizontalBarChart } from "./horizontal-bar-chart"; import { BarDataPoint } from "./types"; @@ -63,13 +55,13 @@ interface LocationPoint { change?: number; } -interface ThreatMapData { +export interface MapChartData { locations: LocationPoint[]; regions: string[]; } -interface ThreatMapProps { - data: ThreatMapData; +export interface MapChartProps { + data: MapChartData; height?: number; onLocationSelect?: (location: LocationPoint | null) => void; } @@ -220,10 +212,10 @@ function LoadingState({ height }: { height: number }) { ); } -export function ThreatMap({ +export function MapChart({ data, height = MAP_CONFIG.defaultHeight, -}: ThreatMapProps) { +}: MapChartProps) { const svgRef = useRef(null); const containerRef = useRef(null); const [selectedLocation, setSelectedLocation] = @@ -235,7 +227,6 @@ export function ThreatMap({ x: number; y: number; } | null>(null); - const [selectedRegion, setSelectedRegion] = useState("All Regions"); const [worldData, setWorldData] = useState(null); const [isLoadingMap, setIsLoadingMap] = useState(true); const [dimensions, setDimensions] = useState<{ @@ -246,11 +237,6 @@ export function ThreatMap({ height, }); - const filteredLocations = - selectedRegion === "All Regions" - ? data.locations - : data.locations.filter((loc) => loc.region === selectedRegion); - // Fetch world data once on mount useEffect(() => { let isMounted = true; @@ -367,7 +353,7 @@ export function ThreatMap({ }); // Unselected points first - filteredLocations.forEach((location) => { + data.locations.forEach((location) => { if (selectedLocation?.id !== location.id) { const circle = createCircle(location); if (circle) pointsGroup.appendChild(circle); @@ -376,7 +362,7 @@ export function ThreatMap({ // Selected point last (on top) if (selectedLocation) { - const selectedData = filteredLocations.find( + const selectedData = data.locations.find( (loc) => loc.id === selectedLocation.id, ); if (selectedData) { @@ -387,8 +373,8 @@ export function ThreatMap({ svg.appendChild(pointsGroup); }, [ + data.locations, dimensions, - filteredLocations, selectedLocation, hoveredLocation, worldData, @@ -406,34 +392,12 @@ export function ThreatMap({
{/* Map Section */}
-
-

- Threat Map -

- -
+

+ Threat Map +

- {filteredLocations.length} Locations + {data.locations.length} Locations
diff --git a/ui/components/graphs/map-region-filter.tsx b/ui/components/graphs/map-region-filter.tsx new file mode 100644 index 0000000000..c98fd43ddf --- /dev/null +++ b/ui/components/graphs/map-region-filter.tsx @@ -0,0 +1,50 @@ +"use client"; + +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +interface MapRegionFilterProps { + regions: string[]; + selectedRegion: string; + onRegionChange: (region: string) => void; + chartColors: { + tooltipBorder: string; + tooltipBackground: string; + textPrimary: string; + }; +} + +export function MapRegionFilter({ + regions, + selectedRegion, + onRegionChange, + chartColors, +}: MapRegionFilterProps) { + return ( + + ); +} diff --git a/ui/components/ui/index.ts b/ui/components/ui/index.ts index 205ec7fd50..c4059a7b55 100644 --- a/ui/components/ui/index.ts +++ b/ui/components/ui/index.ts @@ -12,6 +12,6 @@ export * from "./feedback-banner/feedback-banner"; export * from "./headers/navigation-header"; export * from "./label/Label"; export * from "./main-layout/main-layout"; -export * from "./select/Select"; +export * from "./select"; export * from "./sidebar"; export * from "./toast"; diff --git a/ui/components/ui/select/index.ts b/ui/components/ui/select/index.ts new file mode 100644 index 0000000000..730dd10551 --- /dev/null +++ b/ui/components/ui/select/index.ts @@ -0,0 +1,12 @@ +export { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectScrollDownButton, + SelectScrollUpButton, + SelectSeparator, + SelectTrigger, + SelectValue, +} from "./Select";