だいぶ前にAngular JSを使って作ったアプリケーションをAngular 2を使って作り直しています。Angular 2の方がコンポーネント指向で見通しの良いコードが書けるので拡張性などを考えたときに有利だとの考えからです。Angular 2とAngular Materialの学習を兼ねて試行錯誤しています。ここ最近、毎日のようにAngularのドキュメントを舐め回すように見ていますが、概ねAngularの全機能を試せそうま題材になったので、これが終わる頃にはだいぶ理解が進んでいるはずです。

将来的にクラウドサービスにできるかもしれないと思いユーザ認証機能をつけてデータをパティショニングできるようにしています。現時点ではデータベースのユーザーデータを使って認証しているだけですが、OAuth認証機能を追加する予定です。

これはログインした直後のまっさらの画面です。

Factを選択するとファクト選択パネルが出てきて、新たなファクト定義をデータベースに保存できます。CSVファイルから、このアプリケーション用のJSONファイルから、リモートのデータベースから、リモートのサービス(Google Spreadsheetなど)といったデータソースからデータの構造を読み込んでファクト定義を生成します。現時点ではCSVファイルとJSONファイルのみ対応しています。

ファクトの評価軸(Dimension)の定義です。

ファクトの集計対象の値フィールドの定義です。「Finish」ボタンを押すとファクト定義が生成されたバックエンドのMongoDBに保存されます。

登録したファクトを選択した直後の画面です。空色のボタンが評価軸、「合計」というラベルのボタンは集計方法(合計、平均、件数、最大、最小が選べます)、「合計金額」というラベルのボタンは評価対象の値フィールドです。評価軸を列と行にドラッグ・ドロップすることでピヴォットを作ります。

行と列に評価軸をドラッグ・ドロップした様子。「ドキュメントタイプ」が行に、「状況」が列に設定され、申請金額のそれぞれの合計が表示されているという状態です。

行と列の評価軸を追加した様子。仕様上、行と列の評価軸はいくつでも設定できます。ピヴォットテーブルの中身はDOMを操作して動的に作り出しています。

行と列の評価軸を入れ替えた様子。

評価軸はフィルタリングできます。ナビゲーションバーの「Dimension」を押すと評価軸フィルターパネルが出てきて、それぞれの評価軸の値を制限することができます。この画面の例では4人の承認者のうち2人に絞り込んでいます。

ピヴォットテーブルに集計された値を全体として集計する機能。合計、平均、最大、最小の集計ができます。

これで主要部分が動くところまできたので、バグ取り、データ構造とコンポーネントの整理、OAuth認証機能の追加、CSVとJSON以外のデータソースへの対応と作業を進めていきます。最終的にはビッグデータに対応したデータベースサーバーをバックエンドに置く構造としたいと思います。こういうものはサクサクと動かないとストレスになるので速さの追求はとても大事です。

仕事のネタにしようと思っているので、申し訳ありませんが現時点ではソースコードの公開はしませんが、仕事に差し支えない程度には技術的な質問にお答えできると思います。

以前Angular JSを使って作ったものは下の動画に見られるような動きをします。今回のものもほぼ同様の動き方をします。