Przede wszystkim React jest jedną z najpopularniejszych i najnowszych bibliotek JavaScript typu open source. Wielu użytkowników zgłaszało prośbę o ułatwienie integracji biblioteki React oraz aplikacjami internetowymi Power BI. Oczywiście jest to pakiet narzędzi do analizy biznesowej. Dzięki niemu można także monitorować swoją firmę dzięki pulpitom nawigacyjnym. W związku z tym już dziś możemy korzystać z tego narzędzia, dzięki ogłoszonemu wydaniu składnika Power BI dla React.

Działanie komponentu

Ten nowy komponent, obsługujący JS oraz TS, pomaga w ustawieniu analityki w aplikacjach internetowych React. Z pewnością praca staje się łatwiejsza, dzięki korzystaniu z komponentu React do pracy z wbudowaną analizą.

Ta biblioteka dla React pozwoli osadzić raporty, kafelki pulpitów nawigacyjnych, także same pulpity nawigacyjne oraz wizualizować raporty. Z pewnością przez integrację bootstrap osiąga się większą wydajność. Ponadto można ją odpowiednio zoptymalizować. Nowo wydany komponent uprościł także zarządzanie cyklem życia w aplikacjach React.

Przykład wdrożenia Power BI w aplikacji React

Aplikacja React osadzająca przykładowy raport przy użyciu komponentu PowerBIEmbed. Przedstawia pełny przepływ od załadowania raportu do osadzania i aktualizowania osadzonego raportu.

1. Import biblioteki

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

2. Osadzanie raportu w aplikacji internetowej React:

<PowerBIEmbed
    embedConfig = {{
        type: 'report',   // Supported types: report, dashboard, tile, visual and qna
        id: '<ReportId>',
        embedUrl: '<EmbedUrl>',
        accessToken: '<AccessToken>',
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    visible: false
                },
                pageNavigation: {
                    visible: false
                }
            },
        }
    }}
 
    // Define event handlers
    eventHandlers = {
        new Map([
            ['loaded', function () { console.log('Report loaded'); }],
            ['rendered', function () { console.log('Report rendered'); }],
            ['error', function (event) { console.log(event.detail); }]
        ])}
 
    // Add CSS classes to the div element
    cssClassName = { "report-style-class" }
 
    // Get reference to the embedded object
    getEmbeddedComponent = { (embeddedReport) => {
        this.report = embeddedReport as Report;
    }}
/>

Na zakończenie – pełna instrukcja jest dostępna w pliku usługi Power BI. Komponent Power BI jest także dostępny w NPM jako open source w serwisie GitHub.