AI Content Performance Analyzer Dashboard

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,’Segoe UI‘,Roboto,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;padding:2rem}
.container{max-width:1200px;margin:0 auto}
h1{font-size:1.8rem;color:#f8fafc;margin-bottom:.25rem}
.subtitle{color:#94a3b8;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem;margin-bottom:1.5rem}
.card{background:#1e293b;border-radius:12px;padding:1.5rem;border:1px solid #334155}
.card h2{font-size:1rem;color:#60a5fa;margin-bottom:1rem}
.chart-wrap{position:relative;height:220px}
.metric-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #334155;font-size:.9rem}
.metric-row:last-child{border-bottom:none}
.metric-label{color:#94a3b8}
.metric-value{font-weight:600;color:#f8fafc}
.metric-change{font-size:.8rem;margin-left:.5rem}
.up{color:#10b981}.down{color:#ef4444}
.event-list{list-style:none}
.event-list li{padding:.5rem 0;border-bottom:1px solid #334155;font-size:.85rem;color:#cbd5e1;display:flex;justify-content:space-between}
.event-list li:last-child{border-bottom:none}
.tag{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;margin-right:.5rem}
.tag-ai{background:#1e3a5f;color:#60a5fa}
.tag-infra{background:#1e3a2f;color:#34d399}
.tag-agents{background:#3a1e3a;color:#c084fc}
.tag-security{background:#3a1e1e;color:#f87171}
.tag-data{background:#3a2e0e;color:#fbbf24}

const labels=[‚Mar 1′,’Mar 8′,’Mar 15′,’Mar 22′,’Mar 29′,’Apr 5′,’apr 12′,’Apr 19′,’Apr 26′,’May 3′,’May 10′,’May 17′,’May 24‘];
const viewsData=[4200,5100,4800,6200,7100,6800,8200,9100,8800,10200,11500,10800,12400];
const engagementData=[1200,1500,1350,1800,2100,1950,2400,2700,2550,3100,3400,3200,3800];

new Chart(document.getElementById(‚engagementChart‘),{
type:’line‘,
data:{labels,datasets:[
{label:’Page Views‘,data:viewsData,borderColor:’#3b82f6′,backgroundColor:’rgba(59,130,246,0.1)‘,fill:true,tension:0.4},
{label:’Engaged Users‘,data:engagementData,borderColor:’#10b981′,backgroundColor:’rgba(16,185,129,0.1)‘,fill:true,tension:0.4}
]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:’#94a3b8′}}},scales:{x:{ticks:{color:’#64748b‘},grid:{color:’#1e293b‘}},y:{ticks:{color:’#64748b‘},grid:{color:’#1e293b‘}}}}
});

new Chart(document.getElementById(‚trafficChart‘),{
type:’doughnut‘,
data:{labels:[‚Organic Search‘,’Social Media‘,’Direct‘,’Referral‘,’Newsletter‘],
datasets:[{data:[42,23,18,11,6],
backgroundColor:[‚#3b82f6′,’#8b5cf6′,’#10b981′,’#f59e0b‘,’#ef4444′]}]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:’right‘,labels:{color:’#94a3b8′,padding:12}}}}
});

new Chart(document.getElementById(‚topicChart‘),{
type:’bar‘,
data:{labels:[‚AI Agents‘,’Infrastructure‘,’Security‘,’Healthcare‘,’Climate‘,’Fintech‘,’Education‘,’Coding‘],
datasets:[{label:’Total Views‘,data:[28400,22100,19800,16200,14500,12800,11200,10500],
backgroundColor:’#3b82f6′}]},
options:{responsive:true,maintainAspectRatio:false,indexAxis:’y‘,plugins:{legend:{display:false}},scales:{x:{ticks:{color:’#64748b‘},grid:{color:’#1e293b‘}},y:{ticks:{color:’#94a3b8′},grid:{display:false}}}}
});

const topPosts=[
{title:’AI Agent Memory Systems‘,views:2840,engagement:’68%‘,tag:’agents‘},
{title:’Multi-Agent Orchestration‘,views:2150,engagement:’72%‘,tag:’agents‘},
{title:’AI Security Threat Detection‘,views:1980,engagement:’65%‘,tag:’security‘},
{title:’Modern Data Pipelines for AI‘,views:1720,engagement:’61%‘,tag:’data‘},
{title:’AI Compliance Checklist 2026′,views:1580,engagement:’74%‘,tag:’ai‘}
];
document.getElementById(‚topPosts‘).innerHTML=topPosts.map(p=>`

`).join(“);

const metrics=[
{label:’Total Page Views (90d)‘,value:’127,400′,change:’+23.4%‘,up:true},
{label:’Avg. Engagement Rate‘,value:’64.2%‘,change:’+5.1%‘,up:true},
{label:’Publishing Cadence‘,value:’4.2 posts/wk‘,change:’+0.8′,up:true},
{label:’Bounce Rate‘,value:’38.1%‘,change:‘-2.3%‘,up:true},
{label:’Avg. Time on Page‘,value:’4m 32s‘,change:’+18s‘,up:true},
{label:’Return Visitor Rate‘,value:’34.8%‘,change:’+3.2%‘,up:true}
];
document.getElementById(‚keyMetrics‘).innerHTML=metrics.map(m=>`

`).join(“);

const events=[
{date:’May 28′,event:’Published: AI Agent Memory Systems‘,tag:’agents‘},
{date:’May 28′,event:’Published: Multi-Agent Orchestration‘,tag:’agents‘},
{date:’May 28′,event:’Published: Future of AI Work‘,tag:’ai‘},
{date:’May 27′,event:’Published: AI Agent Evaluation Tool‘,tag:’agents‘},
{date:’May 26′,event:’Published: Wave 151 Hub Page‘,tag:’ai‘},
{date:’May 25′,event:’Published: MLOps Maturity Model‘,tag:’infra‘},
{date:’May 24′,event:’Published: Cybersecurity AI Maturity‘,tag:’security‘}
];
document.getElementById(‚recentActivity‘).innerHTML=events.map(e=>`

${e.tag}${e.event}

${e.date}

`).join(“);