Sencha Ext JS 6を使ったPivot Gridの紹介1
こんにちは、ゼノフィsugaiです。
今回はSencha Ext JS 6を使ってPivot Gridの紹介をしたいと思います。
Sencha Ext JSはGrid（表）やChart（グラフ）を使って業務上で蓄積したデータを簡単に視覚化することができるので、様々な業務システムの参照機能や管理機能で活用されています。
さらにPivot Gridを利用すればExt JSで「Excelのピボットテーブル」や「BIツール」のようにデータ分析を行うことができます。
以下のような多次元データを簡単に表示したり、集計を自動で行う機能が付いているため、自前で実装する手間やコストと比較すると、容易にデータ分析の機能を業務システムに追加することができます。
上記のようなシンプルに見える画面でもExt JSとPivot Gridの助けを借りずに実装しようとすると見た目以上に大変な作業だと思います。
データに依存する可変軸（列/行）の表示、それらに対する合計や平均といったデータ集計、さらに表のソート機能や値のフィルタリングも必要になるかもしれません。
このような複雑な機能でもPivot Gridを利用すれば簡単に実装できてしまうので、下記のサンプルを用いて画面とコーディングの例を紹介していきたいと思います。
サンプル画面
- まずサンプルのURLをPCのブラウザで開いた後、左側のメニューから「Grid」を選択してみて下さい。売上げデータを表示したGridの画面が開かれます。
シンプルな２次元の一覧ですがこれと同じデータを利用してPivot Gridでデータ集計を行いたいと思います。
- それでは次に左側のメニューから「Pivot Grid」を選択してください。
先ほどのGridで表示されていたデータがマトリックス状になって表示されました。
以下でそれぞれの項目について説明したいと思います。
- 今回のPivot Gridで集計するための軸に「Store name」（Store No.1~）と「Sales item」を選択しました。
行に「Store name」列に「Sales item」をそれぞれ表示させています。
- 真ん中のデータに表示させている「Qty」と「Cnt」ですが、
「Qty」の値はGridの「Sales quantity」列に当たり、軸の交差ごとに値の合計値が表示されるように設定しています。
「Cnt」は軸の交差ごとのレコード数が表示されるように設定しています。
「Cnt」のレコード数は今回自分で関数を実装して表示させていますが、「Qty」の合計（sum）やaverage、min、max、count等の集計用の実装ははじめから用意されているので、特に自分で実装しなくても勝手に値の計算をしてくれます。
これらの列はサンプルでは２つ表示させていますが、列を増減させてそれぞれに集計方法を設定できるので、
必要に応じてカスタマイズすることができます。
- 最後に列と行に表示されている「Grand total」ですがこれはPivot Gridを利用すると自動でそれぞれの軸ごとに合計値を出してくれています。
この部分も合計以外に平均や最大値の集計を表示したり文言を変更したりとカスタマイズが可能なので、用途によって柔軟に利用できます。
コーディング例
以下がPivot Gridの実装に関わる主な部分のソースコードになります。
- アプリケーションでPivot Gridを利用するためにはまずアプリケーション直下の「packages」フォルダにPivot Gridとそれに付随するプラグインを配置し、以下のように「app.json」の
"requires"に"pivot"を追加します。
- 枠で囲っている部分がPivot Gridの表示用の設定になります。
今回表示したデータ、列や行、集計方法等をここで設定しています。
それぞれの設定の役割をざっと説明すると以下のようになっています。- matrixConfig：集計する対象のデータを設定。
- leftAxis：左側（列）に表示する項目の設定。
- topAxis：上部（行）に表示する項目の設定。
- aggregate：データの集計、表示方法の設定。
- 今回参考にしたAPI Docsです。今回使った設定の詳しい説明やそれ以外の機能についてはこちらを参照して頂ければと思います。
まとめ
今回紹介したサンプルはPivot Gridの基本的な部分だけでしたが、コーディング例のように容易に利用できることがお伝え出来ていれば嬉しく思います。
Pivot Gridは「Sencha Ext JS Premium」というライセンスにのみ含まれている機能になっていますが、Ext JSを導入する際に合わせて利用していただくと自社で開発されている業務システムのリプレイスや機能拡張の助けになると考えていますので、今回の記事で少しでも気になった方は是非「Sencha Ext JS 6」と「Pivot Grid」に触れていただければ幸いです。
