|
|
|
|
@ -1152,93 +1152,139 @@ if __name__ == "__main__":
|
|
|
|
|
|
|
|
|
|
// 初始化分布图表
|
|
|
|
|
initDistributionChart() {
|
|
|
|
|
const ctx = document.getElementById('distribution-canvas').getContext('2d');
|
|
|
|
|
this.charts.distribution = new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: this.mockData.openrankDistribution.map(d => d.range),
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: '开发者数量',
|
|
|
|
|
data: this.mockData.openrankDistribution.map(d => d.count),
|
|
|
|
|
backgroundColor: 'rgba(0, 212, 255, 0.6)',
|
|
|
|
|
borderColor: 'rgba(0, 212, 255, 1)',
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
labels: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
const canvas = document.getElementById('distribution-canvas');
|
|
|
|
|
if (!canvas) {
|
|
|
|
|
console.warn('Distribution canvas not found');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
if (typeof Chart === 'undefined') {
|
|
|
|
|
console.error('Chart.js is not loaded');
|
|
|
|
|
// 显示错误信息
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
ctx.fillStyle = '#666';
|
|
|
|
|
ctx.font = '14px Arial';
|
|
|
|
|
ctx.textAlign = 'center';
|
|
|
|
|
ctx.fillText('图表库加载失败', canvas.width/2, canvas.height/2 - 10);
|
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
|
ctx.fillText('图表功能暂不可用', canvas.width/2, canvas.height/2 + 10);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.charts.distribution = new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: this.mockData.openrankDistribution.map(d => d.range),
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: '开发者数量',
|
|
|
|
|
data: this.mockData.openrankDistribution.map(d => d.count),
|
|
|
|
|
backgroundColor: 'rgba(0, 212, 255, 0.6)',
|
|
|
|
|
borderColor: 'rgba(0, 212, 255, 1)',
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true,
|
|
|
|
|
grid: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
labels: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
x: {
|
|
|
|
|
grid: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true,
|
|
|
|
|
grid: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
x: {
|
|
|
|
|
grid: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.1)'
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Error initializing distribution chart:', error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化活动类型图表
|
|
|
|
|
initActivityChart() {
|
|
|
|
|
const ctx = document.getElementById('activity-canvas').getContext('2d');
|
|
|
|
|
this.charts.activity = new Chart(ctx, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['Issue 评论', '创建 Issue', '创建 PR', '代码评审', '合入 PR'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: [
|
|
|
|
|
this.mockData.activityDistribution.issueComment,
|
|
|
|
|
this.mockData.activityDistribution.openIssue,
|
|
|
|
|
this.mockData.activityDistribution.openPull,
|
|
|
|
|
this.mockData.activityDistribution.reviewComment,
|
|
|
|
|
this.mockData.activityDistribution.mergedPull
|
|
|
|
|
],
|
|
|
|
|
backgroundColor: [
|
|
|
|
|
'rgba(0, 212, 255, 0.8)',
|
|
|
|
|
'rgba(0, 255, 136, 0.8)',
|
|
|
|
|
'rgba(255, 193, 7, 0.8)',
|
|
|
|
|
'rgba(156, 39, 176, 0.8)',
|
|
|
|
|
'rgba(255, 87, 34, 0.8)'
|
|
|
|
|
],
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
position: 'right',
|
|
|
|
|
labels: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
font: {
|
|
|
|
|
size: 12
|
|
|
|
|
try {
|
|
|
|
|
const canvas = document.getElementById('activity-canvas');
|
|
|
|
|
if (!canvas) {
|
|
|
|
|
console.warn('Activity canvas not found');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
if (typeof Chart === 'undefined') {
|
|
|
|
|
console.error('Chart.js is not loaded');
|
|
|
|
|
// 显示错误信息
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
ctx.fillStyle = '#666';
|
|
|
|
|
ctx.font = '14px Arial';
|
|
|
|
|
ctx.textAlign = 'center';
|
|
|
|
|
ctx.fillText('图表库加载失败', canvas.width/2, canvas.height/2 - 10);
|
|
|
|
|
ctx.font = '12px Arial';
|
|
|
|
|
ctx.fillText('图表功能暂不可用', canvas.width/2, canvas.height/2 + 10);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.charts.activity = new Chart(ctx, {
|
|
|
|
|
type: 'doughnut',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['Issue 评论', '创建 Issue', '创建 PR', '代码评审', '合入 PR'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
data: [
|
|
|
|
|
this.mockData.activityDistribution.issueComment,
|
|
|
|
|
this.mockData.activityDistribution.openIssue,
|
|
|
|
|
this.mockData.activityDistribution.openPull,
|
|
|
|
|
this.mockData.activityDistribution.reviewComment,
|
|
|
|
|
this.mockData.activityDistribution.mergedPull
|
|
|
|
|
],
|
|
|
|
|
backgroundColor: [
|
|
|
|
|
'rgba(0, 212, 255, 0.8)',
|
|
|
|
|
'rgba(0, 255, 136, 0.8)',
|
|
|
|
|
'rgba(255, 193, 7, 0.8)',
|
|
|
|
|
'rgba(156, 39, 176, 0.8)',
|
|
|
|
|
'rgba(255, 87, 34, 0.8)'
|
|
|
|
|
],
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
position: 'right',
|
|
|
|
|
labels: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
font: {
|
|
|
|
|
size: 12
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Error initializing activity chart:', error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化网络图谱
|
|
|
|
|
|