development
d3.js
PowerBI

Power BI カスタムビジュアル開発 その5: ツールティップと多言語サポート

前回まではグラフ本体の作成を行いましたが、今回はマウスをグラフに合わせた際に表示されるツールティップについて見ていきます。

ツールティップ

Power BI はツールティップを表示するようのフレームワークを提供しているため、データ構造を作るだけで表示が可能です。

1. データポイントに tooltips フィールドを追加。配列型であるため複数のティップを含めることが可能。

interface BarChartDataPoint {
    value: number;
    category: string;
    selectionId: ISelectionId;
    highlighted: boolean;
    color: string;
    tooltips: VisualTooltipDataItem[];
};

2. visualTransform 関数で tooltips を設定。まずはツールティップに使うため、現在のカテゴリおよび値フィールドのフィールド名を取得。値の確認と取得を以下のように変更。

// 期待した値があるか確認。なければ空データを返す
if (!dataViews
    || !dataViews[0]
    || !dataViews[0].categorical
    || !dataViews[0].categorical.categories
    || !dataViews[0].categorical.categories[0].source
    || !dataViews[0].categorical.values
    || !dataViews[0].metadata)
    return viewModel;

// 値があった場合はそれぞれ変数に一旦抜き出し
let categorical = dataViews[0].categorical;
let category = categorical.categories[0];
let dataValue = categorical.values[0];
let highlights = dataValue.highlights;
// ツールティップ用にカテゴリと値の表示名を取得
let metadata = dataViews[0].metadata;
let categoryColumnName = metadata.columns.filter(c => c.roles["category"])[0].displayName;
let valueColumnName = metadata.columns.filter(c => c.roles["measure"])[0].displayName;

3. ループ処理で他のフィールド同様に値を設定。

// カテゴリと値のセットを dataPoint に入れていく
for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
    barChartDataPoints.push({
        category: <string>category.values[i],
        value: <number>dataValue.values[i],
        selectionId: host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId(),
        highlighted: highlights ? highlights[i] ? true : false : false,
        color: category.objects && category.objects[i] && DataViewObjects.getFillColor(category.objects[i], {
            objectName: "dataColor",
            propertyName: "fill"
        }, null) || host.colorPalette.getColor(<string>category.values[i]).value,
        tooltips: [
            {
                displayName: categoryColumnName,
                value: <string>category.values[i]
            },
            {
                displayName: valueColumnName,
                value: (<number>dataValue.values[i]).toString()
            }
        ]
    });
}

4. update 関数内でマウスオーバーイベントを追加。クリックイベントの下に以下コードを挿入。

// グラフにマウスを当てた際にツールティップを出す
this.bars.on("mouseover", (d) => {
    let mouse = d3.mouse(this.svg.node());
    this.host.tooltipService.show({
        dataItems: d.tooltips,
        identities: [d.selectionId],
        coordinates:[mouse[0], mouse[1]],
        isTouchEvent: false
    });
});

5. 保存して、ビジュアルを更新。ツールティップが出ることを確認。
Capture.PNG

6. 現在は同じ棒グラフ内でマウスを動かしてもツールティップは初めに出た場所に固定されているため、マウスムーブイベントを追加。

// マウスの動作にツールティップを合わせる
this.bars.on("mousemove", (d)=>{
    let mouse = d3.mouse(this.svg.node());
    this.host.tooltipService.move({
        dataItems: d.tooltips,
        identities: [d.selectionId],
        coordinates:[mouse[0], mouse[1]],
        isTouchEvent: false
    });
});

7. 保存して、ビジュアルを更新。ツールティップがマウスを一緒に動くことを確認。

多言語サポート

Power BI は多言語をサポートしていおり、現在選択されているロケールを host.locale で取得することが出来ます。

この値を利用して文字列を返す関数を作ると、ツールティップでの多言語サポートが可能となります。

1. visualTransform 関数の下に、新しい関数を追加。

function getLabel(locale: string, labelId: string): string {
    if (locale === "ja-JP") {
        switch (labelId) {
            case "categoryName":
                return "カテゴリ";
            case "measureName":
                return "値";
        }
    }
    else {
        switch (labelId) {
            case "categoryName":
                return "Category";
            case "measureName":
                return "value";
        }
    }
}

2. visualTransform 関数のツールティップ設定コードを以下のように変更。

// カテゴリと値のセットを dataPoint に入れていく
for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
    barChartDataPoints.push({
        category: <string>category.values[i],
        value: <number>dataValue.values[i],
        selectionId: host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId(),
        highlighted: highlights ? highlights[i] ? true : false : false,
        color: category.objects && category.objects[i] && DataViewObjects.getFillColor(category.objects[i], {
            objectName: "dataColor",
            propertyName: "fill"
        }, null) || host.colorPalette.getColor(<string>category.values[i]).value,
        tooltips: [
            {
                displayName: getLabel(host.locale, "categoryName"),
                value: <string>category.values[i]
            },
            {
                displayName: getLabel(host.locale, "measureName"),
                value: (<number>dataValue.values[i]).toString()
            }
        ]
    });
}

3. 保存して、ビジュアルを更新。日本語を選択している Power BI にてツールティップが日本語になることを確認。

Capture.PNG

次回は作成したカスタムビジュアルのデバッグとパッケージ化を見ていきます。

次の記事へ
目次へ戻る

参照

TooltipUtils でツールチップを活用する