この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
車輪開発大好きおたいがです。こんにちは。( 挨拶 )
今回は 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 のビューの操作と同期してビュー外のコンテンツを制御させたいときに、これらの情報が役立つと思われます。