1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 10 integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous" /> 11 <link rel="stylesheet" type="text/css" 12 href="https://cdn.jsdelivr.net/gh/spiermar/d3-flame-graph@1.0.4/dist/d3.flameGraph.min.css" 13 integrity="sha256-w762vSe6WGrkVZ7gEOpnn2Y+FSmAGlX77jYj7nhuCyY=" crossorigin="anonymous" /> 14 15 <style> 16 /* Space out content a bit */ 17 body { 18 padding-top: 20px; 19 padding-bottom: 20px; 20 } 21 22 /* Custom page header */ 23 .header { 24 padding-bottom: 20px; 25 padding-right: 15px; 26 padding-left: 15px; 27 border-bottom: 1px solid #e5e5e5; 28 } 29 30 /* Make the masthead heading the same height as the navigation */ 31 .header h3 { 32 margin-top: 0; 33 margin-bottom: 0; 34 line-height: 40px; 35 } 36 </style> 37 38 <title>{{name}} Memory Details</title> 39</head> 40 41<body> 42 <div class="container"> 43 <div class="header clearfix"> 44 <h3 class="text-muted">{{name}} Memory Details</h3> 45 </div> 46 <div id="chart-rom"> 47 </div> 48 <hr /> 49 <div id="chart-ram"> 50 </div> 51 <hr /> 52 <div id="details"></div> 53 </div> 54 55 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js" 56 integrity="sha256-r7j1FXNTvPzHR41+V71Jvej6fIq4v4Kzu5ee7J/RitM=" crossorigin="anonymous"> 57 </script> 58 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js" 59 integrity="sha256-z0A2CQF8xxCKuOJsn4sJ5HBjxiHHRAfTX8hDF4RSN5s=" crossorigin="anonymous"> 60 </script> 61 <script type="text/javascript" 62 src="https://cdn.jsdelivr.net/gh/spiermar/d3-flame-graph@1.0.4/dist/d3.flameGraph.min.js" 63 integrity="sha256-I1CkrWbmjv+GWjgbulJ4i0vbzdrDGfxqdye2qNlhG3Q=" crossorigin="anonymous"> 64 </script> 65 66 <script type="text/javascript"> 67 var tip = d3.tip() 68 .direction("s") 69 .offset([8, 0]) 70 .attr('class', 'd3-flame-graph-tip') 71 .html(function (d) { return "module: " + d.data.name + ", bytes: " + d.data.value + ", delta: " + d.data.delta; }); 72 var colorizer = function (d) { 73 if (d.data.delta > 0) { 74 ratio = (d.data.value - d.data.delta) / d.data.value; 75 green = ("0" + (Number(ratio * 0xFF | 0).toString(16))).slice(-2).toUpperCase(); 76 blue = ("0" + (Number(ratio * 0xEE | 0).toString(16))).slice(-2).toUpperCase(); 77 console.log(d.data.name, green, blue); 78 return "#EE" + green + blue 79 } else if (d.data.delta < 0) { 80 ratio = (d.data.value + d.data.delta) / d.data.value; 81 green = ("0" + (Number(ratio * 0xFF | 0).toString(16))).slice(-2).toUpperCase(); 82 red = ("0" + (Number(ratio * 0xFF | 0).toString(16))).slice(-2).toUpperCase(); 83 console.log(d.data.name, red, green); 84 return "#" + red + green + "EE"; 85 } else { 86 return "#FFFFEE"; 87 } 88 } 89 var flameGraph_rom = d3.flameGraph() 90 .transitionDuration(250) 91 .transitionEase(d3.easeCubic) 92 .sort(true) 93 .color(colorizer) 94 .tooltip(tip); 95 var flameGraph_ram = d3.flameGraph() 96 .transitionDuration(250) 97 .transitionEase(d3.easeCubic) 98 .sort(true) 99 .color(colorizer) 100 .tooltip(tip); 101 var rom_elem = d3.select("#chart-rom"); 102 flameGraph_rom.width(rom_elem.node().getBoundingClientRect().width); 103 rom_elem.datum({{ rom }}).call(flameGraph_rom); 104 var ram_elem = d3.select("#chart-ram"); 105 flameGraph_ram.width(ram_elem.node().getBoundingClientRect().width); 106 ram_elem.datum({{ ram }}).call(flameGraph_ram); 107 </script> 108</body> 109 110</html> 111