Yellowfinのダッシュボードを埋め込んだ外部ファイルからグラフ表の表示切り替えを行う

8532 ワード
組み込み yellowfin JavaScript dom JavaScript テキストリンク

概要

前回は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>

感想

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