File size: 5,052 Bytes
a845930 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | document.addEventListener('DOMContentLoaded', function() {
// Set last update time
const now = new Date();
document.getElementById('last-update').textContent = now.toLocaleString();
// Mock data for commodity matrix
const commodities = [
{ input: "Fab construction", proxy: "Copper", symbol: "HG", risk: "High", sensitivity: "0.78" },
{ input: "Advanced packaging", proxy: "Silver", symbol: "SI", risk: "Medium", sensitivity: "0.65" },
{ input: "Power consumption", proxy: "Natural Gas", symbol: "NG", risk: "Critical", sensitivity: "0.92" },
{ input: "Cleanroom materials", proxy: "Aluminum", symbol: "AL", risk: "Low", sensitivity: "0.45" },
{ input: "Export controls", proxy: "Industrial Metals", symbol: "INDU", risk: "High", sensitivity: "0.81" },
{ input: "Wafer production", proxy: "Silicon Metal", symbol: "SI-F", risk: "Medium", sensitivity: "0.58" },
{ input: "Chip testing", proxy: "Gold", symbol: "GC", risk: "Low", sensitivity: "0.32" }
];
// Populate commodity matrix
const matrixTable = document.getElementById('commodity-matrix');
commodities.forEach(commodity => {
const row = document.createElement('tr');
row.className = 'border-b border-gray-700 hover:bg-gray-700';
row.innerHTML = `
<td class="py-3">${commodity.input}</td>
<td class="py-3 font-medium">${commodity.proxy}</td>
<td class="py-3">${commodity.symbol}</td>
<td class="py-3">
<span class="px-2 py-1 rounded-full text-xs ${
commodity.risk === 'Critical' ? 'bg-red-900 text-red-100' :
commodity.risk === 'High' ? 'bg-orange-900 text-orange-100' :
commodity.risk === 'Medium' ? 'bg-yellow-900 text-yellow-100' : 'bg-green-900 text-green-100'
}">${commodity.risk}</span>
</td>
<td class="py-3 text-right">
<button class="text-primary-500 hover:text-primary-400">
<i data-feather="chevron-down"></i>
</button>
</td>
`;
matrixTable.appendChild(row);
});
// Mock trade signals
const signals = [
{
commodity: "Copper (HG)",
direction: "Bullish",
confidence: "High",
rationale: "Capex acceleration + flat price structure",
date: "2 hours ago"
},
{
commodity: "Natural Gas (NG)",
direction: "Volatility",
confidence: "Medium",
rationale: "Rising energy stress + Taiwan power issues",
date: "1 day ago"
},
{
commodity: "Silver (SI)",
direction: "Bearish",
confidence: "Low",
rationale: "Advanced packaging demand slowing",
date: "3 days ago"
}
];
// Populate trade signals
const signalsContainer = document.getElementById('trade-signals');
signals.forEach(signal => {
const signalEl = document.createElement('div');
signalEl.className = 'bg-gray-700 p-4 rounded-lg';
signalEl.innerHTML = `
<div class="flex justify-between items-start">
<div>
<h3 class="font-bold ${signal.direction === 'Bullish' ? 'text-green-400' : signal.direction === 'Bearish' ? 'text-red-400' : 'text-yellow-400'}">
${signal.commodity} - ${signal.direction}
</h3>
<p class="text-sm text-gray-400 mt-1">${signal.rationale}</p>
</div>
<div class="text-right">
<span class="text-xs px-2 py-1 rounded-full ${
signal.confidence === 'High' ? 'bg-green-900 text-green-100' :
signal.confidence === 'Medium' ? 'bg-yellow-900 text-yellow-100' : 'bg-red-900 text-red-100'
}">${signal.confidence} confidence</span>
<p class="text-xs text-gray-500 mt-1">${signal.date}</p>
</div>
</div>
`;
signalsContainer.appendChild(signalEl);
});
// Update active signals count
document.getElementById('active-signals').textContent = signals.length;
// Update critical alerts count
const criticalAlerts = commodities.filter(c => c.risk === 'Critical').length;
document.getElementById('critical-alerts').textContent = criticalAlerts;
// Set market state
document.getElementById('market-state').textContent =
criticalAlerts > 2 ? 'Elevated' : criticalAlerts > 0 ? 'Watch' : 'Neutral';
if (criticalAlerts > 2) {
document.getElementById('market-state').classList.add('text-red-500');
} else if (criticalAlerts > 0) {
document.getElementById('market-state').classList.add('text-yellow-500');
} else {
document.getElementById('market-state').classList.add('text-green-500');
}
}); |