はじめに
Yellowfin のレポートには、複数のチャートが含まれることが良くあります。1 つのテーブルから複数のチャートを作成する運用は極めて一般的です。ただ、この中から特定のチャートを選択して、HTML やポータルの画面に埋め込むにはどのようにしたら良いでしょう。外部向けの情報からだけでは、恐らくその実装方法が理解しきれないと思います。
本記事の中で、その具体的な手順を紹介します。
レポートやチャートを特定する UUID の取得
Yellowfin では、レポートやダッシュボードなどに対して、UUID と呼ばれる内部 ID が付与されており、この UUID を使って、ダッシュボード、ストーリ、レポート、チャートなどを一意にを特定します。
今回必要なのは、レポートとチャートの UUID なので、リポジトリ DB から publishuuid と chartuuid を検索します。
レポート名とチャートのカスタムタイトルが特定できる場合は、以下の SQL を実行することで必要な情報を取得できます。
select chart.reportid, reportheader.reportname, chart.chartuuid, reportheader.publishuuid, reportformat.description
from public.chart, public.reportheader, public.reportformat
where chart.reportid = reportheader.reportid
and chart.chartid = reportformat.chartid
and reportheader.reportname = 'embedding'
and (reportformat.description = '円グラフ' or reportformat.description = '棒グラフ')
レポートに複数チャートを含む場合、下記のように 2 件以上のレコードが検索されてきます。この中から、publishuuid と chartuuid を控えておきます。
なお、上記 SQL で指定したレポート名とチャートのカスタムタイトルは、それぞれ以下の個所で設定する文字列です。
レポート名：
カスタムタイトル（[グラフ] > [タイトル] > [テキスト] > [カスタムタイトル]）：
埋め込み HTML 画面の作成
先の手順で取得した publishuuid と chartuuid を下記サンプルコードの ReportUUID と ChartUUID 変数に取り込みます。今回はチャート単位で埋め込みをするため、displayType: 'CHART' と指定します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>埋め込み例</title>
</head>
<body>
<p>選択したチャートの埋め込み</p>
<script src='http://localhost:8080/JsAPI/v3'/></script>
<div id="reportDiv"></div>
<script>
let ReportUUID = '00bbaecd-8a87-4079-ba93-0d9b4b84cf1a';
let ChartUUID = 'c69ffebf-93da-4c69-a43c-d8addf3b5dae';
yellowfin.loadReport({
reportId: ReportUUID
}).then(report => {
report.createReportElement({
element: document.querySelector('div#reportDiv'),
displayType: 'CHART',
chartUUID: ChartUUID,
showToolbar:false,
height:450,
width: 600,
});
});
</script>
</body>
</html>
指定したチャートが埋め込まれました。
height:250, width: 300 と指定し直すと、サイズの変更も可能です。
chartuuid と指定し直すと、別のチャートに切り替えることもできます。
最後に
Yellowfin Wiki レポート API の記事に類似の説明が見つかります。ただ、この内容だけで実装に至るには少々手間を要しますよね。
技術者の皆さんの実装を効率化する目的も含め、今後は Wiki などの技術情報を補完する投稿も増やしていきたいと思います。
では皆様、良いデータ分析を! See you then! Santé! Cheers!!