/**
* VChart TikTok Analytics Dashboard - Example Usage
*
* This example demonstrates how to use the TikTok Analytics Dashboard
* component in different scenarios.
*/
import { TikTokDataTransformer } from '../src/vchart-component/utils';
import type { TikTokVideoRecord } from '../src/vchart-component/types';
// Sample TikTok video data
const sampleData: TikTokVideoRecord[] = [
{
video_id: 'vid001',
video_title: 'How to Create Viral TikTok Content',
publish_date: '2024-12-01T10:00:00Z',
views: 1250000,
likes: 85000,
comments: 3200,
shares: 12000,
saves: 8500,
duration_seconds: 45,
video_url: 'https://tiktok.com/@user/video/001',
},
{
video_id: 'vid002',
video_title: 'Top 10 TikTok Trends 2024',
publish_date: '2024-12-02T14:30:00Z',
views: 980000,
likes: 67000,
comments: 2100,
shares: 9500,
saves: 6200,
duration_seconds: 60,
video_url: 'https://tiktok.com/@user/video/002',
},
{
video_id: 'vid003',
video_title: 'Behind the Scenes - Content Creation',
publish_date: '2024-12-03T09:15:00Z',
views: 750000,
likes: 52000,
comments: 1800,
shares: 7200,
saves: 4500,
duration_seconds: 90,
video_url: 'https://tiktok.com/@user/video/003',
},
{
video_id: 'vid004',
video_title: 'TikTok Algorithm Explained',
publish_date: '2024-12-04T16:45:00Z',
views: 1500000,
likes: 95000,
comments: 4200,
shares: 15000,
saves: 11000,
duration_seconds: 120,
video_url: 'https://tiktok.com/@user/video/004',
},
{
video_id: 'vid005',
video_title: 'Quick Tips for Growing Your Audience',
publish_date: '2024-12-05T11:20:00Z',
views: 650000,
likes: 45000,
comments: 1500,
shares: 6000,
saves: 3800,
duration_seconds: 30,
video_url: 'https://tiktok.com/@user/video/005',
},
];
/**
* Example 1: Transform data for different chart types
*/
console.log('=== Example 1: Data Transformation ===\n');
// Transform to views over time
const viewsOverTime = TikTokDataTransformer.toViewsOverTime(sampleData);
console.log('Views Over Time Data:');
console.log(JSON.stringify(viewsOverTime, null, 2));
console.log('\n');
// Transform to top videos
const topVideos = TikTokDataTransformer.toTopVideos(sampleData, 5);
console.log('Top 5 Videos:');
console.log(JSON.stringify(topVideos, null, 2));
console.log('\n');
// Transform to engagement breakdown
const engagement = TikTokDataTransformer.toEngagementBreakdown(sampleData);
console.log('Engagement Breakdown:');
console.log(JSON.stringify(engagement, null, 2));
console.log('\n');
/**
* Example 2: Calculate metrics
*/
console.log('=== Example 2: Calculate Metrics ===\n');
const metrics = TikTokDataTransformer.calculateMetrics(sampleData);
console.log('Total Views:', metrics.totalViews.toLocaleString());
console.log('Total Likes:', metrics.totalLikes.toLocaleString());
console.log('Total Comments:', metrics.totalComments.toLocaleString());
console.log('Total Shares:', metrics.totalShares.toLocaleString());
console.log('Total Saves:', metrics.totalSaves.toLocaleString());
console.log('Average Engagement Rate:', metrics.averageEngagementRate.toFixed(2) + '%');
console.log('Top Performing Video:', metrics.topPerformingVideo.video_title);
console.log('\n');
/**
* Example 3: Complete dashboard data
*/
console.log('=== Example 3: Dashboard Data ===\n');
const dashboardData = TikTokDataTransformer.toDashboardData(sampleData);
console.log('Dashboard Data Structure:');
console.log(JSON.stringify(dashboardData, null, 2));
console.log('\n');
/**
* Example 4: React Component Usage (TypeScript)
*/
console.log('=== Example 4: React Component Usage ===\n');
const reactExample = `
import React from 'react';
import TikTokAnalyticsChart from './src/vchart-component';
// Example 4a: Line Chart
const LineChartExample = () => {
const viewsData = ${JSON.stringify(viewsOverTime, null, 2)};
return (
<TikTokAnalyticsChart
chartType="line"
viewsOverTimeData={viewsData}
width="100%"
height={400}
onChartReady={(chart) => console.log('Chart ready:', chart)}
onChartClick={(params) => console.log('Clicked:', params)}
/>
);
};
// Example 4b: Bar Chart
const BarChartExample = () => {
const topVideosData = ${JSON.stringify(topVideos, null, 2)};
return (
<TikTokAnalyticsChart
chartType="bar"
topVideosData={topVideosData}
topVideosMetric="views"
width="100%"
height={500}
/>
);
};
// Example 4c: Pie Chart
const PieChartExample = () => {
const engagementData = ${JSON.stringify(engagement, null, 2)};
return (
<TikTokAnalyticsChart
chartType="pie"
engagementData={engagementData}
width={600}
height={400}
/>
);
};
// Example 4d: Dashboard
const DashboardExample = () => {
const dashboardData = ${JSON.stringify(dashboardData, null, 2)};
return (
<TikTokAnalyticsChart
chartType="dashboard"
dashboardData={dashboardData}
width="100%"
height={800}
dashboardConfig={{
showViewsOverTime: true,
showTopVideos: true,
showEngagement: true,
topVideosMetric: 'views',
}}
/>
);
};
`;
console.log(reactExample);
console.log('\n');
/**
* Example 5: aPaaS Custom Component Configuration
*/
console.log('=== Example 5: aPaaS Component Configuration ===\n');
const appaasConfig = {
componentType: 'TikTokAnalyticsDashboard',
props: {
bitableTableId: 'tblG4uuUvbwfvI9Z',
bitableAppToken: 'bascnXXXXXXXXXXX',
chartType: 'dashboard',
width: '100%',
height: 800,
showViewsOverTime: true,
showTopVideos: true,
showEngagement: true,
topVideosMetric: 'views',
autoRefresh: true,
refreshInterval: 300000,
},
events: {
onChartReady: (chart: any) => {
console.log('Chart initialized:', chart);
},
onChartClick: (params: any) => {
console.log('Chart element clicked:', params);
// Handle navigation or show details
},
onDataUpdate: (data: any) => {
console.log('Data updated:', data);
// Update other components or trigger actions
},
onError: (error: Error) => {
console.error('Error occurred:', error);
// Show error notification to user
},
},
};
console.log('aPaaS Configuration:');
console.log(JSON.stringify(appaasConfig, null, 2));
console.log('\n');
/**
* Example 6: Using Component Methods
*/
console.log('=== Example 6: Component Methods ===\n');
const methodsExample = `
// In aPaaS page JavaScript
// Get component instance
const dashboard = page.getComponent('tiktok-dashboard');
// Method 1: Refresh data
async function refreshDashboard() {
try {
await dashboard.refresh();
console.log('Dashboard refreshed successfully');
} catch (error) {
console.error('Refresh failed:', error);
}
}
// Method 2: Export as image
async function exportDashboard() {
try {
const imageData = await dashboard.exportImage();
// Download or share the image
const link = document.createElement('a');
link.href = imageData;
link.download = 'tiktok-analytics.png';
link.click();
} catch (error) {
console.error('Export failed:', error);
}
}
// Method 3: Update date filter
async function filterByDateRange(startDate, endDate) {
try {
await dashboard.updateFilter(startDate, endDate);
console.log(\`Filtered data from \${startDate} to \${endDate}\`);
} catch (error) {
console.error('Filter failed:', error);
}
}
// Example usage with date picker
document.getElementById('apply-filter').addEventListener('click', () => {
const startDate = document.getElementById('start-date').value;
const endDate = document.getElementById('end-date').value;
filterByDateRange(startDate, endDate);
});
// Auto-refresh on interval
setInterval(refreshDashboard, 5 * 60 * 1000); // Every 5 minutes
`;
console.log(methodsExample);
console.log('\n');
/**
* Example 7: Custom VChart Spec
*/
console.log('=== Example 7: Custom VChart Spec ===\n');
const customSpecExample = `
import { createViewsOverTimeSpec } from './src/vchart-component/specs/line-chart';
// Create base spec
const baseSpec = createViewsOverTimeSpec(viewsData);
// Customize colors
const customSpec = {
...baseSpec,
color: [
'#FF6B6B', // Custom red
'#4ECDC4', // Custom teal
'#45B7D1', // Custom blue
],
// Customize line style
line: {
...baseSpec.line,
style: {
...baseSpec.line.style,
lineWidth: 3,
curveType: 'monotone', // Smooth curves
},
},
// Customize tooltip
tooltip: {
...baseSpec.tooltip,
style: {
panel: {
padding: 16,
backgroundColor: '#1F2329',
borderRadius: 8,
},
titleLabel: {
fontSize: 16,
fill: 'white',
},
},
},
// Add custom title
title: {
visible: true,
text: 'TikTok Views Over Time',
style: {
fontSize: 20,
fontWeight: 'bold',
fill: '#1F2329',
},
},
};
// Use custom spec in component
<TikTokAnalyticsChart
chartType="line"
viewsOverTimeData={viewsData}
customSpec={customSpec}
/>
`;
console.log(customSpecExample);
console.log('\n');
/**
* Example 8: Error Handling
*/
console.log('=== Example 8: Error Handling ===\n');
const errorHandlingExample = `
import React, { useState } from 'react';
import TikTokAnalyticsDashboard from './component/tiktok-dashboard';
const DashboardWithErrorHandling = () => {
const [error, setError] = useState<Error | null>(null);
const [isLoading, setIsLoading] = useState(true);
const handleChartReady = () => {
setIsLoading(false);
setError(null);
};
const handleError = (err: Error) => {
setError(err);
setIsLoading(false);
// Log to error tracking service
console.error('Dashboard error:', err);
// Show user notification
showNotification({
type: 'error',
title: 'Failed to load analytics',
message: err.message,
});
};
if (error) {
return (
<div className="error-container">
<h3>Unable to load TikTok Analytics</h3>
<p>{error.message}</p>
<button onClick={() => window.location.reload()}>
Retry
</button>
</div>
);
}
return (
<div className="dashboard-container">
{isLoading && <LoadingSpinner />}
<TikTokAnalyticsDashboard
bitableTableId="tblG4uuUvbwfvI9Z"
bitableAppToken="your_token"
chartType="dashboard"
onChartReady={handleChartReady}
onError={handleError}
/>
</div>
);
};
`;
console.log(errorHandlingExample);
console.log('\n');
console.log('=== Examples Complete ===');
console.log('For more examples, see VCHART_COMPONENT_GUIDE.md');
