/**
* Example usage of VChart components for TikTok analytics
*/
import React, { useState, useRef } from 'react';
import { VChartComponent, TikTokVideoData } from './index';
import { TikTokDashboard } from './component/tiktok-dashboard';
// Sample data
const sampleData: TikTokVideoData[] = [
{
videoId: '7409731702890827041',
title: 'Amazing Dance Tutorial',
views: 2500000,
likes: 180000,
comments: 12000,
shares: 8500,
watchPercent: 78.5,
datePublished: '2025-01-15',
duration: 45
},
{
videoId: '7409731702890827042',
title: 'Cooking Made Easy',
views: 1800000,
likes: 120000,
comments: 8000,
shares: 5200,
watchPercent: 82.3,
datePublished: '2025-01-16',
duration: 60
},
{
videoId: '7409731702890827043',
title: 'Tech Review: Latest Gadgets',
views: 3200000,
likes: 250000,
comments: 18000,
shares: 12000,
watchPercent: 75.2,
datePublished: '2025-01-17',
duration: 90
}
];
/**
* Example 1: Basic Line Chart
*/
export function LineChartExample() {
return (
<div style={{ padding: '20px' }}>
<h2>Views Over Time</h2>
<VChartComponent
data={sampleData}
chartType="line"
height={400}
/>
</div>
);
}
/**
* Example 2: Bar Chart with Event Handler
*/
export function BarChartExample() {
const handleError = (error: Error) => {
console.error('Chart error:', error);
};
return (
<div style={{ padding: '20px' }}>
<h2>Top Videos</h2>
<VChartComponent
data={sampleData}
chartType="bar"
height={400}
onError={handleError}
/>
</div>
);
}
/**
* Example 3: Pie Chart with Custom Styling
*/
export function PieChartExample() {
return (
<div style={{ padding: '20px', background: '#f5f5f5', borderRadius: '8px' }}>
<h2>Engagement Breakdown</h2>
<VChartComponent
data={sampleData}
chartType="pie"
height={400}
className="custom-pie-chart"
/>
</div>
);
}
/**
* Example 4: Dashboard View
*/
export function DashboardExample() {
return (
<div style={{ padding: '20px' }}>
<h2>Complete Analytics Dashboard</h2>
<VChartComponent
data={sampleData}
chartType="dashboard"
height={600}
width="100%"
/>
</div>
);
}
/**
* Example 5: Interactive Dashboard with Controls
*/
export function InteractiveDashboardExample() {
const [chartType, setChartType] = useState<'line' | 'bar' | 'pie' | 'dashboard'>('dashboard');
const [height, setHeight] = useState(600);
return (
<div style={{ padding: '20px' }}>
<div style={{ marginBottom: '20px' }}>
<h2>Interactive Dashboard</h2>
<div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
<label>Chart Type:</label>
<select
value={chartType}
onChange={(e) => setChartType(e.target.value as any)}
style={{ padding: '5px' }}
>
<option value="line">Line Chart</option>
<option value="bar">Bar Chart</option>
<option value="pie">Pie Chart</option>
<option value="dashboard">Dashboard</option>
</select>
</div>
<div style={{ display: 'flex', gap: '10px' }}>
<label>Height:</label>
<input
type="range"
min="300"
max="800"
value={height}
onChange={(e) => setHeight(Number(e.target.value))}
/>
<span>{height}px</span>
</div>
</div>
<VChartComponent
data={sampleData}
chartType={chartType}
height={height}
/>
</div>
);
}
/**
* Example 6: aPaaS Component with Auto-Refresh
*/
export function APaaSComponentExample() {
const dashboardRef = useRef<any>();
const [recordCount, setRecordCount] = useState(0);
const [lastUpdate, setLastUpdate] = useState('');
const handleDataLoad = (event: any) => {
setRecordCount(event.recordCount);
setLastUpdate(new Date(event.timestamp).toLocaleString());
};
const handleChartClick = (data: any) => {
console.log('Video clicked:', data);
// You could navigate to video details here
};
const handleRefresh = async () => {
if (dashboardRef.current) {
await dashboardRef.current.refresh();
}
};
const handleExport = async () => {
if (dashboardRef.current) {
const imageData = await dashboardRef.current.exportImage('png');
// Create download link
const link = document.createElement('a');
link.href = imageData;
link.download = 'tiktok-analytics.png';
link.click();
}
};
return (
<div style={{ padding: '20px' }}>
<div style={{ marginBottom: '20px', display: 'flex', gap: '10px', alignItems: 'center' }}>
<h2>TikTok Analytics (aPaaS)</h2>
<button onClick={handleRefresh} style={{ padding: '8px 16px' }}>
Refresh
</button>
<button onClick={handleExport} style={{ padding: '8px 16px' }}>
Export PNG
</button>
<div style={{ marginLeft: 'auto', fontSize: '14px', color: '#666' }}>
{recordCount} videos | Updated: {lastUpdate}
</div>
</div>
<TikTokDashboard
ref={dashboardRef}
tableId="tblG4uuUvbwfvI9Z"
chartType="dashboard"
height={600}
refreshInterval={60}
onDataLoad={handleDataLoad}
onChartClick={handleChartClick}
onError={(error) => console.error('Error:', error)}
/>
</div>
);
}
/**
* Example 7: Multiple Charts Side by Side
*/
export function MultiChartExample() {
return (
<div style={{ padding: '20px' }}>
<h2>Multi-Chart View</h2>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
<div>
<h3>Views Trend</h3>
<VChartComponent
data={sampleData}
chartType="line"
height={300}
/>
</div>
<div>
<h3>Top Videos</h3>
<VChartComponent
data={sampleData}
chartType="bar"
height={300}
/>
</div>
<div>
<h3>Engagement</h3>
<VChartComponent
data={sampleData}
chartType="pie"
height={300}
/>
</div>
<div style={{
background: '#f5f5f5',
padding: '20px',
borderRadius: '8px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
}}>
<h4 style={{ margin: '0 0 10px 0' }}>Statistics</h4>
<p>Total Videos: {sampleData.length}</p>
<p>Total Views: {sampleData.reduce((sum, v) => sum + v.views, 0).toLocaleString()}</p>
<p>Total Likes: {sampleData.reduce((sum, v) => sum + v.likes, 0).toLocaleString()}</p>
</div>
</div>
</div>
);
}
/**
* Main App Component
*/
export default function App() {
return (
<div>
<DashboardExample />
<hr style={{ margin: '40px 0' }} />
<InteractiveDashboardExample />
</div>
);
}
