Hype Dash

# TikTok Analytics Dashboard - Consistency Checklist **Verification checklist for all three implementation approaches** Version: 1.0.0 Date: 2025-12-09 --- ## Table of Contents 1. [Common Configuration Consistency](#common-configuration-consistency) 2. [Approach A Checklist](#approach-a-checklist) 3. [Approach B Checklist](#approach-b-checklist) 4. [Approach C Checklist](#approach-c-checklist) 5. [Cross-Approach Validation](#cross-approach-validation) 6. [Data Quality Checks](#data-quality-checks) 7. [Visual Consistency](#visual-consistency) 8. [Performance Benchmarks](#performance-benchmarks) --- ## Common Configuration Consistency ### Database Configuration - [ ] **Base app_token** matches across all approaches - Expected: `C8kmbTsqoa6rBesTKRpl8nV8gHd` - Approach A: ________________ - Approach B: ________________ - Approach C: ________________ - [ ] **Table ID** matches across all approaches - Expected: `tblG4uuUvbwfvI9Z` - Approach A: ________________ - Approach B: ________________ - Approach C: ________________ - [ ] **Table name** is correct - Expected: `TikTok L'AURA - Candle` - Actual: ________________ - [ ] **Record count** is consistent - Expected: 150 videos - Actual: ________________ ### Field Names Verification All field names must match **exactly** (case-sensitive): - [ ] `Unique identifier of the video` - [ ] `Date and time the video was published` - [ ] `Total video views` - [ ] `Total number of likes the video received` - [ ] `Total number of comments the video received` - [ ] `Total number of times the video was shared` - [ ] `Percentage of video watched completely` - [ ] `Video description` - [ ] `Duration of the video in seconds` **Verification Command:** ```bash # Run this to verify field names npm run tiktok:analyze ``` ### Authentication Setup - [ ] **API Key is set** ```bash echo $LARK_API_KEY # Should output: your-api-key (not empty) ``` - [ ] **Region is configured** ```bash echo $LARK_REGION # Should output: sg, us, or eu ``` - [ ] **Tenant access token can be obtained** ```bash curl -X POST https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal \ -H "Content-Type: application/json" \ -d '{"app_id":"YOUR_ID","app_secret":"YOUR_SECRET"}' # Should return: {"code":0,"tenant_access_token":"..."} ``` ### Color Scheme Consistency All approaches should use the same color palette: - [ ] **Primary Blue:** `#1890ff` (Views, main metrics) - [ ] **Secondary Red:** `#ff4d4f` (Likes, engagement) - [ ] **Success Green:** `#52c41a` (Shares, positive) - [ ] **Warning Orange:** `#fa8c16` (Comments) - [ ] **Purple:** `#722ed1` (Duration, special) - [ ] **Info Cyan:** `#13c2c2` (Additional metrics) **Visual Check:** All three dashboards should look visually similar in color scheme. --- ## Approach A Checklist ### Native Bitable Dashboard Implementation #### Prerequisites - [ ] Lark API key is set - [ ] npm dependencies are installed - [ ] TypeScript is compiled (`npm run build`) - [ ] At least one dashboard exists in Bitable (for copying) #### Files Exist - [ ] `/TIKTOK_DASHBOARD_CONFIG.md` (400+ lines) - [ ] `/QUICK_START_TIKTOK.md` (122+ lines) - [ ] `/IMPLEMENTATION_SUMMARY.md` (445+ lines) - [ ] `/scripts/analyze-tiktok-data.ts` - [ ] `/scripts/copy-tiktok-dashboard.ts` - [ ] `/scripts/create-tiktok-dashboard.ts` - [ ] `/scripts/README.md` #### npm Scripts Work Test each script: - [ ] `npm run tiktok:analyze` runs without errors - Shows summary statistics - Displays top 10 videos - Calculates engagement rates - Expected output: Summary with 150 videos - [ ] `npm run tiktok:analyze:export` creates JSON file - File created: `tiktok-analysis-export.json` - File contains valid JSON - Data structure is correct - [ ] `npm run tiktok:copy` copies dashboard - Lists existing dashboards - Creates new dashboard with timestamp - Returns dashboard URL - New dashboard is accessible - [ ] `npm run tiktok:create` creates dashboard with blocks - Creates new dashboard - Adds KPI cards (4) - Adds charts (line, bar, pie) - Returns success message #### Dashboard Components Open the created dashboard and verify: ##### KPI Cards (4 total) - [ ] **Total Views Card** - Title: "Total Views" - Aggregation: SUM - Field: `Total video views` - Format: Number with thousands separator - Icon: Eye or chart icon - [ ] **Total Engagement Card** - Title: "Total Engagement" or "Total Likes" - Aggregation: SUM - Field: `Total number of likes the video received` - Format: Number with thousands separator - Icon: Heart - [ ] **Total Videos Card** - Title: "Total Videos" - Aggregation: COUNT - Format: Number - Suffix: " videos" - [ ] **Average Watch Rate Card** - Title: "Avg Watch Rate" - Aggregation: AVERAGE - Field: `Percentage of video watched completely` - Format: Percentage (X.X%) ##### Charts - [ ] **Line Chart: Views Over Time** - X-axis: `Date and time the video was published` - Y-axis: `Total video views` - Chart type: Line - Shows trend over time - [ ] **Bar Chart: Top 10 Videos** - Orientation: Horizontal - X-axis: `Total video views` - Y-axis: `Video description` or `Unique identifier of the video` - Sort: Descending by views - Limit: 10 records - [ ] **Pie Chart: Engagement Breakdown** - Segment 1: Likes (Red) - Segment 2: Comments (Blue) - Segment 3: Shares (Green) - Shows percentages - [ ] **Data Table: Full List** - All 9 fields visible - Sortable columns - Filterable - Pagination enabled #### Manual Configuration After creating via scripts, verify in UI: - [ ] Layout is organized (KPIs at top) - [ ] Charts are sized appropriately - [ ] Colors match the palette - [ ] No overlapping components - [ ] Dashboard is shareable - [ ] Mobile view is acceptable --- ## Approach B Checklist ### aPaaS Native Chart Components Implementation #### Prerequisites - [ ] aPaaS account access - [ ] Bitable permissions configured - [ ] App credentials (app_id, app_secret) - [ ] aPaaS application created #### Application Details - [ ] **aPaaS App ID:** `Dffwb10dwaz6UZs6c4HlWyV3g7c` - [ ] **Page ID:** `pgeEOroex4nCBQxc` - [ ] Application is accessible at: https://apaas.feishu.cn/app/Dffwb10dwaz6UZs6c4HlWyV3g7c #### Files Exist - [ ] `/APAAS_CHART_CONFIG.md` (975+ lines) - [ ] `/APAAS_IMPLEMENTATION_SUMMARY.md` (475+ lines) - [ ] `/config/apaas-data-request.json` (440+ lines) - [ ] `/config/INTEGRATION_GUIDE.md` (1,110+ lines) - [ ] `/config/QUICK_START.md` (246+ lines) - [ ] `/config/README.md` (440+ lines) #### Data Request Configuration - [ ] **Data request created** in aPaaS - Name: `getTikTokData` - Method: POST - URL: `https://open.feishu.cn/open-apis/bitable/v1/apps/C8kmbTsqoa6rBesTKRpl8nV8gHd/tables/tblG4uuUvbwfvI9Z/records/search` - [ ] **Authentication configured** - Type: Tenant Access Token - Token endpoint: `https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal` - App ID and Secret set - Token auto-refresh enabled - [ ] **Field mapping configured** - Date field: `Date and time the video was published` - Views field: `Total video views` - Likes field: `Total number of likes the video received` - Comments field: `Total number of comments the video received` - Shares field: `Total number of times the video was shared` - [ ] **Request parameters set** - page_size: 500 - field_names: All 9 fields - Sort by date: ascending - [ ] **Data request test successful** - Preview shows data - Returns 150 records - All fields present - No errors in response #### Components Added ##### Metric Cards (4) - [ ] **Total Views Metric Card** - Component: MetricCard - Data binding: `{{sum(getTikTokData.data.items.map(i => i.fields["Total video views"]))}}` - Format: Compact number - Icon: 👁️ - [ ] **Total Likes Metric Card** - Component: MetricCard - Data binding: `{{sum(getTikTokData.data.items.map(i => i.fields["Total number of likes the video received"]))}}` - Format: Compact number - Icon: ❤️ - [ ] **Average Engagement Rate Metric Card** - Component: MetricCard - Data binding: Calculated from likes/comments/shares - Format: Percentage - Icon: 📊 - [ ] **Total Followers Metric Card** (if applicable) - Component: MetricCard - Format: Compact number - Icon: 👥 ##### Charts (3+) - [ ] **Line Chart: Views & Engagement Trend** - Component: LineChart - X-axis: Date field - Y-axis (left): Views - Y-axis (right): Engagement Rate - Dual-axis configured - Smooth lines enabled - Interactive tooltips - [ ] **Bar Chart: Engagement Breakdown** - Component: BarChart - Orientation: Vertical or Horizontal - Series 1: Likes (Red #ff4d4f) - Series 2: Comments (Blue #1890ff) - Series 3: Shares (Green #52c41a) - Stacked or grouped configuration - [ ] **Pie Chart: Engagement Distribution** - Component: PieChart - Type: Donut - Segments: Likes, Comments, Shares - Shows percentages - Legend enabled - Outside labels #### Interactions & Events - [ ] **Date Range Filter** - Component: DateRangePicker - Default: Last 30 days - Affects all charts - Updates on change - [ ] **Filter Connections** - Date filter → Line chart (updates) - Date filter → Bar chart (updates) - Date filter → Pie chart (updates) - Date filter → Metric cards (updates) - [ ] **Click Events** - Chart clicks trigger actions - Detail views open - Navigation works (if configured) #### Testing - [ ] **Preview Mode** - All components visible - Data loads correctly - No console errors - Interactions work - [ ] **Published Version** - Published successfully - Accessible to users - Permissions set correctly - Mobile view works - [ ] **Performance** - Page loads in < 3 seconds - Charts render smoothly - No lag on interactions --- ## Approach C Checklist ### Custom VChart Component Implementation #### Prerequisites - [ ] Node.js >= 16.0.0 installed - [ ] npm >= 8.0.0 installed - [ ] TypeScript >= 5.0.0 installed - [ ] React knowledge (for development) - [ ] aPaaS account for deployment #### Dependencies Installed - [ ] `@visactor/vchart@^1.11.0` - [ ] `@visactor/lark-vchart@^1.0.0` - [ ] `react@^18.0.0` - [ ] `react-dom@^18.0.0` - [ ] `@types/react@^18.0.0` - [ ] `@types/react-dom@^18.0.0` **Verification:** ```bash npm list @visactor/vchart @visactor/lark-vchart react react-dom ``` #### Files Exist - [ ] `/VCHART_COMPONENT_GUIDE.md` (616+ lines) - [ ] `/VCHART_IMPLEMENTATION_SUMMARY.md` (474+ lines) - [ ] `/VCHART_QUICKSTART.md` - [ ] `/src/vchart-component/index.tsx` (195+ lines) - [ ] `/src/vchart-component/specs/line-chart.ts` (120+ lines) - [ ] `/src/vchart-component/specs/bar-chart.ts` (115+ lines) - [ ] `/src/vchart-component/specs/pie-chart.ts` (100+ lines) - [ ] `/src/vchart-component/specs/dashboard.ts` (180+ lines) - [ ] `/src/vchart-component/specs/index.ts` - [ ] `/src/vchart-component/component/tiktok-dashboard/index.tsx` (150+ lines) - [ ] `/src/vchart-component/component/tiktok-dashboard/model.ts` (135+ lines) - [ ] `/src/vchart-component/component/tiktok-dashboard/meta.ts` (65+ lines) - [ ] `/src/vchart-component/component/tiktok-dashboard/index.meta.json` (75+ lines) - [ ] `/scripts/deploy-vchart-component.sh` - [ ] `/scripts/setup-vchart-component.sh` #### Build Process - [ ] **TypeScript compilation succeeds** ```bash npm run build # Should complete without errors ``` - [ ] **Output files generated** - [ ] `dist/vchart-component/index.js` - [ ] `dist/vchart-component/index.d.ts` - [ ] `dist/vchart-component/specs/*.js` - [ ] `dist/vchart-component/component/tiktok-dashboard/*.js` - [ ] **Deployment package created** ```bash npm run vchart:deploy # Should create: dist/vchart-component/component/tiktok-analytics-dashboard.zip ``` - [ ] **Package structure is correct** ```bash unzip -l dist/vchart-component/component/tiktok-analytics-dashboard.zip # Should contain: index.js, index.meta.json, meta.js, model.js ``` #### Component Metadata Verify `index.meta.json`: - [ ] **Component ID:** `tiktok-analytics-dashboard` - [ ] **Version:** `1.0.0` - [ ] **Names defined:** - English: "TikTok Analytics Dashboard" - Chinese: "TikTok 分析仪表板" - [ ] **Props defined:** - [ ] `tableId` (string, required) - [ ] `chartType` (enum: line, bar, pie, dashboard) - [ ] `refreshInterval` (number, default: 0) - [ ] `height` (number, default: 600) - [ ] **Events defined:** - [ ] `onChartClick` - [ ] `onDataLoad` - [ ] `onError` - [ ] **Methods defined:** - [ ] `refresh` - [ ] `exportImage` - [ ] `getData` #### Chart Specifications ##### Line Chart Spec - [ ] **Data structure correct** - Fields: datePublished, views - Data sorted by date - Dates formatted - [ ] **Visual configuration** - Type: 'line' - Color: #1890ff (TikTok blue) - Smooth line enabled - Points visible - Grid lines shown - [ ] **Axes configured** - X-axis: Time scale, formatted as "Mon DD" - Y-axis: Linear scale, formatted with K/M notation ##### Bar Chart Spec - [ ] **Data structure correct** - Top 10 videos - Sorted by views descending - Titles truncated if needed - [ ] **Visual configuration** - Type: 'bar' - Direction: 'horizontal' - Gradient fill colors - Value labels on bars ##### Pie Chart Spec - [ ] **Data structure correct** - Three segments: Likes, Comments, Shares - Aggregated values - [ ] **Visual configuration** - Type: 'pie' - Inner radius: 0.5 (donut style) - Colors: Red, Blue, Green - Outside labels with percentages ##### Dashboard Spec - [ ] **Layout configured** - Grid: 2x2 - Line chart: Full width top - Bar chart: Bottom left - Pie chart: Bottom right - [ ] **All sub-charts included** - Uses line chart spec - Uses bar chart spec - Uses pie chart spec #### Component Functionality - [ ] **Props validation** - Required props enforced - Default props applied - Type checking works - [ ] **Data fetching** - Fetches from Bitable API - Handles pagination - Transforms data correctly - Error handling works - [ ] **Auto-refresh** - Refresh interval respected - Data updates automatically - No memory leaks - [ ] **Events** - onChartClick fires on click - onDataLoad fires on load - onError fires on error - Event data is correct - [ ] **Methods (via ref)** - refresh() works - exportImage() works - getData() returns data #### Testing - [ ] **Unit Tests** (if implemented) - Component renders - Handles empty data - Handles errors - Props validation - [ ] **Integration Tests** - Fetches real data - Charts render correctly - Interactions work - Export works - [ ] **Browser Compatibility** - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) #### Deployment to aPaaS - [ ] **ZIP uploaded to aPaaS** - File: tiktok-analytics-dashboard.zip - Size: < 5MB - Upload successful - [ ] **Component registered** - Component ID: tiktok-analytics-dashboard - Version: 1.0.0 - Status: Active - [ ] **Component available in library** - Appears in component picker - Can be dragged to canvas - Props editor works - [ ] **Component works in aPaaS** - Renders on page - Fetches data from Bitable - Charts display correctly - Events work - No console errors #### Usage Example - [ ] **Basic usage works** ```tsx <TikTokDashboard tableId="tblG4uuUvbwfvI9Z" chartType="dashboard" /> ``` - [ ] **With props works** ```tsx <TikTokDashboard tableId="tblG4uuUvbwfvI9Z" chartType="line" height={400} refreshInterval={60} /> ``` - [ ] **With events works** ```tsx <TikTokDashboard tableId="tblG4uuUvbwfvI9Z" onDataLoad={(e) => console.log(e.recordCount)} onChartClick={(d) => console.log(d.videoId)} /> ``` - [ ] **With ref works** ```tsx const ref = useRef(); <TikTokDashboard ref={ref} tableId="tblG4uuUvbwfvI9Z" /> // ref.current.refresh() ``` --- ## Cross-Approach Validation ### Visual Consistency Open dashboards from all three approaches side-by-side: - [ ] **Color schemes match** - Primary blue is the same shade - Red for likes is consistent - Green for shares is consistent - All colors from palette used - [ ] **Layout is similar** - KPI cards at top (all approaches) - Main chart prominently displayed - Engagement breakdown visible - Data accessible - [ ] **Metrics match** - Total Views: ________________ - Approach A: ________________ - Approach B: ________________ - Approach C: ________________ - Total Likes: ________________ - Approach A: ________________ - Approach B: ________________ - Approach C: ________________ - Total Videos: 150 - Approach A: ________________ - Approach B: ________________ - Approach C: ________________ - Avg Watch Rate: ________________ - Approach A: ________________ - Approach B: ________________ - Approach C: ________________ ### Data Consistency - [ ] **Same data source used** - All use table: tblG4uuUvbwfvI9Z - All use base: C8kmbTsqoa6rBesTKRpl8nV8gHd - [ ] **Same field names referenced** - All approaches use exact field names - No discrepancies in naming - [ ] **Same aggregations applied** - Views: SUM (all approaches) - Likes: SUM (all approaches) - Videos: COUNT (all approaches) - Watch Rate: AVG (all approaches) - [ ] **Data freshness** - All show latest data - Refresh/reload updates all ### Functional Consistency - [ ] **All support auto-refresh** - Approach A: Manual or scheduled - Approach B: Configurable interval - Approach C: Configurable interval - [ ] **All support filtering** - Approach A: Dashboard filters - Approach B: Date range filter - Approach C: Programmatic filters - [ ] **All show same visualizations** - KPI cards: 4 in all - Line chart: Yes in all - Bar chart: Yes in all - Pie chart: Yes in all --- ## Data Quality Checks ### Before Implementation - [ ] **All 150 records exist** ```bash npm run tiktok:analyze # Should show: Total Videos: 150 ``` - [ ] **No null critical fields** - Video ID: No nulls - Views: No nulls - Date published: No nulls - [ ] **Date format consistent** - All dates in millisecond timestamp format - All dates within reasonable range (2023-2025) - [ ] **Numeric fields are numbers** - Views: All numeric - Likes: All numeric - Comments: All numeric - Shares: All numeric - Watch %: All numeric (0-100) - Duration: All numeric (positive) - [ ] **No extreme outliers** - Views: < 100M - Likes: < 10M - Watch %: 0-100 - Duration: < 600 seconds ### During Implementation - [ ] **Field names resolve** - API returns expected fields - No "field not found" errors - [ ] **Aggregations compute** - SUM works for Views - AVG works for Watch Rate - COUNT works for Videos - [ ] **Charts populate** - No "No data" messages - All charts show data - Legends are correct ### After Implementation - [ ] **Spot check accuracy** - Pick 3 random videos - Verify metrics in dashboard match Bitable - Check calculations are correct - [ ] **Totals are reasonable** - Total views: Millions (not billions) - Total likes: Hundreds of thousands - Avg watch rate: 50-80% --- ## Visual Consistency ### Typography - [ ] **Font families consistent** - Sans-serif for UI - Monospace for numbers (optional) - [ ] **Font sizes consistent** - KPI values: Large (24-32px) - Chart labels: Medium (12-14px) - Legends: Small (10-12px) ### Spacing - [ ] **Consistent padding** - KPI cards: Similar padding - Charts: Similar margins - Overall layout: Balanced spacing - [ ] **Grid alignment** - Components align to grid - No overlapping elements - Even spacing between components ### Colors - [ ] **Brand colors used** - TikTok blues, reds, greens - Consistent across approaches - [ ] **Accessibility** - Sufficient contrast ratios - Color-blind friendly palette - Text readable on backgrounds ### Iconography - [ ] **Icons consistent** - Same icons for same metrics - Eye for views - Heart for likes - Chart for engagement rate --- ## Performance Benchmarks ### Load Time Test each approach with same dataset: - [ ] **Approach A: Initial load** - Time: _______ seconds - Target: < 5 seconds - [ ] **Approach B: Initial load** - Time: _______ seconds - Target: < 3 seconds - [ ] **Approach C: Initial load** - Time: _______ seconds - Target: < 3 seconds ### Refresh Time - [ ] **Approach A: Manual refresh** - Time: _______ seconds - Target: < 2 seconds - [ ] **Approach B: Auto-refresh** - Time: _______ seconds - Target: < 2 seconds - [ ] **Approach C: Auto-refresh** - Time: _______ seconds - Target: < 2 seconds ### Memory Usage Use browser DevTools to check: - [ ] **Approach A: Memory** - Usage: _______ MB - Target: < 100 MB - [ ] **Approach B: Memory** - Usage: _______ MB - Target: < 150 MB - [ ] **Approach C: Memory** - Usage: _______ MB - Target: < 200 MB (includes VChart) ### API Calls - [ ] **Approach A: API efficiency** - Calls per load: _______ - Target: < 5 calls - [ ] **Approach B: API efficiency** - Calls per load: _______ - Target: < 3 calls - [ ] **Approach C: API efficiency** - Calls per load: _______ - Target: < 2 calls --- ## Final Verification ### Documentation Complete - [ ] All approach-specific docs exist - [ ] UNIFIED_DASHBOARD_GUIDE.md created - [ ] CONSISTENCY_CHECKLIST.md created (this file) - [ ] run-all-approaches.sh created - [ ] package.json updated with all scripts ### Scripts Functional - [ ] All npm scripts run without errors - [ ] All bash scripts are executable - [ ] All scripts have proper error handling ### Approaches Work Independently - [ ] Approach A works standalone - [ ] Approach B works standalone - [ ] Approach C works standalone ### Visual Parity - [ ] All three approaches produce similar-looking dashboards - [ ] Metrics are consistent across approaches - [ ] User experience is comparable ### Documentation Quality - [ ] All docs have table of contents - [ ] All docs have examples - [ ] All docs have troubleshooting sections - [ ] All docs cross-reference each other ### Ready for Production - [ ] All checklists above are complete - [ ] All tests pass - [ ] Performance is acceptable - [ ] Documentation is thorough --- ## Sign-Off ### Approach A Sign-Off - [ ] Tested by: ________________ - [ ] Date: ________________ - [ ] Status: ⬜ Pass ⬜ Fail - [ ] Notes: ________________ ### Approach B Sign-Off - [ ] Tested by: ________________ - [ ] Date: ________________ - [ ] Status: ⬜ Pass ⬜ Fail - [ ] Notes: ________________ ### Approach C Sign-Off - [ ] Tested by: ________________ - [ ] Date: ________________ - [ ] Status: ⬜ Pass ⬜ Fail - [ ] Notes: ________________ ### Overall Project Sign-Off - [ ] All approaches functional - [ ] Documentation complete - [ ] Consistency verified - [ ] Ready for deployment **Approved by:** ________________ **Date:** ________________ **Version:** 1.0.0 --- ## Maintenance Schedule ### Weekly - [ ] Verify API access still works - [ ] Check data is updating - [ ] Monitor dashboard performance ### Monthly - [ ] Review and update documentation - [ ] Check for Lark API changes - [ ] Update dependencies (Approach C) - [ ] Verify all examples still work ### Quarterly - [ ] Full regression test - [ ] Update version numbers - [ ] Review and improve performance - [ ] Gather user feedback --- **Version:** 1.0.0 **Last Updated:** 2025-12-09 **Maintainer:** HypeLab Development Team