#概要
前回は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を変更しています。
詳細はコードでご確認ください。
<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>
#感想
これで埋め込みダッシュボードでもよりインタラクティブな表現が可能になり、組み込みの際に役立つんじゃないかなと感じています。