diff --git a/apps/web/src/widgets/relations/RelationsPanel.tsx b/apps/web/src/widgets/relations/RelationsPanel.tsx index 3b38527..063328e 100644 --- a/apps/web/src/widgets/relations/RelationsPanel.tsx +++ b/apps/web/src/widgets/relations/RelationsPanel.tsx @@ -62,6 +62,35 @@ export function RelationsPanel({ const isVesselHighlight = (mmsi: number, ownerKey: string | null) => hoveredFleetMmsis.has(mmsi) || isFleetHighlightByOwner(ownerKey); + const topFleets = useMemo(() => { + const group = new Map(); + for (const v of fleetVessels) { + if (!v.ownerKey) continue; + const list = group.get(v.ownerKey); + if (list) list.push(v); + else group.set(v.ownerKey, [v]); + } + + return Array.from(group.entries()) + .map(([ownerKey, vs]) => { + const lon = vs.reduce((sum, v) => sum + v.lon, 0) / vs.length; + const lat = vs.reduce((sum, v) => sum + v.lat, 0) / vs.length; + const radiusNm = vs.reduce((max, v) => { + const d = haversineNm(lat, lon, v.lat, v.lon); + return Math.max(max, d); + }, 0); + + return { ownerKey, vs, radiusNm }; + }) + .filter((x) => x.vs.length >= 3) + .sort((a, b) => { + if (fleetSortMode === "range") { + return b.radiusNm - a.radiusNm || b.vs.length - a.vs.length; + } + return b.vs.length - a.vs.length || b.radiusNm - a.radiusNm; + }); + }, [fleetVessels, fleetSortMode]); + if (selectedVessel) { const v = selectedVessel; const meta = VESSEL_TYPES[v.shipCode]; @@ -238,36 +267,6 @@ export function RelationsPanel({ return
(현재 지도에 표시중인 대상 선박이 없습니다)
; } - const group = new Map(); - for (const v of fleetVessels) { - if (!v.ownerKey) continue; - const list = group.get(v.ownerKey); - if (list) list.push(v); - else group.set(v.ownerKey, [v]); - } - - const topFleets = useMemo(() => { - const toFleetMeta = Array.from(group.entries()) - .map(([ownerKey, vs]) => { - const lon = vs.reduce((sum, v) => sum + v.lon, 0) / vs.length; - const lat = vs.reduce((sum, v) => sum + v.lat, 0) / vs.length; - const radiusNm = vs.reduce((max, v) => { - const d = haversineNm(lat, lon, v.lat, v.lon); - return Math.max(max, d); - }, 0); - - return { ownerKey, vs, radiusNm }; - }) - .filter((x) => x.vs.length >= 3); - - return toFleetMeta.sort((a, b) => { - if (fleetSortMode === "range") { - return b.radiusNm - a.radiusNm || b.vs.length - a.vs.length; - } - return b.vs.length - a.vs.length || b.radiusNm - a.radiusNm; - }); - }, [fleetSortMode, group]); - if (topFleets.length === 0) { return
(표시 중인 선단(3척 이상) 없음)
; }