Dotted Map

1import * as React from "react"
2import { createMap } from "svg-dotted-map"
3 
4import { cn } from "@/lib/utils"
5 
6export interface Marker {
7  lat: number
8  lng: number
9  size?: number
10  pulse?: boolean
11}
12 
13/** addMarkers returns markers with lat/lng removed; only x, y and other props (e.g. size) remain */
14type MapMarker<M extends Marker> = Omit<M, "lat" | "lng"> & {
15  x: number
16  y: number
17}
18 
19export interface DottedMapProps<
20  M extends Marker = Marker,
21> extends React.SVGProps<SVGSVGElement> {
22  width?: number
23  height?: number
24  mapSamples?: number
25  markers?: M[]
26  dotColor?: string
27  markerColor?: string
28  dotRadius?: number
29  stagger?: boolean
30  pulse?: boolean
31 
32  renderMarkerOverlay?: (args: {
33    marker: MapMarker<M>
34    index: number
35    x: number
36    y: number
37    r: number
38  }) => React.ReactNode
39}
40 
41export function DottedMap<M extends Marker = Marker>({
42  width = 150,
43  height = 75,
44  mapSamples = 5000,
45  markers = [],
46  dotColor = "currentColor",
47  markerColor = "#FF6900",
48  dotRadius = 0.2,
49  stagger = true,
50  pulse = false,
51  renderMarkerOverlay,
52  className,
53  style,
54  ...svgProps
55}: DottedMapProps<M>) {
56  const { points, addMarkers } = createMap({
57    width,
58    height,
59    mapSamples,
60  })
61  const processedMarkers = addMarkers(markers)
62 
63  // Compute stagger helpers in a single, simple pass
64  const { xStep, yToRowIndex } = React.useMemo(() => {
65    const sorted = [...points].sort((a, b) => a.y - b.y || a.x - b.x)
66    const rowMap = new Map<number, number>()
67    let step = 0
68    let prevY = Number.NaN
69    let prevXInRow = Number.NaN
70 
71    for (const p of sorted) {
72      if (p.y !== prevY) {
73        // new row
74        prevY = p.y
75        prevXInRow = Number.NaN
76        if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size)
77      }
78      if (!Number.isNaN(prevXInRow)) {
79        const delta = p.x - prevXInRow
80        if (delta > 0) step = step === 0 ? delta : Math.min(step, delta)
81      }
82      prevXInRow = p.x
83    }
84 
85    return { xStep: step || 1, yToRowIndex: rowMap }
86  }, [points])
87 
88  return (
89    <svg
90      viewBox={`0 0 ${width} ${height}`}
91      className={cn("text-gray-500 dark:text-gray-500", className)}
92      style={{ width: "100%", height: "100%", ...style }}
93      {...svgProps}
94    >
95      {points.map((point, index) => {
96        const rowIndex = yToRowIndex.get(point.y) ?? 0
97        const offsetX = stagger && rowIndex % 2 === 1 ? xStep / 2 : 0
98        return (
99          <circle
100            cx={point.x + offsetX}
101            cy={point.y}
102// … truncated