powerbi-client-vue-js
Version:
VueJS wrapper for powerbi-client library
580 lines (579 loc) • 15.3 kB
JavaScript
import { defineComponent as i, h as r, toRaw as n } from "vue";
import { service as f, factories as l, Embed as b, Visual as p, Qna as u, Tile as v, Dashboard as g, Report as w } from "powerbi-client";
const H = "powerbi-client-vue-js", E = "1.1.2", R = "VueJS wrapper for powerbi-client library", C = [
"dist"
], y = "./dist/powerbi-client-vue-js.es.js", B = "./dist/powerbi-client-vue-js.umd.js", S = "./dist/types/src/public-api.d.ts", $ = {
dev: "vite",
build: "vite build && vue-tsc --declaration --emitDeclarationOnly",
preview: "vite preview",
lint: "eslint ./src --ext .ts",
test: "jest src",
demo: "cd demo && npm run dev",
"install:demo": "cd demo && npm install"
}, O = [
"microsoft",
"powerbi",
"embedded",
"vue-js"
], j = {
type: "git",
url: "https://github.com/microsoft/powerbi-client-vue-js"
}, P = "MIT", T = {
tag: "beta"
}, I = {
"powerbi-client": "^2.23.1",
"powerbi-report-authoring": "^1.1.3",
vue: "^3.4.21"
}, k = {
"@types/jest": "^28.1.3",
"@typescript-eslint/eslint-plugin": "^7.5.0",
"@typescript-eslint/parser": "^7.5.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/test-utils": "^2.0.0",
eslint: "^8.57.0",
"eslint-plugin-vue": "^9.22.0",
jest: "^26.6.3",
"ts-jest": "^26.5.6",
typescript: "^4.5.4",
vite: "^5.1.5",
"vue-tsc": "^0.34.7"
}, M = {
name: H,
version: E,
description: R,
files: C,
main: y,
module: B,
types: S,
scripts: $,
keywords: O,
repository: j,
license: P,
publishConfig: T,
dependencies: I,
devDependencies: k
};
function q(t, e) {
if (t.size !== e.size)
return !1;
for (const [s, d] of t) {
if (!e.has(s))
return !1;
const a = e.get(s);
if (JSON.stringify(a) !== JSON.stringify(d))
return !1;
}
return !0;
}
const V = "powerbi-client-vue-js", x = M.version, o = i({
name: "PowerBIBase",
props: {
// CSS class to be set on the embedding container (Optional)
cssClassName: {
type: String
},
// Provide a custom implementation of Power BI service (Optional)
service: {
type: f.Service
}
},
data() {
const t = this.service ? this.service : new f.Service(l.hpmFactory, l.wpmpFactory, l.routerFactory);
return t.setSdkInfo(V, x), {
powerbi: t,
prevEventHandlerMap: /* @__PURE__ */ new Map([]),
embed: void 0
};
},
methods: {
/**
* Sets all event handlers from the input on the embedded entity
*
* @param embed Embedded object
* @param eventHandlerMap Array of event handlers to be set on the embedded entity
* @returns void
*/
setEventHandlers(t, e) {
if (q(this.prevEventHandlerMap, e))
return;
this.prevEventHandlerMap = e;
let s = b.allowedEvents;
const d = t.embedtype;
switch (d) {
case "create":
break;
case "report":
s = [...s, ...w.allowedEvents];
break;
case "dashboard":
s = [...s, ...g.allowedEvents];
break;
case "tile":
s = [...s, ...v.allowedEvents];
break;
case "qna":
s = [...s, ...u.allowedEvents];
break;
case "visual":
s = [...s, ...p.allowedEvents];
break;
default:
console.error(`Invalid embed type ${d}`);
}
const a = [];
e.forEach((h, c) => {
s.includes(c) ? (t.off(c), h && t.on(c, (m) => {
h(m, t);
})) : a.push(c);
}), a.length && console.error(`Following events are invalid: ${a.join(",")}`);
}
}
}), N = i({
name: "PowerBIReportEmbed",
emits: ["report-obj"],
props: {
// Configuration for embedding the PowerBI Report (Required)
embedConfig: {
type: Object,
required: !0
},
// Phased embedding flag (Optional)
phasedEmbedding: {
type: Boolean,
default: !1
},
// Map of event name and handler methods pairs to be triggered on the event (Optional)
eventHandlers: {
type: Map
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "reportContainer" });
},
watch: {
embedConfig: function(t, e) {
e && (this.embedOrBootstrap(), this.callSetEventHandlers());
},
eventHandlers: function() {
this.callSetEventHandlers();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.embedOrBootstrap(), this.callSetEventHandlers();
},
methods: {
/**
* Function to decide to embed, load or bootstrap
*
* @returns void
*/
embedOrBootstrap() {
var t, e;
(t = this.config) != null && t.accessToken && ((e = this.config) != null && e.embedUrl) ? this.embedReport() : this.embed = this.powerbi.bootstrap(this.$refs.containerRef, this.config);
},
/**
* Embed or load the PowerBI Report based on phasedEmbedding flag
*
* @returns void
*/
embedReport() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.phasedEmbedding ? this.powerbi.load(this.$refs.containerRef, this.config) : this.powerbi.embed(this.$refs.containerRef, this.config), this.$emit("report-obj", this.getReport());
},
/**
* Set event handlers if available
*
* @returns void
*/
callSetEventHandlers() {
this.eventHandlers && this.embed && this.setEventHandlers(this.embed, this.eventHandlers);
},
// Returns embed object to calling function
getReport() {
return this.embed;
}
}
}), Q = i({
name: "PowerBIDashboardEmbed",
props: {
// Configuration for embedding the PowerBI Report (Required)
embedConfig: {
type: Object,
required: !0
},
// Map of event name and handler methods pairs to be triggered on the event (Optional)
eventHandlers: {
type: Map
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "dashboardContainer" });
},
watch: {
embedConfig: function(t, e) {
e && (this.embedOrBootstrap(), this.callSetEventHandlers());
},
eventHandlers: function() {
this.callSetEventHandlers();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.embedOrBootstrap(), this.callSetEventHandlers();
},
methods: {
/**
* Function to decide to embed or bootstrap
*
* @returns void
*/
embedOrBootstrap() {
var t, e;
(t = this.config) != null && t.accessToken && ((e = this.config) != null && e.embedUrl) ? this.embedDashboard() : this.embed = this.powerbi.bootstrap(this.$refs.containerRef, this.config);
},
/**
* Embed the PowerBI Dashboard
*
* @returns void
*/
embedDashboard() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.powerbi.embed(this.$refs.containerRef, this.config);
},
/**
* Set event handlers if available
*
* @returns void
*/
callSetEventHandlers() {
this.eventHandlers && this.embed && this.setEventHandlers(this.embed, this.eventHandlers);
},
// Returns embed object to calling function
getDashboard() {
return this.embed;
}
}
}), U = i({
name: "PowerBITileEmbed",
props: {
// Configuration for embedding the PowerBI Report (Required)
embedConfig: {
type: Object,
required: !0
},
// Map of event name and handler methods pairs to be triggered on the event (Optional)
eventHandlers: {
type: Map,
required: !1
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "tileContainer" });
},
watch: {
embedConfig: function(t, e) {
e && (this.embedOrBootstrap(), this.callSetEventHandlers());
},
eventHandlers: function() {
this.callSetEventHandlers();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.embedOrBootstrap(), this.callSetEventHandlers();
},
methods: {
/**
* Function to decide to embed or bootstrap
*
* @returns void
*/
embedOrBootstrap() {
var t, e;
(t = this.embedConfig) != null && t.accessToken && ((e = this.embedConfig) != null && e.embedUrl) ? this.embedTile() : this.embed = this.powerbi.bootstrap(this.$refs.containerRef, this.embedConfig);
},
/**
* Embed the PowerBI Tile
*
* @returns void
*/
embedTile() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.powerbi.embed(this.$refs.containerRef, this.embedConfig);
},
/**
* Set event handlers if available
*
* @returns void
*/
callSetEventHandlers() {
this.eventHandlers && this.embed && this.setEventHandlers(this.embed, this.eventHandlers);
},
// Returns embed object to calling function
getTile() {
return this.embed;
}
}
}), F = i({
name: "PowerBIPaginatedReportEmbed",
props: {
// Configuration for embedding the PowerBI Paginated report (Required)
embedConfig: {
type: Object,
required: !0
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "paginatedReportContainer" });
},
watch: {
embedConfig: function(t, e) {
e && this.embedPaginatedReport();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.embedPaginatedReport();
},
methods: {
/**
* Embed the PowerBI Paginated report
*
* @returns void
*/
embedPaginatedReport() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.powerbi.embed(this.$refs.containerRef, this.config);
}
}
}), J = i({
name: "PowerBIVisualEmbed",
props: {
// Configuration for embedding the PowerBI Visual (Required)
embedConfig: {
type: Object,
required: !0
},
// Map of event name and handler methods pairs to be triggered on the event (Optional)
eventHandlers: {
type: Map
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "visualContainer" });
},
watch: {
embedConfig: function(t, e) {
e && (this.embedOrBootstrap(), this.callSetEventHandlers());
},
eventHandlers: function() {
this.callSetEventHandlers();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.embedOrBootstrap(), this.callSetEventHandlers();
},
methods: {
/**
* Function to decide to embed or bootstrap
*
* @returns void
*/
embedOrBootstrap() {
var t, e;
(t = this.config) != null && t.accessToken && ((e = this.config) != null && e.embedUrl) ? this.embedVisual() : this.embed = this.powerbi.bootstrap(this.$refs.containerRef, this.config);
},
/**
* Embed the PowerBI Visual
*
* @returns void
*/
embedVisual() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.powerbi.embed(this.$refs.containerRef, this.config);
},
/**
* Set event handlers if available
*
* @returns void
*/
callSetEventHandlers() {
this.eventHandlers && this.embed && this.setEventHandlers(this.embed, this.eventHandlers);
},
// Returns embed object to calling function
getVisual() {
return this.embed;
}
}
}), z = i({
name: "PowerBIQnaEmbed",
props: {
// Configuration for embedding the PowerBI Qna visual (Required)
embedConfig: {
type: Object,
required: !0
},
// Map of event name and handler methods pairs to be triggered on the event (Optional)
eventHandlers: {
type: Map
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "qnaContainer" });
},
watch: {
embedConfig: function(t, e) {
e && (this.embedOrBootstrap(), this.callSetEventHandlers());
},
eventHandlers: function() {
this.callSetEventHandlers();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.embedOrBootstrap(), this.callSetEventHandlers();
},
methods: {
/**
* Function to decide to embed or bootstrap
*
* @returns void
*/
embedOrBootstrap() {
var t, e;
(t = this.config) != null && t.accessToken && ((e = this.config) != null && e.embedUrl) ? this.embedQna() : this.embed = this.powerbi.bootstrap(this.$refs.containerRef, this.config);
},
/**
* Embed the PowerBI Qna visual
*
* @returns void
*/
embedQna() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.powerbi.embed(this.$refs.containerRef, this.config);
},
/**
* Set event handlers if available
*
* @returns void
*/
callSetEventHandlers() {
this.eventHandlers && this.embed && this.setEventHandlers(this.embed, this.eventHandlers);
},
// Returns embed object to calling function
getQna() {
return this.embed;
}
}
}), W = i({
name: "PowerBICreateReport",
props: {
// Configuration for creating the PowerBI Report (Required)
embedConfig: {
type: Object,
required: !0
},
eventHandlers: {
type: Map
}
},
mixins: [o],
render() {
return r("div", { ref: "containerRef", class: this.cssClassName, id: "createReportContainer" });
},
watch: {
embedConfig: function(t, e) {
e && (this.createEmbedReport(), this.callSetEventHandlers());
},
eventHandlers: function() {
this.callSetEventHandlers();
}
},
computed: {
config() {
return n(this.embedConfig);
}
},
mounted() {
this.$refs.containerRef && this.createEmbedReport(), this.callSetEventHandlers();
},
methods: {
/**
* Create the report
*
* @returns void
*/
createEmbedReport() {
if (!this.$refs.containerRef) {
console.error("HTML container is not rendered or available");
return;
}
this.embed = this.powerbi.createReport(this.$refs.containerRef, this.config);
},
callSetEventHandlers() {
this.eventHandlers && this.embed && this.setEventHandlers(this.embed, this.eventHandlers);
},
getCreateObj() {
return this.embed;
}
}
});
export {
W as PowerBICreateReport,
Q as PowerBIDashboardEmbed,
F as PowerBIPaginatedReportEmbed,
z as PowerBIQnaEmbed,
N as PowerBIReportEmbed,
U as PowerBITileEmbed,
J as PowerBIVisualEmbed
};