diff --git a/attribution-mockup.html b/attribution-mockup.html index 138f8b6..0031fbb 100644 --- a/attribution-mockup.html +++ b/attribution-mockup.html @@ -853,18 +853,30 @@ function renderLTV(d) { // Average check by channel const ck = document.getElementById('ltv-check'); if (!charts.ltvCheck) charts.ltvCheck = echarts.init(ck); - const checks = [...c.checks].sort((a,b)=>parseInt(a.avg)-parseInt(b.avg)); + + const cssMap = {'var(--g)':'#22c55e','var(--b)':'#3b82f6','var(--a)':'#f59e0b','var(--p)':'#a855f7','var(--r)':'#ef4444','var(--c)':'#06b6d4'}; + const checks = c.checks.slice().sort((a,b)=>a.avg-b.avg).map(x=>({ + n: x.n, + avg: typeof x.avg === 'string' ? parseInt(x.avg) : x.avg, + c: cssMap[x.c] || x.c, + })); + charts.ltvCheck.setOption({ - tooltip:{trigger:'axis',backgroundColor:'#111',borderColor:'#222',textStyle:{color:'#fafafa',fontSize:11}}, - grid:{left:80,right:30,top:10,bottom:10}, - xAxis:{type:'value',splitLine:{lineStyle:{color:'#1a1a1e'}},axisLabel:{color:'#52525b',fontSize:9,formatter:'{value}К'}}, + tooltip:{trigger:'axis',backgroundColor:'#111',borderColor:'#222',textStyle:{color:'#fafafa',fontSize:11,formatter:p=>`${p.value[1].name}
${p.axisLabel}`} + }, + grid:{left:80,right:60,top:10,bottom:10}, + xAxis:{type:'value',splitLine:{lineStyle:{color:'#1a1a1e'}},axisLabel:{color:'#52525b',fontSize:9,formatter:v=>v>=1e5?(v/1e6).toFixed(0)+'М':(v/1e3).toFixed(0)+'К'}}, yAxis:{type:'category',data:checks.map(x=>x.n).reverse(),axisLine:{lineStyle:{color:'#1e1e22'}},axisLabel:{color:'#a1a1aa',fontSize:10}}, series:[{ - type:'bar',data:checks.map(x=>parseInt(x.avg)/1000).reverse(),barWidth:38, + type:'bar',data:checks.map(x=>x.avg/1000).reverse(),barWidth:38, itemStyle:{borderRadius:[0,5,5,0],color:p=>{ const ch = checks[p.dataIndex]; return new echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:ch.c+'88'},{offset:1,color:ch.c}]); - }} + }}, + label:{show:true,position:'right',color:'#a1a1aa',fontSize:10,formatter:p=>{ + const v = checks[p.dataIndex]?.avg || 0; + return v >= 1e6 ? (v/1e6).toFixed(1)+'М ₽' : v.toLocaleString('ru')+' ₽'; + }}, }], animationDuration:600, },true);