npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

powerbi-client-vue-js

v1.1.1

Published

VueJS wrapper for powerbi-client library

Downloads

11,921

Readme

powerbi-client-vue-js

Power BI Vue component. This library enables you to embed Power BI reports, dashboards, dashboard tiles, report visuals, Q&A or paginated reports in your Vue application, and to create new Power BI reports directly in your application.

Quick Start

Import

Import the 'PowerBIReportEmbed' inside your target module:

import { PowerBIReportEmbed } from 'powerbi-client-vue-js';

Embed a Power BI report

<PowerBIReportEmbed
    :embedConfig = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    :cssClassName = { "reportClass" }

    :phasedEmbedding = { false }

    :eventHandlers = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</PowerBIReportEmbed>

How to bootstrap a PowerBI report:

<PowerBIReportEmbed
    :embedConfig = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</PowerBIReportEmbed>

Note: To embed the report after bootstrapping, update the embedConfig (with at least accessToken and embedUrl).

Embedding other Power BI artifacts

The library offers the following components that can be used to embed various Power BI artifacts.

|Component|Selector to use for embedding| |:------|:------| |PowerBIReportEmbedComponent|<PowerBIReportEmbed>| |PowerBIDashboardEmbedComponent|<PowerBIDashboardEmbed>| |PowerBITileEmbedComponent|<PowerBITileEmbed>| |PowerBIVisualEmbedComponent|<PowerBIVisualEmbed>| |PowerBIQnaEmbedComponent|<PowerBIQnaEmbed>| |PowerBIPaginatedReportEmbedComponent|<PowerBIPaginatedReportEmbed>| |PowerBICreateReportEmbedComponent|<PowerBICreateReport>|

You can embed other artifacts such as:

<PowerBIDashboardEmbed
    :embedConfig = "<IDashboardEmbedConfiguration>"
    :cssClassName = "<className>"
    :eventHandlers = "<Map of String and eventHandler>"
>
</PowerBIDashboardEmbed>

Demo

This demo includes a Vue application that embeds a sample report using the PowerBIReportEmbed component. It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report. It also demonstrates using the powerbi report authoring library, by enabling the user to change the type of visual from a report using the "Change visual type" button. It also sets a 'DataSelected' event.

npm run demo

Redirect to http://localhost:3000/ to view in the browser.

Usage

|Use case|Details| |:------|:------| |Embed Power BI|To embed your powerbi artifact, pass the component with at least type, embedUrl and accessToken in embedConfig property.| |Apply style class|Pass the name(s) of style classes to be applied to the embed container div to the cssClassName property.| |Set event handlers|Pass a map object of event name (string) and event handler (function) to the eventHandlers prop. Key: Event name Value: Event handler method to be triggeredEvent handler method takes two optional parameters:First parameter: EventSecond parameter: Reference to the embedded entity List of supported events is given here: Additional events| |Reset event handlers|To reset event handler for an event, set the event handler's value as null in the eventHandlers map of properties.| |Bootstrap Power BI|To bootstrap your powerbi entity, pass the property embedConfig to the component without accessTokenNote: embedConfig should at least contain type of the powerbi entity being embedded. Available types: "report", "dashboard", "tile", "visual" and "qna".Refer to How to bootstrap a report section in Quick Start. Note: A paginated report cannot be bootstrapped.| |Using with PowerBI Report Authoring|1. Install powerbi-report-authoring as an npm dependency.2. Use the report authoring APIs using the embedded report's instance.| |Phased embedding (Report type only)|Set the phasedEmbedding property value to true Refer to the Phased embedding article.| |Create report|To create a new report, pass the component with at least type, embedUrl and datasetId in embedConfig prop.|

Note: Supported browsers are Edge, Chrome, and Firefox.

Properties accepted by Components

|Property|Description|Supported by| |:-------|:----------|:----------| |embedConfig|Configuration for embedding the PowerBI entity (required)|All| |phasedEmbedding|Phased embedding flag (optional)|Report| |eventHandlers|Map of pair of event name and its handler method to be triggered on the event (optional)|Report, Dashboard, Tile, Visual, Qna| |cssClassName|CSS class to be set on the embedding container (optional)|All| |service|Provide the instance of PowerBI service (optional)|All|

Supported Events

Events supported by various Power BI entities:

|Entity|Event| |:----- |:----- | | Report | "buttonClicked", "commandTriggered", "dataHyperlinkClicked", "dataSelected", "loaded", "pageChanged", "rendered", "saveAsTriggered", "saved", "selectionChanged", "visualClicked", "visualRendered" | | Dashboard | "loaded", "tileClicked" | | Tile | "tileLoaded", "tileClicked" | | QnA | "visualRendered" |

Event Handler to be used with Map

type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null;

Using supported SDK methods for Power BI artifacts

Import

Import the 'PowerBIReportEmbed' inside your targeted component file:

import { PowerBIReportEmbed } from 'powerbi-client-vue-js';

Initialize inside the Component

Component will emit report-obj and You can use this variable.Add method in the component template.

<PowerBIReportEmbed v-if="isEmbedded"
    :embed-config="sampleReportConfig"
    :phased-embedding="phasedEmbeddingFlag"
    :css-class-name="reportClass"
    :event-handlers="eventHandlersMap"
    @report-obj="setReportObj">
</PowerBIReportEmbed>

Declare a variable report!:Report and set the report to the report-obj.

setReportObj(value: Report) {
    this.report = value;
},

Use

You can use report to call supported SDK APIs.

async getReportPages(): Page[] {
    const pages = await this.report.getPages();
    console.log(pages);
}

Note

The library supports Vue applications having version >= 3.

Dependencies

powerbi-client (https://www.npmjs.com/package/powerbi-client)

Peer Dependencies

vue (https://www.npmjs.com/package/vue)

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repositories using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments

Data Collection.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications.

If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement. Our privacy statement is located at Microsoft Privacy Statement. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

Support

Our public support page is available at Microsoft Support Statement.