ChartDisplay() — ui Function Reference

Architecture documentation for the ChartDisplay() function in chart-display.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ChartDisplay() — ui Function Reference

Dependency Diagram

graph TD
  47f7cebf_18a8_26fe_ebfe_418b61cfb998["ChartDisplay()"]
  66f1d15d_ead2_fdda_f252_4bcac43b84c3["chart-display.tsx"]
  47f7cebf_18a8_26fe_ebfe_418b61cfb998 -->|defined in| 66f1d15d_ead2_fdda_f252_4bcac43b84c3
  style 47f7cebf_18a8_26fe_ebfe_418b61cfb998 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/chart-display.tsx lines 16–44

export function ChartDisplay({
  chart,
  style,
  className,
}: {
  chart: Chart
  style: string
} & React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "themes-wrapper group relative flex flex-col overflow-hidden rounded-xl transition-all duration-200 ease-in-out hover:z-30",
        className
      )}
    >
      <ChartToolbar
        chart={chart}
        className="relative z-20 flex justify-end px-3 py-2.5"
      />
      <div className="bg-background relative z-10 overflow-hidden rounded-xl">
        <ChartIframe
          src={`/view/${style}/${chart.name}`}
          height={460}
          title={chart.name}
        />
      </div>
    </div>
  )
}