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:T15b4,"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 GoogleLineDatum { label: string value: number [key: string]: unknown } export interface GoogleLineProps { data: GoogleLineDatum[] valueKey?: string labelKey?: string color?: string height?: number | string curveType?: "function" | "none" pointSize?: number showGrid?: boolean loading?: boolean error?: string | null className?: string } export function GoogleLine({ data, valueKey = "value", labelKey = "label", color = "var(--chart-1)", height = 320, curveType = "function", pointSize = 0, showGrid = true, loading = false, error = null, className, }: GoogleLineProps) { const chartRef = React.useRef(null) const chartInstanceRef = React.useRef(null) const [loaderStatus, setLoaderStatus] = React.useState("loading") React.useEffect(() => { loadGoogleChartsPackages(["corechart"]) .then(() => setLoaderStatus("ready")) .catch(() => setLoaderStatus("error")) }, []) const effectiveStatus: GoogleChartsLoaderState = loading ? "loading" : error ? "error" : loaderStatus const drawChart = React.useCallback(() => { if (effectiveStatus !== "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], curveType: curveType, pointSize: pointSize, legend: "none", hAxis: { textStyle: { color: axisColor, fontSize: 11 }, baselineColor: gridColor, gridlines: { color: "transparent" }, }, vAxis: { textStyle: { color: axisColor, fontSize: 11 }, baselineColor: gridColor, gridlines: { color: showGrid ? gridColor : "transparent" }, }, tooltip: { isHtml: true, }, chartArea: { width: "85%", height: "75%" }, } if (!chartInstanceRef.current) { chartInstanceRef.current = new window.google.visualization.LineChart(chartRef.current) } chartInstanceRef.current.draw(dataTable, options) }, [effectiveStatus, data, labelKey, valueKey, color, curveType, pointSize, showGrid]) // 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 ( Line 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-line.tsx","content":"$4d","type":"registry:component","target":"components/charts/google/google-line.tsx"}],"className":"h-[70svh] min-h-80"}]]}]