ChartCodeViewer() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ChartCodeViewer() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/chart-code-viewer.tsx lines 27–120

export function ChartCodeViewer({
  chart,
  className,
  children,
}: {
  chart: Chart
} & React.ComponentProps<"div">) {
  const isDesktop = useMediaQuery("(min-width: 768px)")

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

  const content = (
    <div className="flex min-h-0 flex-1 flex-col gap-0">
      <div className="chart-wrapper theme-container hidden sm:block [&_[data-chart]]:mx-auto [&_[data-chart]]:max-h-[35vh] [&>div]:rounded-none [&>div]:border-0 [&>div]:border-b [&>div]:shadow-none">
        {children}
      </div>
      <div className="flex min-w-0 flex-1 flex-col overflow-hidden p-4">
        <figure
          data-rehype-pretty-code-figure=""
          className="mt-0 flex h-auto min-w-0 flex-1 flex-col overflow-hidden"
        >
          <figcaption
            className="text-foreground [&>svg]:text-foreground flex h-12 shrink-0 items-center gap-2 border-b py-2 pr-2 pl-4 [&>svg]:size-4 [&>svg]:opacity-70"
            data-language="tsx"
          >
            {getIconForLanguageExtension("tsx")}
            {chart.name}
            <div className="ml-auto flex items-center gap-2">
              <ChartCopyButton
                event="copy_chart_code"
                name={chart.name}
                code={chart.files?.[0]?.content ?? ""}
              />
              <OpenInV0Button name={chart.name} className="rounded-sm" />
            </div>
          </figcaption>
          <div
            dangerouslySetInnerHTML={{
              __html: chart.highlightedCode,
            }}
            className="no-scrollbar overflow-y-auto"
          />
        </figure>
      </div>
    </div>
  )

  if (!isDesktop) {
    return (
      <Drawer>
        <DrawerTrigger asChild>{button}</DrawerTrigger>
        <DrawerContent
          className={cn(
            "flex max-h-[80vh] flex-col sm:max-h-[90vh] [&>div.bg-muted]:shrink-0",
            className
          )}
        >
          <DrawerHeader className="sr-only">
            <DrawerTitle>Code</DrawerTitle>
            <DrawerDescription>View the code for the chart.</DrawerDescription>
          </DrawerHeader>
          <div className="flex h-full flex-col overflow-auto">{content}</div>
        </DrawerContent>
      </Drawer>
    )
  }

  return (
    <Sheet>
      <SheetTrigger asChild>{button}</SheetTrigger>
      <SheetContent
        side="right"
        className={cn(