ui Architecture Docs
Home / File/ stats.tsx — ui Source File

stats.tsx — ui Source File

Architecture documentation for stats.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  717f1e11_d3eb_c034_9671_7d0ef4ad88a9["stats.tsx"]
  da384753_eb23_55ed_e7a6_3bd0e172b999["recharts"]
  717f1e11_d3eb_c034_9671_7d0ef4ad88a9 --> da384753_eb23_55ed_e7a6_3bd0e172b999
  95a7752f_4b97_5bde_5d7d_fca03536ac35["card"]
  717f1e11_d3eb_c034_9671_7d0ef4ad88a9 --> 95a7752f_4b97_5bde_5d7d_fca03536ac35
  54edb93d_8b2b_eda5_dfc1_461038aaa132["chart"]
  717f1e11_d3eb_c034_9671_7d0ef4ad88a9 --> 54edb93d_8b2b_eda5_dfc1_461038aaa132
  style 717f1e11_d3eb_c034_9671_7d0ef4ad88a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Bar, BarChart, Line, LineChart } from "recharts"

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/registry/new-york/ui/card"
import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"

const data = [
  {
    revenue: 10400,
    subscription: 240,
  },
  {
    revenue: 14405,
    subscription: 300,
  },
  {
    revenue: 9400,
    subscription: 200,
  },
  {
    revenue: 8200,
    subscription: 278,
  },
  {
    revenue: 7000,
    subscription: 189,
  },
  {
    revenue: 9600,
    subscription: 239,
  },
  {
    revenue: 11244,
    subscription: 278,
  },
  {
    revenue: 26475,
    subscription: 189,
  },
]

const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "hsl(var(--primary))",
  },
  subscription: {
    label: "Subscriptions",
    color: "hsl(var(--primary))",
  },
} satisfies ChartConfig

export function CardsStats() {
  return (
    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
        </CardHeader>
        <CardContent className="pb-0">
          <div className="text-2xl font-bold">$15,231.89</div>
          <p className="text-xs text-muted-foreground">
            +20.1% from last month
          </p>
          <ChartContainer config={chartConfig} className="h-[80px] w-full">
            <LineChart
              data={data}
              margin={{
                top: 5,
                right: 10,
                left: 10,
                bottom: 0,
              }}
            >
              <Line
                type="monotone"
                strokeWidth={2}
                dataKey="revenue"
                stroke="var(--color-revenue)"
                activeDot={{
                  r: 6,
                }}
              />
            </LineChart>
          </ChartContainer>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-normal">Subscriptions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">+2350</div>
          <p className="text-xs text-muted-foreground">
            +180.1% from last month
          </p>
          <ChartContainer config={chartConfig} className="mt-2 h-[80px] w-full">
            <BarChart data={data}>
              <Bar
                dataKey="subscription"
                fill="var(--color-subscription)"
                radius={4}
              />
            </BarChart>
          </ChartContainer>
        </CardContent>
      </Card>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • card
  • chart
  • recharts

Source

Frequently Asked Questions

What does stats.tsx do?
stats.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in stats.tsx?
stats.tsx defines 1 function(s): CardsStats.
What does stats.tsx depend on?
stats.tsx imports 3 module(s): card, chart, recharts.
Where is stats.tsx in the architecture?
stats.tsx is located at deprecated/www/components/cards/stats.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/components/cards).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free