MotionBoardのデータ補完＆キーマップ事後計算をつかって集計表を作ってみる

#最初に
MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/04c48011-e65b-88dd-f666-a838819636e4.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e777e485-f3d0-3dc7-57e2-ddddd2df8860.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7bc601e7-ace8-cafa-2313-c2d66b9de500.gif" width=60%>
綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
[MotionBoard　体験デモについて（公式HPより）](https://www.wingarc.com/product/motionboard/demo/index.html)


<details><summary>【MotionBoardとは】</summary><div>
様々なデータソースからデータをあつめ、１つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657180/877897e8-35d1-b055-a80c-b9051866bc38.png" width=60%>
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社　MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
</div></details>


こんなオシャレなボードをいきなり作るのはちょっと難しいです。
なのでひとつずつの機能を紐解いて解説をしていきたいと思います。

今回のお題はこちらの**複雑な集計表**です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/fd4d1cfc-bf9c-c460-c3e8-adb9d3e3642d.png" width=60%>


この集計表は、３つのデータソースを重ね合わせしています。
ただデータをひとつ選んできて、ピボットテーブルでほいほいと・・・という訳にはいかないのですね。
見たい集計表の形とデータソースの形というのは常に違うんだ、と考えた方が良いかもしれませんね。。。


さぁ作り方を解説してまいります。


#全体の流れ
今回の流れは大きくわけて、３つとなります。

１.この集計表の見方の解説
２.この集計表はどのようなデータで構成されているのか
３.どうやって集計表を作ればいいのか

さっそく見ていきましょう。


##１.この集計表の見方の解説
この集計表は実績・見込み・目標の年月推移が一目でわかります。
数字大好き、集計表大好きな方はよだれをたらすことでしょう（ホントか）。

さらにすごいのが"実績+A+B+C"という項目、データの中には**存在しません**。
MotionBoardの中で"実績"、"A"、"B"、"C"という項目を足し算しているのです。
ここらへんの複雑な加工ができるのがMotionBoardの魅力ですね。

今回使っているMotionBoardの機能はMotionBoard View、データ補完、キーマップ事後計算でございます。

##２.この集計表はどのようなデータで構成されているのか

さて、今のチャートを表現するために使用したデータは下記の３つとなります。
　実績（売上）
　見込み（商談）
　目標（予算）

SFAの確定のデータを使えば、実績と見込みがひとつのデータとしてとれると思いますが、今回は分けて考えます。

３つのデータはこのような項目を持っています。
（銀行のSFAデータをイメージしています）

**実績（売上）**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4a92a041-f787-ba2b-f2c2-85daa14bb41a.png" width=110%>

**見込み（商談）**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/a283d40e-4f24-c5a1-17a6-283285fa45f3.png" width=60%>

**目標（予算）**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/eba20326-12a3-1af4-6ea8-503080b63427.png" width=60%>

最低限必要な要素としては
　①日付項目はあるか（年月・年月日がバラバラでもOK）
　②行員コード（営業担当者コード）があるか
という点になります。

行員コードがあれば、行員マスタから行員名称がとってくることができ、さらに付随する支店コードもとってこれるでしょう。
さらに支店マスタから支店名もとってこれるはずです。
つまり３つのデータソースの中で行員コードさえあれば、行員名や支店名で３つとも集計し、ひとつのグラフで表現することが可能です。
年月についても同様で、目標は年月日でデータを持たないので、実績（売上）と見込み（商談）に年月日があれば、
MotionBoard内で年月の項目を作り、そちらを使用することができます。

集計ができるということは、全体検索がかけられますので、グラフの使用価値がどんどんと増しますね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/0a1f9229-19c8-0532-73fb-158b794ac62c.png" width=25%>


##３.どうやって集計表を作ればいいのか
今回は各データたちから必要な項目を集め、縦結合（Union）をします。
縦結合ってなーに？　って思う方のために、解説を用意しました。

<details><summary>縦結合（Union）について</summary><div>
縦結合とはExcelで考えたら、実績(売上)シートに入っているデータの下に見込み(商談)データの内容をコピペするような感じです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/cef575e9-cb36-6cfe-5df7-00732854a2c2.png" width=80%>

コピペするにもお互いの項目が合っていないとダメなので、そこを合わせる必要がありますね。

公式マニュアルではこんな書き方をしています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/f9b12f6f-4bb3-4deb-73b1-7ebde073e605.png" width=80%>
[MotionBoard ViewのUnionのマニュアル解説](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-3556eb42-2a90-3887-aa24-0717cd05c1f2.html#UUID-3556eb42-2a90-3887-aa24-0717cd05c1f2_d38915e184085)
</div></details>


では縦結合の設定をしましょう。

###データソースを作る
まずはそれぞれのデータソースを用意します。
　実績（売上）
　見込み（商談）
　目標（予算）

①実績(売上）データソース
ExcelやCSV、データベースでも構いませんので、まずは実績となるデータを読み込みます。
MotionBoard Viewで縦結合をする際に、見込み(商談）データには案件の受注できる可能性を示す確度という項目があります。
しかし実績(売上）にはその項目がありません。縦結合をするにはその項目が必要なので、ダミーの項目を用意します。

データソースエディターより、画面左下の追加項目作成→カスタム項目より、"確度"という項目を作り、計算式には"実績"とベタ打ちします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/db318a2e-9e2e-d437-3c35-7facc8fd04be.png" width=50%>

そうすると、この実績(売上）データソースの確度という項目には必ず、"実績"といいう文字列が入ることになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/a40824bd-dcb3-ddbd-9bc5-4b4a13d0f731.png" width=25%>

また目標(予算）は日付は年月(YYYY/MM)しか持たないことに対して、こちらは年月日（YYYY/MM/DD）なので、
カスタム項目を追加して、年月を用意します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4d51ca29-fd37-dbee-8647-0748888b74bc.png" width=50%>
※日付グループ項目などでも作れますが、今回はカスタム項目で作りました。


②見込み(商談）データソース
こちらはあまりいじってないですね。
見込みも年月日でデータを持っているので、"年月"の項目を作りました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/98bff13f-6165-280f-0435-691406ae4648.png" width=50%>

③目標（予算）データソース
目標のデータは年月が横に伸びています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/eba20326-12a3-1af4-6ea8-503080b63427.png" width=60%>

BI的には"年月"という項目があって、縦にデータが入ってもらいたいので、Excel読み込み設定で、クロス列を指定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/f63be7e1-f0cb-3f74-9c8d-25905d8b80f4.png" width=40%>
[クロス列についてのマニュアルはこちら](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-867933b2-dd6a-9f78-edaa-fefceda55a39.html#UUID-867933b2-dd6a-9f78-edaa-fefceda55a39_d38915e143369)

データソースエディタ画面の左下にある「追加項目作成」より、カスタム項目を選びます。
目標(予算）に確度を作りたいので、作成するデータソースはDS1を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/62bc71cd-b661-22f0-2805-af5df4830d42.png" width=40%>


項目名を"確度"として、計算式のところに 目標 と入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b5ec2a57-32a0-1ab5-786a-22912fec95b4.png" width=40%>

###MotionBoard Viewをつくる
あとはMotionBoard Viewで結合をします。
**MotionBoard Viewを初めて使う方は、外部接続設定にMotionBoard Query Engineが登録されているか確認しましょう。**
[MotionBoard Query Engineのマニュアル解説](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-82889f4a-822e-53cc-805e-2714dee34bff.html)

MotionBoard ViewはJoinとUnionが選べますが、今回はUnionを指定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/8f455659-443a-57c2-eb38-2cb89571dd43.png" width=60%>

データソースを３つ呼び込み、必要な項目の項目名が合っていることを確認して、ビューにセットします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/11e32a6a-18fe-2cf6-631b-dfb03c3c92eb.png" width=60%>


これでデータソースの読み込みは完成です。

###データ補完とキーマップ事後計算
さて、今回の集計表ですが、ユーザに最初に見てもらいたい項目というのは決まっています。
それは"実績+A+B+C"と"目標"です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b3be7d6f-5fa4-3a82-28bb-de7a287326cf.png" width=60%>

見込みの確度Cまでの合計と目標がどれだけ解離しているかを最初に見てもらいたいのですね。
しかし困ったことに、MotionBoard Viewで用意した項目に、"実績+A+B+C"という項目はございません。
なので今回は、**任意の項目を足し算して、1行追加する**という技をやってみたいと思います。
ここで披露する技が
　データ補完
　キーマップ事後計算
になります。
データ補完で"実績+A+B+C"という項目を作成し、キーマップ事後計算で"実績+A+B+C"に「確度の実績とAとBとCを足したもの」という計算式を入れます。

ではまずはデータ補完から
"確度"を行項目に配置し、鉛筆ボタンで編集画面を表示し、"データ補完"の「設定」をクリック
"補完リストの内容"に下図の情報を入力。
　実績
　A
　B
　C
　実績+A+B+C
　目標
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/14b70184-c210-6836-463b-754321a1b12a.png" width=60%>

そうすると"実績+A+B+C"という項目はできましたが、まだデータが入っていない状態になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ed269c23-2afc-dbfe-e502-ebb782c76df6.png" width=40%>

ここにデータを入れているのがキーマップ事後計算になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d017e4b7-3a99-ffff-cf66-85b1adca4c27.png" width=60%>

キーマップ事後計算はデータソースエディタの"追加項目作成"から"事後計算項目"を作成します。
細かい設定に関してはマニュアル参照となりますが、
[キーマップ事後計算のマニュアル](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-0752a560-7c78-05a8-f265-cfac1891bf9f.html#UUID-0752a560-7c78-05a8-f265-cfac1891bf9f_d38915e151802)
データ補完の確度の中で、データ補完で作ったオリジナルの項目である"実績+A+B+C"という項目に対して、
　refer([確度],[実績])+refer([確度],[A])+refer([確度],[B])+refer([確度],[C])
という計算式を与えます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4ad7c9ec-7adb-3eb9-cb26-323f65a8ec21.png" width=60%>

先ほど使用していた金額(1)を非表示にして、
"実績+A+B+C"に数字が入ることを確認します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/a04dead3-bca7-d89c-9822-d75918e5d31a.png" width=60%>


これでようやく完成です。
"実績+A+B+C"は計算項目なので、色を変えて強調しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/fd4d1cfc-bf9c-c460-c3e8-adb9d3e3642d.png" width=60%>

集計表の中で右クリックして"集計表のスタイル"をクリック
カスタム行スタイルで"実績+A+B+C"と入れて、背景色をセットします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/6a5aca8d-208f-6de2-bdf2-8999f782177e.png" width=60%>


これで完成です。
いかがでしたでしょうか。
少々複雑ですが、データを加工すればこのように複雑な集計表を作ることができます。

MotionBoardは、覚えれば、自由自在なのです。