ChartToolbar() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ChartToolbar() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/chart-toolbar.tsx lines 19–46

export function ChartToolbar({
  chart,
  className,
  children,
}: {
  chart: Chart
} & React.ComponentProps<"div">) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <div className="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>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 text-foreground hover:bg-muted dark:text-foreground h-6 w-6 rounded-[6px] bg-transparent shadow-none [&_svg]:w-3"
        />
        <Separator
          orientation="vertical"
          className="mx-0 hidden !h-4 md:flex"
        />
        <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer>
      </div>
    </div>
  )
}