Add period-over-period trend table at top of report

build_data.py now also computes each buyer's total for the preceding
3-day window under identical rules (exclusions, attribution), exposed as
prev_total plus meta.prev_range. index.html renders it as the first
panel, with green/red deltas and a total row; the panel stays hidden if
no prior period exists.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
FANGKK
2026-09-07 23:42:03 +08:00
co-authored by Claude Opus 5
parent b33cfcf6cb
commit 88084ce5ff
3 changed files with 47 additions and 0 deletions
+23
View File
@@ -25,6 +25,11 @@ summary{cursor:pointer;color:var(--accent);font-size:12px}
.foot{color:var(--sub);font-size:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:14px}
.badge{display:inline-block;background:#e6eefc;color:var(--sub);border-radius:6px;padding:2px 8px;font-size:11px;margin-left:8px}
.chartbox{position:relative;height:300px}
.up{color:#0F8A5F;font-weight:600}.down{color:#C4506A;font-weight:600}.flat{color:var(--sub)}
#trend th.sub2{font-weight:400;color:var(--sub);font-size:11px}
#trend tr.total td{border-top:2px solid var(--line);font-weight:600}
#trend td:first-child{font-weight:600}
#trend th,#trend td{white-space:nowrap}
</style>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
</head>
@@ -32,6 +37,7 @@ summary{cursor:pointer;color:var(--accent);font-size:12px}
<div class="wrap">
<h1>武汉自投 · 投手投放花费报告 <span class="badge" id="weekBadge"></span></h1>
<div class="sub" id="metaLine">加载中…</div>
<div class="panel" id="trendPanel" hidden><h2>投手花费环比<span class="badge" id="trendRange"></span></h2><div style="overflow-x:auto"><table id="trend"></table></div></div>
<div class="cards" id="cards"></div>
<div class="panel"><h2>各投手本周期内投放花费</h2><div class="chartbox"><canvas id="spendChart"></canvas></div></div>
<div class="panel"><h2>各投手主要订单 Package(花费最高)</h2><div class="chartbox"><canvas id="pkgChart"></canvas></div></div>
@@ -69,6 +75,23 @@ function render(d){
const buyers=d.buyers.slice().sort((a,b)=>b.total-a.total);
const cards=[['投手数',buyers.length],['投放花费合计',usd(d.grand_total)],['覆盖 Adpingid 数',d.week34_id_count],['花费最高投手',buyers[0].name]];
document.getElementById('cards').innerHTML=cards.map(c=>'<div class="card"><div class="k">'+c[0]+'</div><div class="v">'+c[1]+'</div></div>').join('');
// —— 环比趋势表 ——
if(d.meta.prev_range && buyers.some(b=>b.prev_total!==undefined)){
document.getElementById('trendPanel').hidden=false;
document.getElementById('trendRange').textContent=d.meta.prev_range+' → '+d.meta.date_range;
const cell=(prev,cur)=>{
const dv=cur-prev;
const cls=Math.abs(dv)<0.005?'flat':(dv>0?'up':'down');
const sign=dv>0?'+':(dv<0?'−':'');
const pct=prev>0?(sign+Math.abs(dv/prev*100).toFixed(1)+'%'):'—';
return '<td class="num '+cls+'">'+sign+'$'+fmt(Math.abs(dv))+'</td><td class="num '+cls+'">'+pct+'</td>';
};
const rows=buyers.map(b=>'<tr><td>'+b.name+'</td><td class="num">'+usd(b.prev_total||0)+'</td><td class="num">'+usd(b.total)+'</td>'+cell(b.prev_total||0,b.total)+'</tr>').join('');
const pT=buyers.reduce((s,b)=>s+(b.prev_total||0),0), cT=buyers.reduce((s,b)=>s+b.total,0);
document.getElementById('trend').innerHTML=
'<thead><tr><th>投手</th><th class="num sub2">上期</th><th class="num sub2">本期</th><th class="num">变化</th><th class="num">幅度</th></tr></thead><tbody>'
+rows+'<tr class="total"><td>合计</td><td class="num">'+usd(pT)+'</td><td class="num">'+usd(cT)+'</td>'+cell(pT,cT)+'</tr></tbody>';
}
const palette=['#5b8cff','#ff9f5b','#4dd6a8','#c78bff','#ff6b81','#f5c451'];
new Chart(document.getElementById('spendChart'),{type:'bar',data:{labels:buyers.map(b=>b.name),datasets:[{label:'投放花费',data:buyers.map(b=>b.total),backgroundColor:buyers.map((b,i)=>palette[i%palette.length])}]},plugins:[barLabels],options:{indexAxis:'y',layout:{padding:{right:76}},plugins:{legend:{display:false},tooltip:{callbacks:{label:(c)=>usd(c.parsed.x)}}},scales:{x:{ticks:{color:'#5b6472',callback:axisUsd},grid:{color:'#d6e2f5'}},y:{ticks:{color:'#111111'},grid:{display:false}}}}});
new Chart(document.getElementById('pkgChart'),{type:'bar',data:{labels:buyers.map(b=>b.name),datasets:[{label:'主要Package花费',data:buyers.map(b=>b.pkgs[0].spend),backgroundColor:'#4dd6a8'}]},options:{plugins:{legend:{display:false},tooltip:{callbacks:{label:(c)=>usd(c.parsed.y),afterLabel:(ctx)=>buyers[ctx.dataIndex].pkgs[0].pkg}}},scales:{x:{ticks:{color:'#111111'},grid:{display:false}},y:{ticks:{color:'#5b6472',callback:axisUsd},grid:{color:'#d6e2f5'}}}}});