Anders Blomdell / mbed-sdk-tools

Clone of official tools

memap_flamegraph.html@43:2a7da56ebd24, 2018-09-25 (annotated)

Committer:
theotherjimmy
Date:
Tue Sep 25 13:43:09 2018 -0500
Revision:
43:2a7da56ebd24
Release 5.10.0

Who changed what in which revision?

UserRevisionLine numberNew 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