easy_perfmonをjavascriptで書きなおした
シルバーウィークに作ったおもちゃをjavascriptで書きなおしました、というお話。
サマリ
こんな感じになった。
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 }); } } } /* 略 */ }