UNPKG

d3-flame-graph

Version:

A d3.js library to produce flame graphs.

3 lines (2 loc) 12.8 kB
(function(x,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("d3-selection"),require("d3-format"),require("d3-array"),require("d3-hierarchy"),require("d3-scale"),require("d3-ease"),require("d3-transition"),require("d3-dispatch")):typeof define=="function"&&define.amd?define(["exports","d3-selection","d3-format","d3-array","d3-hierarchy","d3-scale","d3-ease","d3-transition","d3-dispatch"],k):(x=typeof globalThis<"u"?globalThis:x||self,k(x.flamegraph={},x.d3,x.d3,x.d3,x.d3,x.d3,x.d3))})(this,(function(x,k,G,fe,K,Q,se){"use strict";var U=document.createElement("style");U.textContent=`.d3-flame-graph rect{stroke:#eee;fill-opacity:.8}.d3-flame-graph rect:hover{stroke:#474747;stroke-width:.5;cursor:pointer}.d3-flame-graph-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;font-family:Verdana;margin-left:4px;margin-right:4px;line-height:1.5;padding:0;font-weight:400;color:#000;text-align:left}.d3-flame-graph .fade{opacity:.6!important}.d3-flame-graph .title{font-size:20px;font-family:Verdana}.d3-flame-graph-tip{background-color:#000;border:none;border-radius:3px;padding:5px 10px;min-width:250px;text-align:left;color:#fff;z-index:10} /*$vite$:1*/`,document.head.appendChild(U);function ce(l){let o=0,a=0,u=1;const g=10;if(l){for(let s=0;s<l.length&&!(s>6);s++)o+=u*(l.charCodeAt(s)%g),a+=u*(g-1),u*=.7;a>0&&(o=o/a)}return o}function ee(l){let i=0;if(l){const o=l.split("`");o.length>1&&(l=o[o.length-1]),l=l.split("(")[0],i=ce(l)}return i}function he(l,i){let o,a,u;return l==="red"?(o=200+Math.round(55*i),a=50+Math.round(80*i),u=a):l==="orange"?(o=190+Math.round(65*i),a=90+Math.round(65*i),u=0):l==="yellow"?(o=175+Math.round(55*i),a=o,u=50+Math.round(20*i)):l==="green"?(o=50+Math.round(60*i),a=200+Math.round(55*i),u=o):l==="pastelgreen"?(o=163+Math.round(75*i),a=195+Math.round(49*i),u=72+Math.round(149*i)):l==="blue"?(o=91+Math.round(126*i),a=156+Math.round(76*i),u=221+Math.round(26*i)):l==="aqua"?(o=50+Math.round(60*i),a=165+Math.round(55*i),u=a):l==="cold"?(o=0+Math.round(55*(1-i)),a=0+Math.round(230*(1-i)),u=200+Math.round(55*i)):(o=200+Math.round(55*i),a=0+Math.round(230*(1-i)),u=0+Math.round(55*(1-i))),"rgb("+o+","+a+","+u+")"}function te(l){return l.data.name}function de(){var l=k.select("body"),i=null,o=te,a=te,u=!1;function g(){i=l.append("div").style("display","none").style("position","absolute").style("opacity",0).style("pointer-events","none").attr("class","d3-flame-graph-tip")}return g.show=function(s,y){u?i.html(o(y)):i.text(a(y));var v=i.node().offsetWidth,w=i.node().offsetHeight,b=s.pageX+5,H=s.pageY+5;return b+v>window.innerWidth&&(b=s.pageX-v-5),b<0&&(b=5),H+w>window.innerHeight&&(H=s.pageY-w-5),H<0&&(H=5),i.style("display","block").style("left",b+"px").style("top",H+"px").transition().duration(200).style("opacity",1).style("pointer-events","all"),g},g.hide=function(){return i.style("display","none").transition().duration(200).style("opacity",0).style("pointer-events","none"),g},g.text=function(s){return arguments.length?(a=s,u=!1,g):a},g.html=function(s){return arguments.length?(o=s,u=!0,g):o},g.destroy=function(){i.remove()},g}const ge=Object.freeze(Object.defineProperty({__proto__:null,defaultFlamegraphTooltip:de},Symbol.toStringTag,{value:"Module"}));function pe(l,i,o){const a=o,u=1-a;return[Math.round(l[0]*a+i[0]*u),Math.round(l[1]*a+i[1]*u),Math.round(l[2]*a+i[2]*u)]}function me(l,i){if(l.highlight)return i;const o=l.data.value,a=l.value;return`rgb(${pe([0,255,40],[196,245,233],o/a).join()})`}function ye(l,i){if(l.highlight)return i;const o=l.data.n||l.data.name,a=ee(o),u=0+Math.round(55*(1-a)),g=0+Math.round(230*(1-a)),s=200+Math.round(55*a);return"rgb("+u+","+g+","+s+")"}function ve(l,i){let o=i;const{v8_jit:a,javascript:u,optimized:g}=l.data.extras||{};if(a&&!u&&(o="#dadada"),u){let s=(g||0)/l.value,y=255,v=0,w=0;s<.4?(s=s*2.5,y=240-s*200):s<.9?(s=(s-.4)*2,y=0,w=200-200*s,v=100*s):(s=(s-.9)*10,y=0,w=0,v=100+150*s),o=`rgb(${y} , ${v}, ${w})`}return o}function xe(l,i){if(l.highlight)return i;let o=220,a=220,u=220;const g=l.delta||l.data.d||l.data.delta,s=Math.abs(g);let y=l.value||l.data.v||l.data.value;y<=s&&(y=s);const v=s/y;return g===y?(o=255,a=190,u=90):g>0?(u=Math.round(235*(1-v)),a=u):g<0&&(o=Math.round(235*(1-v)),a=o),"rgb("+o+","+a+","+u+")"}const Me=Object.freeze(Object.defineProperty({__proto__:null,allocationColorMapper:me,differentialColorMapper:xe,nodeJsColorMapper:ve,offCpuColorMapper:ye},Symbol.toStringTag,{value:"Module"}));function we(){let l=960,i=null,o=18,a=null,u=null,g="",s=750,y=se.easeCubic,v=!1,w=!1,b=null,H=null,L=0,E=null,z=null,R=!1,I=!1,X=!1,O=null,F=!1,q=null,C=function(e){return e.data.n||e.data.name},T=function(e){return"v"in e?e.v:e.value},W=function(e){return e.c||e.children},J=function(e){return e.data.l||e.data.libtype},P=function(e){return"d"in e.data?e.data.d:e.data.delta},S=function(e,r,n){z=()=>{E&&(E.textContent="search: "+r+" of "+n+" total samples ( "+G.format(".3f")(100*(r/n),3)+"%)")},z()};const be=S;let N=(e,r,n=!1)=>{if(!r)return!1;let f=C(e);n&&(r=r.toLowerCase(),f=f.toLowerCase());const c=new RegExp(r);return typeof f<"u"&&f&&f.match(c)};const He=N;let D=function(e){E&&(e?E.textContent=e:typeof z=="function"?z():E.textContent="")};const Ce=D;let Z=function(e){return C(e)+" ("+G.format(".3f")(100*(e.x1-e.x0),3)+"%, "+T(e)+" samples)"},$=function(e){return e.highlight?"#E600E6":_e(C(e),J(e))};const ne=$;function _e(e,r){let n=q||"warm";!q&&!(typeof r>"u"||r==="")&&(n="red",typeof e<"u"&&e&&e.match(/::/)&&(n="yellow"),r==="kernel"?n="orange":r==="jit"?n="green":r==="inlined"&&(n="aqua"));const f=ee(e);return he(n,f)}function re(e){e.data.fade=!1,e.data.hide=!1,e.children&&e.children.forEach(re)}function ke(e){let r=e,n=r.parent,f,c,d;for(;n;){for(f=n.children,c=f.length;c--;)d=f[c],d!==r&&(d.data.hide=!0);r=n,n=r.parent}}function ie(e){e.parent&&(e.parent.data.fade=!0,ie(e.parent))}function Y(e,r){if(u&&u.hide(),ke(e),re(e),ie(e),V(),X){const n=r.parentNode.offsetTop,f=(window.innerHeight-n)/o,c=(e.height-f+10)*o;window.scrollTo({top:n+c,left:0,behavior:"smooth"})}typeof b=="function"&&b(e)}function Ee(e,r){const n=[];let f=0;function c(d,m){let p=!1;N(d,r)?(d.highlight=!0,p=!0,m||(f+=T(d)),n.push(d)):d.highlight=!1,d.children&&d.children.forEach(function(_){c(_,m||p)})}return c(e,!1),[n,f]}function le(e,r){if(e.id===r)return e;{const n=e.children;if(n)for(let f=0;f<n.length;f++){const c=le(n[f],r);if(c)return c}}}function ae(e){e.highlight=!1,e.children&&e.children.forEach(function(r){ae(r)})}function De(e,r){if(typeof v=="function")return v(e,r);if(v)return fe.ascending(C(e),C(r))}const je=K.partition();function Oe(e){let r=e.descendants();if(L>0){const n=l/(e.x1-e.x0);r=r.filter(function(f){return(f.x1-f.x0)*n>L})}return r}function V(){a.each(function(e){const r=Q.scaleLinear().range([0,l]),n=Q.scaleLinear().range([0,o]);v&&e.sort(De),ue(e),je(e);const f=l/(e.x1-e.x0);function c(h){return(h.x1-h.x0)*f}const d=Oe(e),m=k.select(this).select("svg");m.attr("width",l);let p=m.selectAll("g").data(d,function(h){return h.id});if(!i||I){let h=0;for(let M=0;M<d.length;++M)d[M].depth>h&&(h=d[M].depth);i=(h+3)*o,i<O&&(i=O),m.attr("height",i)}p.transition().duration(s).ease(y).attr("transform",function(h){return"translate("+r(h.x0)+","+(w?n(h.depth):i-n(h.depth)-o)+")"}),p.select("rect").transition().duration(s).ease(y).attr("width",c);const _=p.enter().append("svg:g").attr("transform",function(h){return"translate("+r(h.x0)+","+(w?n(h.depth):i-n(h.depth)-o)+")"});_.append("svg:rect").transition().delay(s/2).attr("width",c),u||_.append("svg:title"),_.append("foreignObject").append("xhtml:div"),p=m.selectAll("g").data(d,function(h){return h.id}),p.attr("width",c).attr("height",function(h){return o}).attr("name",function(h){return C(h)}).attr("class",function(h){return h.data.fade?"frame fade":"frame"}),p.select("rect").attr("height",function(h){return o}).attr("fill",function(h){return $(h)}),u||p.select("title").text(Z),p.select("foreignObject").attr("width",c).attr("height",function(h){return o}).style("pointer-events","none").select("div").attr("class","d3-flame-graph-label").style("display",function(h){return c(h)<35?"none":"block"}).transition().delay(s).text(C),p.on("click",function(h,M){Y(M,this)}),p.exit().remove(),p.on("mouseover",function(h,M){u&&u.show(h,M),D(Z(M)),typeof H=="function"&&H(M)}).on("mouseout",function(){u&&u.hide(),D(null)})})}function oe(e,r){r.forEach(function(n){const f=e.find(function(c){return c.name===n.name});f?(f.value+=n.value,n.children&&(f.children||(f.children=[]),oe(f.children,n.children))):e.push(n)})}function Te(e,r){r(e);let n=e.children;if(n){const f=[n];let c,d,m;for(;f.length;)for(n=f.pop(),c=n.length;c--;)d=n[c],r(d),m=d.children,m&&f.push(m)}}function Ve(e){let r=0;Te(e,function(n){n.id=r++})}function ue(e){let r,n,f,c,d,m,p,_;const h=[],M=[],A=[],ze=!R;let j=e.data;for(j.hide?(e.value=0,n=e.children,n&&A.push(n)):(e.value=j.fade?0:T(j),h.push(e));r=h.pop();)if(n=r.children,n&&(d=n.length)){for(c=0;d--;){if(p=n[d],j=p.data,j.hide){p.value=0,f=p.children,f&&A.push(f);continue}j.fade?p.value=0:(_=T(j),p.value=_,c+=_),h.push(p)}ze&&r.value&&(r.value-=c),M.push(n)}for(d=M.length;d--;){for(n=M[d],c=0,m=n.length;m--;)c+=n[m].value;n[0].parent.value+=c}for(;A.length;)for(n=A.pop(),m=n.length;m--;)p=n[m],p.value=0,f=p.children,f&&A.push(f)}function B(){a.datum(e=>{if(e.constructor.name!=="Node"){const r=K.hierarchy(e,W);return Ve(r),ue(r),r.originalValue=r.value,F&&r.eachAfter(n=>{let f=P(n);const c=n.children;let d=c&&c.length;for(;--d>=0;)f+=c[d].delta;n.delta=f}),r}})}function t(e){if(!arguments.length)return t;a=e,B(),a.each(function(r){if(k.select(this).select("svg").size()===0){const n=k.select(this).append("svg:svg").attr("width",l).attr("class","partition d3-flame-graph");i&&(i<O&&(i=O),n.attr("height",i)),n.append("svg:text").attr("class","title").attr("text-anchor","middle").attr("y","25").attr("x",l/2).attr("fill","#808080").text(g),u&&n.call(u)}}),V()}return t.height=function(e){return arguments.length?(i=e,t):i},t.minHeight=function(e){return arguments.length?(O=e,t):O},t.width=function(e){return arguments.length?(l=e,t):l},t.cellHeight=function(e){return arguments.length?(o=e,t):o},t.tooltip=function(e){return arguments.length?(typeof e=="function"&&(u=e),t):u},t.title=function(e){return arguments.length?(g=e,t):g},t.transitionDuration=function(e){return arguments.length?(s=e,t):s},t.transitionEase=function(e){return arguments.length?(y=e,t):y},t.sort=function(e){return arguments.length?(v=e,t):v},t.inverted=function(e){return arguments.length?(w=e,t):w},t.computeDelta=function(e){return arguments.length?(F=e,t):F},t.setLabelHandler=function(e){return arguments.length?(Z=e,t):Z},t.label=t.setLabelHandler,t.search=function(e){const r=[];let n=0,f=0;a.each(function(c){const d=Ee(c,e);r.push(...d[0]),n+=d[1],f+=c.originalValue}),S(r,n,f),V()},t.findById=function(e){if(typeof e>"u"||e===null)return null;let r=null;return a.each(function(n){r===null&&(r=le(n,e))}),r},t.clear=function(){D(null),a.each(function(e){ae(e),V()})},t.zoomTo=function(e){Y(e,a.node())},t.resetZoom=function(){a.each(function(e){Y(e,a.node())})},t.onClick=function(e){return arguments.length?(b=e,t):b},t.onHover=function(e){return arguments.length?(H=e,t):H},t.merge=function(e){return a&&(this.resetZoom(),z=null,D(null),a.datum(r=>(oe([r.data],[e]),r.data)),B(),V()),t},t.update=function(e){return a&&(e&&(a.datum(e),B()),V()),t},t.destroy=function(){return a&&(u&&(u.hide(),typeof u.destroy=="function"&&u.destroy()),a.selectAll("svg").remove()),t},t.setColorMapper=function(e){return arguments.length?($=r=>{const n=ne(r);return e(r,n)},t):($=ne,t)},t.color=t.setColorMapper,t.setColorHue=function(e){return arguments.length?(q=e,t):(q=null,t)},t.minFrameSize=function(e){return arguments.length?(L=e,t):L},t.setDetailsElement=function(e){return arguments.length?(E=e,t):E},t.details=t.setDetailsElement,t.selfValue=function(e){return arguments.length?(R=e,t):R},t.resetHeightOnZoom=function(e){return arguments.length?(I=e,t):I},t.scrollOnZoom=function(e){return arguments.length?(X=e,t):X},t.getName=function(e){return arguments.length?(C=e,t):C},t.getValue=function(e){return arguments.length?(T=e,t):T},t.getChildren=function(e){return arguments.length?(W=e,t):W},t.getLibtype=function(e){return arguments.length?(J=e,t):J},t.getDelta=function(e){return arguments.length?(P=e,t):P},t.setSearchHandler=function(e){return arguments.length?(S=e,t):(S=be,t)},t.setDetailsHandler=function(e){return arguments.length?(D=e,t):(D=Ce,t)},t.setSearchMatch=function(e){return arguments.length?(N=e,t):(N=He,t)},t}x.colorMapper=Me,x.default=we,x.tooltip=ge,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));