{"id":345,"date":"2026-06-10T10:08:42","date_gmt":"2026-06-10T10:08:42","guid":{"rendered":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/?page_id=345"},"modified":"2026-06-10T10:08:46","modified_gmt":"2026-06-10T10:08:46","slug":"345-2","status":"publish","type":"page","link":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/345-2\/","title":{"rendered":""},"content":{"rendered":"\n<p><\/p>\n\n\n\n\n\n\n\n\n<title>Supply Chain KPI Charts<\/title>\n\n:root{&#8211;navy:#071b49;&#8211;blue:#2454a6;&#8211;green:#17a36b;&#8211;amber:#f0a51a;&#8211;red:#c73535;&#8211;muted:#64708d;&#8211;line:rgba(7,27,73,.12);&#8211;bg:#f5f7fb;&#8211;card:#fff;&#8211;text:#17233f}\n*{box-sizing:border-box}body{margin:0;background:var(&#8211;bg);color:var(&#8211;text);font-family:Inter,Segoe UI,Arial,sans-serif}.wrap{max-width:1280px;margin:auto;padding:18px 24px 24px}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,1fr);margin-bottom:16px}.charts{grid-template-columns:1fr 1fr}.card{background:var(&#8211;card);border:1px solid var(&#8211;line);border-radius:16px;box-shadow:0 8px 22px rgba(7,27,73,.05);overflow:hidden}.kpi{padding:18px;transition:.15s transform,.15s box-shadow;cursor:pointer}.kpi:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(7,27,73,.08)}.kpi.active{outline:2px solid var(&#8211;blue)}.kpi.primary{background:var(&#8211;navy);color:white}.kpiTop{display:flex;justify-content:space-between;align-items:center}.label{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(&#8211;muted);font-family:Consolas,monospace}.primary .label{color:#aec0e6}.icon{width:34px;height:34px;border-radius:10px;background:#eef2f7;display:grid;place-items:center}.primary .icon{background:#153872}.value{font-size:36px;line-height:1;margin:18px 0 8px;font-weight:900;color:var(&#8211;navy)}.primary .value{color:white}.note{font-size:12px;color:var(&#8211;muted);font-family:Consolas,monospace}.primary .note{color:#cbd7ee}.up{color:var(&#8211;green);font-weight:800}.down{color:var(&#8211;red);font-weight:800}.head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(&#8211;line)}.head h3{margin:0;color:var(&#8211;navy);font-size:14px;text-transform:uppercase;letter-spacing:.7px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{border:1px solid var(&#8211;line);background:#fff;border-radius:999px;padding:7px 11px;font-size:12px;cursor:pointer;font-weight:700;color:var(&#8211;text)}.tab.active{background:var(&#8211;navy);color:white;border-color:var(&#8211;navy)}.chartBox{position:relative;padding:14px 18px 18px}canvas{width:100%;height:300px;display:block;cursor:pointer}.tooltip{position:fixed;display:none;background:var(&#8211;navy);color:white;padding:9px 10px;border-radius:9px;font-size:12px;pointer-events:none;z-index:10;box-shadow:0 10px 24px rgba(0,0,0,.18);max-width:230px}@media(max-width:950px){.charts{grid-template-columns:1fr}.wrap{padding:14px}}\n\n\n\n<div class=\"wrap\">\n  <div class=\"grid kpis\" id=\"kpis\"><\/div>\n  <div class=\"grid charts\">\n    <section class=\"card\">\n      <div class=\"head\"><h3>PO Completion Overview<\/h3><span class=\"note\">Hover bars<\/span><\/div>\n      <div class=\"chartBox\"><\/div>\n    <\/section>\n    <section class=\"card\">\n      <div class=\"head\"><h3>Completion Trend<\/h3><div class=\"tabs\"><button class=\"tab active\" data-metric=\"packRate\">Pack<\/button><button class=\"tab\" data-metric=\"loadRate\">Load<\/button><button class=\"tab\" data-metric=\"asnRate\">ASN<\/button><\/div><\/div>\n      <div class=\"chartBox\"><\/div>\n    <\/section>\n  <\/div>\n<\/div>\n<div class=\"tooltip\" id=\"tooltip\"><\/div>\n\nconst monthly=[\n{month:&#8217;Jan&#8217;,po:980,pack:910,load:840,asn:790},{month:&#8217;Feb&#8217;,po:1120,pack:1040,load:955,asn:910},{month:&#8217;Mar&#8217;,po:1260,pack:1185,load:1090,asn:1035},{month:&#8217;Apr&#8217;,po:1380,pack:1300,load:1215,asn:1160},{month:&#8217;May&#8217;,po:1510,pack:1435,load:1350,asn:1285},{month:&#8217;Jun&#8217;,po:1640,pack:1570,load:1490,asn:1420}\n];\nconst latest=monthly.at(-1);let metric=&#8217;packRate&#8217;;let hoverItems=[];let activeKpi=&#8217;po&#8217;;\nconst $=id=&gt;document.getElementById(id);const tooltip=$(&#8216;tooltip&#8217;);\nconst fmt=n=&gt;n.toLocaleString();const pct=(a,b)=&gt;Math.round(a\/b*1000)\/10;\nfunction kpi(key,label,value,delta,up,primary,icon){return `<div class=\"card kpi ${primary?'primary':''} ${activeKpi===key?'active':''}\" data-kpi=\"${key}\"><div class=\"kpiTop\"><span class=\"label\">${label}<\/span><span class=\"icon\">${icon}<\/span><\/div><div class=\"value\">${value}<\/div><span class=\"${up?'up':'down'}\">${up?&#8217;\u25b2&#8217;:&#8217;\u25bc&#8217;} ${delta}<\/span> <span class=\"note\">vs last month<\/span><\/div>`}\nfunction renderKpis(){\n $(&#8216;kpis&#8217;).innerHTML=kpi(&#8216;po&#8217;,&#8217;Total POs&#8217;,fmt(latest.po),&#8217;8.6%&#8217;,true,true,&#8217;\ud83d\udcc4&#8217;)+kpi(&#8216;pack&#8217;,&#8217;Pack Completion&#8217;,pct(latest.pack,latest.po)+&#8217;%&#8217;,&#8217;1.2%&#8217;,true,false,&#8217;\ud83d\udce6&#8217;)+kpi(&#8216;load&#8217;,&#8217;Load Completion&#8217;,pct(latest.load,latest.po)+&#8217;%&#8217;,&#8217;2.0%&#8217;,true,false,&#8217;\ud83d\ude9a&#8217;)+kpi(&#8216;asn&#8217;,&#8217;ASN Completion&#8217;,pct(latest.asn,latest.po)+&#8217;%&#8217;,&#8217;1.6%&#8217;,true,false,&#8217;\u2705&#8217;);\n document.querySelectorAll(&#8216;.kpi&#8217;).forEach(el=&gt;el.addEventListener(&#8216;click&#8217;,()=&gt;{activeKpi=el.dataset.kpi;renderKpis();drawBar()}));\n}\nfunction setupCanvas(canvas){const r=canvas.getBoundingClientRect(),dpr=window.devicePixelRatio||1;canvas.width=r.width*dpr;canvas.height=300*dpr;const ctx=canvas.getContext(&#8216;2d&#8217;);ctx.setTransform(dpr,0,0,dpr,0,0);return{ctx,w:r.width,h:300}}\nfunction grid(ctx,w,h,l,t,b){ctx.strokeStyle=&#8217;rgba(7,27,73,.08)&#8217;;ctx.lineWidth=1;for(let i=0;ix.chart!==&#8217;bar&#8217;);ctx.clearRect(0,0,w,h);const data=[{stage:&#8217;PO&#8217;,value:latest.po},{stage:&#8217;Pack&#8217;,value:latest.pack},{stage:&#8217;Load&#8217;,value:latest.load},{stage:&#8217;ASN&#8217;,value:latest.asn}],l=48,t=18,b=42,g=28,max=Math.max(&#8230;data.map(d=&gt;d.value))*1.15,bw=(w-l-24-g*(data.length-1))\/data.length;grid(ctx,w,h,l,t,b);data.forEach((d,i)=&gt;{const x=l+i*(bw+g),bh=d.value\/max*(h-b-t),y=h-b-bh;ctx.fillStyle=(activeKpi.toLowerCase()===d.stage.toLowerCase()||activeKpi===&#8217;po&#8217;&amp;&amp;d.stage===&#8217;PO&#8217;)?&#8217;#071b49&#8242;:&#8217;#2454a6&#8242;;ctx.beginPath();ctx.roundRect(x,y,bw,bh,8);ctx.fill();ctx.fillStyle=&#8217;#64708d&#8217;;ctx.font=&#8217;12px Consolas&#8217;;ctx.textAlign=&#8217;center&#8217;;ctx.fillText(d.stage,x+bw\/2,h-15);ctx.fillStyle=&#8217;#17233f&#8217;;ctx.font=&#8217;bold 12px Segoe UI&#8217;;ctx.fillText(fmt(d.value),x+bw\/2,y-8);hoverItems.push({chart:&#8217;bar&#8217;,x,y,w:bw,h:bh,text:`${d.stage}<br>${fmt(d.value)} records`})})}\nfunction drawLine(){const c=$(&#8216;lineChart&#8217;),{ctx,w,h}=setupCanvas(c);hoverItems=hoverItems.filter(x=&gt;x.chart!==&#8217;line&#8217;);ctx.clearRect(0,0,w,h);const l=48,t=18,b=42;grid(ctx,w,h,l,t,b);const labels={packRate:&#8217;Pack completion&#8217;,loadRate:&#8217;Load completion&#8217;,asnRate:&#8217;ASN completion&#8217;};const values=monthly.map(d=&gt;metric===&#8217;packRate&#8217;?pct(d.pack,d.po):metric===&#8217;loadRate&#8217;?pct(d.load,d.po):pct(d.asn,d.po));const max=100,min=Math.min(&#8230;values)-3,color=metric===&#8217;packRate&#8217;?&#8217;#2454a6&#8242;:metric===&#8217;loadRate&#8217;?&#8217;#17a36b&#8217;:&#8217;#c73535&#8242;;const pts=values.map((v,i)=&gt;[l+i*(w-l-22)\/(values.length-1),t+(max-v)\/(max-min)*(h-b-t),v]);ctx.strokeStyle=color;ctx.lineWidth=3;ctx.beginPath();pts.forEach((p,i)=&gt;i?ctx.lineTo(p[0],p[1]):ctx.moveTo(p[0],p[1]));ctx.stroke();pts.forEach((p,i)=&gt;{ctx.fillStyle=color;ctx.beginPath();ctx.arc(p[0],p[1],5,0,Math.PI*2);ctx.fill();ctx.fillStyle=&#8217;#64708d&#8217;;ctx.font=&#8217;11px Consolas&#8217;;ctx.textAlign=&#8217;center&#8217;;ctx.fillText(monthly[i].month,p[0],h-15);hoverItems.push({chart:&#8217;line&#8217;,x:p[0]-10,y:p[1]-10,w:20,h:20,text:`${monthly[i].month}<br>${labels[metric]}: ${p[2]}%`})})}\nfunction render(){renderKpis();drawBar();drawLine()}\nfunction move(e){const r=e.target.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top,chart=e.target.id===&#8217;barChart&#8217;?&#8217;bar&#8217;:&#8217;line&#8217;,it=hoverItems.find(i=&gt;i.chart===chart&amp;&amp;x&gt;=i.x&amp;&amp;x=i.y&amp;&amp;y{$(id).addEventListener(&#8216;mousemove&#8217;,move);$(id).addEventListener(&#8216;mouseleave&#8217;,()=&gt;tooltip.style.display=&#8217;none&#8217;)});document.querySelectorAll(&#8216;.tab&#8217;).forEach(btn=&gt;btn.addEventListener(&#8216;click&#8217;,()=&gt;{document.querySelectorAll(&#8216;.tab&#8217;).forEach(b=&gt;b.classList.remove(&#8216;active&#8217;));btn.classList.add(&#8216;active&#8217;);metric=btn.dataset.metric;drawLine()}));window.addEventListener(&#8216;resize&#8217;,render);render();\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Supply Chain KPI Charts :root{&#8211;navy:#071b49;&#8211;blue:#2454a6;&#8211;green:#17a36b;&#8211;amber:#f0a51a;&#8211;red:#c73535;&#8211;muted:#64708d;&#8211;line:rgba(7,27,73,.12);&#8211;bg:#f5f7fb;&#8211;card:#fff;&#8211;text:#17233f} *{box-sizing:border-box}body{margin:0;background:var(&#8211;bg);color:var(&#8211;text);font-family:Inter,Segoe UI,Arial,sans-serif}.wrap{max-width:1280px;margin:auto;padding:18px 24px 24px}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,1fr);margin-bottom:16px}.charts{grid-template-columns:1fr 1fr}.card{background:var(&#8211;card);border:1px solid var(&#8211;line);border-radius:16px;box-shadow:0 8px 22px rgba(7,27,73,.05);overflow:hidden}.kpi{padding:18px;transition:.15s transform,.15s box-shadow;cursor:pointer}.kpi:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(7,27,73,.08)}.kpi.active{outline:2px solid var(&#8211;blue)}.kpi.primary{background:var(&#8211;navy);color:white}.kpiTop{display:flex;justify-content:space-between;align-items:center}.label{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(&#8211;muted);font-family:Consolas,monospace}.primary .label{color:#aec0e6}.icon{width:34px;height:34px;border-radius:10px;background:#eef2f7;display:grid;place-items:center}.primary .icon{background:#153872}.value{font-size:36px;line-height:1;margin:18px 0 8px;font-weight:900;color:var(&#8211;navy)}.primary .value{color:white}.note{font-size:12px;color:var(&#8211;muted);font-family:Consolas,monospace}.primary .note{color:#cbd7ee}.up{color:var(&#8211;green);font-weight:800}.down{color:var(&#8211;red);font-weight:800}.head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(&#8211;line)}.head h3{margin:0;color:var(&#8211;navy);font-size:14px;text-transform:uppercase;letter-spacing:.7px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{border:1px solid var(&#8211;line);background:#fff;border-radius:999px;padding:7px 11px;font-size:12px;cursor:pointer;font-weight:700;color:var(&#8211;text)}.tab.active{background:var(&#8211;navy);color:white;border-color:var(&#8211;navy)}.chartBox{position:relative;padding:14px 18px 18px}canvas{width:100%;height:300px;display:block;cursor:pointer}.tooltip{position:fixed;display:none;background:var(&#8211;navy);color:white;padding:9px 10px;border-radius:9px;font-size:12px;pointer-events:none;z-index:10;box-shadow:0 10px 24px rgba(0,0,0,.18);max-width:230px}@media(max-width:950px){.charts{grid-template-columns:1fr}.wrap{padding:14px}} PO Completion Overview Hover bars Completion Trend PackLoadASN const monthly=[ {month:&#8217;Jan&#8217;,po:980,pack:910,load:840,asn:790},{month:&#8217;Feb&#8217;,po:1120,pack:1040,load:955,asn:910},{month:&#8217;Mar&#8217;,po:1260,pack:1185,load:1090,asn:1035},{month:&#8217;Apr&#8217;,po:1380,pack:1300,load:1215,asn:1160},{month:&#8217;May&#8217;,po:1510,pack:1435,load:1350,asn:1285},{month:&#8217;Jun&#8217;,po:1640,pack:1570,load:1490,asn:1420} ]; const latest=monthly.at(-1);let [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-345","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/pages\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":1,"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/pages\/345\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/pages\/345\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/uat.tradelinkone.com\/mkgt-playground\/wp-json\/wp\/v2\/media?parent=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}