4b: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"] 4c: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"] 4d:T1370,"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 GoogleBarDatum { label: string value: number [key: string]: unknown } export interface GoogleBarProps { data: GoogleBarDatum[] valueKey?: string labelKey?: string color?: string height?: number | string className?: string } export function GoogleBar({ data, valueKey = "value", labelKey = "label", color = "var(--chart-2)", height = 320, className, }: GoogleBarProps) { const chartRef = React.useRef(null) const chartInstanceRef = React.useRef(null) const [status, setStatus] = React.useState("loading") React.useEffect(() => { loadGoogleChartsPackages(["corechart"]) .then(() => setStatus("ready")) .catch(() => setStatus("error")) }, []) const drawChart = React.useCallback(() => { if (status !== "ready" || !chartRef.current || !window.google?.visualization) return const css = getComputedStyle(chartRef.current) const resolvedColor = resolveGoogleColor(color, chartRef.current, "#f4f4f5") const axisColor = css.getPropertyValue("--chart-axis").trim() || "#a1a1aa" const gridColor = css.getPropertyValue("--chart-grid").trim() || "rgba(255,255,255,0.08)" const dataTable = new window.google.visualization.DataTable() dataTable.addColumn("string", "Label") dataTable.addColumn("number", "Value") dataTable.addColumn({ type: "string", role: "tooltip", p: { html: true } }) data.forEach((item) => { const label = String(item[labelKey]) const safeLabel = escapeGoogleTooltipText(label) const val = Number(item[valueKey]) const displayVal = Number.isFinite(val) ? val.toLocaleString() : String(item[valueKey]) const tooltipHtml = ` `.trim() dataTable.addRow([label, val, tooltipHtml]) }) const options = { backgroundColor: "transparent", colors: [resolvedColor], legend: "none", hAxis: { textStyle: { color: axisColor, fontSize: 11 }, baselineColor: gridColor, gridlines: { color: "transparent" }, }, vAxis: { textStyle: { color: axisColor, fontSize: 11 }, baselineColor: gridColor, gridlines: { color: gridColor }, }, tooltip: { isHtml: true, }, chartArea: { width: "85%", height: "75%" }, } if (!chartInstanceRef.current) { chartInstanceRef.current = new window.google.visualization.ColumnChart(chartRef.current) } chartInstanceRef.current.draw(dataTable, options) }, [status, data, labelKey, valueKey, color]) // Redraw chart on prop update React.useEffect(() => { drawChart() }, [drawChart]) // ResizeObserver for responsive redraw React.useEffect(() => { if (!chartRef.current) return let frame = 0 const observer = new ResizeObserver(() => { cancelAnimationFrame(frame) frame = requestAnimationFrame(drawChart) }) observer.observe(chartRef.current) return () => { observer.disconnect() cancelAnimationFrame(frame) } }, [drawChart]) // Unmount cleanup ONLY React.useEffect(() => { return () => { 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 ( Bar chart rendered with Google Charts corechart package. ) } 4a:["$","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,["$","$L4b",null,{"namespace":"@plotcn","registryDependencies":["https://plotcn.vercel.app/r/google-chart-container.json","https://plotcn.vercel.app/r/google-chart-loader.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"components/charts/google/google-bar.tsx","content":"$4d","type":"registry:component","target":"components/charts/google/google-bar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]