チュートリアル:React を使用して Power BI 視覚エフェクトを作成する

[アーティクル]
03/23/2023

開発者は、Power BI の独自の視覚化を作成できます。これらの視覚化は、自分で、組織で、またはサードパーティで使用できます。

このチュートリアルでは、React を使って Power BI の視覚エフェクトを開発します。この視覚化では、円の内側に書式設定された測定値が表示されます。視覚化のサイズはアダプティブで、その設定をカスタマイズできます。

このチュートリアルでは、以下の内容を学習します。

視覚化の開発プロジェクトを作成します。
React を使用して視覚化を開発します。
データを処理するように視覚化を構成します。
サイズ変更に適合するように視覚化を構成します。
視覚化に対してアダプティブな色と境界線の設定を構成します。

注意

この視覚化の完全なソースコードについては、React Circle Card の Power BI 視覚化に関するページを参照してください。

前提条件

Power BI の独自の視覚化の開発を始める前に、このセクションに記載されているすべてのものがあることを確認してください。

Power BI Pro または Premium Per User (PPU) のアカウント。ない場合は、無料試用版にサインアップしてください。
Visual Studio Code (VS Code)。 VS Code は、JavaScript と TypeScript のアプリケーションを開発するための理想的な統合開発環境 (IDE) です。
Windows PowerShell バージョン 4 以降 (Windows の場合)。または Terminal (OSX の場合)。
Power BI の視覚化を開発できる状態の環境。 Power BI の視覚化の開発用に環境をセットアップします。
このチュートリアルでは、US Sales Analysis レポートを使用します。このレポートをダウンロードして Power BI サービスにアップロードしても、独自のレポートを使用してもかまいません。 Power BI サービスおよびファイルのアップロードの詳細については、Power BI サービスでの作成の概要に関するチュートリアルを参照してください。

開発プロジェクトを作成する

このセクションでは、React の円形カード視覚エフェクト用のプロジェクトを作成します。

PowerShell を開き、プロジェクトを作成するフォルダーに移動します。
次のコマンドを入力します。
```
pbiviz new ReactCircleCard
```
プロジェクトのフォルダーに移動します。
```
cd ReactCircleCard
```
React Circle Card 視覚化を開始します。これで、お使いのコンピューターでホストされている間、視覚化が実行されるようになりました。
```
pbiviz start
```
重要

視覚エフェクトの実行を停止するには、PowerShell で Ctrl+C キーを押し、バッチジョブを終了するように求められたら、「Y」と入力して Enter キーを押します。

Power BI サービスで React の円形カードを表示する

Power BI サービスで視覚化をテストするために、US Sales Analysis レポートを使用します。このレポートをダウンロードして、Power BI サービスにアップロードできます。

また、独自のレポートを使用して視覚化をテストすることもできます。

注意

続ける前に、視覚化開発者の設定を有効にしてあることを確認してください。

PowerBI.com にサインインし、US Sales Analysis レポートを開きます。
編集を選択します。
Power BI サービスのインターフェイスの下部にある [新しいページ] ボタンをクリックして、テスト用の新しいページを作成します。
[視覚化] ペインで、 [開発者向けビジュアル] を選択します。

この視覚化は、コンピューターで実行しているカスタム視覚化を表わします。カスタム視覚化のデバッグの設定が有効になっている場合にのみ使用できます。
視覚化がレポートキャンバスに追加されたことを確認します。

これは、その update メソッドが呼び出された回数を表示する簡単な視覚化です。この段階では、視覚化にはデータは取得されていません。

注意

視覚化に接続エラーメッセージが表示される場合は、ブラウザーで新しいタブを開き、https://localhost:8080/assets に移動して、ブラウザーでこのアドレスを使用することを承認します。
新しい視覚化が選択されている状態で、 [フィールド] ペインに移動し、Sales を選択して、Quantity を選択します。
視覚化がどのように応答するかをテストするには、そのサイズを変更し、視覚化のサイズを変更するたびに Update count の値が増えることを確認します。

プロジェクトで React を設定する

このセクションでは、Power BI 視覚エフェクトプロジェクト用に React を設定する方法について説明します。

PowerShell を開き、Ctrl + C キーを押して視覚化の実行を停止します。バッチジョブの終了を求められたら、「Y」と入力して Enter キーを押します。

React をインストールする

必要な React の依存関係をインストールするには、ReactCircleCard フォルダー内で PowerShell を開き、次のコマンドを実行します。

npm i react react-dom

React の型定義をインストールする

React の型定義をインストールするには、reactCircleCard フォルダー内で PowerShell を開き、次のコマンドを実行します。

npm i @types/react @types/react-dom

React コンポーネントクラスを作成する

次の手順に従って、React コンポーネントクラスを作成します。

VS Code を開き、reactCircleCard フォルダーに移動します。
[ファイル]>[新しいファイル] の順に選択して、新しいファイルを作成します。

新しいファイルに次のコードをコピーします。

import * as React from "react";

export class ReactCircleCard extends React.Component<{}>{
    render(){
        return (
            <div className="circleCard">
                Hello, React!
            </div>
        )
    }
}

export default ReactCircleCard;

[名前を付けて保存] を選択し、src フォルダーに移動します。
次のようにファイルを保存します。
- [ファイル名] フィールドに「component」と入力します。
- [ファイルの種類] ドロップダウンメニューから [TypeScript React] を選択します。

視覚化ファイルに React を追加する

visual.ts ファイル内のコードを、React の使用を有効にするコードに置き換えます。

src フォルダーで visual.ts を開き、ファイル内のコードを次のコードに置き換えます。

"use strict";
import powerbi from "powerbi-visuals-api";

import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;

// Import React dependencies and the added component
import * as React from "react";
import * as ReactDOM from "react-dom";
import ReactCircleCard from "./component";

import "./../style/visual.less";

export class Visual implements IVisual {

    constructor(options: VisualConstructorOptions) {

    }

    public update(options: VisualUpdateOptions) {

    }
}

注意

既定の Power BI TypeScript 設定では React の tsx ファイルが認識されないため、VS Code によって component がエラーとして強調表示されます。

コンポーネントをレンダリングするには、対象の HTML 要素を visual.ts に追加します。この要素は VisualConstructorOptions の HTMLElement であり、コンストラクターに渡されます。

src フォルダーで、visual.ts を開きます。
以下のコードを Visual クラスに追加します。

private target: HTMLElement;
private reactRoot: React.ComponentElement<any, any>;

VisualConstructorOptions コンストラクターに次の行を追加します。

this.reactRoot = React.createElement(ReactCircleCard, {});
this.target = options.element;

ReactDOM.render(this.reactRoot, this.target);

これで、visual.ts ファイルは次のようになったはずです。

"use strict";
import powerbi from "powerbi-visuals-api";

import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import * as React from "react";
import * as ReactDOM from "react-dom";
import ReactCircleCard from "./component";    

import "./../style/visual.less";

export class Visual implements IVisual {
    private target: HTMLElement;
    private reactRoot: React.ComponentElement<any, any>;

    constructor(options: VisualConstructorOptions) {
        this.reactRoot = React.createElement(ReactCircleCard, {});
        this.target = options.element;

        ReactDOM.render(this.reactRoot, this.target);
    }

    public update(options: VisualUpdateOptions) {

    }
}

visual.ts を保存します。

tsconfig ファイルを編集する

React を使用するように tsconfig.json を編集します。

reactCircleCard フォルダーで tsconfig.json ファイルを開き、compilerOptions 項目の先頭に 2 行を追加します。

"jsx": "react",
"types": ["react", "react-dom"],

これで tsconfig.json ファイルは次のようになり、visual.ts の component エラーはなくなるはずです。

{
    "compilerOptions": {
        "jsx": "react",
        "types": ["react", "react-dom"],
        "allowJs": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "./.tmp/build/",
        "moduleResolution": "node",
        "declaration": true,
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "files": [
        "./src/visual.ts"
    ]
}

tsconfig.json を保存します。

視覚化をテストする

CircleCardVisual フォルダー内で PowerShell を開き、プロジェクトを実行します。

pbiviz start

Power BI サービスでレポートに新しい [開発者向け視覚エフェクト] を追加すると、次のように表示されます。

Screenshot showing the hello React message in the newly created developer visual in Power B I service.

視覚化のデータフィールドを構成する

視覚化の Measure Data フィールドにデータフィールドを 1 つだけ送信できるように、視覚化の capabilities ファイルを構成します。

VS Code で reactCircleCard フォルダーから capabilities.json を開きます。
ReactCircleCard によって、1 つの値 Measure Data が表示されます。 dataRoles から Category Data オブジェクトを削除します。

Category Data オブジェクトを削除すると、dataRoles キーは次のようになります。
```
"dataRoles": [
    {
        "displayName": "Measure Data",
        "name": "measure",
        "kind": "Measure"
    }
],
```
objects キーのすべての内容を削除します (後で入力します)。

内容を削除すると、objects キーは次のようになります。
```
"objects": {},
```

dataViewMappings プロパティを次のコードに置き換えます。 measure の max: 1 により、視覚化の Measure Data フィールドにはデータフィールドを 1 つだけ送信できることを指定します。

"dataViewMappings": [
    {
        "conditions": [
            {
                "measure": {
                    "max": 1
                }
            }
        ],
        "single": {
            "role": "measure"
        }
    }
]

capabilities.json に加えた変更内容を保存します。
pbiviz start が実行されていることを確認し、Power BI サービスで React Circle Card 視覚化を更新します。 Measure Data フィールドは、max: 1 で指定したようにデータフィールドを 1 つだけ受け入れることができます。

視覚化のスタイルを更新する

このセクションでは、視覚エフェクトの形を円に変えます。 visual.less ファイルを使用して、視覚化のスタイルを制御します。

style フォルダーから、visual.less を開きます。

visual.less の内容を次のコードに置き換えます。

.circleCard {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

p {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;

    position: relative;
    top: -30px;
    margin: 50% 0 0 0;
}

visual.less を保存します。

Power BI からプロパティを受け取るように視覚化を設定する

このセクションでは、視覚エフェクトを構成して、Power BI からデータを受け取り、component.tsx ファイル内のインスタンスに更新内容を送信するようにします。

React を使用してデータをレンダリングする

React を使用して、データをレンダリングできます。コンポーネントでは、独自の状態のデータを表示できます。

VS Code で、reactCircleCard フォルダーから component.tsx を開きます。

component.tsx の内容を次のコードに置き換えます。

import * as React from "react";

export interface State {
    textLabel: string,
    textValue: string
}

export const initialState: State = {
    textLabel: "",
    textValue: ""
}

export class ReactCircleCard extends React.Component<{}, State>{
    constructor(props: any){
        super(props);
        this.state = initialState;
    }

    render(){
        const { textLabel, textValue } = this.state;

        return (
            <div className="circleCard">
                <p>
                    {textLabel}
                    <br/>
                    <em>{textValue}</em>
                </p>
            </div>
        )
    }
}

component.tsx を保存します。

データを受け取るように視覚化を設定する

視覚化では、update メソッドの引数としてデータを受け取ります。このセクションでは、データを受け取るようにこのメソッドを更新します。

次のコードでは、DataView の textLabel と textValue を選んで、データが存在する場合はコンポーネントの状態を更新します。

VS Code で、src フォルダーから visual.ts を開きます。
行 import ReactCircleCard from "./component"; を次のコードに置き換えます。
```
import { ReactCircleCard, initialState } from "./component";
```

update メソッドに次のコードを追加します。

if(options.dataViews && options.dataViews[0]){
    const dataView: DataView = options.dataViews[0];

    ReactCircleCard.update({
        textLabel: dataView.metadata.columns[0].displayName,
        textValue: dataView.single.value.toString()
    });
} else {
    this.clear();
}

update メソッドの下に次のコードを追加して、clear メソッドを作成します。
```
private clear() {
    ReactCircleCard.update(initialState);
}
```
visual.ts を保存します

データを送信するように視覚化を設定する

このセクションでは、component ファイル内のインスタンスに更新内容を送信するように視覚エフェクトを更新します。

VS Code で、src フォルダーから component.tsx を開きます。

以下のコードを ReactCircleCard クラスに追加します。

private static updateCallback: (data: object) => void = null;

public static update(newState: State) {
    if(typeof ReactCircleCard.updateCallback === 'function'){
        ReactCircleCard.updateCallback(newState);
    }
}

public state: State = initialState;

public componentWillMount() {
        ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); };
}

public componentWillUnmount() {
    ReactCircleCard.updateCallback = null;
}

component.tsx を保存します。

視覚化への変更内容を確認する

React Circle Card 視覚化をテストして、行った変更内容を確認します。

pbiviz start が実行されていることを確認し、Power BI サービスで "React の円形カード" 視覚エフェクトを更新します。
視覚化の Measure Data フィールドに Sales を追加します。

Screenshot of the sales value displayed in the react circle card visual in the Power BI service.

視覚化のサイズを変更可能にする

現在、視覚化の幅と高さは固定されています。ビジュアルをサイズを変更できるようにするには、visual.ts と component.tsx の両方のファイルで size 変数を定義する必要があります。このセクションでは、視覚エフェクトのサイズを変更できるようにします。

このセクションで説明されている手順を完了すると、視覚エフェクトの円の直径が、幅または高さの最小サイズと一致するようになり、Power BI サービスでサイズを変更できるようになります。

visual.ts ファイルを構成する

options オブジェクトから、ビジュアルビューポートの現在のサイズを取得します。

VS Code で、src フォルダーから visual.ts を開きます。
次のコードを挿入して、IViewport インターフェイスをインポートします。
```
import IViewport = powerbi.IViewport;
```
visual クラスに viewport プロパティを追加します。
```
private viewport: IViewport;
```

update メソッドの ReactCircleCard.update の前に、次のコードを追加します。

this.viewport = options.viewport;
const { width, height } = this.viewport;
const size = Math.min(width, height);

update メソッドの ReactCircleCard.update に、size を追加します。
```
size,
```
visual.ts を保存します。

component.tsx ファイルを構成する

VS Code で、src フォルダーから component.tsx を開きます。
次のコードを export interface State に追加します。
```
size: number
```
次のコードを export const initialState: State に追加します。
```
size: 200
```
render メソッドで、コードに次の変更を加えます。
1. size を const { textLabel, textValue, size } = this.state; に追加します。この宣言は、次のようになるはずです。
```
const { textLabel, textValue, size } = this.state;
```
2. return の前に次のコードを追加します。
```
const style: React.CSSProperties = { width: size, height: size };
```
3. return の最初の行 <div className="circleCard"> を次に置き換えます。
```
<div className="circleCard" style={style}>
```
component.tsx を保存します。

視覚化ファイルを構成する

VS Code で、style フォルダーから、visual.less を開きます。
.circleCard で、width と height を min-width と min-height に置き換えます。
```
min-width: 200px;
min-height: 200px;
```
visual.less を保存します。

Power BI ビジュアルをカスタマイズできるようにする

このセクションでは視覚エフェクトをカスタマイズする機能を追加し、ユーザーが色と境界線の太さを変更できるようにします。

capabilities ファイルに色と太さを追加する

capabilities.json の object プロパティに、色と境界線の太さを追加します。

VS Code で、reactCircleCard フォルダーから capabilities.json を開きます。

objects プロパティに以下の設定を追加します。

"circle": {
    "properties": {
       "circleColor": {
            "type": {
                "fill": {
                    "solid": {
                        "color": true
                    }
                }
            }
        },
        "circleThickness": {
            "type": {
                "numeric": true
            }
        }
    }
}

capabilities.json を保存します。

settings ファイルに円の書式設定クラスを追加する

Circle 書式設定を settings.ts に追加します。書式設定モデルの設定を作成する方法の詳細については、「書式設定ユーティリティ」を参照してください。

VS Code で、src フォルダーから settings.ts を開きます。

settings.ts のコードを次のコードに置き換えます。

"use strict";

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

import FormattingSettingsCard = formattingSettings.SimpleCard;
import FormattingSettingsSlice = formattingSettings.Slice;
import FormattingSettingsModel = formattingSettings.Model;

/**
* Circle Formatting Card
*/
class CircleCardSettings extends FormattingSettingsCard {
    circleColor = new formattingSettings.ColorPicker({
        name: "circleColor", // circle color name should match circle color property name in capabilities.json
        displayName: "Color",
        description: "The fill color of the circle.",
        show: true,
        value: { value: "white" }
    });

    circleThickness = new formattingSettings.NumUpDown({
        name: "circleThickness", // circle thickness name should match circle color property name in capabilities.json
        displayName: "Thickness",
        description: "The circle thickness.",
        show: true,
        value: 2
    });

    name: string = "circle"; // circle card name should match circle object name in capabilities.json
    displayName: string = "Circle";
    show: boolean = true;
    slices: Array<FormattingSettingsSlice> = [this.circleColor, this.circleThickness];
}

/**
* visual settings model class
*
*/
export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    // Create formatting settings model circle formatting card
    circleCard = new CircleCardSettings();

    cards = [this.circleCard];
}

settings.ts を保存します。

視覚化の設定を適用するためのメソッドを追加する

視覚エフェクトの設定の適用に使用する getFormattingModel メソッドと、必要な import を、visuals.ts ファイルに追加します。

VS Code で、src フォルダーから visual.ts を開きます。

visual.ts の先頭に次の import ステートメントを追加します。

import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import { VisualFormattingSettingsModel } from "./settings";

Visual に次の宣言を追加します。

private formattingSettings: VisualFormattingSettingsModel;
private formattingSettingsService: FormattingSettingsService;

Visual に getFormattingModel メソッドを追加します。

public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
}

Visual クラスで、次のコード行を constructor に追加して formattingSettingsService を初期化します
```
    this.formattingSettingsService = new FormattingSettingsService();
```
Visual クラスで、次のコードを update に追加して、視覚化の書式設定を最新の書式設定プロパティ値に更新します。
1. const size = Math.min(width, height); の後の if ステートメントに、次のコードを追加します。
```
this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
const circleSettings = this.formattingSettings.circleCard;
```
2. size の後の ReactCircleCard.update に次のコードを追加します。
```
borderWidth: circleSettings.circleThickness.value,
background: circleSettings.circleColor.value.value,
}
```
visual.ts を保存します。

component ファイルを編集する

視覚化の色と境界線の太さに対する変更内容をレンダリングできるように、component ファイルを編集します。

VS Code で、src フォルダーから component.tsx を開きます。

State に次の値を追加します。

background?: string,
borderWidth?: number

render メソッド内の以下のコード行を置き換えます。
1. const { textLabel, textValue, size } = this.state; を次に:
```
const { textLabel, textValue, size, background, borderWidth } = this.state;
```
2. const style: React.CSSProperties = { width: size, height: size }; を次に:
```
const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
```
component.tsx を保存します。

変更内容を確認します。

制御できるようになった視覚化の色と境界線の太さを試してみます。

pbiviz start が実行されていることを確認し、Power BI サービスで "React の円形カード" 視覚エフェクトを更新します。
[書式] タブを選択し、 [円] を展開します。
視覚化の [色] と [太さ] の設定を調整し、視覚化に対するその効果を確認します。

A screenshot of the react circle card visual in Power B I service, showing the color and border thickness format options.

チュートリアル:React を使用して Power BI 視覚エフェクトを作成する

前提条件

開発プロジェクトを作成する

Power BI サービスで React の円形カードを表示する

プロジェクトで React を設定する

React をインストールする

React の型定義をインストールする

React コンポーネントクラスを作成する

視覚化ファイルに React を追加する

tsconfig ファイルを編集する

視覚化をテストする

視覚化のデータフィールドを構成する

視覚化のスタイルを更新する

Power BI からプロパティを受け取るように視覚化を設定する

React を使用してデータをレンダリングする

データを受け取るように視覚化を設定する

データを送信するように視覚化を設定する

視覚化への変更内容を確認する

視覚化のサイズを変更可能にする

visual.ts ファイルを構成する

component.tsx ファイルを構成する

視覚化ファイルを構成する

Power BI ビジュアルをカスタマイズできるようにする

capabilities ファイルに色と太さを追加する

settings ファイルに円の書式設定クラスを追加する

視覚化の設定を適用するためのメソッドを追加する

component ファイルを編集する

変更内容を確認します。

次のステップ

フィードバック

フィードバック

その他のリソース

チュートリアル:React を使用して Power BI 視覚エフェクトを作成する

前提条件

開発プロジェクトを作成する

Power BI サービスで React の円形カードを表示する

プロジェクトで React を設定する

React をインストールする

React の型定義をインストールする

React コンポーネント クラスを作成する

視覚化ファイルに React を追加する

tsconfig ファイルを編集する

視覚化をテストする

視覚化のデータ フィールドを構成する

視覚化のスタイルを更新する

Power BI からプロパティを受け取るように視覚化を設定する

React を使用してデータをレンダリングする

データを受け取るように視覚化を設定する

データを送信するように視覚化を設定する

視覚化への変更内容を確認する

視覚化のサイズを変更可能にする

visual.ts ファイルを構成する

component.tsx ファイルを構成する

視覚化ファイルを構成する

Power BI ビジュアルをカスタマイズできるようにする

capabilities ファイルに色と太さを追加する

settings ファイルに円の書式設定クラスを追加する

視覚化の設定を適用するためのメソッドを追加する

component ファイルを編集する

変更内容を確認します。

次のステップ

フィードバック

フィードバック

その他のリソース

React コンポーネントクラスを作成する

視覚化のデータフィールドを構成する