# VChart Component - Quick Start Guide
## 🚀 Get Started in 5 Minutes
### Option 1: Standalone Demo (Easiest)
No installation required! Just open in a browser:
```bash
open src/vchart-component/demo.html
```
Features:
- ✅ Pre-loaded sample data
- ✅ All chart types (line, bar, pie, dashboard)
- ✅ Export to PNG
- ✅ MCP proxy support
- ✅ No build step needed!
### Option 2: React Component
#### Step 1: Install Dependencies
```bash
npm install @visactor/vchart react react-dom
```
#### Step 2: Import and Use
```tsx
import { VChartComponent } from './src/vchart-component';
const data = [
{
videoId: '123',
title: 'My First 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}
/>
);
}
```
That's it! 🎉
## 📊 Chart Types
### Dashboard (Recommended)
```tsx
<VChartComponent data={data} chartType="dashboard" height={600} />
```
Shows all charts in a single view.
### Line Chart
```tsx
<VChartComponent data={data} chartType="line" height={400} />
```
Views over time trend.
### Bar Chart
```tsx
<VChartComponent data={data} chartType="bar" height={400} />
```
Top 10 videos by views.
### Pie Chart
```tsx
<VChartComponent data={data} chartType="pie" height={400} />
```
Engagement breakdown (likes/comments/shares).
## 🔌 Connect to Real Data
### Using MCP Proxy
```tsx
import { fetchTikTokData } from './src/vchart-component/data-fetcher';
async function loadRealData() {
const data = await fetchTikTokData(
'C8kmbTsqoa6rBesTKRpl8nV8gHd', // App token
'tblG4uuUvbwfvI9Z', // Table ID
{
mcpProxyUrl: 'http://localhost:3000'
}
);
return data;
}
function App() {
const [data, setData] = useState([]);
useEffect(() => {
loadRealData().then(setData);
}, []);
return <VChartComponent data={data} chartType="dashboard" />;
}
```
### Start MCP Server
```bash
npm run mcp:start
```
Server runs on `http://localhost:3000`
## 🎨 Customization
### Custom Colors
```tsx
const myColors = ['#667eea', '#764ba2', '#f093fb'];
<VChartComponent
data={data}
chartType="dashboard"
colors={myColors}
/>
```
### Responsive Design
```tsx
<VChartComponent
data={data}
chartType="dashboard"
responsive={true}
height={600}
/>
```
Auto-adjusts for mobile, tablet, desktop!
### Export Chart
```tsx
import { useRef } from 'react';
function App() {
const chartRef = useRef();
const handleExport = async () => {
const image = await chartRef.current.exportImage('png');
// Download image
const link = document.createElement('a');
link.href = image;
link.download = 'chart.png';
link.click();
};
return (
<>
<button onClick={handleExport}>Export PNG</button>
<VChartComponent ref={chartRef} data={data} chartType="dashboard" />
</>
);
}
```
## 📱 Mobile Support
Works perfectly on mobile devices:
- Touch-optimized interactions
- Responsive layouts
- Adaptive font sizes
- Optimized animations
## 🧪 Testing
Run tests:
```bash
npm test
```
Or test specific files:
```bash
npm test specs.test.ts
npm test utils.test.ts
npm test data-fetcher.test.ts
```
## 🛠️ Common Issues
### "Chart not rendering"
- Ensure container has non-zero dimensions
- Check data format matches TikTokVideoData
- Open console for error messages
### "Cannot fetch data"
- Verify MCP server is running
- Check app token and table ID
- Ensure network connectivity
### "TypeScript errors"
- Run `npm install` to install all types
- Check tsconfig.json configuration
## 📚 Full Documentation
See `APPROACH_C_COMPLETE.md` for:
- Complete API reference
- Advanced features
- Performance optimization
- Production deployment
- Integration examples
## 🎯 Next Steps
1. **Try the demo**: Open `demo.html` in your browser
2. **Customize charts**: Modify colors, sizes, layouts
3. **Connect real data**: Set up MCP proxy
4. **Deploy**: Build and deploy to production
## 💡 Pro Tips
- Use `dashboard` type for comprehensive view
- Enable caching for better performance
- Set `responsive={true}` for mobile support
- Add error handlers for production use
- Export charts for reports and presentations
## 🆘 Need Help?
- Check `APPROACH_C_COMPLETE.md` for detailed docs
- Review test files for usage examples
- Open GitHub issue for bugs
- Contact: dev@hypelab.com
---
Happy charting! 📊✨
