[Tableau] JavaScript API ビューのイベント

車輪開発大好きおたいがです。こんにちは。( 挨拶 )

今回は Tableau JavaScript API を介して表示したワークブックシートから取得できるイベントについて紹介します。

イベントの追加および削除

イベントリスナーの定義は Viz クラスに対して行います。
Viz.addEventListener(type: TableauEventName, listener: Function) メソッドにてイベントリスナーの追加、Viz.removeEventListener(type: TableauEventName, listener: Function) メソッドにて、追加済みイベントリスナーの削除を行うことができます。

TableauEventName 列挙型 ( イベントの種類 )

Viz.addEventListener() および Viz.removeEventListener() メソッドに渡すイベントの種類は tableau.TableauEventName オブジェクトに定数がまとめられており、以下の種類のイベントが用意されています。

イベント種別 ( 名 )	イベントリスナーに渡されるクラスオブジェクト	説明
tableau.TableauEventName.CUSTOM_VIEW_LOAD	CustomViewEvent	カスタム ビューのロード完了時に送出。( onFirstInteractive コールバック関数コール後に送出 )
tableau.TableauEventName.CUSTOM_VIEW_REMOVE	CustomViewEvent	カスタム ビューの削除時に送出。
tableau.TableauEventName.CUSTOM_VIEW_SAVE	CustomViewEvent	ユーザーが新規または既存のカスタム ビューを保存するときに送出。
tableau.TableauEventName.CUSTOM_VIEW_SET_DEFAULT	CustomViewEvent	カスタム ビューが視覚化用の既定のビューになるときに送出。
tableau.TableauEventName.MARKS_SELECTION	MarksEvent	マークが選択または選択解除されるときに送出。
tableau.TableauEventName.PARAMETER_VALUE_CHANGE	ParameterEvent	任意のパラメータが変化したときに送出。
tableau.TableauEventName.STORY_POINT_SWITCH	StoryPointSwitchEvent	ストーリー ポイントがアクティブになるとき送出。
tableau.TableauEventName.TAB_SWITCH	TabSwitchEvent	タブが切り替わるときに送出。
tableau.TableauEventName.VIZ_RESIZE	VizResizeEvent	使用可能なサイズと Viz オブジェクトがパブリッシュされたサイズからフレームのサイズが計算されるたびに送出。

実装例

…
var options = {
  'hideTabs'           : false,
  'hideToolbar'        : false,
  'onFirstInteractive' : function () {
    console.log('onFirstInteractive');
    var customViewLoadHandler = function(event) {
        console.log('customViewLoadHandler : ', event);
    };
    var customViewRemoveHandler = function(event) {
        console.log('customViewRemoveHandler : ', event);
    };
    var customViewSaveHandler = function(event) {
        console.log('customViewSaveHandler : ', event);
    };
    var customViewSetDefaultHandler = function(event) {
        console.log('customViewSetDefaultHandler : ', event);
    };
    var filterChangeHandler = function(event) {
        console.log('filterChangeHandler : ', event);
    };
    var marksSelectionHandler = function(event) {
        console.log('marksSelectionHandler : ', event);
    };
    var parameterValueChangeHandler = function(event) {
        console.log('parameterValueChangeHandler : ', event);
    };
    var storyPointSwitchHandler = function(event) {
        console.log('storyPointSwitchHandler : ', event);
    };
    var tabSwitchHandler = function(event) {
        console.log('tabSwitchHandler : ', event);
    };
    var vizResizeHandler = function(event) {
        console.log('vizResizeHandler : ', event);
    };
    var EventType = tableau.TableauEventName;
    viz.addEventListener(EventType.CUSTOM_VIEW_LOAD,        customViewLoadHandler);
    viz.addEventListener(EventType.CUSTOM_VIEW_REMOVE,      customViewRemoveHandler);
    viz.addEventListener(EventType.CUSTOM_VIEW_SAVE,        customViewSaveHandler);
    viz.addEventListener(EventType.CUSTOM_VIEW_SET_DEFAULT, customViewSetDefaultHandler);
    viz.addEventListener(EventType.FILTER_CHANGE,           filterChangeHandler);
    viz.addEventListener(EventType.MARKS_SELECTION,         marksSelectionHandler);
    viz.addEventListener(EventType.PARAMETER_VALUE_CHANGE,  parameterValueChangeHandler);
    viz.addEventListener(EventType.STORY_POINT_SWITCH,      storyPointSwitchHandler);
    viz.addEventListener(EventType.TAB_SWITCH,              tabSwitchHandler);
    viz.addEventListener(EventType.VIZ_RESIZE,              vizResizeHandler);
  }
};
try {
    viz = new tableau.Viz(placeholderDiv, url, options);
} catch(e) {
    console.log('error : ', e);
}

サンプル

しんや氏サンプルを拝借して、取得したイベントをコンソールに出力するサンプルを作成してみました。タブを切り替えたりマークを選択したりすると、コンソールにログが出力されます。

まとめ

Tableau JavaScript API で扱えるイベントについて触れてみました。Tableau のビューの操作と同期してビュー外のコンテンツを制御させたいときに、これらの情報が役立つと思われます。