# VChart Component Quick Start Guide
Get up and running with the TikTok Analytics VChart component in 5 minutes.
## Prerequisites
- Node.js >= 16.0.0
- npm >= 8.0.0
- Lark aPaaS account
- Bitable table with TikTok data
## Installation
### Step 1: Install Dependencies
```bash
cd /Users/mdch/hype-dash
./scripts/setup-vchart-component.sh
```
Or manually:
```bash
npm install @visactor/vchart @visactor/lark-vchart react react-dom
npm install -D @types/react @types/react-dom
```
### Step 2: Build Component
```bash
npm run build
```
## Usage
### Basic Example
```tsx
import { VChartComponent } from './src/vchart-component';
const data = [
{
videoId: '123',
title: 'My Video',
views: 1000000,
likes: 50000,
comments: 2000,
shares: 1000,
watchPercent: 75,
datePublished: '2025-01-01',
duration: 45
}
];
function App() {
return (
<VChartComponent
data={data}
chartType="dashboard"
height={600}
/>
);
}
```
### In Lark aPaaS
```tsx
import { TikTokDashboard } from '@components/tiktok-analytics-dashboard';
function MyApp() {
return (
<TikTokDashboard
tableId="tblG4uuUvbwfvI9Z"
chartType="dashboard"
height={600}
refreshInterval={60}
/>
);
}
```
## Deployment
### Step 1: Build Package
```bash
npm run vchart:deploy
```
### Step 2: Upload to aPaaS
1. Open Lark Developer Console: https://open.feishu.cn/app
2. Navigate to Custom Components
3. Upload: `dist/vchart-component/component/tiktok-analytics-dashboard.zip`
4. Publish component
## Chart Types
### Line Chart - Views Over Time
```tsx
<VChartComponent data={data} chartType="line" height={400} />
```
### Bar Chart - Top 10 Videos
```tsx
<VChartComponent data={data} chartType="bar" height={400} />
```
### Pie Chart - Engagement Breakdown
```tsx
<VChartComponent data={data} chartType="pie" height={400} />
```
### Dashboard - Combined View
```tsx
<VChartComponent data={data} chartType="dashboard" height={600} />
```
## Data Format
Your Bitable table must have these fields:
| Field | Type | Required |
|-------|------|----------|
| Video ID | Text | Yes |
| Title | Text | Yes |
| Views | Number | Yes |
| Likes | Number | No |
| Comments | Number | No |
| Shares | Number | No |
| Watch % | Number | No |
| Date published | Date | Yes |
| Duration | Number | No |
## Common Issues
### Dependencies Not Found
```bash
npm install --save @visactor/vchart react react-dom
```
### Build Errors
```bash
npm run build
# Check tsconfig.json has jsx: "react"
```
### Component Not Loading in aPaaS
- Verify table ID is correct
- Check Bitable SDK is available
- Review browser console for errors
## Next Steps
1. Read full guide: `/VCHART_COMPONENT_GUIDE.md`
2. Check examples: `/src/vchart-component/example.tsx`
3. Review implementation: `/VCHART_IMPLEMENTATION_SUMMARY.md`
## Support
- Documentation: `/VCHART_COMPONENT_GUIDE.md`
- Issues: GitHub Issues
- Email: dev@hypelab.com
