import type { IVChartOption } from '@visactor/vchart';
import type { TikTokVideoData } from '../index';
import { TIKTOK_COLORS } from '../index';
/**
* Create a bar chart spec for top 10 videos by views
*/
export function createBarChartSpec(data: TikTokVideoData[]): IVChartOption {
// Get top 10 videos by views
const top10 = [...data]
.sort((a, b) => b.views - a.views)
.slice(0, 10)
.reverse(); // Reverse for better visualization (highest at top)
// Prepare data for bar chart
const chartData = top10.map(item => ({
title: item.title.length > 30 ? item.title.substring(0, 30) + '...' : item.title,
fullTitle: item.title,
views: item.views,
likes: item.likes,
videoId: item.videoId
}));
return {
type: 'bar',
data: {
values: chartData
},
title: {
visible: true,
text: 'Top 10 Videos by Views',
textStyle: {
fontSize: 20,
fontWeight: 'bold'
}
},
xField: 'views',
yField: 'title',
direction: 'horizontal',
bar: {
style: {
fill: {
gradient: 'linear',
x0: 0,
y0: 0,
x1: 1,
y1: 0,
stops: [
{
offset: 0,
color: TIKTOK_COLORS.primary
},
{
offset: 1,
color: TIKTOK_COLORS.info
}
]
},
cornerRadius: 4
}
},
axes: [
{
orient: 'bottom',
title: {
visible: true,
text: 'Views',
style: {
fontSize: 14,
fontWeight: 'bold'
}
},
label: {
formatMethod: (val: number) => {
if (val >= 1000000) return (val / 1000000).toFixed(1) + 'M';
if (val >= 1000) return (val / 1000).toFixed(1) + 'K';
return val.toString();
}
}
},
{
orient: 'left',
title: {
visible: true,
text: 'Video Title',
style: {
fontSize: 14,
fontWeight: 'bold'
}
},
label: {
style: {
fontSize: 11
}
}
}
],
tooltip: {
visible: true,
mark: {
content: [
{
key: 'title',
value: (datum: any) => datum.fullTitle
},
{
key: 'views',
value: (datum: any) => datum.views.toLocaleString()
},
{
key: 'likes',
value: (datum: any) => datum.likes.toLocaleString()
}
]
}
},
label: {
visible: true,
position: 'right',
formatMethod: (text: any, datum: any) => {
const val = datum.views;
if (val >= 1000000) return (val / 1000000).toFixed(1) + 'M';
if (val >= 1000) return (val / 1000).toFixed(1) + 'K';
return val.toString();
},
style: {
fontSize: 12,
fill: '#333'
}
},
hover: {
enable: true
},
animation: {
appear: {
duration: 1000,
easing: 'bounceOut'
}
}
};
}
