RevealApp - 集計用に目標達成率のフィールドを新規作成する。

# はじめに

## Revealとは
[Reveal  ダッシュボードをアプリケーションに組み込み](https://www.revealbi.io/jp)
> Reveal Embeddedは、アプリケーションに組み込み可能なデータ可視化SDKです。シンプルな価格体系、組み込みの容易さでアプリケーションの価値を最大限向上することができます。

## この記事は
例えば、売上達成率や、進捗率など、XXX率の項目ってありますよね。
それらの項目は、DBでは項目として存在してるわけではなく、アプリケーション側で計算した結果を表示しているパターンが多いと思います。

例えば、目標額/売上金額=目標達成率など

Revaelの上記のような計算式を設定したうえでフィールドを追加することができます。

# 今回使用するデータ
３項目(売上日、売上額、目標金額)のみのシンプルなデータになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/1defa442-7003-04d3-0967-884f5d0639c3.png)


# 作成手順

## 新規フィールドの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/90bb1a20-245a-7c7b-81fe-08dce6b6d664.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/9552ac26-8989-71d9-db0e-90e57c2a1ff3.png)

## 集計フィールドの作成画面
集計フィールドの作成画面が表示されますので、各種設定を行っていきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/5e8b13c0-dcce-a071-faa2-9898ce318a1a.png)

### フィールド名を設定
まずは、フィールド名を設定しましょう。

編集ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/4bae877f-39e3-a9f3-ae13-ccdd388e7c36.png)

フィールド名を入力します。
"目標達成率"
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/21776e0b-b66a-3cb8-d59b-ae133a7672b2.png)

完了をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/0a5ce302-f8c9-93da-1a62-51e5a349cfe3.png)


### 数式を設定
続いて数式を設定します。
目標達成率は、売上金額/目標金額 で割合が出せますね。

まずは、数式バーをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/0971239c-49da-c837-ec50-9d0fdb195fc4.png)

続いて"売上額"をクリック。そうすると数式バーに[売上額]が自動設定されます。
※今回はフィールドから選択していますが、直接入力してもらってもOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/46b28500-22cf-24a8-54ad-dc26570fc583.png)

数式バーに"/"を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3e9fc306-1c8b-f877-f301-98e5168e34fb.png)

続いて、"目標金額"をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/0d726bed-b9d1-f9bf-fe6c-33cb6c6ad864.png)


下記の数式が完成しました。
※今回はフィールドから選択して数式を完成させましたが、直接入力してもらってもOK

```
[売上額]/[目標金額]
```

最後にフィールドの作成ボタンをクリックして新規の集計フィールド設定を終了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/2818892b-a645-f917-2b7c-f69df0b8573d.png)

目標設定率が追加されましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/f22a0cca-dc84-113e-b686-d88e0d28e662.png)


# 新規作成した"目標達成率"フィールを活用。
## 可視化項目として設定

目標達成率を表示項目に設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/56acd065-0aee-bb01-66bf-b7f135e90392.png)


追加はできました！...が整数として表示されているだけなのでパーセント表記に治しましょう。

### 目標設定率のフォーマットをパーセント表記に変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/592358fd-6df5-0d75-14d9-00de02a4525e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/8e9382cf-67bd-b380-21fc-24e297517f78.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/58668149-b26f-25fb-7c49-e7c3c644bbff.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/56b5ef56-7583-dff7-9289-019f90298a6c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/15cce873-434f-4be6-b215-9579ff9b4186.png)


# まとめ
本記事では、データソースの列の他に、集計用のフィールドを作成する方法について紹介しました！
達成率のように、計算式により導き出した結果を新規フィールドしたいというリクエストはよくあるご要望だと思います。

Revealには、基本演算の他に様々な関数も用意していますのでご活用くださいませ！

(参考)Reveal計算フィールド
https://www.revealbi.io/help/calculated-fields