# TikTok Analytics VChart Component
**Production-ready React component for visualizing TikTok video analytics in Lark aPaaS using VChart.**
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://www.visactor.io/vchart)
[](LICENSE)
## 🚀 Quick Start
### Option 1: Standalone Demo (No Installation)
Open `demo.html` directly in your browser - no build step required!
```bash
open demo.html
```
### Option 2: React Component
#### Installation
```bash
npm install @visactor/vchart react react-dom
```
#### Basic Usage
```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-15',
duration: 45
}
];
function App() {
return (
<VChartComponent
data={data}
chartType="dashboard"
height={600}
responsive={true}
/>
);
}
```
**See [QUICK_START.md](QUICK_START.md) for detailed instructions.**
## Available Chart Types
### 1. Line Chart
Shows views over time trend.
```tsx
<VChartComponent data={data} chartType="line" height={400} />
```
### 2. Bar Chart
Displays top 10 videos by views.
```tsx
<VChartComponent data={data} chartType="bar" height={400} />
```
### 3. Pie Chart
Shows engagement breakdown (likes/comments/shares).
```tsx
<VChartComponent data={data} chartType="pie" height={400} />
```
### 4. Dashboard
Combined multi-chart view.
```tsx
<VChartComponent data={data} chartType="dashboard" height={600} />
```
## 📁 Component Structure
```
src/vchart-component/
├── index.tsx # Main VChart component
├── types.ts # TypeScript type definitions
├── utils.ts # Utility functions
├── data-fetcher.ts # Data fetcher with MCP proxy
├── responsive.ts # Responsive design utilities
├── export.ts # Public API exports
├── demo.html # Standalone demo (no build!)
├── deploy.sh # Deployment script
├── package.json # Package configuration
├── tsconfig.json # TypeScript config
├── jest.config.js # Test configuration
│
├── specs/ # VChart specifications
│ ├── index.ts # Spec exports
│ ├── line-chart.ts # Views over time
│ ├── bar-chart.ts # Top videos
│ ├── pie-chart.ts # Engagement breakdown
│ └── dashboard.ts # Combined view
│
├── component/ # aPaaS integration
│ └── tiktok-dashboard/
│ ├── index.tsx # Dashboard component
│ ├── meta.ts # Metadata & types
│ ├── model.ts # Data hooks
│ └── index.meta.json # aPaaS manifest
│
├── __tests__/ # Unit tests
│ ├── specs.test.ts # Chart spec tests
│ ├── utils.test.ts # Utility tests
│ └── data-fetcher.test.ts # Data fetcher tests
│
└── Documentation
├── README.md # This file
├── QUICK_START.md # Quick start guide
└── IMPLEMENTATION_SUMMARY.md # Complete summary
```
**Complete documentation**: See [APPROACH_C_COMPLETE.md](/APPROACH_C_COMPLETE.md) in project root.
## Data Format
```typescript
interface TikTokVideoData {
videoId: string;
title: string;
views: number;
likes: number;
comments: number;
shares: number;
watchPercent: number;
datePublished: string;
duration: number;
}
```
## ✨ Features
### Visualizations
- ✅ **4 Chart Types**: Line, Bar, Pie, and Dashboard views
- ✅ **Interactive Tooltips**: Hover for detailed information
- ✅ **Smooth Animations**: Professional animations with easing
- ✅ **TikTok Colors**: Brand-consistent color scheme
- ✅ **Export**: Save charts as PNG, SVG, or JPEG
### Data & Integration
- ✅ **Multiple Sources**: Direct API, MCP Proxy, or Bitable SDK
- ✅ **Auto Caching**: Built-in 60-second cache
- ✅ **Auto Refresh**: Configurable refresh intervals
- ✅ **Data Validation**: Type-safe data transformation
- ✅ **Error Handling**: Comprehensive error boundaries
### Developer Experience
- ✅ **Full TypeScript**: 100% type coverage
- ✅ **Unit Tests**: Complete test suite included
- ✅ **Standalone Demo**: No build required
- ✅ **Responsive**: Mobile, tablet, desktop support
- ✅ **Well Documented**: Extensive guides and examples
### Production Ready
- ✅ **Performance**: Optimized for large datasets
- ✅ **Accessibility**: ARIA labels and keyboard navigation
- ✅ **Browser Support**: Chrome, Firefox, Safari, Edge
- ✅ **Error Recovery**: Graceful degradation
- ✅ **Loading States**: Proper loading indicators
## Customization
### Colors
Edit `TIKTOK_COLORS` in `index.tsx`:
```typescript
export const TIKTOK_COLORS = {
primary: '#1890ff',
secondary: '#ff4d4f',
success: '#52c41a',
warning: '#faad14',
info: '#13c2c2'
};
```
### Chart Specifications
Customize individual chart specs in the `specs/` directory.
## Browser Support
- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90
## License
MIT
