概要

前回はYellowfinのコードモードダッシュボードでレポートのグラフ表の切り替えを一括で行うの記事でダッシュボード上にボタンを置いてレポートの切り替えをしたのですが、EOMの場合など、自社の製品に組み込みたい場合はHTMLファイルなどにダッシュボードを埋め込んでそこからHTML上のボタンで制御していくことになります。
今回は、前回の流れを踏襲しつつ、DOMを駆使して実現していきます。
下のgifファイルでは分かりづらいですが、左上にクリックボタンがあります。

前準備

適当なダッシュボードを用意して頂き、そのダッシュボードのUUIDを取得します。共有をクリックして埋め込みタグからdashUUID=の後の82b33f61-7ce9-4e83-b26a-425520124d49を控えておきます。

アクセスするHTMLファイルの書き方

最初のscriptタグでYellowfinサーバーのJSAPIv3の読み込みを行います。適宜ドメインを下記コードから変更してください。CORSでエラーが出る場合はこちらを参照してください。CORS設定を行いwebserver越しにRESTでYellowfinサーバーにアクセスする
埋め込み元のボタンを<div id="text-button">タグ一式で作成します。
また、ダッシュボードを表示するための領域を<div id="dashboard"></div>で確保します。

スクリプトの流れとしてはダッシュボードをロードした後に、使われているレポートの名前を取得し、ボタンをクリックすることでDOMを利用してそれぞれのレポートのdisplay-typeを変更しています。
詳細はコードでご確認ください。

enbbededDashboard.html

<html>
<head>
	<meta charset="utf-8" />
	<style type="text/css" id="style0"></style>
</head>
<script type="text/javascript" src="http://localhost:8940/JsAPI/v3"></script>
<body>
<div id="text-button">
	<button id="btn">クリック</p>
</div>
<div id="dashboard"></div>

<script>
	var reports;
	window.yellowfin.init().then(() => {
		window.yellowfin.loadDashboard({
			dashboardUUID: '82b33f61-7ce9-4e83-b26a-425520124d49',//控えたdashUUIDを指定します
			element: 'div#dashboard'
		}).then(dashboard => {

			let reportNames = [];
			reportDefinitions = dashboard.reports.reportDefinitions;
			Object.keys(reportDefinitions).forEach(key =>{
				reportNames.push(reportDefinitions[key].reportInfo.name);
			})

			let btn = document.getElementById("text-button");
			btn.addEventListener('click', () => {
				reportNames.forEach(reportName =>{
					if (document.getElementsByName(reportName)[0]) {
						let currentDisplay = document.getElementsByName(reportName)[0].getAttribute('display-type');
						if (currentDisplay === "CHART") {
							currentDisplay = "REPORT";
						} else {
							currentDisplay = "CHART";
						}
						document.getElementsByName(reportName)[0].setAttribute('display-type', currentDisplay);
					}
				});
			});
		});
	});
</script>
</body>
</html>

感想

これで埋め込みダッシュボードでもよりインタラクティブな表現が可能になり、組み込みの際に役立つんじゃないかなと感じています。