chart = { const result = {"id":"t2-network-requests","title":"Network Requests(T2)","description":"Lists the network requests that were made during page load.","score":null,"scoreDisplayMode":"informative","rawValue":34,"details":{"type":"table","headings":[{"key":"url","itemType":"url","text":"URL"},{"key":"startTime","itemType":"ms","granularity":1,"text":"Start Time"},{"key":"endTime","itemType":"ms","granularity":1,"text":"End Time"},{"key":"transferSize","itemType":"bytes","displayUnit":"kb","granularity":1,"text":"Transfer Size"},{"key":"statusCode","itemType":"text","text":"Status Code"},{"key":"mimeType","itemType":"text","text":"MIME Type"},{"key":"resourceType","itemType":"text","text":"Resource Type"}],"items":[{"url":"https://costbx.ijieyb.com/mobile/index.html?corpid=ding087b01191d39e78935c2f4657eb6378f&modelType=10","startTime":0,"endTime":451.4300003647804,"transferSize":1737,"statusCode":200,"mimeType":"text/html","resourceType":"Document"},{"url":"https://costbx.ijieyb.com/mobile/lib/dingtalk.js","startTime":515.8620001748204,"endTime":566.1960002034903,"transferSize":8848,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/mobile/styles/manifest.d6d8a436073cff5828e358ab0a96beda.css","startTime":531.1470003798604,"endTime":632.4310004711151,"transferSize":32803,"statusCode":200,"mimeType":"text/css","resourceType":"Stylesheet"},{"url":"https://costbx.ijieyb.com/mobile/styles/main.58dd1018e03e667d1264f3c78f3ad5a6.css","startTime":547.0510004088283,"endTime":673.5490001738071,"transferSize":34863,"statusCode":200,"mimeType":"text/css","resourceType":"Stylesheet"},{"url":"https://costbx.ijieyb.com/mobile/version.js?tm=1563518561639","startTime":724.045000039041,"endTime":764.8900002241135,"transferSize":504,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/mobile/manifest6fc8395cea66215b0007.js","startTime":780.2360001951456,"endTime":6069.474000483751,"transferSize":674497,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/mobile/normalizec08b3a6fd30deb82e30f.js","startTime":6135.289000347257,"endTime":6200.817000120878,"transferSize":199,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/mobile/vendorb9dee843484bb3fa725c.js","startTime":6142.292000353336,"endTime":6205.3880002349615,"transferSize":145,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/mobile/mainba5fe707d66e9074dcaf.js","startTime":6146.739999763668,"endTime":6213.510000146925,"transferSize":142,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/getConfig.json","startTime":6392.558000050485,"endTime":6449.021000415087,"transferSize":415,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/mobile/imgs/loading.gif","startTime":6404.31599970907,"endTime":6502.328000031412,"transferSize":14089,"statusCode":200,"mimeType":"image/gif","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=costbx.ijieyb.com&pvi=103571563518567330&si=s706231563518567331&url=/mobile/index.html?corpid%3dding087b01191d39e78935c2f4657eb6378f%26modeltype%3d10%23%2f&arg=corpid%3dding087b01191d39e78935c2f4657eb6378f%26modeltype%3d10&ty=1&rdm=&rurl=&rarg=&adt=&r2=500649128&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518567333","startTime":6415.250999853015,"endTime":6573.235000483692,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=costbx.ijieyb.com&pvi=103571563518567330&si=s706231563518567331&url=/mobile/index.html?corpid%3dding087b01191d39e78935c2f4657eb6378f%26modeltype%3d10%23%2f&arg=corpid%3dding087b01191d39e78935c2f4657eb6378f%26modeltype%3d10&ty=0&r2=500649129&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&random=1563518567527&r3=729&ext=pfm=274_103_56_15_232;version=2.0.15","startTime":6604.082000441849,"endTime":6625.264000147581,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://costbx.ijieyb.com/isvLogin?corpid=ding087b01191d39e78935c2f4657eb6378f&code=4c5a824535e43cfaa0024e6723793a98&loginType=Mobile×tamp=1563518567715&","startTime":6800.180000253022,"endTime":6941.172000020742,"transferSize":446,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/users/loginUserMsg.json?timestamp=1563518567888&","startTime":6976.336000487208,"endTime":7064.1430001705885,"transferSize":797,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/users/loginUserMsg2.json?timestamp=1563518567891&","startTime":6988.715999759734,"endTime":7061.7439998313785,"transferSize":293,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/users/permissionsUrl.json?timestamp=1563518567899&","startTime":6999.760000035167,"endTime":7094.043999910355,"transferSize":8080,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/userFirstMsg/showCounts.json?timestamp=1563518567900&","startTime":7007.9270005226135,"endTime":7066.967000253499,"transferSize":98,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/userFirstMsg/showMsg.json?type=9&useState=3×tamp=1563518568008&","startTime":7096.316000446677,"endTime":7149.9890005216,"transferSize":75,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/userFirstMsg/showMsg.json?type=0&useState=3×tamp=1563518568009&","startTime":7102.2970005869865,"endTime":7153.222000226378,"transferSize":75,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/mobile/30ed5db4cff8cd3b00b98a.js","startTime":7153.591000474989,"endTime":7211.147000081837,"transferSize":9131,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/mobile/13c7f78f4c454d8602e752.js","startTime":7162.949999794364,"endTime":7424.860999919474,"transferSize":103789,"statusCode":200,"mimeType":"application/javascript","resourceType":"Script"},{"url":"https://costbx.ijieyb.com/homePage/getMobileIndexCount.json?timestamp=1563518568410&","startTime":7493.534999899566,"endTime":7557.8549997881055,"transferSize":508,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/expensesClaimDetails/selectCostPackage.json?type=index×tamp=1563518568414&","startTime":7502.129999920726,"endTime":7560.31099986285,"transferSize":92,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://costbx.ijieyb.com/expensesClaims/selectMobileClaims.json?current_page=1&pageSize=3×tamp=1563518568419&","startTime":7508.851000107825,"endTime":7572.620999999344,"transferSize":80,"statusCode":200,"mimeType":"application/json","resourceType":"Fetch"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=feiyongjiaxiang&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568484","startTime":7594.728000462055,"endTime":7632.400999777019,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=baoxiaodancaoga&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568485","startTime":7596.586000174284,"endTime":7665.866000577807,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=baoxiaodanshenp&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568487","startTime":7603.796000592411,"endTime":7713.360999710858,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=baoxiaodandaiqi&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568487","startTime":7608.2960003986955,"endTime":7711.377000436187,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=jiekuandancaoga&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568488","startTime":7608.773000538349,"endTime":7721.556999720633,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=jiekuandanshenp&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568489","startTime":7610.0580003112555,"endTime":7725.488000549376,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=jiekuandandaiqi&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568489","startTime":7637.866999953985,"endTime":7735.728000290692,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=xinjianjiekuan&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568490","startTime":7693.064000457525,"endTime":7733.319000340998,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"},{"url":"https://pingtas.qq.com/webview/pingd?dm=taclick&pvi=103571563518567330&si=s706231563518567331&url=xinjianbaoxiao&arg=corpid%3Dding087b01191d39e78935c2f4657eb6378f%26modelType%3D10&ty=0&rdm=&rurl=&rarg=&adt=&r2=500649129&r5=console=true&scr=412x732&scl=32-bit&lg=zh-hans-cn&tz=-8&ext=version=2.0.15&random=1563518568493","startTime":7738.223999738693,"endTime":7781.90700057894,"transferSize":239,"statusCode":200,"mimeType":"text/html","resourceType":"Image"}]}}; const data = result.details.items; const keyFn = d=>d.resourceType; const colors = d3.nest().key(keyFn).entries(data).map(d=>d.key); const colorFn = d3.scaleOrdinal(d3.schemeSet2).domain(colors); const mapFn = d => { return { color: colorFn(keyFn(d)), start: Math.round(d.startTime), end: Math.round(d.endTime), text: url2text(d.url), url: d.url, resourceType: d.resourceType, mimeType: d.mimeType, transferSize: d.transferSize, }; }; const margin = ({top: 30, right: 8, bottom: 30, left: 8}); const width = 1000; const height = data.length * 12 + margin.bottom + margin.top; let parent = this; if (!parent) { parent = init({data: data, width, height, margin, mapFn, keyFn, colorFn, getTooltipContent}); return parent; } function init({width, height, margin, data, keyFn, mapFn, colorFn, getTooltipContent}) { const parent = document.createElement('div'); parent.style.width = `${width}px`; parent.style.height = `${height}px`; const colors = d3.nest().key(keyFn).entries(data).map(d=>d.key); // const color = d3.scaleOrdinal(d3.schemeSet2).domain(colors); const list = data.map(mapFn); const x = d3.scaleLinear() .domain([d3.min(list, d => d.start), d3.max(list, d => d.end)]) .range([0, width - margin.left - margin.right]) const y= d3.scaleBand() .domain(d3.range(list.length)) .range([0,height - margin.bottom - margin.top]) .padding(0.1); const axisBottom = d3.axisBottom(x).tickPadding(2); window.x = x; window.y = y; const svg = d3.select(parent).append('svg').attr('width', width).attr('height', height); const line = svg.append("line").attr("y1", margin.top).attr("y2", height-margin.bottom) .attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); const tooltip = d3.select(document.createElement("div")).call(createTooltip); svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .style("color", "#999") .call(axisBottom); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(list) .enter() .append("g") .attr("class", "group"); groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) groups .each(getRect) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d3.color(d.color).darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color); tooltip.style("opacity", 0); }); svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); if (x > margin.left && x < width - margin.right) { line.style('opacity', 1); line.attr("transform", `translate(${x} 0)`); } else { line.style('opacity', 0); } y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }).on("mouseleave", () => { line.style('opacity', 0); }); parent.appendChild(tooltip.node()); document.body.appendChild(parent); makeLegend(); return parent; function getRect(d){ const el = d3.select(this); const sx = x(d.start); const w = x(d.end) - x(d.start); el.style("cursor", "pointer"); el .append("rect") .attr("x", sx) .attr("height", y.bandwidth()) .attr("width", w) .attr("fill", d.color); } function createTooltip(el) { el .style("position", "absolute") .style("pointer-events", "none") .style("top", 0) .style("max-width", 320) .style("opacity", 0) .style("background", "white") .style("border-radius", "5px") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("padding", "10px") .style("line-height", "1.3") .style("font", "11px sans-serif") } function makeLegend() { const nodeWidth = (e) => e.getBBox().width; const legend = svg.append('g') .attr('class', 'legend') .attr('transform', 'translate(0,0)') .style('font-size', '13px'); const legends = legend.selectAll('g') .data(colors) .enter() .append('g'); legends.append('rect') .style('fill', d => colorFn(d)) .attr('x', 0) .attr('y', 0) .attr('width', 10) .attr('height', 10); legends.append('text') .attr('x', 16) .attr('y', 10) .text(d => d); let offset = 0; legends.attr('transform', function(d, i) { let x = offset; offset += nodeWidth(this) + 10; return `translate(${x}, 0)`; }); legend.attr('transform', function() { return `translate(${(width - nodeWidth(this))-margin.right}, 10)`; }); } } function url2text(url) { try { const u = new URL(url); const name = u.pathname.replace(/^.*[\\\/]/, '') || '/' return `${name}(${u.host})` } catch (error) { return url; } } function getTooltipContent(d) { return ` Url: ${d.url}
Mime: ${d.mimeType}
Type: ${d.resourceType}
Start: ${d.start} ms
Duration: ${d.end - d.start} ms ` } }