import React, { Component } from 'react';
import Cookies from 'universal-cookie';
import { Redirect } from 'react-router-dom';
import { PowerBIEmbed } from 'powerbi-client-react';
import * as pbi from 'powerbi-client';
import { getAsyncPowerBi, getAsyncPowerBiToken } from '../Services/GetAPI';
import { PostPowerBI } from '../Services/PostAPI';
import { MsalProvider, MsalContext } from '@azure/msal-react';
import { loginRequest } from '../../authConfig';
import { getMenuData } from '../Services/MenuAccess';
const cookies = new Cookies();
const powerbi = new pbi.service.Service(
pbi.factories.hpmFactory,
pbi.factories.wpmpFactory,
pbi.factories.routerFactory
);
var models = pbi.models;
var tokenType = pbi.models.TokenType.Aad;
class Dashboards extends Component {
static contextType = MsalContext;
constructor(props) {
super(props);
this.state = {
embedUrl: '',
Data: [],
token: '',
reportToshow:false
};
}
getPoswerBI = async () => {
let res = await PostPowerBI(
'https://api.powerbi.com/v1.0/myorg/dashboards',
cookies.get('AccessToken')
);
console.log('Power', res);
if (res && res.value && res.value.length > 0) {
this.setState({
Data: res.value,
});
await this.handleChangeDashboard(res.value[6].id)
}
};
getDataMenu = async () => {
let res = await getMenuData();
if (res.USER_CLIENT) {
this.setState({
ClientData: res.USER_CLIENT,
});
}
};
hadleReport =() =>{
this.setState({
reportToshow:true
})
}
handleChangeDashboard = (embedDashboardId) =>{
var accessToken = cookies.get('AccessToken');
this.setState(prevState =>{
let {reportToshow} = prevState;
reportToshow = false;
return {reportToshow}
})
accessToken = accessToken.replace("Bearer ","")
// Read embed URL from Model
var embedUrl = `https://msit.powerbi.com/dashboardEmbed?dashboardId=${embedDashboardId}`;
// Read dashboard Id from Model
var embedDashboardId = embedDashboardId;
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models
console.log(models);
// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
var config = {
type: 'dashboard',
tokenType: models.TokenType.Aad,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedDashboardId
};
// Get a reference to the embedded dashboard HTML element
var dashboardContainer = document.getElementById("dashboardContainer");
powerbi.reset(dashboardContainer);
//$('#dashboardContainer')[0] ;
// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, config);
dashboard.on("tileClicked", function (event) {
this.hadleReport();
var objTileClick = JSON.parse(JSON.stringify(event.detail, null, " "));
var embedUrlReport = objTileClick.reportEmbedUrl;
var reportId = embedUrlReport.substring((embedUrlReport.indexOf("reportId=") + 9));
reportId = reportId.substring(0, reportId.indexOf("groupId")-1);
var tileIdSelected = objTileClick.tileId;
var pageNameSelected = objTileClick.pageName;
console.log("embedUrlReport: "+ embedUrlReport);
console.log("reportId: "+ reportId);
console.log("tileIdSelected: "+ tileIdSelected);
console.log("pageNameSelected: "+ pageNameSelected);
var configReport = {
type: 'report',
accessToken: accessToken,
embedUrl: embedUrlReport,
id: reportId,
tileId:tileIdSelected,
pageName:pageNameSelected,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
var reportContainer = document.getElementById("dashboardContainer2");
powerbi.reset(reportContainer);
// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, configReport);
}.bind(this))
}
async componentDidMount() {
await this.getPoswerBI();
await this.getDataMenu();
}
render() {
if (cookies.get('token') == null || cookies.get('token') === undefined) {
return <Redirect to="/" />;
}
const { Data, reportToshow } = this.state;
return (
<div>
<div className="pagetitle">Dashboard</div>
<div className="dbmenu">
<ul>
{Data &&
Data.map((item, i) => (
<li onClick={()=>this.handleChangeDashboard(item.id)} key={'inv' + i}>{item.displayName}</li>
))}
</ul>
<div className="clr"></div>
</div>
<div id="dashboardContainer" style={{display:reportToshow ===false ? 'block':'none'}}></div>
<div id="dashboardContainer2" style={{display:reportToshow ===true ? 'block':'none'}}></div>
</div>
);
}
}
export default Dashboards;
