Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Citation chart</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> | |
| <style> | |
| html,body{ margin:0; height:100%; font-family:'Inter',system-ui,sans-serif; background:#fff; } | |
| #box{ position:absolute; inset:0; padding:10px; box-sizing:border-box; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="box"><canvas id="chart"></canvas></div> | |
| <script> | |
| const qs = new URLSearchParams(location.search); | |
| const p = qs.get('p') || 'total'; | |
| const days = qs.get('days'); | |
| function filterDays(dates, vals){ | |
| const n = parseInt(days); if(!n) return {dates, vals}; | |
| const cut = new Date(); cut.setDate(cut.getDate()-n); | |
| const d2=[], v2=[]; dates.forEach((x,i)=>{ if(new Date(x+'T00:00:00')>=cut){ d2.push(x); v2.push(vals[i]); } }); | |
| return {dates:d2, vals:v2}; | |
| } | |
| fetch('/api/data').then(r=>r.json()).then(d=>{ | |
| let vals, title; | |
| if(p === 'total'){ vals = d.history.total; title = (d.author.name? d.author.name+' — ':'') + 'Total citations'; } | |
| else{ vals = d.history.by_paper[p] || []; | |
| const pp = d.papers.find(x=>x.paper_id===p); | |
| title = pp ? (pp.title.length>60? pp.title.slice(0,60)+'…' : pp.title) : 'Citations'; } | |
| const f = filterDays(d.history.dates, vals); const dates = f.dates; vals = f.vals; | |
| new Chart(document.getElementById('chart'), { type:'line', | |
| data:{ labels:dates, datasets:[{ label:title, data:vals, borderColor:'#4f46e5', | |
| backgroundColor:'rgba(79,70,229,.08)', fill:true, tension:.25, pointRadius:3, borderWidth:2 }]}, | |
| options:{ responsive:true, maintainAspectRatio:false, | |
| plugins:{ legend:{display:false}, title:{display:true, text:title, font:{size:14}} }, | |
| scales:{ y:{ beginAtZero:true, grid:{color:'#f1f5f9'} }, x:{ grid:{display:false} } } } }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |