Power BI カスタムビジュアル開発 : Capabilities の Drilldown を詳しく見る

Last updated at 2018-06-05Posted at 2018-06-05

前回の記事では Sorting、SupportsHighlight、AdvancedEditModeSupport を試しました。今回はドリルダウン機能を検証してます。

`Drilldown` : ビジュアル内でのドリルダウン

ドリルダウン用の別ビジュアルを用意することなく、DataView にドリルダウンした値を渡せるようになります。設定には drilldown の追加および、データロールに対して最大 1 フィールドしか置けないように制約を入れます。

前提条件

ドリルダウンを使うためには、階層構造のデータが必要です。一番簡単なものは日付型ですが、他にも「国」「地域」「都市」のような階層なども考えられます。

この記事でもこれまでと同じ売り上げデータを元にしますが、売上日を日付型に Power BI Desktop で変換したデータセットを利用します。

Drilldown の動作確認

以下の例では myCategory データロールをドリルダウンの対象にし、condition で 1 つしかフィールドを追加できないようにしています。

capabities.json

{
    "dataRoles": [
        {
            "displayName": "サンプルカテゴリ",
            "name": "myCategory",
            "kind": "Grouping"
        },
        {
            "displayName": "グルーピングフィールド",
            "name": "myGrouping",
            "kind": "Grouping"
        },
        {
            "displayName": "サンプルメジャー",
            "name": "myMeasure",
            "kind": "Measure"
        }
    ],
    "drilldown": {
        "roles": [
            "myCategory"
        ]
    },
    "dataViewMappings": [
        {
            "conditions": [
                {
                    "myCategory":{ "max": 1}
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "myCategory"
                    }
                },
                "values": {
                    "group": {
                        "by": "myGrouping",
                        "select": [
                            {
                                "bind": {
                                    "to": "myMeasure"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]    
}

visual.ts

module powerbi.extensibility.visual {
    "use strict";

    export class Visual implements IVisual {

        private area: d3.Selection<HTMLElement>
        private table: d3.Selection<HTMLElement>
        private thead: d3.Selection<HTMLElement>
        private tbody: d3.Selection<HTMLElement>
        private host: IVisualHost;
        private settings: VisualSettings;

        constructor(options: VisualConstructorOptions) {
            // カスタムビジュアルを配置しているホストの情報を取得
            this.host = options.host;
            // カスタムビジュアルのエリアを取得
            this.area = d3.select(options.element);
            this.table = this.area.append("table");
            this.thead = this.table.append("thead").append("tr");
            this.tbody = this.table.append("tbody");
        }

        public update(options: VisualUpdateOptions) {
            debugger;

            this.thead.selectAll("th").remove();
            this.tbody.selectAll("tr").remove();

            this.thead
                .selectAll("th")
                .data(options.dataViews[0].categorical.categories[0].values)
                .enter()
                .append("th")
                .text((value) => { return value.toString(); });

            // Add first blank header
            this.thead.insert("th", ":first-child");

            options.dataViews[0].categorical.values.forEach((values) => {

                let tr = this.tbody.append("tr");

                tr.selectAll("td")
                .data(values.values)
                .enter()
                .append("td")
                .text((value) => {
                    return value.toString(); });

                tr.insert("td",":first-child").text(() => { return values.source.groupName.toString() });
            });
        }

        private static parseSettings(dataView: DataView): VisualSettings {
            return VisualSettings.parse(dataView) as VisualSettings;
        }

        public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
            return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
        }
    }
}