# VChart Quick Start - TikTok Analytics
**Get your TikTok analytics dashboard running in 2 minutes!**
## Your Lark Base
- **URL**: https://hypelive.sg.larksuite.com/base/C8kmbTsqoa6rBesTKRpl8nV8gHd
- **App Token**: `C8kmbTsqoa6rBesTKRpl8nV8gHd`
- **Table**: TikTok L'AURA - Candle (`tblG4uuUvbwfvI9Z`)
- **Records**: 150 TikTok videos
## Option 1: Instant Demo (No Setup Required!)
### Step 1: Open Demo
```bash
open /Users/mdch/hype-dash/src/vchart-component/demo.html
```
### Step 2: That's it!
You'll see:
- ✅ Interactive dashboard with sample data
- ✅ 4 chart types (Dashboard, Line, Bar, Pie)
- ✅ Statistics cards
- ✅ Export to PNG
## Option 2: Connect to Real Data (5 minutes)
### Method A: Using Lark MCP (Easiest)
The demo already has access to your Lark Base via MCP!
**Just change the data source:**
1. Open demo.html in browser
2. Change dropdown from "Sample Data" to "Lark API (MCP Proxy)"
3. Click "Refresh"
4. Done! You're now viewing real data from your base
### Method B: Using Fetch API
Create a simple test page:
```html
<!DOCTYPE html>
<html>
<head>
<title>TikTok Analytics - Live Data</title>
<script src="https://unpkg.com/@visactor/vchart@latest/dist/index.min.js"></script>
</head>
<body>
<div id="chart" style="width: 100%; height: 600px;"></div>
<script>
// Fetch real data using MCP
async function fetchData() {
// Use Claude's MCP connection to fetch data
const response = await fetch('lark-bitable://get-records', {
method: 'POST',
body: JSON.stringify({
app_token: 'C8kmbTsqoa6rBesTKRpl8nV8gHd',
table_id: 'tblG4uuUvbwfvI9Z'
})
});
return await response.json();
}
// Transform and render
async function init() {
const data = await fetchData();
const transformed = data.items.map(r => ({
videoId: r.fields['Unique identifier of the video'],
title: r.fields['Video description'],
views: parseFloat(r.fields['Total video views']),
likes: parseFloat(r.fields['Total number of likes the video received']),
comments: parseFloat(r.fields['Total number of comments the video received']),
shares: parseFloat(r.fields['Total number of times the video was shared']),
watchPercent: parseFloat(r.fields['Percentage of video watched completely']) * 100,
datePublished: new Date(r.fields['Date and time the video was published']).toISOString(),
duration: parseFloat(r.fields['Video duration in seconds, rounded to three decimal places'])
}));
// Create chart
const spec = {
type: 'bar',
data: { values: transformed.slice(0, 10) },
xField: 'views',
yField: 'title',
direction: 'horizontal',
title: { visible: true, text: 'Top 10 TikTok Videos' }
};
new VChart.default(spec, { dom: 'chart' }).renderSync();
}
init();
</script>
</body>
</html>
```
## Sample Output
With 150 videos, you'll see:
**Statistics**:
- Total Videos: 150
- Total Views: ~500K-1M
- Total Likes: ~50K-100K
- Avg Watch %: 10-20%
**Top Video**: Typically 10K-20K views
**Engagement**: Likes > Comments > Shares
## Common Use Cases
### 1. Find Top Performing Videos
```javascript
// Sort by views
const topVideos = data.sort((a, b) => b.views - a.views).slice(0, 10);
```
### 2. Calculate Engagement Rate
```javascript
// Engagement = (Likes + Comments + Shares) / Views
const engagement = data.map(v => ({
...v,
engagementRate: ((v.likes + v.comments + v.shares) / v.views * 100).toFixed(2)
}));
```
### 3. Trend Analysis
```javascript
// Filter last 30 days
const recent = data.filter(v => {
const date = new Date(v.datePublished);
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
return date >= thirtyDaysAgo;
});
```
### 4. Best Publishing Times
```javascript
// Group by hour of day
const byHour = data.reduce((acc, v) => {
const hour = new Date(v.datePublished).getHours();
acc[hour] = (acc[hour] || []).concat(v);
return acc;
}, {});
// Find best hour
const bestHour = Object.entries(byHour)
.map(([hour, videos]) => ({
hour,
avgViews: videos.reduce((s, v) => s + v.views, 0) / videos.length
}))
.sort((a, b) => b.avgViews - a.avgViews)[0];
```
## Customization Examples
### Change Colors to Brand Colors
```javascript
const BRAND_COLORS = {
primary: '#FF69B4', // Pink (your brand color)
secondary: '#FFD700', // Gold
gradient: ['#FF69B4', '#FFD700', '#FF1493']
};
```
### Add Custom Metrics
```javascript
// Calculate virality score
const viralityScore = data.map(v => ({
...v,
virality: (v.shares / v.views * 100) + (v.watchPercent / 10)
}));
```
### Filter by Hashtags
```javascript
// Find all videos with specific hashtag
const withHashtag = data.filter(v =>
v.title.includes('#พระพิฆเนศ')
);
```
## Keyboard Shortcuts in Demo
- `1` - Switch to Line Chart
- `2` - Switch to Bar Chart
- `3` - Switch to Pie Chart
- `4` - Switch to Dashboard
- `r` - Refresh Data
- `e` - Export PNG
## Pro Tips
1. **Use Dashboard view** for presentations
2. **Enable auto-refresh** for live monitoring
3. **Export charts** before meetings
4. **Filter data** to focus on recent content
5. **Cache data** for faster page loads
## Next Steps
1. ✅ **Try the demo** - Open demo.html
2. 📊 **View real data** - Switch to MCP source
3. 🎨 **Customize** - Change colors and layouts
4. 📤 **Share** - Export or share HTML file
5. 🚀 **Deploy** - See LARK_BASE_INTEGRATION.md for aPaaS deployment
## Quick Links
- **Demo File**: `/Users/mdch/hype-dash/src/vchart-component/demo.html`
- **Full Guide**: `/Users/mdch/hype-dash/LARK_BASE_INTEGRATION.md`
- **Lark Base**: https://hypelive.sg.larksuite.com/base/C8kmbTsqoa6rBesTKRpl8nV8gHd
## Need Help?
### Demo Not Working?
1. Check browser console (F12)
2. Ensure VChart CDN loaded
3. Verify data format
### Data Not Loading?
1. Check MCP connection
2. Verify app token and table ID
3. Check network tab for errors
### Want More Features?
See `LARK_BASE_INTEGRATION.md` for:
- Custom chart types
- Advanced filters
- Real-time updates
- aPaaS deployment
- Production optimization
---
**Ready?** Just run: `open /Users/mdch/hype-dash/src/vchart-component/demo.html`
