mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
102 lines
2.4 KiB
Plaintext
102 lines
2.4 KiB
Plaintext
---
|
|
title: Advanced Chart
|
|
description: Full-featured TradingView chart with symbol switching and timeframes.
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview
|
|
name="advanced-chart"
|
|
description="Interactive financial chart with advanced features"
|
|
/>
|
|
|
|
## Installation
|
|
|
|
<Tabs defaultValue="cli">
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx @hanzo/ui@latest add advanced-chart
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @hanzo/ui
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="advanced-chart" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { AdvancedChart } from "@hanzo/ui/finance"
|
|
|
|
export default function Demo() {
|
|
return <AdvancedChart symbol="NASDAQ:AAPL" interval="D" theme="dark" />
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --------------- | ----------------- | ------------- | ------------------------------------------ |
|
|
| symbol | string | "NASDAQ:AAPL" | Trading symbol to display |
|
|
| interval | string | "D" | Chart interval (1, 5, 15, 30, 60, D, W, M) |
|
|
| theme | "light" \| "dark" | "dark" | Color theme |
|
|
| width | string \| number | "100%" | Chart width |
|
|
| height | string \| number | 500 | Chart height |
|
|
| autosize | boolean | true | Auto-resize to container |
|
|
| hideTopToolbar | boolean | false | Hide top toolbar |
|
|
| hideSideToolbar | boolean | false | Hide side toolbar |
|
|
| saveImage | boolean | true | Enable save image |
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
```tsx
|
|
<AdvancedChart symbol="NASDAQ:AAPL" />
|
|
```
|
|
|
|
### Custom Styling
|
|
|
|
```tsx
|
|
<AdvancedChart
|
|
symbol="BINANCE:BTCUSDT"
|
|
theme="light"
|
|
height={600}
|
|
hideTopToolbar={true}
|
|
/>
|
|
```
|
|
|
|
### Multiple Symbols
|
|
|
|
```tsx
|
|
<div className="grid gap-4">
|
|
<AdvancedChart symbol="NASDAQ:AAPL" />
|
|
<AdvancedChart symbol="NASDAQ:GOOGL" />
|
|
</div>
|
|
```
|