script.js

/**
 * SORA Rates Dashboard — Premium Edition
 * Live data from a public Google Sheet (housingloansg.com source).
 */

const DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSetwT6jWgq4H6LPeIp3hB_hgo4HdF1P1Q7pu0JYlaUqXnzxbonDFpA_Myndbv3ewsbFOyGhW6kxLro/pub?output=csv";

let chartInstance = null;
let allData = [];
let tableExpanded = false;

// ── Helpers ──────────────────────────
const $ = id => document.getElementById(id);
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function setStatus(msg, type) {
    $("statusText").textContent = msg;
    $("status").className = "status" + (type ? " " + type : "");
}

function fmtDate(d) {
    return d.getDate().toString().padStart(2, "0") + " " + MONTHS[d.getMonth()] + " " + d.getFullYear();
}

function fmtRate(v) { return v.toFixed(4); }

function changeText(curr, prev) {
    const diff = curr - prev;
    const sign = diff >= 0 ? "+" : "";
    const bps = (diff * 100).toFixed(1);
    return { text: `${sign}${bps} bps`, cls: diff >= 0 ? "down" : "up" };
}

// ── Parse CSV ───────────────────────
function parseCsv(csv) {
    const lines = csv.trim().split("\n");
    const data = [];
    for (let i = 1; i < lines.length; i++) {
        const cols = lines[i].split(",");
        if (cols.length < 4) continue;
        const parts = cols[0].trim().split("/");
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        const dateObj = new Date(year, month, day);
        const sora = parseFloat(cols[1]);
        const sora1m = parseFloat(cols[2]);
        const sora3m = parseFloat(cols[3]);
        if (isNaN(sora)) continue;
        data.push({ dateObj, sora, sora1m, sora3m });
    }
    return data;
}

// ── Hero Rate Cards ─────────────────
function renderHero(data) {
    const latest = data[data.length - 1];
    const prev = data.length > 1 ? data[data.length - 2] : latest;

    // Animate numbers counting up
    animateValue($("heroSora"), latest.sora);
    animateValue($("hero1m"), latest.sora1m);
    animateValue($("hero3m"), latest.sora3m);

    // Change indicators
    const cs = changeText(latest.sora, prev.sora);
    const c1 = changeText(latest.sora1m, prev.sora1m);
    const c3 = changeText(latest.sora3m, prev.sora3m);

    setChange($("heroSoraChange"), cs);
    setChange($("hero1mChange"), c1);
    setChange($("hero3mChange"), c3);
}

function setChange(el, { text, cls }) {
    el.textContent = text;
    el.className = "rc-change " + cls;
}

function animateValue(el, target) {
    const duration = 800;
    const start = performance.now();
    const from = 0;
    function step(now) {
        const t = Math.min((now - start) / duration, 1);
        const ease = 1 - Math.pow(1 - t, 3); // ease-out cubic
        const val = from + (target - from) * ease;
        el.textContent = val.toFixed(4) + "%";
        if (t < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
}



// ── Chart ───────────────────────────
function renderChart(data) {
    const ctx = $("chart").getContext("2d");
    if (chartInstance) chartInstance.destroy();

    const common = {
        borderWidth: 2,
        pointRadius: 0,
        pointHoverRadius: 4,
        pointHitRadius: 12,
        tension: 0.4,
    };

    // Gradient fills
    const soraGrad = ctx.createLinearGradient(0, 0, 0, 260);
    soraGrad.addColorStop(0, "rgba(102,153,255,0.15)");
    soraGrad.addColorStop(1, "rgba(102,153,255,0)");

    const m1Grad = ctx.createLinearGradient(0, 0, 0, 260);
    m1Grad.addColorStop(0, "rgba(45,212,168,0.10)");
    m1Grad.addColorStop(1, "rgba(45,212,168,0)");

    Chart.defaults.color = "#717789";
    Chart.defaults.font.family = "'Inter', sans-serif";
    Chart.defaults.font.size = 10;

    chartInstance = new Chart(ctx, {
        type: "line",
        data: {
            datasets: [
                {
                    ...common, label: "SORA",
                    data: data.map(d => ({ x: d.dateObj, y: d.sora })),
                    borderColor: "#6699ff",
                    backgroundColor: soraGrad,
                    fill: true
                },
                {
                    ...common, label: "1M Comp.",
                    data: data.map(d => ({ x: d.dateObj, y: d.sora1m })),
                    borderColor: "#2dd4a8",
                    backgroundColor: m1Grad,
                    fill: true
                },
                {
                    ...common, label: "3M Comp.",
                    data: data.map(d => ({ x: d.dateObj, y: d.sora3m })),
                    borderColor: "#a78bfa",
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: "index", intersect: false },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: "rgba(12,14,20,0.95)",
                    borderColor: "rgba(255,255,255,0.08)",
                    borderWidth: 1,
                    titleColor: "#fff",
                    titleFont: { weight: "600", size: 11 },
                    bodyColor: "#c4c8d4",
                    bodyFont: { size: 11 },
                    padding: 10,
                    boxPadding: 3,
                    cornerRadius: 8,
                    usePointStyle: true,
                    callbacks: {
                        title: items => {
                            if (!items.length) return "";
                            const d = new Date(items[0].parsed.x);
                            return fmtDate(d);
                        },
                        label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y.toFixed(4)}%`
                    }
                }
            },
            scales: {
                x: {
                    type: "time",
                    time: { unit: "week", displayFormats: { week: "dd MMM" } },
                    border: { display: false },
                    grid: { display: false },
                    ticks: { maxTicksLimit: 7, padding: 4, font: { size: 10 } }
                },
                y: {
                    border: { display: false },
                    grid: { color: "rgba(255,255,255,0.03)", drawTicks: false },
                    ticks: {
                        padding: 6,
                        font: { size: 10 },
                        callback: v => v.toFixed(1) + "%"
                    }
                }
            }
        }
    });
}

// ── Table ───────────────────────────
function renderTable(data) {
    const tbody = $("tableBody");
    tbody.innerHTML = "";
    const sorted = [...data].reverse();

    for (const row of sorted) {
        const tr = document.createElement("tr");
        tr.innerHTML =
            `<td>${fmtDate(row.dateObj)}</td>` +
            `<td>${fmtRate(row.sora)}</td>` +
            `<td>${fmtRate(row.sora1m)}</td>` +
            `<td>${fmtRate(row.sora3m)}</td>`;
        tbody.appendChild(tr);
    }

    // Start collapsed
    $("tablePanel").classList.add("table-collapsed");
    tableExpanded = false;
    $("toggleBtn").textContent = `Show all (${sorted.length})`;
}

// ── Toggle table ────────────────────
$("toggleBtn").addEventListener("click", () => {
    tableExpanded = !tableExpanded;
    $("tablePanel").classList.toggle("table-collapsed", !tableExpanded);
    $("toggleBtn").textContent = tableExpanded ? "Show less" : `Show all (${allData.length})`;
});

// ── Main ────────────────────────────
async function main() {
    try {
        setStatus("Fetching rates…", "");
        const res = await fetch(DATA_URL);
        if (!res.ok) throw new Error("HTTP " + res.status);
        const csv = await res.text();
        allData = parseCsv(csv);
        if (allData.length === 0) throw new Error("No data rows found");

        setStatus(`Live · ${allData.length} days · updated ${fmtDate(allData[allData.length - 1].dateObj)}`, "live");

        renderHero(allData);
        renderChart(allData);

        renderTable(allData);
    } catch (err) {
        console.error(err);
        setStatus("Failed — " + err.message, "error");
    }
}

document.addEventListener("DOMContentLoaded", main);