ui Architecture Docs
Home / File/ chart-code-viewer.tsx — ui Source File

chart-code-viewer.tsx — ui Source File

Architecture documentation for chart-code-viewer.tsx, a tsx file in the ui codebase. 11 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 11 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  338b400d_b669_aac4_86b3_4b51ae57bf2e["chart-code-viewer.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  5b9fe790_07fa_d673_2d62_394a21141145["use-media-query"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 5b9fe790_07fa_d673_2d62_394a21141145
  4301cef0_efc0_0be1_8523_bd5b8e946772["use-themes-config"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 4301cef0_efc0_0be1_8523_bd5b8e946772
  68e596e7_6979_4afc_6ab2_5388e7fb2914["chart-copy-button"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 68e596e7_6979_4afc_6ab2_5388e7fb2914
  732e465a_ced3_b1a5_d804_02cfa6f4300b["chart-display"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 732e465a_ced3_b1a5_d804_02cfa6f4300b
  68195618_3220_1f0a_c337_b26b6731e44a["v0-button"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 68195618_3220_1f0a_c337_b26b6731e44a
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  79b170ee_6170_9271_c7a0_b5527f29a7e1["drawer"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 79b170ee_6170_9271_c7a0_b5527f29a7e1
  80ae0a6d_36b4_7c16_76aa_95005b3b164f["sheet"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> 80ae0a6d_36b4_7c16_76aa_95005b3b164f
  ff4adc50_4c10_539a_2d63_f3d4b2f1ec61["tabs"]
  338b400d_b669_aac4_86b3_4b51ae57bf2e --> ff4adc50_4c10_539a_2d63_f3d4b2f1ec61
  style 338b400d_b669_aac4_86b3_4b51ae57bf2e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"

import { cn } from "@/lib/utils"
import { useMediaQuery } from "@/hooks/use-media-query"
import { useThemesConfig } from "@/hooks/use-themes-config"
import { ChartCopyButton } from "@/components/chart-copy-button"
import { Chart } from "@/components/chart-display"
import { V0Button } from "@/components/v0-button"
import { Button } from "@/registry/new-york/ui/button"
import {
  Drawer,
  DrawerContent,
  DrawerTrigger,
} from "@/registry/new-york/ui/drawer"
import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/registry/new-york/ui/tabs"

export function ChartCodeViewer({
  chart,
  className,
  children,
}: {
  chart: Chart
} & React.ComponentProps<"div">) {
  const [tab, setTab] = React.useState("code")
  const { themesConfig } = useThemesConfig()
  const isDesktop = useMediaQuery("(min-width: 768px)")

  const themeCode = React.useMemo(() => {
    return `\
@layer base {
  :root {
${Object.entries(themesConfig?.activeTheme.cssVars.light || {})
  .map(([key, value]) => `    ${key}: ${value};`)
  .join("\n")}
  }

  .dark {
${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
  .map(([key, value]) => `    ${key}: ${value};`)
  .join("\n")}
    }
}
`
  }, [themesConfig])

  const button = (
    <Button
      size="sm"
      variant="outline"
      className="h-6 rounded-[6px] border bg-transparent px-2 text-xs text-foreground shadow-none hover:bg-muted dark:text-foreground"
    >
      View Code
    </Button>
  )
// ... (120 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • chart-copy-button
  • chart-display
  • drawer
  • react
  • sheet
  • tabs
  • use-media-query
  • use-themes-config
  • utils
  • v0-button

Source

Frequently Asked Questions

What does chart-code-viewer.tsx do?
chart-code-viewer.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in chart-code-viewer.tsx?
chart-code-viewer.tsx defines 1 function(s): ChartCodeViewer.
What does chart-code-viewer.tsx depend on?
chart-code-viewer.tsx imports 11 module(s): button, chart-copy-button, chart-display, drawer, react, sheet, tabs, use-media-query, and 3 more.
Where is chart-code-viewer.tsx in the architecture?
chart-code-viewer.tsx is located at deprecated/www/components/chart-code-viewer.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: deprecated/www/components).

Analyze Your Own Codebase

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

Try Supermodel Free