4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T63ba,"use client" import * as React from "react" import dynamic from "next/dynamic" import type { FeatureCollection } from "geojson" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" import { type UILocale } from "@/lib/ui-i18n" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" // react-simple-maps is heavy (~30kB) — load via next/dynamic with ssr:false // to keep it out of the initial bundle and avoid SSR window mismatch const ComposableMap = dynamic( () => import("react-simple-maps").then((m) => ({ default: m.ComposableMap as unknown as React.ComponentType< React.ComponentProps >, })), { ssr: false } ) as unknown as typeof import("react-simple-maps").ComposableMap const Geographies = dynamic( () => import("react-simple-maps").then((m) => ({ default: m.Geographies as unknown as React.ComponentType< React.ComponentProps >, })), { ssr: false } ) as unknown as typeof import("react-simple-maps").Geographies const Geography = dynamic( () => import("react-simple-maps").then((m) => ({ default: m.Geography as unknown as React.ComponentType< React.ComponentProps >, })), { ssr: false } ) as unknown as typeof import("react-simple-maps").Geography const Marker = dynamic( () => import("react-simple-maps").then((m) => ({ default: m.Marker as unknown as React.ComponentType< React.ComponentProps >, })), { ssr: false } ) as unknown as typeof import("react-simple-maps").Marker const ZoomableGroup = dynamic( () => import("react-simple-maps").then((m) => ({ default: m.ZoomableGroup as unknown as React.ComponentType< React.ComponentProps >, })), { ssr: false } ) as unknown as typeof import("react-simple-maps").ZoomableGroup // ── Types ────────────────────────────────────────────────────────────────── export type GeoProjection = | "geoMercator" | "geoEqualEarth" | "geoNaturalEarth1" | "geoAlbersUsa" | "geoOrthographic" | "geoAzimuthalEqualArea" /** Where to render the choropleth color legend */ export type LegendPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "bottom" /** Gradient bar direction in the color legend */ export type LegendOrientation = "horizontal" | "vertical" export interface GeoMapFeature { /** Must match the GeoJSON feature's `id` or `properties.id` */ id: string | number name?: string value?: number color?: string [key: string]: unknown } export interface GeoMapMarker { id: string | number coordinates: [number, number] label?: string value?: number color?: string size?: number } export interface GeoMapChartProps extends React.HTMLAttributes { /** * GeoJSON FeatureCollection object **or** a URL string. * When a string is passed, react-simple-maps fetches it internally — * ideal for files served from `/public` (e.g. `"/geojson/world.geojson"`). */ geoData: FeatureCollection | string /** * Which feature property to use as the ID when the GeoJSON features have no * top-level `id` field (e.g. `"sigla"` for Brazilian states, `"ISO_A3"` for * Natural Earth country files). Takes precedence over `properties.id`. */ featureIdProperty?: string /** Values to overlay on features (choropleth / highlight) — matched by id */ data?: GeoMapFeature[] /** Point markers to render on top of the map */ markers?: GeoMapMarker[] title?: string subtitle?: string footer?: React.ReactNode /** Chart canvas height in px — width is always 100% */ height?: number /** D3 projection name — defaults to "geoMercator" */ projection?: GeoProjection projectionConfig?: { scale?: number center?: [number, number] rotate?: [number, number, number] } /** Enable zoom and pan via scroll / drag */ enableZoom?: boolean /** Min/max zoom multiplier when enableZoom is true */ zoomRange?: [number, number] /** Choropleth: interpolate fill between these two colors by value */ colorRange?: [string, string] /** Default fill for features with no matching data entry */ defaultFill?: string /** Feature IDs to highlight with a distinct stroke */ selectedFeatureIds?: (string | number)[] /** Stroke color for selected features */ selectedStroke?: string showTooltip?: boolean /** * Show a color scale legend when `colorRange` is set. * Defaults to `true` whenever `colorRange` is provided. */ showLegend?: boolean /** * Where to render the legend. * Overlay options (`top-left`, `top-right`, `bottom-left`, `bottom-right`) float * inside the map canvas. `"bottom"` renders below the canvas. * Defaults to `"bottom-right"`. */ legendPosition?: LegendPosition /** Short label displayed above the gradient bar in the legend */ legendLabel?: string /** Gradient bar direction in the legend — defaults to `"horizontal"` */ legendOrientation?: LegendOrientation onFeatureClick?: ( feature: GeoMapFeature | null, originalId: string | number ) => void onMarkerClick?: (marker: GeoMapMarker) => void valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean locale?: UILocale /** Show animated skeleton in place of the map while data loads */ loading?: boolean } // ── Skeleton ─────────────────────────────────────────────────────────────── interface GeoMapChartSkeletonProps { height?: number hasTitle?: boolean hasSubtitle?: boolean hasFooter?: boolean className?: string } function GeoMapChartSkeleton({ height = 400, hasTitle = false, hasSubtitle = false, hasFooter = false, className, }: GeoMapChartSkeletonProps) { return (

{(hasTitle || hasSubtitle) && (

{hasTitle && ( )} {hasSubtitle && ( )}

)} {/* Continent blob overlays */} {hasFooter && (

)}

) } // ── Variants ─────────────────────────────────────────────────────────────── const chartWrapperVariants = cva("flex w-full flex-col") const chartHeaderVariants = cva("flex flex-col px-1 pb-4") const chartTitleVariants = cva( "text-sm leading-tight font-semibold text-foreground" ) const chartSubtitleVariants = cva("mt-0.5 text-xs text-muted-foreground") const chartFooterVariants = cva( "mt-4 flex items-center gap-2 border-t border-border px-1 pt-3 text-xs text-muted-foreground" ) // ── Helpers ──────────────────────────────────────────────────────────────── function resolveFeatureId( properties: Record | null, id: string | number | undefined, featureIdProperty?: string ): string | number | null { if (id !== undefined && id !== null) return id as string | number if (featureIdProperty && properties?.[featureIdProperty] !== undefined) return properties[featureIdProperty] as string | number if (properties?.id !== undefined) return properties.id as string | number if (properties?.ID !== undefined) return properties.ID as string | number return null } function buildDataMap( data: GeoMapFeature[] ): Map { const map = new Map() for (const f of data) map.set(f.id, f) return map } function getValueRange(data: GeoMapFeature[]): [number, number] { const values = data.map((d) => d.value ?? 0).filter((v) => isFinite(v)) if (!values.length) return [0, 1] return [Math.min(...values), Math.max(...values)] } function interpolateColor(color1: string, color2: string, t: number): string { const parse = (hex: string) => { const c = hex.replace("#", "") const full = c.length === 3 ? c .split("") .map((x) => x + x) .join("") : c return [ parseInt(full.slice(0, 2), 16), parseInt(full.slice(2, 4), 16), parseInt(full.slice(4, 6), 16), ] } // Fall back gracefully if colors are not hex try { const [r1, g1, b1] = parse(color1) const [r2, g2, b2] = parse(color2) const r = Math.round(r1 + (r2 - r1) * t) const g = Math.round(g1 + (g2 - g1) * t) const b = Math.round(b1 + (b2 - b1) * t) return `rgb(${r},${g},${b})` } catch { return t > 0.5 ? color2 : color1 } } // ── Tooltip ──────────────────────────────────────────────────────────────── interface TooltipState { visible: boolean x: number y: number name: string value?: number } function MapTooltip({ state, fmt, }: { state: TooltipState fmt: (v: number) => string }) { if (!state.visible) return null return (

{state.name}

{state.value !== undefined && (

{fmt(state.value)}

)}

) } // ── ColorLegend ──────────────────────────────────────────────────────────── // Horizontal overlay: anchored to corner, natural size const overlayPositionClasses: Record< Exclude, string > = { "top-left": "absolute top-2 left-2", "top-right": "absolute top-2 right-2", "bottom-left": "absolute bottom-2 left-2", "bottom-right": "absolute bottom-2 right-2", } // Vertical overlay: stretch full height of the canvas (inset-y-2) const overlayPositionClassesVertical: Record< Exclude, string > = { "top-left": "absolute inset-y-2 left-2", "top-right": "absolute inset-y-2 right-2", "bottom-left": "absolute inset-y-2 left-2", "bottom-right": "absolute inset-y-2 right-2", } function ColorLegend({ colorRange, valueRange: [min, max], fmt, label, position = "bottom-right", orientation = "horizontal", }: { colorRange: [string, string] valueRange: [number, number] fmt: (v: number) => string label?: string position?: LegendPosition orientation?: LegendOrientation }) { const [tooltipOpen, setTooltipOpen] = React.useState(false) const [hoverValue, setHoverValue] = React.useState(null) const barRef = React.useRef(null) function handleBarMouseMove(e: React.MouseEvent) { if (!barRef.current) return const rect = barRef.current.getBoundingClientRect() const t = orientation === "vertical" ? Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height)) : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)) // vertical: top = max color, bottom = min color → value decreases downward const value = orientation === "vertical" ? max - t * (max - min) : min + t * (max - min) setHoverValue(value) } const gradientBar = (

setTooltipOpen(true)} onMouseLeave={() => { setTooltipOpen(false) setHoverValue(null) }} onMouseMove={handleBarMouseMove} /> {hoverValue !== null ? fmt(hoverValue) : ""} ) const isOverlay = position !== "bottom" const card = orientation === "vertical" ? (

{label && (

{label}

)} {fmt(max)} {gradientBar} {fmt(min)}

) : (

{label && (

{label}

)} {gradientBar}

{fmt(min)} {fmt(max)}

) if (position === "bottom") { return

{card}

} const posClass = orientation === "vertical" ? overlayPositionClassesVertical[position] : overlayPositionClasses[position] return

{card}

} // ── GeoMapChart ──────────────────────────────────────────────────────────── export function GeoMapChart({ geoData, featureIdProperty, data = [], markers = [], title, subtitle, footer, height = 400, projection = "geoMercator", projectionConfig, enableZoom = false, zoomRange = [1, 8], colorRange, defaultFill, selectedFeatureIds = [], selectedStroke, showTooltip = true, showLegend, legendPosition = "bottom-right", legendOrientation = "horizontal", legendLabel, onFeatureClick, onMarkerClick, valueFormatter, format, decimals, currency, abbreviate, locale = "en-US", loading = false, className, ...props }: GeoMapChartProps) { // Hooks must be called unconditionally before any early returns const fmt = React.useCallback( (v: number) => formatChartValue(v, { format, decimals, locale, currency, abbreviate, valueFormatter, }), [valueFormatter, format, decimals, locale, currency, abbreviate] ) const shouldShowLegend = showLegend !== false && !!colorRange const dataMap = React.useMemo(() => buildDataMap(data), [data]) const valueRange = React.useMemo(() => getValueRange(data), [data]) const selectedSet = React.useMemo( () => new Set(selectedFeatureIds.map(String)), [selectedFeatureIds] ) const [tooltip, setTooltip] = React.useState({ visible: false, x: 0, y: 0, name: "", }) const containerRef = React.useRef(null) if (loading) { return ( ) } function getFeatureFill(featureId: string | number | null): string { if (featureId === null) return defaultFill ?? "var(--muted)" const entry = dataMap.get(featureId) ?? dataMap.get(String(featureId)) if (entry?.color) return entry.color if (colorRange && entry?.value !== undefined) { const [min, max] = valueRange const t = max === min ? 0 : (entry.value - min) / (max - min) return interpolateColor(colorRange[0], colorRange[1], t) } return defaultFill ?? "var(--muted)" } function handleFeatureEnter( e: React.MouseEvent, featureId: string | number | null ) { if (!showTooltip) return const entry = featureId !== null ? (dataMap.get(featureId) ?? dataMap.get(String(featureId))) : undefined const rect = containerRef.current?.getBoundingClientRect() const x = rect ? e.clientX - rect.left : e.clientX const y = rect ? e.clientY - rect.top : e.clientY setTooltip({ visible: true, x, y, name: entry?.name ?? String(featureId ?? ""), value: entry?.value, }) } function handleFeatureLeave() { setTooltip((prev) => ({ ...prev, visible: false })) } function handleMouseMove(e: React.MouseEvent) { if (!tooltip.visible) return const rect = containerRef.current?.getBoundingClientRect() const x = rect ? e.clientX - rect.left : e.clientX const y = rect ? e.clientY - rect.top : e.clientY setTooltip((prev) => ({ ...prev, x, y })) } const mapContent = ( {({ geographies }) => geographies.map((geo) => { const rawId = resolveFeatureId( geo.properties as Record | null, geo.id as string | number | undefined, featureIdProperty ) const isSelected = rawId !== null && selectedSet.has(String(rawId)) const fill = getFeatureFill(rawId) return ( handleFeatureEnter(e, rawId)} onMouseLeave={handleFeatureLeave} onMouseMove={handleMouseMove} onClick={() => onFeatureClick?.( rawId !== null ? (dataMap.get(rawId) ?? dataMap.get(String(rawId)) ?? null) : null, rawId ?? "" ) } /> ) }) } ) const markerElements = markers.map((m) => ( { if (!showTooltip) return const rect = containerRef.current?.getBoundingClientRect() const x = rect ? e.clientX - rect.left : e.clientX const y = rect ? e.clientY - rect.top : e.clientY setTooltip({ visible: true, x, y, name: m.label ?? String(m.id), value: m.value, }) }} onMouseLeave={handleFeatureLeave} onClick={() => onMarkerClick?.(m)} /> {m.label && ( {m.label} )} )) return (

{(title || subtitle) && (

{title &&

{title}

} {subtitle &&

{subtitle}

}

)} {/* map canvas + overlay legend */}

{enableZoom ? ( {mapContent} {markerElements} ) : ( <> {mapContent} {markerElements} )}

{shouldShowLegend && legendPosition !== "bottom" && ( )}

{shouldShowLegend && legendPosition === "bottom" && ( )} {showTooltip && } {footer && (

{footer}

)}

) } // Code-split wrapper — keeps react-simple-maps out of the initial bundle // Consumer usage: const GeoMapChart = dynamic(() => import("@/components/ds/geomap-chart").then(m => m.GeoMapChart), { ssr:false }) // Also exported here as convenience (self-resolving, ssr:false) export const DynamicGeoMapChart = dynamic( () => Promise.resolve({ default: GeoMapChart }), { ssr: false, loading: () => null } ) 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-simple-maps",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-simple-maps","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-simple-maps"}]]}]}],["$","li","geojson",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/geojson","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"geojson"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","tooltip","format-utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/geomap-chart.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-geomap-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]