0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-05

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

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

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

前提条件

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

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

image.png

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);
        }
    }
}

画面では日付をカテゴリに設定して、ドリルダウンを試します。

[フィールドの設定]
image.png

[レポート]
上部に出ている下矢印や展開アイコンがドリルダウンのボタン
image.png

[ドリルダウンをクリック]
四半期のデータ
image.png

月別のデータ
image.png

[展開ボタンをクリック]
上位のカテゴリを表示しつつ下位カテゴリを表示
image.png

月別のデータ
image.png

まとめ

今回の例ではドリルダウン時に同じ用なテーブル表記をしましたが、データの粒度によって異なるグラフを出すのも面白いです。是非試してください。

目次へ戻る

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?