/**
* Component metadata and type definitions
*/
export interface TikTokDashboardProps {
/** Bitable table ID containing TikTok video data */
tableId: string;
/** Type of chart to display */
chartType?: 'line' | 'bar' | 'pie' | 'dashboard';
/** Auto-refresh interval in seconds (0 = no auto-refresh) */
refreshInterval?: number;
/** Chart height in pixels */
height?: number;
/** Custom CSS class name */
className?: string;
/** Event handlers */
onChartClick?: (data: ChartClickData) => void;
onDataLoad?: (data: DataLoadEvent) => void;
onError?: (error: ErrorEvent) => void;
}
export interface ChartClickData {
videoId: string;
title: string;
value: number;
type: string;
}
export interface DataLoadEvent {
recordCount: number;
timestamp: string;
}
export interface ErrorEvent {
message: string;
code: string;
}
export interface TikTokVideoRecord {
record_id: string;
fields: {
'Video ID'?: string;
'Title'?: string;
'Views'?: number;
'Likes'?: number;
'Comments'?: number;
'Shares'?: number;
'Watch %'?: number;
'Date published'?: number; // Timestamp in milliseconds
'Duration'?: number;
};
}
export const DEFAULT_PROPS: Partial<TikTokDashboardProps> = {
chartType: 'dashboard',
refreshInterval: 0,
height: 600
};
export const FIELD_MAPPING = {
videoId: 'Video ID',
title: 'Title',
views: 'Views',
likes: 'Likes',
comments: 'Comments',
shares: 'Shares',
watchPercent: 'Watch %',
datePublished: 'Date published',
duration: 'Duration'
} as const;
