カスタムビジュアライゼーション チュートリアル

Cognos Analyticsの「Custom Visualizations Developer Guide」には、簡単な散布図を開発するためのチュートリアルがあります。

カスタム視覚化 - チュートリアル
https://www.ibm.com/support/knowledgecenter/ja/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_customviz_lib_tutorialscatter0.html

このチュートリアルをやると、このような散布図が作成できます。

カスタムビジュアライゼーション開発で重要なファイルは、visdef.xmlとMain.tsファイルですが、今回は開発の開始からvisdef.xmlの編集までをチュートリアルの流れに沿ってご説明します。

カスタム視覚化の新規作成

コマンドプロンプトを開き、カスタム視覚化を作成するために、以下のコマンドを実行します。

> customvis create MyScatter
> cd MyScatter
> customvis start

以下のフォルダとファイルが自動的に作成されます。
それぞれのファイルをご説明します。

package.json
カスタム視覚化のパッケージ情報を定義するファイル。
Cognos Analyticsに表示するカスタム視覚化の名前やアイコンを変更できます。

vizdef.xml（初期状態のもの）
視覚化の様々な情報（スロット、データ編成、プロパティーなど）を記述します。

externals.d.ts
D3のような外部ライブラリー参照が必要な場合に追加するファイル。
※今回のチュートリアルではこのファイルは更新しません。

customvis-lib.tgz
視覚化開発で使用するAPIライブラリー。
視覚化クラス作成用の「RenderBase」という基本クラスが含まれます。

renderer/Main.ts（初期状態のもの）
カスタム視覚化開発時のメインの実装ファイル。
typescript ファイルとなります。

その他のファイル、フォルダー
customvis start を実行するとさらにいくつかのファイルやフォルダが生成されます。
これは視覚化の実行に必要なビルド出力も含まれます。
クリーンな状態で再び開発を開始するには、customvis cleanを実行する必要があります。

visdef.xmlの説明

チュートリアルのパート1を完了すると、visdef.xmlファイルは以下の記述になります。
以降で、個々の記載を説明します。

<?xml version="1.0" encoding="UTF-8"?>
<visualizationDefinition version="3.1" xmlns="http://www.ibm.com/xmlns/prod/ba/vipr/vizBundle/vizdef.3">
    <slots>
        <slot name="categories" type="cat" optional="false" channel="color" />
        <slot name="xpos" type="cont" optional="false" />
        <slot name="ypos" type="cont" optional="false" />
    </slots>

    <dataSets>
        <dataSet>
            <ref slot="categories" />
            <ref slot="xpos" />
            <ref slot="ypos" />
        </dataSet>
    </dataSets>

    <properties>
        <palette name="color" slot="categories" />
    </properties>

    <capabilities>
        <decorations>
            <decoration name="selected" type="boolean" target="datapoint" />
            <decoration name="hasSelection" type="boolean" target="dataset" />
            <decoration name="highlighted" type="boolean" target="datapoint" />
        </decorations>
    </capabilities>
</visualizationDefinition>

スロット

<slots> ～ </slots>には、視覚化内のデータを保持できる部分を定義します。
チュートリアルで作成する散布グラフの視覚化には3つのスロットがあります。
・カテゴリー型のタプル用のスロット1個 (type="cat")
・値用のスロット2個 (type="cont")

<slots>に定義した順番で、視覚化開発画面に表示されます。

スロットには name (内部参照用) および type (カテゴリー型または連続型) が必須となります。

optional 属性 ： そのスロットにデータのマッピングが無くても視覚化をレンダリングできるかを指定します。falseを指定するとスロットは必須項目となります。

channel 属性 ： スロットの凡例を表示することができます。channel に指定できる値は color および size のみです。
・color (カテゴリー型凡例) ： データ・セット内のタプルに対応するスウォッチのリストを表示します。 スウォッチごとに、色付きの形状とキャプションを設定できます。

・size (連続型凡例) ： 連続型の凡例は、値の範囲を表示します。

※チュートリアルでは使用しませんが、caption 属性を使用することもできます。
caption 属性 ： 視覚化開発画面上で表示する名前を指定することができます。

データ・セット

<datasets>～</datasets>には、slotsで定義した項目に紐づけるデータを定義します。
現在、RenderBase ではデータ・セットは 1 つしかサポートされないので、VizDef.xml の典型的な DataSets エントリーは上記のようになります。
slots セクションで定義した各スロットをデータ・セットにリストする必要があります。

プロパティー

<properties>~</properties>では、視覚化の一般的なプロパティーを定義します。
チュートリアルでは、categoriesへ凡例用にカラー・パレットというプロパティを1つ追加しています。

選択機能と強調表示機能

<capabilities>~</capabilities>でデータ要素の選択状態や強調表示状態を示します。
強調表示や選択に対応できる視覚化にするには、上記のセクションを指定する必要があります。
チュートリアルの記載方法で、標準装備のサポートを利用することが可能となります。
name 属性で指定する名称は、DataSetクラス、DataPointクラスのAccessors「selected、highlighted、hasSelecton」が使用できます。
datapoint.selected ：散布図のプロットをクリックした状態
datapoint.highlightted ：散布図のプロットにカーソルを合わせた状態
dataset.hasSelection ：散布図のレジェンドのアイテムを選択した状態

vizdef.xml ファイルを保存すると視覚化のソースのビルドが行われます。

visdef.xmlの説明は以上です。
次回は、カスタム視覚化開発のメインとなる、Main.tsの開発について説明します。

目次

Cognos Analytics カスタムビジュアライゼーション機能の紹介
https://qiita.com/shinyama/items/0adde0d1665a4e385faa