Yellowfinのコードモードダッシュボードでレポートのグラフ表の切り替えを一括で行う

#概要
これまでYellowfinv9が発表されてからいろいろなダッシュボードのカスタマイズを検証してきましたが、今回はダッシュボードに表示されているレポート全てをボタンクリックでグラフ表示・表の表示を切り替える方法を試してみました。
組み込みの場合はこちらもご参照ください。Yellowfinのダッシュボードを埋め込んだ外部ファイルからグラフ表の表示切り替えを行う

#前準備
ダッシュボードを作成し、適当にレポートを並べて、switchという名前のボタンをダッシュボード上に配置します。
今回はサンプルであらかじめインストール後に使用できるSkiTeamのダッシュボードで解説していきます。

#レポートの名称とJSタブの書きっぷり

さっそくコードを下記に表示しているのですが、switchボタンをクリックした際に、
表示を変更したいレポートの名前をthis.apis.canvas.selectで指定してそれぞれのdisplay-typeを検証し変更しているだけです。

JStab.js

this.onRender = function () {
    // ここにコードを記述します。これは、イベントリスナーを設定するのに理想的な場所です
    let button = this.apis.canvas.select('switch');
    button.addEventListener('click', () => {
        let report1 = this.apis.canvas.select('Campaign Summary');
        let report2 = this.apis.canvas.select('Revenue by Campaign and Demographic');
        let report3 = this.apis.canvas.select('Agency Sales by Profitability');
        let report4 = this.apis.canvas.select('Profitability by Customer Age & Location Breakdown');
        let report5 = this.apis.canvas.select('Revenue by Media Category');
        let reports = [report1,report2,report3,report4,report5]
        reports.forEach(report => {
            let currentDisplay = report.getAttribute('display-type');
            if(currentDisplay === "CHART") {
                    currentDisplay = "REPORT";
            } else {
                    currentDisplay = "CHART";
            }
            report.setAttribute('display-type', currentDisplay);
        })
    });
};

#感想
意外と簡単に実現できました。
注意点としては、display-typeにはCANVASというスタイルもあるらしいのでその際は別途else分の追加で対応してください。