# Approach B - Quick Reference Card
**TikTok Analytics Dashboard - aPaaS Visual Charts Deployment**
---
## Target Configuration
```
aPaaS App ID: Dffwb10dwaz6UZs6c4HlWyV3g7c
App Token: C8kmbTsqoa6rBesTKRpl8nV8gHd
Table ID: tblG4uuUvbwfvI9Z
Data Source: getTikTokData
```
---
## Quick Deployment
```bash
# 1. Generate deployment package
npm run approach-b:deploy
# 2. View guide
cat config/apaas-charts/DEPLOYMENT_GUIDE.md
# 3. Access deployment files
cd dist/apaas-deployment/
```
---
## Dashboard Components (8)
### Row 1: Metric Cards
| # | Name | File | Color | Icon |
|---|------|------|-------|------|
| 1 | Total Views | 01-metric-card-total-views.json | #3370FF | 👁️ |
| 2 | Total Likes | 02-metric-card-total-likes.json | #FF3B69 | ❤️ |
| 3 | Avg Engagement | 03-metric-card-avg-engagement.json | #00C48C | 📊 |
| 4 | Total Followers | 04-metric-card-total-followers.json | #8A5CD1 | 👥 |
### Row 2: Line Chart
| # | Name | File | Type |
|---|------|------|------|
| 5 | Views & Engagement Trend | 05-line-chart-views-engagement.json | Dual-axis |
### Row 3: Bar + Pie Charts
| # | Name | File | Type |
|---|------|------|------|
| 6 | Engagement Breakdown | 06-bar-chart-engagement-breakdown.json | Stacked Bar |
| 7 | Engagement Distribution | 07-pie-chart-engagement-distribution.json | Donut Pie |
### Row 4: Table
| # | Name | File | Features |
|---|------|------|----------|
| 8 | Video Performance | 08-table-video-performance.json | Sort, Filter, Export |
---
## Required Bitable Fields
```
✓ Date (Date)
✓ Views (Number)
✓ Likes (Number)
✓ Comments (Number)
✓ Shares (Number)
✓ Followers (Number)
✓ Engagement_Rate (Number %)
```
---
## Data Binding Cheat Sheet
### Metric Card - Sum
```javascript
{{getTikTokData.data.items.reduce((sum, item) =>
sum + (item.fields.FIELD_NAME || 0), 0)}}
```
### Line Chart - Series
```javascript
// X-Axis (Dates)
{{getTikTokData.data.items.map(i => new Date(i.fields.Date))}}
// Y-Axis (Values)
{{getTikTokData.data.items.map(i => i.fields.FIELD_NAME)}}
```
### Pie Chart - Segment
```javascript
{{getTikTokData.data.items.reduce((sum, i) =>
sum + (i.fields.FIELD_NAME || 0), 0)}}
```
### Table - Column
```javascript
{
"field": "FIELD_NAME",
"fieldPath": "fields.FIELD_NAME",
"label": "Display Name",
"type": "number"
}
```
---
## Color Palette
| Component | Primary | Background |
|-----------|---------|------------|
| Views | #3370FF | #F0F5FF |
| Likes | #FF3B69 | #FFF0F5 |
| Engagement | #00C48C | #F0FFF9 |
| Followers | #8A5CD1 | #F8F5FF |
| Comments | #3370FF | #F0F5FF |
| Shares | #00C48C | #F0FFF9 |
---
## Conditional Formatting
### Engagement Rate
```
≥15%: Green (#00C48C) - "Excellent"
≥10-15%: Blue (#3370FF) - "Good"
≥5-10%: Orange (#FA8C16) - "Fair"
<5%: Red (#F54A45) - "Needs Improvement"
```
### Views
```
≥50,000: Green, Bold
≥20,000: Blue
<10,000: Gray
```
---
## Layout Grid
```
┌────┬────┬────┬────┐
│ 1 │ 2 │ 3 │ 4 │ Row 1: Metrics (25% each)
├────┴────┴────┴────┤
│ Line Chart │ Row 2: Full width
├────┬────┬────┬────┤
│ Bar │ Pie Chart │ Row 3: 50% each
├────┴────┴────┴────┤
│ Table │ Row 4: Full width
└───────────────────┘
```
---
## Common Expressions
### Total Engagement
```javascript
{{item.fields.Likes + item.fields.Comments + item.fields.Shares}}
```
### Average Engagement Rate
```javascript
{{getTikTokData.data.items.reduce((sum, item) =>
sum + item.fields.Engagement_Rate, 0) / getTikTokData.data.items.length}}
```
### Last 30 Days
```javascript
{{getTikTokData.data.items.slice(0, 30)}}
```
### Latest Value (Followers)
```javascript
{{getTikTokData.data.items[getTikTokData.data.items.length - 1].fields.Followers}}
```
---
## Troubleshooting Quick Fixes
| Issue | Quick Fix |
|-------|-----------|
| "No data" | Check data source name: `getTikTokData` |
| Charts blank | Verify field names (case-sensitive) |
| NaN values | Add `|| 0` to expressions |
| Table empty | Check `fieldPath: "fields.FieldName"` |
| Date errors | Use `new Date(item.fields.Date)` |
---
## Testing Checklist
```
□ Data source connects
□ All 8 components render
□ Metric cards show numbers
□ Line chart has dual axes
□ Bar chart is stacked
□ Pie chart shows percentages
□ Table sorts and filters
□ Mobile layout works
```
---
## Files Generated
```
dist/apaas-deployment/
├── chart-manifest.json
├── apaas-import-package.zip
├── DEPLOYMENT_SUMMARY.txt
└── 01-08 component JSONs
```
---
## Key Commands
```bash
# Deploy
npm run approach-b:deploy
# View manifest
cat dist/apaas-deployment/chart-manifest.json
# View guide
cat config/apaas-charts/DEPLOYMENT_GUIDE.md
```
---
## Support
**Documentation:** config/apaas-charts/DEPLOYMENT_GUIDE.md
**Email:** dev@hypelab.com
**Status:** ✅ READY
---
**Quick Reference Version:** 1.0.0 | **Date:** 2025-12-09
