ChartsPage() — ui Function Reference

Architecture documentation for the ChartsPage() function in page.tsx from the ui codebase.

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ ChartsPage() — ui Function Reference

Dependency Diagram

graph TD
  6ccb3694_8435_6e02_0b8f_5d8a38a5ffb6["ChartsPage()"]
  ba67d646_7c39_e67b_2718_a4ceb2797fea["page.tsx"]
  6ccb3694_8435_6e02_0b8f_5d8a38a5ffb6 -->|defined in| ba67d646_7c39_e67b_2718_a4ceb2797fea
  style 6ccb3694_8435_6e02_0b8f_5d8a38a5ffb6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/charts/page.tsx lines 8–298

export default function ChartsPage() {
  return (
    <div className="grid gap-4">
      <ThemesStyle />
      <div className="gap-6 md:flex md:flex-row-reverse md:items-start">
        <ThemesSwitcher
          themes={THEMES}
          className="fixed inset-x-0 bottom-0 z-40 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
        />
        <div className="grid flex-1 gap-12">
          <h2 className="sr-only">Examples</h2>
          <div
            id="examples"
            className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
          >
            <ChartDisplay name="chart-area-stacked">
              <Charts.ChartAreaStacked />
            </ChartDisplay>
            <ChartDisplay name="chart-bar-multiple">
              <Charts.ChartBarMultiple />
            </ChartDisplay>
            <ChartDisplay
              name="chart-pie-donut-text"
              className="[&_[data-chart]]:xl:max-h-[243px]"
            >
              <Charts.ChartPieDonutText />
            </ChartDisplay>
          </div>
          <Separator />
          <div
            id="area-chart"
            className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
          >
            <ChartDisplay name="chart-area-default">
              <Charts.ChartAreaDefault />
            </ChartDisplay>
            <ChartDisplay name="chart-area-linear">
              <Charts.ChartAreaLinear />
            </ChartDisplay>
            <ChartDisplay name="chart-area-step">
              <Charts.ChartAreaStep />
            </ChartDisplay>
            <ChartDisplay name="chart-area-stacked">
              <Charts.ChartAreaStacked />
            </ChartDisplay>
            <ChartDisplay name="chart-area-stacked-expand">
              <Charts.ChartAreaStackedExpand />
            </ChartDisplay>
            <ChartDisplay name="chart-area-legend">
              <Charts.ChartAreaLegend />
            </ChartDisplay>
            <ChartDisplay name="chart-area-icons">
              <Charts.ChartAreaIcons />
            </ChartDisplay>
            <ChartDisplay name="chart-area-gradient">
              <Charts.ChartAreaGradient />
            </ChartDisplay>
            <ChartDisplay name="chart-area-axes">
              <Charts.ChartAreaAxes />
            </ChartDisplay>
            <div className="md:col-span-2 lg:col-span-3">
              <ChartDisplay name="chart-area-interactive">
                <Charts.ChartAreaInteractive />
              </ChartDisplay>
            </div>
          </div>
          <Separator />
          <div
            id="bar-chart"
            className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
          >
            <ChartDisplay name="chart-bar-default">
              <Charts.ChartBarDefault />
            </ChartDisplay>
            <ChartDisplay name="chart-bar-horizontal">
              <Charts.ChartBarHorizontal />
            </ChartDisplay>
            <ChartDisplay name="chart-bar-multiple">
              <Charts.ChartBarMultiple />
            </ChartDisplay>
            <ChartDisplay name="chart-bar-label">