データジャングルの視覚化 -- パート3: %SYS.MONLBLに基づくヒートマップの作成
これまでに何度もコードカバレッジとコードのパフォーマンス最適化について説明してきたため、ほとんどの方はすでにSYS.MONLBLユーティリティについてご存知かと思います。 コードを視覚的に見る方が通常は、純粋な数値を見るよりもはるかに直感的に理解できます。これが、このシリーズの記事の大きなポイントです。 今回は、Pythonとそのツールから少し離れて、^%SYS.MONLBLレポートからヒートマップを生成する方法を探りたいと思います。
簡単に言うと、ヒートマップは特定の値を色で表現してデータの要約を得ることに特化した視覚化ツールです。 このケースでは、データはコード行であり、コード行に掛けられた時間が色にマッピングされます。
^%SYS.MONLBL
行ごとに監視するモニターの実行については、ドキュメントをご覧ください。 つまり、分析の完全な出力をCSVファイルとして操作します。 分析しようとしているコードのソースコードが実際にあれば、はるかに便利であるため、 kフラグ（ソースを保持）を使ってコードをコンパイルするようにしてください。
出力の準備
ターゲット出力として、準備されたhtmlファイルを使用することにします。 これには、非常に基本的なレイアウトと、最終的な色付けを行うための小さなJavaScript関数だけが含まれます。
<!doctype html>
<head>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<!--<link rel="stylesheet" href="css/main.css"> -->
</head>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<table id="data">
<tr><th>Routine</th><th>Line</th><th>Total Time</th><th>Code</th></tr>
<!--output-->
</table>
解析してまとめる
生成されたCSVから関連する情報を取得してテンプレートに入れるには、以下のスクリプトを使用します。
monlbl.sh
#!/bin/bash
cat $1|grep -vi totals| awk -F"," 'FNR>1 {out="<tr><td>"$1"</td>" "<td>" $2 "</td><td>" $54 "</td><td><pre>"; for(i=55;i<=NF;i++){out=out$i","}; out=substr(out, 1, length(out)-1) "</pre></td></tr>"; print out }'
gen-heatmap.sh
#!/bin/bash
./monlbl.sh $1 > /tmp/temp.data
sed -e '/<!--output-->/r/tmp/temp.data' template.html
上記を以下のようにして呼び出します。
./gen-heatmap.sh /tmp/report.csv > heatmap.html
最終的な出力 
調整可能な要素
テンプレートに含まれる色付けの関数をよく見ると、時間には線形マッピングを使用していないことがわかります。
function colorize() {
var rows=$("#data tr")
var max=Math.max.apply(Math,rows.slice(1,rows.length).map(function(){ return this.childNodes[2].textContent}))
for (i=1;i<rows.length;i++){
var val=rows[i].childNodes[2].textContent;
var c=(Math.pow(1-val/max,3))*255;
var col=rgba(255,c,c,0.7);
console.log(col);
rows[i].style.backgroundColor=col;
}
}
私がテストした例では、この方が非常にうまく機能することがわかりましたが、その度合いは条件によって異なる可能性があります。 明らかに、指数を増やしてより赤に押し込むこともできますし、その逆も可能です。
コード
関連ファイルはすべてこちらにあります。