const translate=(t,a)=>`translate(${t}, ${a})`,yLabels=["5 ms","10 ms","25 ms","50 ms","75 ms","100 ms","250 ms","500 ms","750 ms","1.0 s","2.5 s","5.0 s","7.5 s","10 s","+Inf"],drawHeatmap=(t,a,e={})=>{void 0===e.margin&&(e.margin={});const r={top:e.margin.top||5,right:e.margin.right||45,bottom:e.margin.bottom||20,left:e.margin.left||27},n=e.height||340,s=e.colorScheme||d3.interpolateViridis,i=e.bgColor||"#360043",o=Math.min(15,Math.ceil(a.length/20)),d=[],l=[],p=[],c=[],m=[];for(let t=0;t<a.length;t++){const e=a[t];l.push(e.avgTime),p.push({x:t,c:e.clients}),e.skipped&&m.push(t);const r=new Date(e.ts);if(t%o==0){const a=String(r.getHours()).padStart(2,"0"),e=String(r.getMinutes()).padStart(2,"0");d.push({x:t,t:`${a}:${e}`})}for(let a=0;a<15;a++){const r="number"==typeof e.buckets[a]?e.buckets[a]:0;c.push({x:t,y:a,freq:r})}}const g=t.offsetWidth,h=d3.scaleSequential(s).domain([0,1]),f=d3.create("svg").attr("viewBox",[0,0,g,n]),k=d3.scaleBand().domain(d3.range(a.length)).range([r.left,g-r.right]),u=d3.axisBottom(k).tickValues(d.map((t=>t.x))).tickFormat(((t,a)=>d[a].t));f.append("g").attr("id","timeAxis").attr("transform",translate(0,n-r.bottom)).attr("id","x-axis").attr("class","axis").call(u);const x=d3.scaleBand().domain(d3.range(yLabels.length)).range([n-r.bottom,r.top]),b=d3.axisRight(x).tickFormat(((t,a)=>""+yLabels[a]));f.append("g").attr("id","tickBucketsAxis").attr("class","axis").attr("transform",translate(g-r.right-3,0)).call(b),f.append("rect").attr("x",r.left).attr("y",r.top).attr("width",g-r.right-r.left).attr("height",n-r.top-r.bottom).attr("fill",i).attr("stroke",i);const y=f.append("g").attr("id","heatmap").selectAll("rect").data(c).enter().append("rect").filter((t=>"number"==typeof t.freq&&t.freq>0)).attr("x",((t,a)=>k(t.x))).attr("y",((t,a)=>x(t.y))).attr("width",k.bandwidth()).attr("height",x.bandwidth()).attr("fill",(t=>h(t.freq))).attr("stroke",(t=>h(t.freq))),w=Math.round(x.bandwidth()/2),L=d3.max(p.map((t=>t.c))),q=d3.scaleLinear().domain([0,L]).range([n-r.bottom-w,r.top+w]),S=d3.axisLeft(q).tickFormat((t=>t)).tickValues(L>7?null:d3.range(L+1));f.append("g").attr("id","clientAxis").attr("class","axis").attr("transform",translate(r.left-1.5,0)).call(S);const A=d3.line().defined((t=>!isNaN(t.c))).x((t=>k(t.x)+2)).y((t=>q(t.c))),B=f.append("g").attr("id","clientsLine");return B.append("path").datum(p).attr("fill","none").attr("stroke","black").attr("stroke-width",6).attr("stroke-linejoin","round").attr("stroke-linecap","round").attr("d",A),B.append("path").datum(p).attr("fill","none").attr("stroke"," rgb(204, 203, 203)").attr("stroke-width",2).attr("stroke-linejoin","round").attr("stroke-linecap","round").attr("d",A),f.append("g").attr("id","skipLines").selectAll(".link").data(m).enter().append("line").style("stroke","gold").attr("stroke-dasharray",6).attr("x1",(t=>k(t))).attr("x2",(t=>k(t))).attr("y1",n-r.bottom).attr("y2",r.top),t.innerHTML="",t.append(f.node()),y._groups[0].length+1};export{drawHeatmap};