PMO Prototype Suite for GitHub Pages

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Integrated Controls Command Board</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" />
  <style>body{font-family:sans-serif;margin:2rem;}canvas{max-width:800px;}</style>
</head>
<body>
  <h1>Integrated Controls Command Board</h1>
  <canvas id="costChart"></canvas>
  <canvas id="fteChart"></canvas>
  <canvas id="effChart"></canvas>
<script type="module">
(async () => {
const data = await fetch('./data.json').then(r => r.json());
// Cost vs baseline
new Chart(costChart, {type:'line',data:{labels:data.periods,datasets:[{label:'Baseline £m',data:data.baseline},{label:'Actual £m',data:data.actual}]}});
// FTE utilisation
new Chart(fteChart, {type:'bar',data:{labels:data.periods,datasets:[{label:'Planned',data:data.fte_planned},{label:'Actual',data:data.fte_actual}]}});
// Efficiency KPI
new Chart(effChart, {type:'radar',data:{labels:['Reporting','Gate Prep','Change Ctrl','Risk'],datasets:[{label:'Eff %',data:data.efficiency}]}});
})();
</script>
</body></html>

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>canvas{max-width:900px;margin-top:2rem}</style></head>
<body>
<h1>Decision Latency Tracker</h1>
<canvas id="latency"></canvas>
<script type="module">
(async () => {
const data = await fetch('./data.json').then(r => r.json());
new Chart(latency,{type:'bar',options:{indexAxis:'y'},data:{labels:data.items.map(i=>i.name),datasets:[{label:'Days to Decision',data:data.items.map(i=>i.days)}]}});
})();
</script></body></html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>body{font-family:sans-serif}input{width:60%}</style></head>
<body>
<h1>Lessons-to-Action Synthesiser</h1>
<input id="q" placeholder="search…" oninput="filter()"><ul id="list"></ul>
<script type="module">
(async () => {
const lessons = await fetch('./lessons.json').then(r => r.json());
const list=document.getElementById('list');
function render(arr){list.innerHTML='';arr.forEach(l=>{const li=document.createElement('li');li.textContent=`[${l.tag}] ${l.text}`;list.appendChild(li);});}
function filter(){const f=q.value.toLowerCase();render(lessons.filter(l=>l.text.toLowerCase().includes(f)||l.tag.toLowerCase().includes(f)));}
render(lessons);
})();
</script></body></html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/d3@7"></script><style>svg{font:10px sans-serif}</style></head>
<body>
<h1>Org Heatmap & Efficiency</h1>
<svg id="heat" width="600" height="400"></svg>
<script type="module">
(async () => {
const grid = await fetch('./heatmap.json').then(r => r.json());
const svg=d3.select('#heat');
const cell=40;
svg.attr('height',cell*grid.teams.length+40).attr('width',cell*grid.processes.length+120);
// axes
svg.selectAll('text.team').data(grid.teams).enter().append('text').attr('x',0).attr('y',(d,i)=>i*cell+cell*1.3).text(d=>d);
svg.selectAll('text.proc').data(grid.processes).enter().append('text').attr('x',(d,i)=>i*cell+60).attr('y',10).attr('transform',(d,i)=>`rotate(-40 ${(i*cell+60)},10)`).text(d=>d);
// cells
grid.values.forEach((row,r)=>row.forEach((v,c)=>{
  svg.append('rect').attr('x',c*cell+50).attr('y',r*cell+20).attr('width',cell-2).attr('height',cell-2)
    .attr('fill',`rgba(0,128,255,${v/100})`).append('title').text(`${v}% utilisation`);
}));
})();
</script></body></html>