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

記事

Toshihiko Minamoto · 2022年1月11日 3m read

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

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

^%SYS.MONLBL

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

出力の準備

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

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 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"> -->
            <style>

        table, th, td {
            width:"100%";
            border: 1px solid black;
            border-collapse: collapse;
        }
        pre {
            margin:1px;
        }
        th {
            text-align: left;
        }
    </style>


    </head>

    <body onload="colorize()">
        <!--[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>


    </body>
</html>

解析してまとめる

生成された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;
        }
    }

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

コード

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

@Fabian Hauptさんが書いた元の記事へ