import * as React from "react" import { createMap } from "svg-dotted-map" import { cn } from "@/lib/utils" export interface Marker { lat: number lng: number size?: number pulse?: boolean } /** addMarkers returns markers with lat/lng removed; only x, y and other props (e.g. size) remain */ type MapMarker = Omit & { x: number y: number } export interface DottedMapProps< M extends Marker = Marker, > extends React.SVGProps { width?: number height?: number mapSamples?: number markers?: M[] dotColor?: string markerColor?: string dotRadius?: number stagger?: boolean pulse?: boolean renderMarkerOverlay?: (args: { marker: MapMarker index: number x: number y: number r: number }) => React.ReactNode } export function DottedMap({ width = 150, height = 75, mapSamples = 5000, markers = [], dotColor = "currentColor", markerColor = "#FF6900", dotRadius = 0.2, stagger = true, pulse = false, renderMarkerOverlay, className, style, ...svgProps }: DottedMapProps) { const { points, addMarkers } = createMap({ width, height, mapSamples, }) const processedMarkers = addMarkers(markers) // Compute stagger helpers in a single, simple pass const { xStep, yToRowIndex } = React.useMemo(() => { const sorted = [...points].sort((a, b) => a.y - b.y || a.x - b.x) const rowMap = new Map() let step = 0 let prevY = Number.NaN let prevXInRow = Number.NaN for (const p of sorted) { if (p.y !== prevY) { // new row prevY = p.y prevXInRow = Number.NaN if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size) } if (!Number.isNaN(prevXInRow)) { const delta = p.x - prevXInRow if (delta > 0) step = step === 0 ? delta : Math.min(step, delta) } prevXInRow = p.x } return { xStep: step || 1, yToRowIndex: rowMap } }, [points]) return ( ) }

Dotted Map

Instalação

Dependências