Поделиться через

Внедрение элемента Power BI в приложение React

  • Статья

При создании приложения встроенной аналитики Power BI React поможет оптимизировать производительность с интеграцией начальной загрузки, используя все клиентские API, включая разработку отчетов. Кроме того, это упрощает управление жизненным циклом внедрения Power BI в приложение. Компонент Power BI React поддерживает JavaScript и TypeScript и помогает внедрить аналитику в веб-приложение React.

Библиотека React позволяет внедрить следующие элементы Power BI:

  • Отчеты
  • Панели мониторинга
  • Плитки панели мониторинга
  • Визуальные элементы отчета
  • Q&A

Внедрение элемента Power BI в веб-приложение React

В этом разделе описывается, как импортировать React в приложение и использовать его для внедрения отчета Power BI.

Подробные сведения об использовании см. в файле Readme в Power BI React.

Импорт библиотеки React

Компонент Power BI React можно найти на NPM. Он также открыт для GitHub.

Чтобы импортировать React в веб-приложение, добавьте перечисленные импорты:

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Внедрение отчета с помощью React

В этом примере показано, как внедрить отчет Power BI с помощью React. Ниже приведен пример описания каждого компонента в примере кода.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

В следующем списке содержатся описания или дополнительные сведения для каждого компонента в примере фрагмента кода.

  • Встраивание конфигурации. Определяет содержимое, которое вы внедряете, и задает параметры содержимого. Изменения конфигурации внедрения при внедрении следующих элементов Power BI:

  • eventHandlers — объект карты для имен событий и их обработчиков. Дополнительные сведения см. в обработке событий.

  • cssClassName — предоставляет внедренный элемент имена классов CSS, которые позволяют управлять стилем внедренного iframe с помощью CSS.

  • getEmbedComponent — обратный вызов, который помогает получить внедренный экземпляр, чтобы можно было использовать все ИНТЕРФЕЙСы API клиентской библиотеки Power BI. Например, при внедрении отчета вы получите экземпляр класса Report.

Загрузка компонента

powerbi.bootstrap — это метод, используемый для ускорения внедрения элементов Power BI и повышения производительности. Дополнительные сведения см. в статье Использование начальной загрузки для повышения производительности.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

Демонстрация React

Репозиторий React включает демонстрацию, которая иллюстрирует полный поток загрузки отчета, внедрения и обновления внедренного отчета. Он также демонстрирует использование библиотеки отчетов powerbi powerbi, удалив визуальный элемент из отчета при нажатии кнопки "Удалить визуальный элемент".

Дополнительные сведения см. в разделе демонстрации файла readme.

анимированный GIF-файл, показывающий демонстрацию Power B I React.

Запуск демонстрации

Демонстрация — это вложенная папка в репозитории. Чтобы запустить демонстрацию на localhost, выполните следующие действия:

  1. Выполните следующие команды:

    npm run install:demo
npm run demo

  2. Чтобы просмотреть в браузере, перенаправьте его на http:/localhost:8080/.

Связанное содержимое