QuickChartをPower Automate・Power Appsで試す - 1

# はじめに
気軽にグラフを作成できるCoolなAPI、
[QuickChart](https://quickchart.io/documentation/)をLinkedInのFeedで拝見したので、
`Power Apps`・`Power Automate`で試してみたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3547b61a-eddf-223f-9440-ec8945124189.png)

# [QuickChart](https://quickchart.io/documentation/)
[QuickChart](https://quickchart.io/documentation/)は、`JSON`や`クエリ文字列パラメーター`で**チャート画像を生成できるAPI**です。
[Chart.jsライブラリ](https://www.chartjs.org/)に基づいて構築されているとのこと。

https://quickchart.io/documentation/

https://www.chartjs.org/docs/2.9.4/getting-started/

https://www.chartjs.org/

折れ線グラフ、棒グラフをはじめ、様々なグラフを描画できます📊

## 作成できるグラフの種類
主に作成することができるグラフは**8種類**です。

|種類|英語|パラメーター
|---|---|---
|折れ線|Line|line
|棒|Bar|bar
|レーダー|Radar|radar
|円・ドーナツグラフ|Doughnut & Pie|doughnut and pie
|鶏頭図|Polar Area|polar area
|バブルチャート|Bubble|bubble
|散布図|Scatter|scatter

カタカタ調べていたら[日本語の丁寧な説明サイト](https://tr.you84815.space/chartjs/index.html)がありました…。

https://tr.you84815.space/chartjs/index.html


:::note info
公式ではないとのことですが、大変参考になります
:::

## 今回実践すること
**APIを見つけたら、まず試そう！**
[QuickChart](https://quickchart.io/documentation/)は**認証も不要**、気軽に使えます。

下記のような`JSON`をPOSTするか
```json:example
{
  type: 'bar',                                // Show a bar chart
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],   // Set X-axis labels
    datasets: [{
      label: 'Users',                         // Create the 'Users' dataset
      data: [120, 60, 50, 180, 120]           // Add data to the chart
    }]
  }
}
```

|プロパティ| 内容| データ型 
|---|---|---
| type | グラフの種類| String（文字列）
| data | グラフの中身 | オブジェクト
| labels | x軸のラベル　| array（配列）
| datasets | y軸         | array（配列）に格納されたオブジェクト
| label | 凡例         | String（文字列）
| data | 値| array（配列）

Array（一次元配列）の処理は、Power Appsで実現することが面倒です。

URLに含めて使うこともできるとのこと

```plaintext
https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015, 2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}
```

> From [公式ドキュメント](https://quickchart.io/documentation/) 

1. Power AppsでPOSTするJSONを~~ムリヤリ~~作る
1. Power AutomateにJSON文字列を渡す
1. 戻り値のURLを画像コントロールで表示する

上記の手順で進めてみます。

# 作ってみる
## サンプルデータ
`ChatGPT`に作ってもらいました。

|Date| Category A | Category B | Category C |
|---|---|---|---|
| 2023-01-01 | 45         | 48         | 65         |
| 2023-01-02 | 68         | 68         | 10         |
| 2023-01-03 | 84         | 22         | 37         |
| 2023-01-04 | 88         | 71         | 89         |
| 2023-01-05 | 89         | 13         | 59         |

```plaintext:Table関数で使用する場合
Table(
    {Date: "2023-01-01", CategoryA: 45, CategoryB: 48, CategoryC: 65},
    {Date: "2023-01-02", CategoryA: 68, CategoryB: 68, CategoryC: 10},
    {Date: "2023-01-03", CategoryA: 84, CategoryB: 22, CategoryC: 37},
    {Date: "2023-01-04", CategoryA: 88, CategoryB: 71, CategoryC: 89},
    {Date: "2023-01-05", CategoryA: 89, CategoryB: 13, CategoryC: 59}
)
```

## Power Apps

下記の図で説明をすると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/bfcd9495-c565-f269-0124-e3ba9722630b.png)


1. **`JSON`と書かれたボタンを押すと**
    1. **JSON文字列を作成**
    1. **Power Automateを実行 - Image URLを取得、画像に反映**

上記を実行します。

### JSON文字列の作成

一次元配列(Array)の表現が難しく、非常にダサいです。

```plaintext:OnSelect(JSONボタン)
// 1-1. データ用のコレクションをクリアする
Clear(colDataArray);

// 1-2. サンプルデータからCategoryA列を抜き出す
Collect(colDataArray, ShowColumns(Sample, "CategoryA"));

// 1-3. CategoryAの値をConcatして、Arrayっぽく整形する
Set(DataArrayString, 
    "[" & Concat(colDataArray, CategoryA & ",") & "]"
);

// 1-4. 字余りを消す
Set(DataArrayString, 
    Left(DataArrayString, Len(DataArrayString) - 2) & "]"
);

// 2-1. ラベル用のコレクションをクリアする
Clear(colDataArray);

// 2-2. X軸のラベルデータをDate列から設定する
Collect(colDataArray, ShowColumns(Sample, "Date"));

// 2-3. Dateの値をConcatして、Arrayっぽく整形する
Set(LabelsArrayString, 
    "[" & """" & Concat(colDataArray, Date & """" & "," & """") & "]"
);
// 2-4. 字余りを消す
Set(LabelsArrayString, 
    Left(LabelsArrayString, Len(LabelsArrayString) - 3) & "]"
);

// 3-1. JSONとして関数で宣言する
Set(JSONString, 
    JSON(
        First(
            Table(
                {chart: 
                
                    {    
                        type: ComboboxCanvas1.Selected.Value,
                        data: {
                                labels: "{label}",
                                datasets: [
                                {
                                    label:TextInputCanvas1.Value,
                                    data: "{data}"
                                }
                            ]
                        }
                    }
                
                }
            )
        ),
        JSONFormat.IndentFour
    )    
);

// 4. 配列が、文字列で"[]"となってしまうので、無理やり[]に置き換える
Set(JSONString,
        Substitute(
            Substitute(
                JSONString,
                    """{label}""",LabelsArrayString
                ),
            """{data}""",DataArrayString
    )
);
Set(result,QuickChartCreate.Run(JSONString));
```

**しこたまダサい！**

:::note warn
推奨しません(´;ω;｀)
まさかり🪓どうぞ
:::

単純なグラフでも、このような汚い関数になってしまいます…。
実力不足を悔やみますが、一次元配列をPower Appsで表現するいい方法はないものなのか…。

せっかく作ったので、この`JSON文字列`を`Power Automate`に渡します。

## Power Automate

Power Automateは単純に`HTTP要求`を実行するだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/bda53015-161d-629d-c56b-aa2c36360921.png)

1. `Power Apps`から`JSON文字列`を受け取る
1. 受け取った`JSON文字列`をパースする
1. HTTP要求を送る
1. Power Appsに結果を戻す

### 2. 受け取った`JSON文字列`をパースする
自分で無理やり関数を用いて作った文字列を解析します。

```json:スキーマ
{
    "type": "object",
    "properties": {
        "chart": {
            "type": "object",
            "properties": {
                "data": {
                    "type": "object",
                    "properties": {
                        "datasets": {
                            "type": "array",
                            "items": {
                                "type": "object",
                                "properties": {
                                    "data": {
                                        "type": "array",
                                        "items": {
                                            "type": "integer"
                                        }
                                    },
                                    "label": {
                                        "type": "string"
                                    }
                                },
                                "required": [
                                    "data",
                                    "label"
                                ]
                            }
                        },
                        "labels": {
                            "type": "array",
                            "items": {
                                "type": "string"
                            }
                        }
                    }
                },
                "type": {
                    "type": "string"
                }
            }
        }
    }
}
```

:::note warn
複合グラフを含めて、JSONの型をこちらのステップで固めてしまうと対応できないグラフが存在します。
:::

### 3. `HTTP要求` QuickChart APIを実行する

設定値は下記のとおりです。

|項目|値|備考
|---|---|---
|URI|https://quickchart.io/chart/create|
|Method|Post|
|Headers - Content-Type| application/json|
|本文|@body('JSON_の解析')|
|戻り値|@body('HTTP')?['url']|こちらが作成されたグラフのURLです

非常に単純なやつですね。
`カスタムコネクタ`にしたほうが楽かもしれません。

## Power Appsで結果を見てみる
`Image`コントロールにPower Automateの戻り値を設定します。

```plaintext:ImageコントロールのImageproperty
result.result
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/23327338-83f2-6673-b436-91a6b244a1f3.png)

**円グラフが作成されました📊**

しかしながら今回は力業方式…。
全然スマートではない…。

ということで次回URLにグラフのパラメーターを設定してグラフを作成していこうと思います。
**面白いので、ぜひ試してみてください！**

https://twitter.com/DemodoriGatsuo/status/1764996071464579424

超かっこいい活用事例はコチラ📊

https://www.linkedin.com/feed/update/urn:li:activity:7171103196625534976/