Power BI dla React – analityka biznesowa w React
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.
- Import biblioteki
import { PowerBIEmbed } from 'powerbi-client-react';
- 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.