データジャングルの視覚化 -- パート3: %SYS.MONLBLに基づくヒートマップの作成

これまでに何度もコードカバレッジとコードのパフォーマンス最適化について説明してきたため、ほとんどの方はすでにSYS.MONLBLユーティリティについてご存知かと思います。 コードを視覚的に見る方が通常は、純粋な数値を見るよりもはるかに直感的に理解できます。これが、このシリーズの記事の大きなポイントです。 今回は、Pythonとそのツールから少し離れて、^%SYS.MONLBLレポートからヒートマップを生成する方法を探りたいと思います。

簡単に言うと、ヒートマップは特定の値を色で表現してデータの要約を得ることに特化した視覚化ツールです。 このケースでは、データはコード行であり、コード行に掛けられた時間が色にマッピングされます。

^%SYS.MONLBL

行ごとに監視するモニターの実行については、ドキュメントをご覧ください。 つまり、分析の完全な出力をCSVファイルとして操作します。 分析しようとしているコードのソースコードが実際にあれば、はるかに便利であるため、 kフラグ（ソースを保持）を使ってコードをコンパイルするようにしてください。

出力の準備

ターゲット出力として、準備されたhtmlファイルを使用することにします。 これには、非常に基本的なレイアウトと、最終的な色付けを行うための小さなJavaScript関数だけが含まれます。

    
        
        
        
        
        

        
        

        
        
        

        
        


Routine
Line
Total Time
Code




    

解析してまとめる

生成されたCSVから関連する情報を取得してテンプレートに入れるには、以下のスクリプトを使用します。

monlbl.sh

#!/bin/bash

cat $1|grep -vi totals| awk -F"," 'FNR>1 {out=""$1"" "" $2 "" $54 "
"; for(i=55;i<=NF;i++){out=out$i","}; out=substr(out, 1, length(out)-1) "
"; print out }'

gen-heatmap.sh

#!/bin/bash
./monlbl.sh $1 > /tmp/temp.data
sed -e '//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;
        }
    }

私がテストした例では、この方が非常にうまく機能することがわかりましたが、その度合いは条件によって異なる可能性があります。 明らかに、指数を増やしてより赤に押し込むこともできますし、その逆も可能です。

コード

関連ファイルはすべてこちらにあります。