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