ChartCodeViewer() — ui Function Reference

Architecture documentation for the ChartCodeViewer() function in chart-code-viewer.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ChartCodeViewer() — ui Function Reference

Dependency Diagram

graph TD
  f9b2835d_960d_7939_30f2_6f13ff7b2437["ChartCodeViewer()"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e["chart-code-viewer.tsx"]
  f9b2835d_960d_7939_30f2_6f13ff7b2437 -->|defined in| 338b400d_b669_aac4_86b3_4b51ae57bf2e
  style f9b2835d_960d_7939_30f2_6f13ff7b2437 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/chart-code-viewer.tsx lines 23–179

export function ChartCodeViewer({
  chart,
  className,
  children,
}: {
  chart: Chart
} & React.ComponentProps<"div">) {
  const [tab, setTab] = React.useState("code")
  const { themesConfig } = useThemesConfig()
  const isDesktop = useMediaQuery("(min-width: 768px)")

  const themeCode = React.useMemo(() => {
    return `\
@layer base {
  :root {
${Object.entries(themesConfig?.activeTheme.cssVars.light || {})
  .map(([key, value]) => `    ${key}: ${value};`)
  .join("\n")}
  }

  .dark {
${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
  .map(([key, value]) => `    ${key}: ${value};`)
  .join("\n")}
    }
}
`
  }, [themesConfig])

  const button = (
    <Button
      size="sm"
      variant="outline"
      className="h-6 rounded-[6px] border bg-transparent px-2 text-xs text-foreground shadow-none hover:bg-muted dark:text-foreground"
    >
      View Code
    </Button>
  )

  const content = (
    <>
      <div className="chart-wrapper hidden sm:block [&>div]:rounded-none [&>div]:border-0 [&>div]:border-b [&>div]:shadow-none [&_[data-chart]]:mx-auto [&_[data-chart]]:max-h-[35vh]">
        {children}
      </div>
      <Tabs
        defaultValue="code"
        className="relative flex h-full flex-1 flex-col overflow-hidden p-4"
        value={tab}
        onValueChange={setTab}
      >
        <div className="flex w-full items-center">
          <TabsList className="h-7 w-auto rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]">
            <TabsTrigger
              value="code"
              className="h-[1.45rem] rounded-sm px-2 text-xs"
            >
              Code
            </TabsTrigger>
            <TabsTrigger
              value="theme"
              className="h-[1.45rem] rounded-sm px-2 text-xs"
            >
              Theme
            </TabsTrigger>
          </TabsList>
          {tab === "code" && (
            <div className="ml-auto flex items-center justify-center gap-2">
              <ChartCopyButton
                event="copy_chart_code"
                name={chart.name}
                code={chart.files?.[0]?.content ?? ""}
              />
              <V0Button
                id={`v0-button-${chart.name}`}
                name={chart.name}
                className="h-7"
              />
            </div>
          )}
          {tab === "theme" && (
            <ChartCopyButton