`).join('');
};
const renderCharts = (metrics) => {
const chartContexts = {
gauge: document.getElementById('risk-gauge-chart').getContext('2d'),
contribution: document.getElementById('contribution-chart').getContext('2d'),
};
Object.values(charts).forEach(chart => chart.destroy());
const riskColor = metrics.riskLevel === 'Low' ? '#16a34a' :
metrics.riskLevel === 'Elevated' ? '#facc15' :
metrics.riskLevel === 'High' ? '#f97316' : '#dc2626';
charts.gauge = new Chart(chartContexts.gauge, {
type: 'doughnut',
data: {
datasets: [{
data: [metrics.probability, 100 - metrics.probability],
backgroundColor: [riskColor, '#e5e7eb'],
borderWidth: 0,
}]
},
options: {
rotation: -90,
circumference: 180,
cutout: '70%',
plugins: { tooltip: { enabled: false } }
}
});
document.getElementById('risk-gauge-label').textContent = `${metrics.probability.toFixed(1)}%`;
document.getElementById('risk-gauge-label').className = `text-4xl font-bold mt-[-50px] ${`risk-${metrics.riskLevel.split(' ')[0].toLowerCase()}`}`;
charts.contribution = new Chart(chartContexts.contribution, {
type: 'bar',
data: {
labels: metrics.factorScores.map(f => f.label),
datasets: [{
label: 'Contribution to Risk Score',
data: metrics.factorScores.map(f => f.contribution),
backgroundColor: '#4f46e5',
}]
},
options: {
indexAxis: 'y',
scales: { x: { beginAtZero: true, title: { display: true, text: 'Weighted Risk Points'} } },
plugins: { legend: { display: false } }
}
});
};
const renderAnalysis = (metrics) => {
const container = document.getElementById('analysis-output');
let outlook;
if (metrics.riskLevel === 'Low') {
outlook = `The model predicts a low probability of a significant financial risk event in the next 12 months. Macroeconomic indicators appear stable. The ${metrics.keyFactor.toLowerCase()} is the largest, yet still minor, contributor to the overall risk score. Continued monitoring is advised, but immediate systemic risks appear contained.`;
} else if (metrics.riskLevel === 'Elevated') {
outlook = `The model indicates an elevated risk of a financial event. While not a certainty, conditions are showing signs of stress. The primary driver is the
${metrics.keyFactor.toLowerCase()}. This suggests a heightened chance of market volatility or a minor economic downturn. Increased caution and portfolio review are recommended.`;
} else if (metrics.riskLevel === 'High') {
outlook = `The model predicts a high probability of a financial risk event. Multiple indicators are flashing warning signs, with the
${metrics.keyFactor.toLowerCase()} being the most significant concern. This scenario aligns with conditions that have historically preceded recessions or major market corrections. Defensive positioning and risk mitigation strategies should be strongly considered.`;
} else { // Severe
outlook = `The model predicts a severe and imminent risk of a major financial event. A confluence of negative indicators, led by the
${metrics.keyFactor.toLowerCase()}, points towards significant systemic instability. The probability is high for a recession, a market crash, or a credit event. Maximum caution and capital preservation strategies are paramount.`;
}
container.innerHTML = `
Risk Prediction Analysis
Predicted Outlook: ${metrics.riskLevel} Risk
${outlook}
Factor Breakdown
The total risk score of ${metrics.totalScore.toFixed(0)} out of 100 was calculated based on the following weighted contributions:
${metrics.factorScores.map(f => `- ${f.label}: Contributed ${f.contribution.toFixed(1)} points to the total score.
`).join('')}
`;
};
// CALCULATION LOGIC
const predictRisk = () => {
const inputs = {
vix: parseFloat(document.getElementById('vix').value),
yieldCurve: parseFloat(document.getElementById('yield-curve').value),
corpDebt: parseFloat(document.getElementById('corp-debt').value),
unemploymentGrowth: parseFloat(document.getElementById('unemployment-growth').value),
inflation: parseFloat(document.getElementById('inflation').value),
};
const factors = [
{ key: 'vix', label: 'Volatility (VIX)', weight: 0.25, scoreFn: (v) => Math.min(100, Math.max(0, (v - 15) * 5)) },
{ key: 'yieldCurve', label: 'Yield Curve', weight: 0.35, scoreFn: (v) => v < 0 ? Math.min(100, Math.abs(v) * 200) : 0 },
{ key: 'corpDebt', label: 'Corporate Debt', weight: 0.15, scoreFn: (v) => Math.max(0, (v - 45) * 8) },
{ key: 'unemploymentGrowth', label: 'Unemployment', weight: 0.20, scoreFn: (v) => Math.min(100, (v / 0.5) * 100) },
{ key: 'inflation', label: 'Inflation', weight: 0.05, scoreFn: (v) => Math.max(0, (v - 4) * 10) },
];
let totalScore = 0;
const factorScores = factors.map(f => {
const rawScore = Math.max(0, Math.min(100, f.scoreFn(inputs[f.key])));
const contribution = rawScore * f.weight;
totalScore += contribution;
return { label: f.label, contribution };
});
totalScore = Math.min(100, totalScore);
let probability, riskLevel;
if (totalScore < 20) { probability = totalScore * 0.5; riskLevel = 'Low'; } // 0-10%
else if (totalScore < 45) { probability = 10 + (totalScore - 20) * 0.8; riskLevel = 'Elevated'; } // 10-30%
else if (totalScore < 70) { probability = 30 + (totalScore - 45); riskLevel = 'High'; } // 30-55%
else { probability = 55 + (totalScore - 70) * 1.5; riskLevel = 'Severe'; } // 55-100%
probability = Math.min(99.9, probability);
const keyFactor = factorScores.reduce((max, f) => f.contribution > max.contribution ? f : max).label;
predictionData = { totalScore, probability, riskLevel, keyFactor, factorScores, inputs };
return predictionData;
};
const handleRecalculate = () => {
const metrics = predictRisk();
renderKPIs(metrics);
renderCharts(metrics);
renderAnalysis(metrics);
switchTab('dashboard');
};
const generatePDF = () => {
if (!predictionData) return;
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const pageWidth = doc.internal.pageSize.width;
const margin = 15;
let y = margin;
const { inputs, ...metrics } = predictionData;
doc.setFont('helvetica', 'bold');
doc.setFontSize(22);
doc.text('Financial Risk Event Prediction Report', pageWidth / 2, y, { align: 'center' });
y += 10;
doc.setFontSize(12);
doc.setFont('helvetica', 'normal');
doc.text(`Analysis Date: ${new Date().toLocaleDateString('en-US')}`, pageWidth / 2, y, { align: 'center' });
y += 15;
doc.setFontSize(16);
doc.setFont('helvetica', 'bold');
doc.text('Prediction Summary', margin, y);
y += 8;
const summaryText = [
{ label: 'Overall Risk Level', value: metrics.riskLevel },
{ label: 'Event Probability (Next 12 Months)', value: `${metrics.probability.toFixed(1)}%` },
{ label: 'Primary Influencing Factor', value: metrics.keyFactor },
];
doc.setFontSize(12);
summaryText.forEach(item => {
doc.setFont('helvetica', 'bold');
doc.text(item.label + ':', margin, y);
doc.setFont('helvetica', 'normal');
doc.text(item.value, pageWidth / 2 + 30, y);
y += 7;
});
y += 5;
doc.setDrawColor(220);
doc.line(margin, y, pageWidth - margin, y);
y += 10;
doc.setFontSize(16);
doc.setFont('helvetica', 'bold');
doc.text('Input Macroeconomic Indicators', margin, y);
y += 8;
const inputsText = [
{ label: 'Volatility Index (VIX)', value: inputs.vix.toFixed(1) },
{ label: 'Yield Curve Slope (%)', value: inputs.yieldCurve.toFixed(2) },
{ label: 'Corporate Debt/GDP (%)', value: inputs.corpDebt.toFixed(1) },
{ label: 'Unemployment Change (%)', value: inputs.unemploymentGrowth.toFixed(1) },
{ label: 'Core Inflation Rate (%)', value: inputs.inflation.toFixed(1) },
];
doc.setFontSize(12);
inputsText.forEach(item => {
doc.setFont('helvetica', 'bold');
doc.text(item.label + ':', margin, y);
doc.setFont('helvetica', 'normal');
doc.text(item.value, pageWidth / 2 + 30, y);
y += 7;
});
doc.addPage();
y = margin;
doc.setFontSize(16);
doc.setFont('helvetica', 'bold');
doc.text('Risk Visualizations', margin, y);
y += 5;
try {
const gaugeImg = charts.gauge.toBase64Image();
const contributionImg = charts.contribution.toBase64Image();
doc.addImage(gaugeImg, 'PNG', margin, y, 80, 50);
doc.addImage(contributionImg, 'PNG', margin + 90, y, pageWidth - (margin * 2) - 90, 80);
} catch(e) { console.error("PDF Chart Error:", e); }
doc.save('Financial_Risk_Prediction_Report.pdf');
};
// APP NAVIGATION
const switchTab = (tabName) => {
if (!tabs.includes(tabName)) return;
currentTab = tabName;
Object.values(tabContent).forEach(content => content.classList.add('hidden'));
tabContent[tabName].classList.remove('hidden');
Object.values(tabButtons).forEach(button => button.classList.remove('active'));
tabButtons[tabName].classList.add('active');
updateNavButtons();
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
let newIndex = direction === 'next' ? Math.min(currentIndex + 1, tabs.length - 1) : Math.max(currentIndex - 1, 0);
switchTab(tabs[newIndex]);
};
// INITIALIZATION
document.getElementById('recalculate-btn').addEventListener('click', handleRecalculate);
document.getElementById('download-pdf-btn-dashboard').addEventListener('click', generatePDF);
window.app = { switchTab, navigateTabs };
handleRecalculate();
updateNavButtons();
});
