レポート API ： ダッシュボード上のレポートからデータセットの取得

## はじめに
Yellowfin ダッシュボード上に配置するレポートから、レポート内のデータをデータセットとして取得する方法を紹介します。
Yellowfin のデータを他の業務システムに連携させるなどの用途に用いることが可能な技術です。

## 環境準備
[レポート](https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293995) と[ダッシュボード](https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293823)を作成し、ダッシュボード上にレポートを配置します。
動きを分かりやすくするために、以下のような 2 列 2 行の簡単な表をダッシュボードに配置しました。
また、フィルターを使ってデータを絞り込んだ時の動きを示すために、[ダッシュボード フィルター]( https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2294218)も配置しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/98abcc37-f568-3b60-b5f7-978f02c660e6.png)

## コーディング
ダッシュボードの[コードモード]( https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2294202)で、下記 JavaScript コードを記述します。
処理概要は、ダッシュボードに配置した表内のデータをデータセットに格納し、格納したデータセットの中身をセルの単位にまで細分化しながら、各処理段階のデータの型をコンソールに出力しています。
```javascript:ReportAPI
this.onRender = function () {
    let reportElement = this.apis.canvas.select('tablevalue');
    reportElement.onReportLoad.then(() => {
        let reportAPI = reportElement.reportAPI;
        let outputKey = reportAPI.registerOutputType('dataset', reportDataset => {
            console.log(reportDataset);
            reportDataset.forEach(rowData => {
                console.log(rowData);
                rowData.forEach(columnData => {
                    console.log(columnData);
                });
            });
        });
    });
};
```

## コードの説明
コードの中身をかみ砕いて説明します。

まずは、対象となるレポートを、レポートの名前で指定します。
```javascript:ReportAPI
let reportElement = this.apis.canvas.select('tablevalue');
```
画面で確認すると以下の個所が該当します。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/44754078-e010-d160-12bd-386e0b41fc03.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/c45b34d3-bb39-dc1c-6244-4a7e38d1ec20.png)

レポートをロードする際に、API を呼び出します。
```javascript:ReportAPI
    reportElement.onReportLoad.then(() => {
        let reportAPI = reportElement.reportAPI;
```

続く処理の中では、セルの単位にまで細かくデータの中身を指定することができることを示す目的で、データセット → 行データ → 列データ の順に、データセットの中身をセル単位にまで細分化してみます。

registerOutpuType にデータセットを受け渡し、コンソールログでその中身を出力します。
```javascript:ReportAPI
let outputKey = reportAPI.registerOutputType('dataset', reportDataset => {
    console.log(reportDataset);
```
コンソールログの内容がこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/049c4663-2acf-fb63-c7ba-8cfba02cc11a.png)


データセットから行データを取得し、コンソールログに出力します。
```javascript:ReportAPI
reportDataset.forEach(rowData => {
    console.log(rowData);
```
コンソールログの内容がこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/283017e9-422e-88d8-d280-770b103b5b1d.png)

行データから列データを取得し、それぞれをコンソールログに出力します。
```javascript:ReportAP
    rowData.forEach(columnData => {
        console.log(columnData);
```
コンソールログの内容がこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/74cb4da4-dbfd-a14e-45e0-db7739f43fe0.png)

フィルターで絞り込みをかけると、絞り込んだ値だけがデータセットに取られることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/c5495825-87fb-6a5b-2763-8d5956714e32.png)

## 最後に
レポートのデータセットを取得するとともに、セル単位で任意のデータが取得可能なことがご理解いただけたかと思います。
レポート API を活用すれば、データを業務システムに受け渡して、その後の処理に連携させることも可能です。
例えば、Yellowfin のダッシュボード上に配置したボタンを押下すると、テーブルに表示されている製品情報を受発注管理システムに受け渡して、そのまま発注処理につなげるような仕組みを開発することも技術的には可能です。

是非、様々な用途にレポート API を活用してみて下さい。
では皆様、良いデータ分析を! Cheers!!