// Observable Notebook 2.0 JavaScript cell. The markdown cells live in notebook.md. const fields = [ ["Week 1", "w1s", "Tasks submitted", 6, 20, 1], ["Week 1", "w1r", "Tasks reviewed", 5, 20, 1], ["Week 1", "w1a", "Tasks accepted", 3, 20, 1], ["Week 2", "w2s", "Tasks submitted", 7, 20, 1], ["Week 2", "w2r", "Tasks reviewed", 6, 20, 1], ["Week 2", "w2a", "Tasks accepted", 5, 20, 1], ["Time", "usual", "Usual hours per accepted task", 4, 12, .25], ["Time", "prep", "Preparation hours per submitted task", .75, 4, .25], ["Time", "review", "Review hours per reviewed task", .5, 4, .25], ["Time", "execution", "Internal execution hours, both weeks", 2, 20, .5], ["Spend", "planned", "Documented contractor budget ($)", 0, 5000, 50], ["Spend", "actual", "Actual contractor spend ($)", 0, 5000, 50] ]; const root = document.createElement("section"); root.innerHTML = `

`; const colors = {submitted: "#5b778b", reviewed: "#2b8190", accepted: "#d28b45"}; const grid = root.querySelector(".pilot-grid"); for (const group of ["Week 1", "Week 2", "Time", "Spend"]) { const card = document.createElement("div"); card.className = "pilot-card"; const heading = document.createElement("h3"); heading.textContent = group; card.append(heading); for (const [, key, label, value, max, step] of fields.filter(f => f[0] === group)) { const row = document.createElement("label"); const title = document.createElement("span"); title.textContent = label; const amount = document.createElement("output"); amount.textContent = String(value); title.append(amount); const input = document.createElement("input"); input.type = "range"; input.min = "0"; input.max = String(max); input.step = String(step); input.value = String(value); input.dataset.key = key; row.append(title, input); card.append(row); } grid.append(card); } function update() { const v = Object.fromEntries([...root.querySelectorAll("input")].map(i => [i.dataset.key, Number(i.value)])); for (const input of root.querySelectorAll("input")) input.parentElement.querySelector("output").textContent = input.value; const weeks = [ {name: "Week 1", submitted: v.w1s, reviewed: v.w1r, accepted: v.w1a}, {name: "Week 2", submitted: v.w2s, reviewed: v.w2r, accepted: v.w2a} ]; const errors = weeks.flatMap(w => [ ...(w.reviewed > w.submitted ? [`${w.name}: reviewed exceeds submitted`] : []), ...(w.accepted > w.reviewed ? [`${w.name}: accepted exceeds reviewed`] : []) ]); const submitted = weeks.reduce((n, w) => n + w.submitted, 0); const reviewed = weeks.reduce((n, w) => n + w.reviewed, 0); const accepted = weeks.reduce((n, w) => n + w.accepted, 0); const netHours = accepted * v.usual - submitted * v.prep - reviewed * v.review - v.execution; const avoidedSpend = accepted === 0 ? 0 : Math.max(0, v.planned - v.actual); const result = root.querySelector(".pilot-result"); result.setAttribute("aria-invalid", String(errors.length > 0)); result.innerHTML = errors.length ? `Review gate: ${errors.join("; ")}. Correct the counts before interpreting the model.` : `

Accepted output${accepted} of ${reviewed}Net internal hours released${netHours.toFixed(2)} hExternal spend avoided$${avoidedSpend.toLocaleString("en-US")}

`; const chart = root.querySelector(".pilot-chart"); chart.replaceChildren(); for (const w of weeks) { const column = document.createElement("div"); column.className = "pilot-week"; const bars = document.createElement("div"); bars.className = "pilot-bars"; for (const kind of ["submitted", "reviewed", "accepted"]) { const bar = document.createElement("div"); bar.className = "pilot-bar"; bar.style.height = `${w[kind] / 20 * 100}%`; bar.style.background = colors[kind]; bar.title = `${w.name} ${kind}: ${w[kind]}`; bars.append(bar); } const caption = document.createElement("div"); caption.textContent = w.name; column.append(bars, caption); chart.append(column); } chart.setAttribute("aria-label", weeks.map(w => `${w.name}: ${w.submitted} submitted, ${w.reviewed} reviewed, ${w.accepted} accepted`).join("; ")); } const legend = root.querySelector(".pilot-legend"); for (const kind of ["submitted", "reviewed", "accepted"]) { const item = document.createElement("span"); item.innerHTML = `${kind}`; legend.append(item); } root.querySelectorAll("input").forEach(i => i.addEventListener("input", update)); update(); display(root);