easy_perfmonをjavascriptで書きなおした

シルバーウィークに作ったおもちゃをjavascriptで書きなおしました、というお話。

サマリ

こんな感じになった。

f:id:nbisco:20151029234055p:plain

Smoothie ChartからFlotに移行し、bottle.pyからexpressに移行した。 Flotはこまごましたところまでいじれるので楽しい。

ソースコードはこちら。 github.com

使ったツール

bottleには負けるがexpressも結構簡単に使えたと思う。 jadeの素晴らしさには感動した。あの面倒なhtmlファイルが簡単に書けちゃう。

以前
webフレームワーク bottle express
テンプレートエンジン なし jade、stylus
グラフ Smoothie Charts Flot

使い方

app.jsを起動するだけ。ポート3000番でお待ちしております。

$ node app.js  # => 3000番で待ち受け

はまったところ

Flotの凡例(legend)出すのにはまった。 最初にplot.pushするときには、ちゃんとラベルを指定していたんだけど、 アップデートのときにラベル指定が抜けてたせいで凡例が描画されなかった。 当たり前っちゃ当たり前なような気もするけど、全然気づかなかったなあ・・・

これが正しい例。

// 最初にpush
plots.push($.plot(placeholders[0],
  [{label:"usr",data:usr},{label:"sys",data:sys},{label:"idle", data:idle}], options[0]));

/* 略 */

// データ更新時に描画
plots[0].setData([{label:"usr",data:usr}, {label:"sys",data:sys}, {label:"idle",data:idle}]);

こっちが間違いの例。

// 最初にpush
plots.push($.plot(placeholders[0],
  [{label:"usr",data:usr},{label:"sys",data:sys},{label:"idle", data:idle}], options[0]));

/* 略 */

// データ更新時に描画 => labelがnullになるせいで、描画されない。
plots[0].setData([usr, sys, idle]);

Flot本体のコードを覗いてみると一目瞭然であった。さっさと読めという話ですね。

/* jquery.flot.js */

/* 略 */
function insertLegend() {
/* 略 */
     // Build a list of legend entries, with each having a label and a color

    for (var i = 0; i < series.length; ++i) {
        s = series[i];  // seriesには、setDataメソッドに渡したオブジェクトとグラフのoptionが入っている。
        if (s.label) {  // labelをつけてないと、このネストに入れない。
            label = lf ? lf(s.label, s) : s.label;
            if (label) {
                entries.push({
                    label: label,
                    color: s.color
               });
            }
        }
    }
/* 略 */
}