Power Appsで横棒グラフを作成する

例によって12/17の[PowerApps Advent Calendar 2019](https://qiita.com/advent-calendar/2019/powerapps)が空いていたので。

#前置き
Power Appsには使えるグラフが3種類ありますが、**横棒グラフはありません。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/cba7e531-f0dd-b695-a979-74a75b20c026.png)

なのでコントロールを組み合わせて自前で作ってしまおうというお話です。

**無いものは自分で作る、Do It Yourselfが出来るのがPower Appsの良いところ。**

#使うもの
##データソース
**数値の列を含むSharePointリストの`TestList`**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/1a057f04-86a5-ed6d-346f-1493e91fb0d1.png)

##コントロール
**ギャラリーコントロール**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/301daadf-cf2e-d414-968b-23b6d606508c.png)

**スライダーコントロール**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/d618caec-6d7c-0b42-74c5-c4d8a1be9b6f.png)

#実装
##準備
まずギャラリーの`Items`に`TestList`を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/bb38b989-62c9-29f2-5377-c28745764fd4.png)

そして委任問題を避けるため、以下の関数をボタンなどに仕込んで実行します。

```C#:事前準備
ClearCollect(TestList取り込み,TestList)///コレクションにTestListを追加
UpdateContext({Max数量:Max(TestList取り込み,数量)})///コレクションのTestListから数量の最大値を調べる
```

次にギャラリーのテンプレート内にスライダーを追加します。
![横棒グラフ作成準備.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/d65f9ad5-0720-cbb3-0fa5-5e7404e67fa3.gif)

##スライダーの設定
ここからスライダーの見た目を棒グラフっぽくしていきます。
スライダーの`プロパティ`からを以下のように設定します。

| プロパティ名 | 設定値 |
|:-:|:-:|
|値の表示|オフ|
|ハンドルのサイズ|1|
|表示モード|ビュー|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/e89abce1-7558-5a24-752c-f0c2b09284ed.png)

ここから更に棒グラフに寄せていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/70ad97ef-daf2-fd75-9f35-b00d43541c5a.png)

次に弄るプロパティはこちら。

|プロパティ名|設定値|
|:-:|:-:|
|レール|30|
|ハンドルの塗りつぶし|透明|
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/befedc37-14bf-d7e5-51d4-88148d9c939b.png)

これで大分グラフっぽくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/53d54006-3aa6-875a-da0f-05f91e291b17.png)

ここから先はスライダーの左端と右端、どちらをグラフの起点とするかで作り方が変わります。

###起点が左端の場合
スライダーのプロパティは以下の通り。

|プロパティ名|設定値|
|:-:|:-:|
|既定|ThisItem.数量|
|最大|Max数量|
|最低|0|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/a465a841-c647-03bf-6a55-66e6c6360fa5.png)

起点が左端のグラフが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/4e123583-6320-169d-cead-727187db99fb.png)

###起点が右端の場合
|プロパティ名|設定値|
|:-:|:-:|
|既定|ThisItem.数量*-1|
|最大|0|
|最低|Max数量|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/77dabdfe-1dda-600c-89f0-2de63cb68d64.png)

そして`レール`と`値の塗りつぶし`の色を入れ替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/cebe5723-5e09-b995-c610-9c453b56a045.png)

起点が右端のグラフが出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/aab8b5a6-373e-ca38-589a-417fff30d9fa.png)

##細かい調整
ラベルで`ThisItem.数量`を表示してあげるととてもグラフっぽくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/ed73bcba-ff30-d93e-e477-5ac6012f2a67.png)

#まとめ
- **既定の機能を使って出来る表現は幅広い**
    - 殆どの場合、データを使って何かを動かすという基本と簡単な数学の組み合わせです
- **見た目に拘らなければ大抵何とかなる**
    - 餅屋には勝てないので割り切りましょう
- **Power Appsの機能を知れば、出来ることも自ずと見えてくる**
    - 自分が何を動かしているのか知らなければ、何が出来るかなんて分かりません

Power Appsでも少し作りこめば、Power BIには及びませんがインタラクティブなグラフも表現可能です。
![インタラクティブなPowerAppsグラフ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313502/129f7805-0cd5-b402-43a8-e6065f165a9e.gif)

業務に何の機能が必要か？
それにはどういう表現がふさわしいのか？
色々とPower Appsを弄って考えてみてください。