/**
* Chart Block Examples for Lark Block Framework
*
* This file demonstrates how to create various chart blocks
* for the TikTok Sentiment Analytics dashboard.
*/
import {
createChartBlockCreator,
createQuickChartConfig,
ChartConfig,
ChartType,
} from '../src/block';
// Configuration for your TikTok Analytics Base
const TIKTOK_APP_TOKEN = 'IZ3cbKvLsakfGZsZgjvl38ifgwg';
const TIKTOK_TABLE_ID = 'tblkVYEcPh410eFw';
// ============================================
// Example 1: Basic Sentiment Pie Chart
// ============================================
const sentimentPieChart = createQuickChartConfig({
type: 'pie',
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
xAxisField: 'Sentiment',
yAxisField: 'Count',
title: 'Sentiment Distribution',
});
// ============================================
// Example 2: Platform Comparison Bar Chart
// ============================================
const platformBarChart: ChartConfig = {
chartType: 'bar',
title: 'Engagement by Platform',
dataSource: {
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
fields: {
xAxis: 'Platform',
yAxis: ['Views', 'Likes', 'Comments'],
},
},
options: {
showLegend: true,
showDataLabels: true,
colors: ['#3370FF', '#34C759', '#FF9500'],
animation: true,
},
};
// ============================================
// Example 3: Time Series Line Chart
// ============================================
const timeSeriesLineChart: ChartConfig = {
chartType: 'line',
title: 'Views Over Time',
dataSource: {
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
fields: {
xAxis: 'Date',
yAxis: ['Views'],
},
},
options: {
showLegend: false,
animation: true,
colors: ['#1890FF'],
},
};
// ============================================
// Example 4: Stacked Area Chart (Sentiment Trend)
// ============================================
const sentimentTrendChart: ChartConfig = {
chartType: 'area',
title: 'Sentiment Trend Over Time',
dataSource: {
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
fields: {
xAxis: 'Date',
yAxis: ['Positive', 'Neutral', 'Negative'],
},
},
options: {
showLegend: true,
stacked: true,
colors: ['#52C41A', '#FAAD14', '#FF4D4F'],
},
};
// ============================================
// Example 5: Scatter Plot (Engagement Correlation)
// ============================================
const engagementScatter: ChartConfig = {
chartType: 'scatter',
title: 'Views vs Likes Correlation',
dataSource: {
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
fields: {
xAxis: 'Views',
yAxis: 'Likes',
series: 'Platform',
},
},
options: {
showLegend: true,
colors: ['#3370FF', '#FF4D4F', '#FAAD14'],
},
};
// ============================================
// Example 6: Funnel Chart (Engagement Funnel)
// ============================================
const engagementFunnel: ChartConfig = {
chartType: 'funnel',
title: 'Engagement Funnel',
dataSource: {
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
fields: {
xAxis: 'Stage',
yAxis: 'Count',
},
},
options: {
showDataLabels: true,
colors: ['#3370FF', '#36CFC9', '#73D13D', '#FFEC3D'],
},
};
// ============================================
// Example 7: Radar Chart (Video Performance)
// ============================================
const videoPerformanceRadar: ChartConfig = {
chartType: 'radar',
title: 'Video Performance Metrics',
dataSource: {
appToken: TIKTOK_APP_TOKEN,
tableId: TIKTOK_TABLE_ID,
fields: {
xAxis: 'Metric',
yAxis: 'Value',
series: 'Video',
},
},
options: {
showLegend: true,
colors: ['#3370FF', '#FF4D4F'],
},
};
// ============================================
// Creating the Block Creator
// ============================================
/**
* Create and register the chart block creator
* This should be called in the Lark Block environment
*/
export function initializeChartBlock() {
const creator = createChartBlockCreator({
apiKey: process.env.LARK_API_KEY,
defaultChartType: 'bar',
refreshInterval: 30000, // 30 seconds
debug: true,
});
// In Lark environment, register the creator
if (typeof Creator !== 'undefined') {
Creator(creator);
}
return creator;
}
// ============================================
// Usage in Lark Block Environment
// ============================================
/**
* Example: Creating a sentiment pie chart block
*/
export function createSentimentPieBlock() {
const creator = initializeChartBlock();
// When the block is ready, create the chart
if (creator.methods) {
creator.methods.createBlock(sentimentPieChart);
}
}
/**
* Example: Creating a platform comparison block
*/
export function createPlatformComparisonBlock() {
const creator = initializeChartBlock();
if (creator.methods) {
creator.methods.createBlock(platformBarChart);
}
}
// ============================================
// Export all chart configurations
// ============================================
export const chartConfigs = {
sentimentPie: sentimentPieChart,
platformBar: platformBarChart,
timeSeriesLine: timeSeriesLineChart,
sentimentTrend: sentimentTrendChart,
engagementScatter: engagementScatter,
engagementFunnel: engagementFunnel,
videoPerformanceRadar: videoPerformanceRadar,
};
export default chartConfigs;
