52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 57:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 58:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollBar"] 53:Tb90,"use client"; import type { ChoroplethFeature } from "@/components/charts"; import { ChartStatFlow, ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip, } from "@/components/charts"; import { useState } from "react"; import { useWorldDataStandalone } from "@/lib/use-world-data"; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from "@/components/ui/card"; import { getVisitorColor, getVisitorValue, visitorStats, } from "../data/visitors"; import { StatCardChart, type StatCardHoverState, statCardLabelClassName, statCardValueClassName, } from "./stat-card-chart"; import { StatCardChoroplethHoverBridge } from "./stat-card-choropleth-hover-bridge"; import { TrendBadge } from "./trend-badge"; export function StatCardChoropleth() { const { worldData, isLoading } = useWorldDataStandalone(); const [hover, setHover] = useState({ value: null, label: null, trend: null, }); const displayValue = hover.value ?? visitorStats.total; const displayLabel = hover.label ?? "Total"; const displayTrend = hover.trend ?? visitorStats.trend; return (

Unique Visitors

{isLoading || !worldData ? (

Loading map…

) : ( getVisitorColor(feature) } /> )} ); } 54:T412,"use client"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface StatCardHoverState { value: number | null; label: string | null; trend: number | null; } export const statCardValueClassName = "text-3xl font-semibold leading-none tracking-tight"; export const statCardLabelClassName = "mt-0 text-xs"; export const statCardChartHeights = { sm: "[--stat-card-chart-h:96px]", md: "[--stat-card-chart-h:190px]", lg: "[--stat-card-chart-h:420px]", } as const; /** Bleeds charts edge-to-edge inside stat card content padding. */ export function StatCardChart({ children, className, size = "sm", }: { children: ReactNode; className?: string; size?: keyof typeof statCardChartHeights; }) { return (

{children}

); } 55:T6d4,import type { ChoroplethFeature } from "@/components/charts"; export const visitorsByCountry: Record = { "United States": 18, "United Kingdom": 12, Germany: 17, France: 9, Canada: 8, Australia: 6, Netherlands: 5, Brazil: 7, India: 11, Japan: 4, Spain: 3, Italy: 6, Mexico: 5, Poland: 4, Sweden: 3, Belgium: 2, Switzerland: 2, Austria: 1, Norway: 2, Denmark: 1, Ireland: 3, Portugal: 2, "New Zealand": 1, Finland: 1, "South Africa": 4, Argentina: 3, Indonesia: 2, Philippines: 3, Thailand: 2, Vietnam: 1, }; const visitorCounts = Object.values(visitorsByCountry); const averageVisitorsPerCountry = visitorCounts.reduce((sum, visitors) => sum + visitors, 0) / visitorCounts.length; export const visitorStats = { trend: -3.1, total: visitorCounts.reduce((sum, visitors) => sum + visitors, 0), }; export function getVisitorColor(feature: ChoroplethFeature): string { const name = feature.properties?.name as string; const visitors = visitorsByCountry[name]; if (!visitors) { return "var(--muted)"; } if (visitors >= 17) { return "var(--chart-1)"; } if (visitors >= 13) { return "var(--chart-2)"; } if (visitors >= 9) { return "var(--chart-3)"; } if (visitors >= 5) { return "var(--chart-4)"; } return "var(--chart-5)"; } export function getVisitorValue( feature: ChoroplethFeature ): number | undefined { const name = feature.properties?.name as string; return visitorsByCountry[name]; } export function computeVisitorTrend(visitors: number): number { if (averageVisitorsPerCountry === 0) { return 0; } return ( ((visitors - averageVisitorsPerCountry) / averageVisitorsPerCountry) * 100 ); } 56:Te14,"use client"; import type { FeatureCollection, Geometry } from "geojson"; import { createContext, type ReactNode, useContext, useEffect, useState, } from "react"; import { feature } from "topojson-client"; import type { GeometryCollection, Topology } from "topojson-specification"; interface CountryProperties { name: string; [key: string]: unknown; } interface WorldTopology extends Topology { objects: { [key: string]: GeometryCollection; }; } const WORLD_DATA_URL = "https://raw.githubusercontent.com/subyfly/topojson/refs/heads/master/world-countries.json"; // Global cache to avoid refetching across component mounts let globalWorldDataCache: FeatureCollection< Geometry, CountryProperties > | null = null; let globalFetchPromise: Promise | null> | null = null; function fetchWorldData(): Promise | null> { // Return cached data if available if (globalWorldDataCache) { return Promise.resolve(globalWorldDataCache); } // Return existing promise if fetch is in progress if (globalFetchPromise) { return globalFetchPromise; } // Start new fetch globalFetchPromise = (async () => { try { const response = await fetch(WORLD_DATA_URL); const topology = (await response.json()) as WorldTopology; const objectKey = Object.keys(topology.objects)[0]; if (!objectKey) { throw new Error("No objects found in topology"); } const geoObject = topology.objects[objectKey]; if (!geoObject) { throw new Error("Object not found in topology"); } const geojson = feature( topology, geoObject ) as unknown as FeatureCollection; globalWorldDataCache = geojson; return geojson; } catch (error) { console.error("Failed to fetch world data:", error); return null; } })(); return globalFetchPromise; } interface WorldDataContextValue { worldData: FeatureCollection | null; isLoading: boolean; } const WorldDataContext = createContext({ worldData: null, isLoading: true, }); export function WorldDataProvider({ children }: { children: ReactNode }) { const [worldData, setWorldData] = useState | null>(globalWorldDataCache); const [isLoading, setIsLoading] = useState(!globalWorldDataCache); useEffect(() => { if (globalWorldDataCache) { setWorldData(globalWorldDataCache); setIsLoading(false); return; } fetchWorldData().then((data) => { setWorldData(data); setIsLoading(false); }); }, []); return ( {children} ); } export function useWorldData() { return useContext(WorldDataContext); } // Standalone hook for components that don't have the provider export function useWorldDataStandalone() { const [worldData, setWorldData] = useState | null>(globalWorldDataCache); const [isLoading, setIsLoading] = useState(!globalWorldDataCache); useEffect(() => { if (globalWorldDataCache) { setWorldData(globalWorldDataCache); setIsLoading(false); return; } fetchWorldData().then((data) => { setWorldData(data); setIsLoading(false); }); }, []); return { worldData, isLoading }; } 50:["$","$L52",null,{"files":[{"path":"registry/blocks/stat-card-choropleth-01/components/stat-card-choropleth.tsx","content":"$53","type":"registry:component","target":"components/stat-card-choropleth.tsx"},{"path":"registry/blocks/stat-card-choropleth-01/components/stat-card-choropleth-hover-bridge.tsx","content":"\"use client\";\n\nimport { useChoropleth } from \"@/components/charts\";\nimport { useEffect } from \"react\";\nimport { computeVisitorTrend, getVisitorValue } from \"../data/visitors\";\nimport type { StatCardHoverState } from \"./stat-card-chart\";\n\n/** Syncs hovered choropleth feature into stat card NumberFlow and trend badge. */\nexport function StatCardChoroplethHoverBridge({\n onHoverChange,\n}: {\n onHoverChange: (state: StatCardHoverState) => void;\n}) {\n const { tooltipData } = useChoropleth();\n\n useEffect(() => {\n if (!tooltipData?.feature) {\n onHoverChange({ value: null, label: null, trend: null });\n return;\n }\n\n const feature = tooltipData.feature;\n const label = (feature.properties?.name as string | undefined) ?? \"Unknown\";\n const visitors = getVisitorValue(feature);\n const value = visitors ?? 0;\n const trend = visitors === undefined ? null : computeVisitorTrend(visitors);\n\n onHoverChange({ value, label, trend });\n }, [onHoverChange, tooltipData]);\n\n return null;\n}\n","type":"registry:component","target":"components/stat-card-choropleth-hover-bridge.tsx"},{"path":"registry/blocks/stat-card-choropleth-01/components/stat-card-chart.tsx","content":"$54","type":"registry:component","target":"components/stat-card-chart.tsx"},{"path":"registry/blocks/stat-card-choropleth-01/components/trend-badge.tsx","content":"\"use client\";\n\nimport { CentralIcon } from \"@central-icons-react/all\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport function TrendBadge({\n value,\n className,\n}: {\n value: number;\n className?: string;\n}) {\n const positive = value >= 0;\n\n return (\n \n \n {positive ? \"+\" : \"\"}\n {value.toFixed(1)}%\n \n );\n}\n","type":"registry:component","target":"components/trend-badge.tsx"},{"path":"registry/blocks/stat-card-choropleth-01/data/visitors.ts","content":"$55","type":"registry:lib","target":"data/visitors.ts"},{"path":"registry/blocks/stat-card-choropleth-01/lib/use-world-data.tsx","content":"$56","type":"registry:component","target":"lib/use-world-data.tsx"},{"path":"registry/examples/stat-card-choropleth-01-index.ts","content":"/** biome-ignore-all lint/performance/noBarrelFile: v0 registry example barrel for shadcn install */\nexport { type ChoroplethFeature, ChoroplethChart, ChoroplethFeatureComponent, ChoroplethTooltip, useChoropleth } from \"./choropleth\";\nexport { ChartStatFlow } from \"./chart-stat-flow\";\n","type":"registry:lib","target":"components/charts/index.ts"}]}] 51:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L57",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L58",null,{"orientation":"vertical"}],["$","$L58",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L57",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L58",null,{"orientation":"vertical"}],["$","$L58",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L57",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L58",null,{"orientation":"vertical"}],["$","$L58",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","p",null,{"className":"text-sm text-foreground/70 py-2 px-2","children":"No CSS found."}]}]]}]]}]}]]}]

Stat Card Choropleth

Installation

Files

components

data

lib

Styles