Интеграция Power BI с angular

В современном мире, управляемом данными, предприятия все чаще полагаются на мощные инструменты визуализации данных для принятия обоснованных решений и получения ценной информации. Power BI, ведущая платформа бизнес-аналитики, разработанная Microsoft, предлагает комплексный набор инструментов для анализа данных. В сочетании с Angular, популярной инфраструктурой JavaScript для создания динамических веб-приложений, он создает простой и эффективный способ отображения данных и взаимодействия с ними в режиме реального времени. В этом сообщении блога мы рассмотрим процесс интеграции Power BI с Angular, чтобы раскрыть истинный потенциал визуализации и анализа данных.

Предпосылки:

Учетная запись Power BI: зарегистрируйте учетную запись Power BI, если вы еще этого не сделали, чтобы получить доступ к службе Power BI и получить необходимые учетные данные для интеграции с Angular.
Node.js и npm: установите Node.js и npm (диспетчер пакетов Node) для управления зависимостями и создания приложений Angular.

Шаг 1: Создайте проект Angular Для начала создайте новый проект Angular с помощью интерфейса командной строки Angular. Откройте терминал или командную строку и выполните следующие команды:

# Install Angular CLI globally (if not already installed)
npm install -g @angular/cli

# Create a new Angular project
ng new power-bi-angular-integration
cd power-bi-angular-integration

Шаг 2. Установите API JavaScript для Power BI

Затем нам нужно установить API JavaScript Power BI, который позволяет нам взаимодействовать с отчетами и панелями мониторинга Power BI. Установите клиентскую библиотеку Power BI с помощью npm.
Примечание. Я работал с версией 3.0.5 powerbi-client-angular

npm install powerbi-client-angular

Шаг 3. Импортируйте PowerBIEmbedModule. Для этого откройте файл app.module.ts и добавьте следующий код:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    BrowserModule,
    PowerBIEmbedModule
 ],
  exports:[],
  bootstrap: []
})
export class AppModule { }

Шаг 4. Встраивание отчета Power BI На этом шаге предположим, что у вас есть отчет Power BI, опубликованный в службе Power BI, который вы хотите внедрить в свое приложение Angular. Мы создадим новый компонент в Angular для встраивания отчета Power BI. Для этого откройте файл app.component.ts и добавьте следующий код:

Примечание. Возможно, вам потребуется вызвать один API, чтобы получить «ваш токен», «ваш reportId» и «ваш embedUrl»

import { Component, OnInit, ViewChild } from '@angular/core';
import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';
import { IReportEmbedConfiguration, models, service, Embed } from 'powerbi-client';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  reportConfig: IReportEmbedConfiguration = {
    type: 'report',
    embedUrl: '',
    tokenType: models.TokenType.Embed,
    accessToken: '',
    settings: undefined,
  };
  @ViewChild(PowerBIReportEmbedComponent)
  reportObj!: PowerBIReportEmbedComponent;
  eventHandlersMap = new Map([
    [
      'loaded',
      () => {
        const report = this.reportObj.getReport();
        report.setComponentTitle('Embedded report');
      },
    ],
    ['rendered', () => console.log('Report has rendered')],
    [
      'error',
      (event?: service.ICustomEvent<any>) => {
        if (event) {
          console.error(event.detail);
        }
      },
    ],
    ['visualClicked', () => console.log('visual clicked')],
    ['pageChanged', (event) => ''],
  ]) as Map<
    string,
    (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null
  >;

  constructor() {}

  ngOnInit() {
    this.embedReport();
  }

  embedReport(){
     this.reportConfig = {
        ...this.reportConfig,
         accessToken: 'your token',
         id: 'your reportId',
         embedUrl: 'your embedUrl',
      };
  }

}

Шаг 5. Добавьте компонент отчета Power BI в приложение

На этом этапе мы добавим селектор PowerBiReport в HTML-код компонента приложения. Откройте app.component.html и добавьте следующее:

<powerbi-report [embedConfig]="reportConfig" [cssClassName]="'report-container'"
[phaseEmbedding]="false" [eventHandlers]="eventHandlersMap"></powerbi-report>

Шаг 6: Тестирование интеграции Наконец, пришло время протестировать интеграцию. Запустите сервер разработки Angular:

ng serve

Откройте http://localhost:4200 в своем браузере, и вы должны увидеть встроенный отчет Power BI в своем приложении Angular.

Вывод: интеграция Power BI с Angular предлагает мощный способ отображения и взаимодействия с данными в веб-приложении. В этом сообщении блога мы рассмотрели основные шаги по интеграции отчетов Power BI с компонентами Angular.

Спасибо за прочтение!!!!!!

Интеграция Power BI с angular

Похожие вопросы