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:T1a2b,"use client" import * as React from "react" import { loadGoogleChartsPackages, resolveGoogleColor, escapeGoogleTooltipText, type GoogleChartsLoaderState, type GoogleVisualizationChart, } from "./google-chart-loader" import { GoogleChartContainer } from "./google-chart-container" export interface GeoChartDatum { region: string value: number [key: string]: unknown } export interface GoogleGeoChartProps { data: GeoChartDatum[] regionKey?: string valueKey?: string region?: string displayMode?: "regions" | "markers" color?: string colorMin?: string colorMax?: string height?: number | string className?: string onRegionSelect?: (regionCode: string) => void } /** * Google GeoChart Component * Renders statistical geographic choropleths with automatic data transformation and ResizeObserver redraw. */ export function GoogleGeoChart({ data, regionKey = "region", valueKey = "value", region = "world", displayMode = "regions", color, colorMin = "var(--chart-grid-emphasis)", colorMax = "var(--chart-1)", height = 360, className, onRegionSelect, }: GoogleGeoChartProps) { const chartRef = React.useRef(null) const chartInstanceRef = React.useRef(null) const [status, setStatus] = React.useState("loading") const [errorMsg, setErrorMsg] = React.useState() // Initialize and load geochart package React.useEffect(() => { let active = true loadGoogleChartsPackages(["geochart"]) .then(() => { if (active) setStatus("ready") }) .catch((err) => { if (active) { setStatus("error") setErrorMsg(err.message) } }) return () => { active = false } }, []) // Draw chart when ready or data changes const drawChart = React.useCallback(() => { if (status !== "ready" || !chartRef.current || !window.google?.visualization) return // Transform application data to DataTable const dataTable = new window.google.visualization.DataTable() dataTable.addColumn("string", "Region") dataTable.addColumn("number", "Value") dataTable.addColumn({ type: "string", role: "tooltip", p: { html: true } }) const css = getComputedStyle(chartRef.current) const gridColor = css.getPropertyValue("--chart-grid").trim() || "#27272a" const surfaceColor = css.getPropertyValue("--muted").trim() || "#18181b" const targetMax = color || colorMax const resolvedMin = resolveGoogleColor(colorMin, chartRef.current, "#3f3f46") const resolvedMax = resolveGoogleColor(targetMax, chartRef.current, "#f4f4f5") data.forEach((item) => { const regionName = String(item[regionKey]) const safeRegionName = escapeGoogleTooltipText(regionName) const val = Number(item[valueKey]) const displayVal = Number.isFinite(val) ? val.toLocaleString() : String(item[valueKey]) const tooltipHtml = ` `.trim() dataTable.addRow([regionName, val, tooltipHtml]) }) const options = { region, displayMode, backgroundColor: "transparent", datalessRegionColor: surfaceColor, defaultColor: gridColor, colorAxis: { colors: [resolvedMin, resolvedMax], }, legend: "none", keepAspectRatio: true, tooltip: { isHtml: true, }, } if (!chartInstanceRef.current) { chartInstanceRef.current = new window.google.visualization.GeoChart(chartRef.current) if (onRegionSelect) { window.google.visualization.events.addListener(chartInstanceRef.current, "select", () => { const selection = chartInstanceRef.current?.getSelection?.() if (selection && selection.length > 0) { const row = selection[0].row if (row !== null && row !== undefined && dataTable.getValue) { const regionCode = dataTable.getValue(row, 0) onRegionSelect(String(regionCode)) } } }) } } chartInstanceRef.current?.draw(dataTable, options) }, [status, data, regionKey, valueKey, region, displayMode, color, colorMin, colorMax, onRegionSelect]) React.useEffect(() => { drawChart() }, [drawChart]) // Handle ResizeObserver debounced redraw React.useEffect(() => { if (!chartRef.current) return let timeoutId: NodeJS.Timeout const observer = new ResizeObserver(() => { clearTimeout(timeoutId) timeoutId = setTimeout(() => { drawChart() }, 150) }) observer.observe(chartRef.current) return () => { clearTimeout(timeoutId) observer.disconnect() } }, [drawChart]) // Cleanup chart instance ONLY on component unmount React.useEffect(() => { return () => { if (chartInstanceRef.current) { chartInstanceRef.current.clearChart?.() chartInstanceRef.current = null } } }, []) React.useEffect(() => { const surface = chartRef.current?.closest("[data-theme]") const observer = new MutationObserver(drawChart) if (surface) observer.observe(surface, { attributes: true, attributeFilter: ["data-theme"] }) if (typeof document !== "undefined") { observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] }) } const media = window.matchMedia("(prefers-color-scheme: dark)") media.addEventListener("change", drawChart) return () => { observer.disconnect(); media.removeEventListener("change", drawChart) } }, [drawChart]) return ( { setStatus("loading") loadGoogleChartsPackages(["geochart"]) .then(() => setStatus("ready")) .catch((err) => { setStatus("error") setErrorMsg(err.message) }) }} > Interactive choropleth visualization displaying statistical regional values. ) } 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":[null,["$","$L4c",null,{"namespace":"@plotcn","registryDependencies":["https://plotcn.vercel.app/r/google-chart-container.json","https://plotcn.vercel.app/r/google-chart-loader.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/charts/google/google-geochart.tsx","content":"$4e","type":"registry:component","target":"components/charts/google/google-geochart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]