script.js

const tabs = [...document.querySelectorAll(".nav-item")];
tabs.forEach(btn => btn.addEventListener("click", () => {
    tabs.forEach(x => x.classList.remove("active"));
    document.querySelectorAll(".tab").forEach(x => x.classList.remove("active"));
    btn.classList.add("active");
    document.getElementById(btn.dataset.tab).classList.add("active");
    if (btn.dataset.tab === "cpp") drawLine("cppChart", [74, 76, 77, 75, 78, 79, 77, 80, 79, 78, 80, 81], "#22d3ee");
    if (btn.dataset.tab === "equipment") drawLine("assetChart", [42, 44, 43, 45, 46, 47, 49, 48, 52, 56, 61, 59], "#ffbf5b");
}));
document.getElementById("batchSelector").addEventListener("change", e => document.getElementById("heroBatch").textContent = e.target.value);
document.getElementById("refreshBtn").addEventListener("click", () => {
    document.getElementById("refreshTime").textContent = new Date().toLocaleTimeString();
});
document.querySelectorAll(".bar-chart").forEach(chart => {
    const vals = (chart.dataset.values || "").split(",").map(Number);
    [...chart.children].forEach((bar, i) => { bar.style.height = (vals[i] || 50) + "%"; bar.dataset.v = (vals[i] || 0) + "%"; });
});
function drawLine(id, values, color) {
    const c = document.getElementById(id); if (!c) return;
    const dpr = window.devicePixelRatio || 1, w = c.clientWidth, h = Number(c.getAttribute("height")) || 250;
    c.width = w * dpr; c.height = h * dpr; const x = c.getContext("2d"); x.scale(dpr, dpr); x.clearRect(0, 0, w, h);
    x.strokeStyle = "#18333d"; x.lineWidth = 1; for (let i = 1; i < 5; i++) { let y = h * i / 5; x.beginPath(); x.moveTo(0, y); x.lineTo(w, y); x.stroke(); }
    const min = Math.min(...values) - 4, max = Math.max(...values) + 4; x.strokeStyle = color; x.lineWidth = 2.5; x.beginPath();
    values.forEach((v, i) => { let px = 20 + i * (w - 40) / (values.length - 1), py = h - 20 - (v - min) / (max - min) * (h - 40); i ? x.lineTo(px, py) : x.moveTo(px, py); });
    x.stroke(); x.fillStyle = color; values.forEach((v, i) => { let px = 20 + i * (w - 40) / (values.length - 1), py = h - 20 - (v - min) / (max - min) * (h - 40); x.beginPath(); x.arc(px, py, 3, 0, Math.PI * 2); x.fill(); });
}
const datasets = {
    dashboard: [["BATCH-2026-0807-A", "98.42%", "99.18%", "98.90%", "100%"], ["BATCH-2026-0806-C", "99.01%", "100%", "100%", "100%"]],
    health: [["MIX-101", "98", "Healthy", "Stable"], ["PKG-202", "84", "Watch", "Cycle time elevated"], ["HT-201", "96", "Healthy", "Stable"]],
    cpp: [["Temperature", "79.8 °C", "78–82 °C", "Conforming"], ["Mixing Speed", "118 rpm", "110–125 rpm", "Conforming"], ["Fill Weight", "119.7 mL", "118–122 mL", "Conforming"]],
    quality: [["Appearance", "Conforms", "Pass"], ["pH", "5.42", "Pass"], ["Viscosity", "1,245 cP", "Pass"]],
    packaging: [["Planned", "4,200", "bottles"], ["Accepted", "4,183", "bottles"], ["Rejected", "17", "bottles"], ["Shortage", "17", "bottles"]]
};
const headers = { dashboard: ["Batch", "Yield", "CPP", "QC Pass", "Material"], health: ["Asset", "Health Score", "State", "Signal"], cpp: ["Parameter", "Current", "Range", "Status"], quality: ["Test", "Result", "Disposition"], packaging: ["Metric", "Value", "Unit"] };
const sql = { dashboard: "SELECT * FROM analytics.production_dashboard LIMIT 25;", health: "SELECT * FROM analytics.process_health LIMIT 25;", cpp: "SELECT * FROM analytics.cpp_performance LIMIT 25;", quality: "SELECT * FROM analytics.quality_performance LIMIT 25;", packaging: "SELECT * FROM analytics.packaging_performance LIMIT 25;" };
function renderExplorer() {
    const key = document.getElementById("datasetSelect").value, rows = datasets[key], hs = headers[key];
    document.getElementById("sqlPreview").textContent = sql[key];
    document.getElementById("explorerTable").innerHTML = "<table><thead><tr>" + hs.map(h => `<th>${h}</th>`).join("") + "</tr></thead><tbody>" + rows.map(r => "<tr>" + r.map(v => `<td>${v}</td>`).join("") + "</tr>").join("") + "</tbody></table>";
}
document.getElementById("datasetSelect").addEventListener("change", renderExplorer); renderExplorer();
document.getElementById("pipelineBtn").addEventListener("click", () => {
    const b = document.getElementById("pipelineBtn"), s = document.getElementById("pipelineStatus"), l = document.getElementById("pipelineLog"); b.disabled = true; s.textContent = "Pipeline running…";
    const stages = ["Data loaded successfully", "Data cleaning completed", "KPI calculations completed", "Manufacturing charts created successfully", "Dashboard data exported successfully", "Report generated successfully", "Automation completed successfully"]; let i = 0;
    const timer = setInterval(() => { l.textContent = new Date().toLocaleTimeString() + " [DEMO] " + stages[i] + "\n" + l.textContent; i++; if (i === stages.length) { clearInterval(timer); s.textContent = "Pipeline demonstration completed successfully."; b.disabled = false; } }, 350);
});
window.addEventListener("resize", () => { if (document.getElementById("cpp").classList.contains("active")) drawLine("cppChart", [74, 76, 77, 75, 78, 79, 77, 80, 79, 78, 80, 81], "#22d3ee"); if (document.getElementById("equipment").classList.contains("active")) drawLine("assetChart", [42, 44, 43, 45, 46, 47, 49, 48, 52, 56, 61, 59], "#ffbf5b"); });