`;
// Render Chart
const ctx = document.getElementById('performanceChart').getContext('2d');
if (performanceChart) {
performanceChart.destroy();
}
performanceChart = new Chart(ctx, {
type: 'radar',
data: {
labels: labels,
datasets: [{
label: 'Performance Score (out of 10)',
data: data,
backgroundColor: 'rgba(79, 70, 229, 0.2)',
borderColor: 'rgba(79, 70, 229, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(79, 70, 229, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(79, 70, 229, 1)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: {
color: 'rgba(0, 0, 0, 0.1)'
},
grid: {
color: 'rgba(0, 0, 0, 0.1)'
},
pointLabels: {
font: {
size: 14,
},
color: '#374151' // gray-700
},
ticks: {
backdropColor: 'rgba(255, 255, 255, 0.75)',
color: '#4b5563', // gray-600
stepSize: 2
},
min: 0,
max: 10
}
},
plugins: {
legend: {
position: 'top',
}
}
}
});
};
const populateMetricDropdown = () => {
formFields.metric.innerHTML = '';
Object.keys(performanceMetrics).forEach(metric => {
const option = document.createElement('option');
option.value = metric;
option.textContent = metric;
formFields.metric.appendChild(option);
});
};
const renderAll = () => {
populateMetricDropdown();
renderPdLogList();
renderDashboard();
};
// --- INITIALIZATION ---
pdForm.addEventListener('submit', handleFormSubmit);
switchTab('dashboard');
renderAll();
});
