MotionBoardでif文を書こう〜今のグラフをさらに見やすく美しく〜

#最初に
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>

みなさんはMotionBoardの中でif文が書けることを知っていますか？

```
if (Self([実績]) == 0){
 return Number.NaN;
} else {
 return Self([累計実績]);
}
```

上のコードはMotionBoardの中で書いたコードです。
内容は
「"実績"という項目が0のときはNaNを入れて、0以外のときは"累計実績"という項目を入れてね」
という意味になります。

MotionBoardはGUI操作がボード構築の中心になりますが、こういったコードを書くところもあります。
自在なデータ加工が実現できるのです。

今回はこのif文をどこで書いて、下図のグラフをつくっていきます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/518fb321-c688-17d4-361c-2cf3b7b9334a.png" width=80%>


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

１.今回のやりたいことの確認
２.事後計算スクリプト（if文）を用意する

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

#１.今回のやりたいことの確認

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9bdbb4f1-9ae6-5536-83a8-9f57a1d637ff.png" width=40%>
こちらは加工をしていないデータをそのままグラフ化したものです。

元のデータはこちら。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/85feabc3-326e-e6d0-6247-c4f3999c888e.png" width=30%>

予算は未来の数字まで登録されていますが、実績については現在進行形になるので、空白になっているところがあります。
これをそのままグラフ化して、予実対比をしてみると、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/43fa7acf-a1c6-5f01-fef6-c3782e4a133d.png" width=40%>
黄色い線のように横ばいの点が出てしまいます。
まだ実績が出ていないところなので、この線・・・消したくないですか？


ちなみにグラフは累計の数字となっています。
まず行項目に「年月」を置きます。

<details><summary>累計表示のやり方についてはこちらです。</summary><div>
データソースエディタから「追加項目作成」を選び、「事後計算項目」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/5878d706-2ea4-eefc-2b1e-8b22a989e26c.png" width=40%>

赤枠の入力補助から「予算」の項目を「累計（行）」関数を使って「計算式に挿入」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/a36a4196-f055-44ab-d226-1e9a544317be.png" width=40%>

行項目に「年月」を置いているので、累計（行）を選択するのですね。

これで累計のグラフが表示できます。

</div></details>


予算はこの累計でOKです。
実績については同じように作ると
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/43fa7acf-a1c6-5f01-fef6-c3782e4a133d.png" width=40%>
こうなります。
実績が横ばいになるグラフが出るかと思います。
なので実績については「実績 = 0 のときは表示しないよ」という宣言が必要になります。

いよいよif文の登場です。

#２.事後計算スクリプト（if文）を用意する
さぁやってきました、今回のメインです。

データソースエディタから「追加項目作成」を選び、「事後計算項目」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/5878d706-2ea4-eefc-2b1e-8b22a989e26c.png" width=40%>

```
if (Self([実績]) == 0){
 return Number.NaN;
} else {
 return Self([累計実績]);
}
```
ここはスミマセン、入力補助がなく、手書きしなければなりません。

プログラム初心者の方にちょっと解説をすると
returnは入れる値です。
つまり
**・実績が0のとき、NaN（なにもいれない）を入れる**
**・実績が0以外のとき、累計した実績を入れる**

とします。NaNを入れると折れ線グラフにポイントが出ないのですね。

操作は以上で終了です。


このような形でif文を書くことができるのですが、あまり複雑なものを書きすぎると、描画レスポンスが悪くなるので、注意が必要です。

#おわりに
完成図を見てみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/05c9f4ba-4877-9a33-178b-a2c969bb015d.png" width=40%>


黄色の実績は数字が入っていないところはグラフから出なくなりました。
これで毎月実績が入ると、黄色のグラフはどんどん伸びるグラフの完成です。


いかがだったでしょうか？
MotionBoardつくりの参考になりましたら幸いです。