ChartToolbar() — ui Function Reference

Architecture documentation for the ChartToolbar() function in chart-toolbar.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ChartToolbar() — ui Function Reference

Dependency Diagram

graph TD
  0a0a91fc_f94e_614e_ae62_bddee2a2f747["ChartToolbar()"]
  c17093f8_a59d_06ac_d1dd_8835cefccfcd["chart-toolbar.tsx"]
  0a0a91fc_f94e_614e_ae62_bddee2a2f747 -->|defined in| c17093f8_a59d_06ac_d1dd_8835cefccfcd
  style 0a0a91fc_f94e_614e_ae62_bddee2a2f747 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/chart-toolbar.tsx lines 21–45

export function ChartToolbar({
  chart,
  className,
  children,
}: {
  chart: Chart
} & React.ComponentProps<"div">) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
        <ChartTitle chart={chart} />
      </div>
      <div className="ml-auto flex items-center gap-2 [&>form]:flex">
        <ChartCopyButton
          event="copy_chart_code"
          name={chart.name}
          code={chart.files?.[0]?.content ?? ""}
          className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
        />
        <Separator orientation="vertical" className="mx-0 hidden h-4 md:flex" />
        <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer>
      </div>
    </div>
  )
}