🔴 MISI RAHASIA 🔴

Ketik CSV di command box untuk membuka form input data baru.

Ketik REFRESH untuk memproses data & update grafik.

Ketik HTML untuk download file HTML baru.

Ketik NONBCA untuk membersihkan layar lalu memuat mode nonbca.

🇮🇩 Jakarta (WIB)

00:00:00

-- --- ----

⏰ Alarm

--:--

Tidak Aktif

⏱️ Countdown

00:00:00

🇸🇬 Singapore (SGT)

00:00:00

-- --- ----

🇸🇦 Arab Saudi (AST)

00:00:00

-- --- ----

🌤️ Weather

🌍

--°C

Klik tombol untuk deteksi

⏰ ALARM!

--:--

Grafik Pergerakan Nilai Tukar & Saham

Periode 19 April 2025 s/d 3 Juni 2026

Tanggal & Waktu	USD Buy	USD Sell	SGD Buy	SGD Sell	AUD Buy	AUD Sell	JPY Buy	JPY Sell	EUR Buy	EUR Sell	CHF Buy	CHF Sell

📊 Perbandingan Spread Harga Beli & Jual BCA

* Pilih rentang tanggal untuk melihat tabel spread. Default menampilkan 30 hari terakhir .

Dari Tanggal: s/d Tanggal:

Tanggal	USD				SGD				AUD				JPY				EUR				CHF
Tanggal	Buy	Sell	Spread	Spread%	Buy	Sell	Spread	Spread%	Buy	Sell	Spread	Spread%	Buy	Sell	Spread	Spread%	Buy	Sell	Spread	Spread%	Buy	Sell	Spread	Spread%

📉 Grafik Selisih Spread (Sell - Buy)

* Spread = selisih harga jual BCA dikurangi harga beli BCA.

📈 Google Finance Style Compare — Kurs (Filter Range)

* Perubahan (%) dari awal rentang tanggal terpilih. Naik = IDR melemah.

📊 Tabel Harga Saham BMRI & BBCA (Filter Tanggal)

* Pilih rentang tanggal untuk menampilkan tabel dan grafik saham. Baris hijau = Close > Open (naik), merah = Close < Open (turun).
* Harga saham hanya tersedia hari Senin-Jumat. Sabtu, Minggu & hari libur tidak ada data.

Dari Tanggal: s/d Tanggal:

Tanggal	BMRI Open	BMRI Close	BMRI Spread	BMRI Spread%	BBCA Open	BBCA Close	BBCA Spread	BBCA Spread%

📈 Perbandingan Saham — Google Finance Style (Perubahan %)

* Grafik perubahan persentase dari titik awal. Mengikuti format compare seperti grafik kurs.
* Hanya menampilkan data hari kerja (Senin-Jumat). Tidak ada gap/anjlok ke nol saat akhir pekan.

💱 Nilai Tukar Mata Uang (Buy vs Sell)

📊 Harga Saham BMRI & BBCA (Close vs Open)

📊 Perbandingan Multi-Mata Uang — Harga Beli (Normalized)

* Base 100 = harga awal. Naik = IDR melemah.

📊 Perbandingan Multi-Mata Uang — Harga Jual (Normalized)

* Base 100 = harga awal.

📈 Perbandingan Saham — Harga Close

* Support & Resistance periode penuh.

📈 Perbandingan Saham — Harga Open

* Support & Resistance periode penuh.

📈 Google Finance Style Compare — Kurs

📈 Google Finance Style Compare — Saham

🏆 Best & Worst Performer

* Diurutkan berdasarkan % perubahan sejak Base Date.

Base Tanggal:

📊 Volatility Gauge — Spread Buy vs Sell

* Spread = Selisih harga jual - harga beli. Semakin lebar = semakin berisiko / kurang likuid.

📊 Correlation Matrix — Mata Uang vs Saham

* Korelasi Pearson: +1 = searah, -1 = berlawanan, 0 = tidak berkorelasi.

📋 Dynamic Stats Summary

* Ringkasan otomatis titik harga tertinggi & terendah yang pernah tercatat.

🔔 Visual Price Alert Simulator

* Masukkan target harga, lalu klik Apply. Garis merah akan muncul di grafik sebagai garis target.

USD: SGD: AUD: BMRI: BBCA:

🔍 Dynamic Base & Zoom

* Pilih titik awal, scroll zoom, drag geser. Tooltip tampil harga asli + % perubahan.

Base Tanggal:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1280, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Forex Compare | IDR vs 32 Mata Uang (Seperti Google Finance)</title>
    <script src="https://cdn.plot.ly/plotly-3.1.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #f5f7fc;
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
            padding: 24px 20px;
            color: #1a2c3e;
        }
        .container {
            max-width: 1600px;
            margin: 0 auto;
        }
        .card {
            background: white;
            border-radius: 28px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.05);
            padding: 20px 24px;
            margin-bottom: 28px;
            border: 1px solid #eef2f8;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            border-bottom: 2px solid #eef2f8;
            padding-bottom: 14px;
            margin-bottom: 20px;
        }
        .card-header h2 {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1f5e8e, #2c4f7c);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        .date-panel {
            background: #f8fafd;
            border-radius: 48px;
            padding: 12px 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: flex-end;
            margin-bottom: 24px;
        }
        .date-input {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .date-input label {
            font-size: 0.7rem;
            font-weight: 700;
            color: #4a627a;
            text-transform: uppercase;
        }
        input[type="date"] {
            padding: 10px 16px;
            border-radius: 48px;
            border: 1px solid #cbdde9;
            background: white;
            font-weight: 500;
        }
        button {
            background: #1f6392;
            border: none;
            padding: 10px 24px;
            border-radius: 40px;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: 0.2s;
        }
        button:hover {
            background: #0e4a6f;
            transform: scale(0.97);
        }
        .btn-reset {
            background: #4b5563;
        }
        .chart-mode {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-top: 16px;
            margin-bottom: 8px;
            background: #f0f4fa;
            padding: 8px 16px;
            border-radius: 48px;
            width: fit-content;
        }
        .mode-option {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
        }
        .mode-option input {
            cursor: pointer;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 16px;
            margin-top: 24px;
        }
        .stat-item {
            background: #ffffff;
            border-radius: 20px;
            padding: 14px 18px;
            border: 1px solid #eef2f8;
        }
        .stat-item h4 {
            font-size: 0.85rem;
            color: #5b6e8c;
            margin-bottom: 8px;
        }
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a2c3e;
        }
        .stat-change {
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 6px;
        }
        .positive {
            color: #0e7b32;
            background: #e8f5e9;
            display: inline-block;
            padding: 2px 12px;
            border-radius: 24px;
        }
        .negative {
            color: #c62828;
            background: #ffebee;
            display: inline-block;
            padding: 2px 12px;
            border-radius: 24px;
        }
        .performer-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }
        .performer-card {
            --accent: #1f5e8e;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            border: 1px solid #e8eef6;
            border-left: 7px solid var(--accent);
            border-radius: 20px;
            padding: 16px 16px 14px;
            min-height: 148px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            position: relative;
            overflow: hidden;
            text-align: left;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .performer-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(31, 94, 142, 0.05), transparent 35%, transparent 100%);
            pointer-events: none;
        }
        .performer-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
        }
        .performer-card.winner {
            border-left-color: #16a34a;
        }
        .performer-card.loser {
            border-left-color: #dc2626;
        }
        .performer-card .performer-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(31, 94, 142, 0.10);
            color: #1f5e8e;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: 0.2px;
            margin-bottom: 10px;
        }
        .performer-card .performer-name {
            font-size: 0.98rem;
            font-weight: 800;
            color: #1a2c3e;
            margin-bottom: 6px;
        }
        .performer-card .performer-pct {
            font-size: 1.3rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 8px;
        }
        .performer-card .performer-meta {
            font-size: 0.76rem;
            color: #6c7e97;
            line-height: 1.5;
        }
        .performer-card .performer-chip {
            display: inline-block;
            margin-top: 10px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.4px;
            color: #1f5e8e;
            background: rgba(31, 94, 142, 0.08);
        }
        .table-wrapper {
            overflow-x: auto;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(31, 94, 142, 0.15);
            border: 1px solid #e2e8f0;
        }
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.82rem;
            background: white;
        }
        thead tr {
            background: linear-gradient(135deg, #1f5e8e, #2c4f7c);
        }
        th {
            padding: 14px 10px;
            text-align: center;
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            font-size: 0.72rem;
            letter-spacing: 0.8px;
            border-bottom: 2px solid rgba(255,255,255,0.2);
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        th:first-child {
            text-align: left;
            padding-left: 16px;
            border-top-left-radius: 16px;
        }
        th:last-child {
            border-top-right-radius: 16px;
        }
        td {
            padding: 10px 10px;
            border-bottom: 1px solid #eef2f8;
            text-align: right;
            font-size: 0.82rem;
            color: #334155;
            font-weight: 500;
            transition: background-color 0.15s;
        }
        td:first-child {
            text-align: left;
            font-weight: 700;
            color: #1f5e8e;
            background: #f8fafc;
            padding-left: 16px;
            position: sticky;
            left: 0;
            border-right: 2px solid #e2e8f0;
        }
        tbody tr:hover td {
            background-color: #f1f5f9;
        }
        tbody tr:hover td:first-child {
            background-color: #e2e8f0;
        }
        tr.alt-row td {
            background-color: #f8fafc;
        }
        tr.alt-row td:first-child {
            background-color: #f1f5f9;
        }
        .heatmap-note {
            background: #f9fafc;
            border-radius: 20px;
            padding: 12px 16px;
            margin-top: 16px;
            font-size: 0.75rem;
            color: #4a5b7a;
        }
        .footer {
            text-align: center;
            font-size: 0.7rem;
            color: #6c7e97;
            border-top: 1px solid #e2e8f0;
            padding-top: 20px;
            margin-top: 10px;
        }
        .loader {
            display: flex;
            justify-content: center;
            padding: 40px;
            gap: 12px;
            align-items: center;
        }
        .legend-hint {
            background: #eef2ff;
            padding: 4px 12px;
            border-radius: 40px;
            font-size: 0.7rem;
        }
        .performer-date-range {
            background: #f0f4fa;
            border-radius: 20px;
            padding: 12px 18px;
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
            align-items: flex-end;
            flex-wrap: wrap;
        }
        .performer-date-range div {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .performer-date-range label {
            font-size: 0.7rem;
            font-weight: 700;
            color: #4a627a;
            text-transform: uppercase;
        }
        .performer-date-range input {
            padding: 8px 12px;
            border-radius: 24px;
            border: 1px solid #cbd5e1;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-header">
            <h2><i class="fas fa-chart-line"></i> IDR vs 32 Mata Uang</h2>
            <div class="legend-hint"><i class="fas fa-mouse-pointer"></i> Klik legenda grafik untuk sembunyikan/tampilkan garis</div>
        </div>

<div class="date-panel">
            <div class="date-input">
                <label>📅 Mulai</label>
                <input type="date" id="startDate">
            </div>
            <div class="date-input">
                <label>📅 Akhir</label>
                <input type="date" id="endDate">
            </div>
            <button id="applyBtn"><i class="fas fa-chart-simple"></i> Terapkan</button>
            <button id="resetBtn" class="btn-reset"><i class="fas fa-undo-alt"></i> Reset 30 Hari</button>
        </div>

<div class="chart-mode">
            <label class="mode-option">
                <input type="radio" name="chartMode" value="nominal" checked> 📊 Nominal (IDR)
            </label>
            <label class="mode-option">
                <input type="radio" name="chartMode" value="indexed"> 📈 Perubahan % (Indexed = 100 awal)
            </label>
        </div>

<div id="statsSummary" class="stats-grid">
            <div class="loader">⏳ Memuat statistik...</div>
        </div>
    </div>

<div class="card">
        <div class="card-header">
            <h2><i class="fas fa-table"></i> Data Historis Kurs (IDR per 1 unit valas)</h2>
        </div>
        <div class="date-panel" style="margin:20px 0;display:flex;gap:12px;align-items:end;flex-wrap:wrap">
            <div>
                <label style="display:block;font-size:12px;font-weight:bold;margin-bottom:6px">📅 FILTER TABEL DARI</label>
                <input type="date" id="tableStartDate" style="padding:10px;border:1px solid #cbd5e1;border-radius:12px">
            </div>
            <div>
                <label style="display:block;font-size:12px;font-weight:bold;margin-bottom:6px">📅 SAMPAI</label>
                <input type="date" id="tableEndDate" style="padding:10px;border:1px solid #cbd5e1;border-radius:12px">
            </div>
            <button id="applyTableBtn" style="padding:11px 18px;border:none;border-radius:12px;background:#1f5e8e;color:white;font-weight:bold">Filter Tabel</button>
            <button id="resetTableBtn" style="padding:11px 18px;border:none;border-radius:12px;background:#475569;color:white;font-weight:bold">Reset</button>
        </div>
        <div class="table-wrapper">
            <table id="ratesTable">
                <thead id="tableHeader"><tr><th>Tanggal</th></tr></thead>
                <tbody id="tableBody"><tr><td class="loader">Memuat data...</td></tr></tbody>
            </table>
        </div>
    </div>

<div class="card">
        <div class="card-header">
            <h2>🏆 Best & Worst Performer 32 Mata Uang</h2>
        </div>
        <div class="performer-date-range">
            <div>
                <label>📅 Mulai (base)</label>
                <input type="date" id="perfStartDate">
            </div>
            <div>
                <label>📅 Akhir</label>
                <input type="date" id="perfEndDate">
            </div>
            <button id="updatePerfBtn" style="margin-bottom:0">Update Ranking</button>
        </div>
        <div id="bestWorstContainer" class="performer-cards"></div>
    </div>

<div class="card">
        <div class="card-header">
            <h2><i class="fas fa-border-all"></i> Matriks Korelasi (Heatmap) & Penjelasan</h2>
        </div>
        <div id="heatmapChart" style="width:100%; height:500px;"></div>
        <div class="heatmap-note">
            📊 <strong>Cara baca heatmap:</strong> 
            <span style="background:#2166ac; color:white; padding:2px 8px; border-radius:12px;">+1 (biru)</span> = searah,
            <span style="background:#f4a582; color:black; padding:2px 8px; border-radius:12px;">-1 (merah)</span> = berlawanan.
        </div>
    </div>
    <div class="footer">
        ⚡ Data dari API Frankfurter (gratis, update harian).
    </div>
</div>

let historicalData = [];
    let currentChartMode = "indexed";

const formatPct = (val) => (val > 0 ? "+" : "") + val.toFixed(2) + "%";

async function fetchRates(startDate, endDate) {
        const url = `https://api.frankfurter.dev/v1/${startDate}..${endDate}?base=USD`;
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const json = await response.json();
            if (!json.rates) throw new Error("Data rates kosong");
            const dates = Object.keys(json.rates).sort();
            const result = [];
            for (let dt of dates) {
                const daily = json.rates[dt];
                const idrRate = daily["IDR"];
                if (!idrRate) continue;
                const row = { tanggal: dt };
                for (let curr of currencies) {
                    if (curr.code === "USD") {
                        row[curr.code] = idrRate;
                    } else {
                        const foreignPerUsd = daily[curr.code];
                        if (foreignPerUsd && foreignPerUsd > 0) {
                            row[curr.code] = idrRate / foreignPerUsd;
                        } else {
                            row[curr.code] = null;
                        }
                    }
                }
                result.push(row);
            }
            return result;
        } catch (err) {
            console.error(err);
            throw new Error(`Gagal mengambil data: ${err.message}`);
        }
    }

function filterTableByDate() {
        const start = document.getElementById('tableStartDate').value;
        const end = document.getElementById('tableEndDate').value;
        if (!start || !end) {
            renderTable(historicalData);
            return;
        }
        const filtered = historicalData.filter(item => item.tanggal >= start && item.tanggal <= end);
        renderTable(filtered);
    }

async function updateDashboard(start, end) {
        document.getElementById('statsSummary').innerHTML = '<div class="loader">⏳ Memuat...</div>';
        try {
            const data = await fetchRates(start, end);
            if (!data.length) throw new Error("Data kosong");
            historicalData = data;
            renderTable(data);
            renderChart(data, currentChartMode);
            renderStats(data);
            renderHeatmap(data);
            const perfStart = document.getElementById('perfStartDate').value || start;
            const perfEnd = document.getElementById('perfEndDate').value || end;
            updateBestWorstFromStats(data, perfStart, perfEnd);
        } catch (err) {
            document.getElementById('statsSummary').innerHTML = `<div style="grid-column:1/-1;color:#c62828;">❌ ${err.message}</div>`;
        }
    }

function setDefault30() {
        const end = new Date();
        const start = new Date();
        start.setDate(end.getDate() - 30);
        const startStr = start.toISOString().slice(0,10);
        const endStr = end.toISOString().slice(0,10);
        document.getElementById('startDate').value = startStr;
        document.getElementById('endDate').value = endStr;
        document.getElementById('perfStartDate').value = startStr;
        document.getElementById('perfEndDate').value = endStr;
        updateDashboard(startStr, endStr);
    }

setDefault30();
</script>
</body>
</html>