File: /home/imensosw/www/imenso.co/dev/powerbi/index.php
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Imenso Software">
<title>PowerBI - POC</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/custom.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.23.1/powerbi.js"></script>
</head>
<body>
<main class="app-inner">
<nav class="navbar navbar-expand-lg px-4 navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.svg" width="100"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav custom-ul me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="javascript:;" onClick="changePage(0)" class="nav-link active">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" onClick="changePage(1)">Analytics</a>
</li>
</ul>
<ul class="nav nav-pills">
<li class="dropdown">
<a class="avtar" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span>J</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Account</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="playground">
<div class="main-content">
<div class="mc-grid mt-4 px-4">
<div class="container-fluid">
<div id="reportContainer"></div>
</div>
</div> <!--mc-grid-->
</div> <!-- main-content-->
</div> <!--playground-->
</main>
<script type="text/javascript">
var report;
window.onload = function () {
// Create a theme.
const theme = {
"name": "Ml-theme-",
"dataColors": [
"#213E69",
"#2C5DAA",
"#3977DD",
"#4587E7",
"#6CBEFC",
"#72E3F9",
"#82fde9",
"#75EE9E",
"#F5C133",
"#F08228",
"#E2733C",
"#E96427",
"#F04F1F",
"#F5440E",
"#FF0000",
"#FF0040",
"#FF0037",
"#FF0062",
"#FF2075",
"#FF34A4",
"#FF40C6",
"#FF40C6",
"#09008D",
"#9C7300",
"#007792",
"#008844",
"#962D00",
"#940272",
"#006D8F",
"#810000",
"#00554E",
"#1C2325"
],
"tableAccent": "#2d3546",
"good": "#338322",
"neutral": "#5E6A84",
"bad": "#D92046",
"maximum": "#F5C133",
"center": "#F08228",
"minimum": "#E2733C",
"foreground": "#2D3546",
"foregroundNeutralSecondary": "#2D3546",
"backgroundLight": "#EFF4FB",
"foregroundNeutralTertiary": "#2D3546",
"background": "#FFFFFF",
"backgroundNeutral": "#2D3546",
"textClasses": {
"callout": {
"fontFace": "Verdana",
"color": "#2D3546"
},
"title": {
"fontFace": "Verdana",
"color": "#2D3546"
},
"header": {
"fontFace": "Verdana",
"color": "#2D3546"
},
"label": {
"fontFace": "Verdana",
"color": "#2D3546"
},
"smallLightLabel": {
"color": "#5E6A84"
},
"largeLightLabel": {
"color": "#2D3546"
},
"boldLabel": {
"fontFace": "Verdana"
},
"lightLabel": {
"color": "#5E6A84"
},
"semiboldLabel": {
"fontFace": "Verdana"
}
},
"visualStyles": {
"*": {
"*": {
"border": [
{
"show": true,
"color": {
"solid": {
"color": "#DDDDDD"
}
},
"radius": 7.5
}
],
"referenceLabelDetail": [
{
"detailBold": true,
"detailFontSize": 14,
"$id": "default"
}
],
"background": [
{
"color": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0
}
],
"dropShadow": [
{
"show": true,
"color": {
"solid": {
"color": "#DDDDDD"
}
},
"position": "Outer",
"preset": "Bottom",
"shadowSpread": 3,
"shadowBlur": 10,
"angle": 45,
"shadowDistance": 10,
"transparency": 70
}
]
}
},
"page": {
"*": {
"background": [
{
"transparency": 100
}
],
"displayArea": [
{
"verticalAlignment": "Top"
}
],
"outspace": [
{
"transparency": 100
}
]
}
},
"barChart": {
"*": {
"dataPoint": [
{
"defaultColor": {
"solid": {
"color": "#ff6f0f"
}
}
}
]
}
},
"card": {
"*": {
"border": [
{
"show": true,
"color": {
"solid": {
"color": "#213E69"
}
},
"radius": 7.5
}
],
"spacing": [
{
"customizeSpacing": true,
"verticalSpacing": 0,
"spaceBelowTitle": 0,
"spaceAboveTitle": 10,
"spaceBelowSubTitle": 0,
"spaceBelowTitleArea": 0
}
]
}
},
"cardVisual": {
"*": {
"outline": [
{
"show": true
},
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#FFFFFF"
},
"radius": 8
},
"weight": 1,
"transparency": 0
}
],
"border": [
{
"color": {
"solid": {
"color": "#DDDDDD"
}
},
"show": true,
"radius": 8
}
]
}
},
"multiRowCard": {
"*": {
"dataLabels": [
{
"color": {
"solid": {
"color": "#2D3546"
}
},
"fontSize": 9,
"fontFamily": "Verdana",
"bold": true
}
],
"cardTitle": [
{
"color": {
"solid": {
"color": "#2D3546"
}
},
"fontSize": 9,
"fontFamily": "Verdana",
"bold": true
}
],
"card": [
{
"outline": "BottomOnly",
"outlineColor": {
"solid": {
"color": "#FFFFFF"
}
},
"outlineWeight": 1,
"barShow": true,
"barColor": {
"solid": {
"color": "#FFFFFF"
}
},
"barWeight": 5,
"cardPadding": 10,
"_cardBackground": {
"solid": {
"color": "#FFFFFF"
}
}
}
]
}
},
"actionButton": {
"*": {
"shape": [
{
"$id": "default",
"tileShape": "rectangleRounded"
},
{
"$id": "hover",
"tileShape": "rectangleRounded"
},
{
"$id": "selected",
"tileShape": "rectangleRounded"
},
{
"$id": "disabled",
"tileShape": "rectangleRounded"
}
],
"outline": [
{
"show": true
},
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#c4cdd7"
}
},
"transparency": 0,
"weight": 1
},
{
"$id": "hover",
"lineColor": {
"solid": {
"color": "#f08228"
}
}
},
{
"$id": "selected",
"lineColor": {
"solid": {
"color": "#c4cdd7"
}
}
},
{
"$id": "disabled",
"lineColor": {
"solid": {
"color": "#c4cdd7"
}
}
}
],
"fill": [
{
"show": true
},
{
"$id": "default",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#eff4fb"
}
},
"transparency": 0
},
{
"$id": "hover",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#c4cdd7"
}
},
"transparency": 0
},
{
"$id": "selected",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#eff4fb"
}
},
"transparency": 0
},
{
"$id": "disabled",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#eff4fb"
}
},
"transparency": 0
},
{
"show": true
}
]
}
},
"tableEx": {
"*": {
"values": [
{
"bandedRowHeaders": false,
"valuesOnRow": false,
"fontColorPrimary": {
"solid": {
"color": "#2d3546"
}
},
"backColorPrimary": {
"solid": {
"color": "#ffffff"
}
},
"fontColorSecondary": {
"solid": {
"color": "#2d3546"
}
},
"backColorSecondary": {
"solid": {
"color": "#ffffff"
}
},
"outlineColor": {
"solid": {
"color": "#ffffff"
}
},
"outlineWeight": 10,
"outlineStyle": 5,
"fontFamily": "Verdana"
}
],
"grid": [
{
"rowPadding": 10
}
],
"spacing": [
{
"customizeSpacing": true,
"verticalSpacing": 22,
"spaceBelowTitle": 5,
"spaceBelowSubTitle": 5,
"spaceBelowTitleArea": 5
}
]
}
},
"pivotTable": {
"*": {
"values": [
{
"bandedRowHeaders": false,
"valuesOnRow": false,
"fontColorPrimary": {
"solid": {
"color": "#2d3546"
}
},
"backColorPrimary": {
"solid": {
"color": "#FFFFFF"
}
},
"fontColorSecondary": {
"solid": {
"color": "#2d3546"
}
},
"backColorSecondary": {
"solid": {
"color": "#FFFFFF"
}
},
"outlineColor": {
"solid": {
"color": "#ffffff"
}
},
"outlineWeight": 10,
"outlineStyle": 5,
"urlIcon": false,
"wordWrap": true,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"fontSize": 10
}
],
"grid": [
{
"rowPadding": 10
}
],
"spacing": [
{
"customizeSpacing": true,
"verticalSpacing": 22,
"spaceBelowTitle": 5,
"spaceBelowSubTitle": 5,
"spaceBelowTitleArea": 5
}
]
}
}
}
};
let models = window['powerbi-client'].models;
var embedConfiguration = {
pageName:"ReportSection",
theme: {
themeJson: theme
},
settings: {
background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.MobilePortrait,
panes: {
bookmarks: {
visible: false
},
fields: {
expanded: false
},
filters: {
expanded: false,
visible: false
},
pageNavigation: {
visible: false
},
selection: {
visible: true
},
syncSlicers: {
visible: true
},
visualizations: {
expanded: true
}
},
},
type: 'report',
accessToken:'H4sIAAAAAAAEAB2Ut66EVgBE_-W1WCIvYMkFeck5duSwxCVeLP-7n92fYnRGM3__2BkY5qz8-fOHOuElBHCBIIMnzIrOC8NNMjbqL9yWbRNmDi8Le4jOgWmThxlT9CZ1cyCaBH4zSnvk2c2hI7tDoB70Pj2dNwMKD9RK49_WkAUtVdSj0gre1usN1KOuOnv4l_mKOl6FQIzxp3MU95AuZWXP-OXL6mhTVYDPRcVyp2HW7vopDT4VelZ_3Taxv47UHNbr-bSJ8O1BaxN1ng-Zsb8F7BUBXdPN0zY50OXJeia0RbFJ9BGuITnsAVw6NI54GFwInaVjhtbWaatratFzQR47rilt3JB5y7f1gye-7YATeRglHDDVhLRWzhPX1wt7o5JisToeYxJYpNuHDWP0ElrbUNFRwPpo65Iv55EY0aSaTCZiHmIjo9bN7oai-vS3TY_dge6V6yekoQdQ0LTNJ47lZCX0UtDFQtWhiyqKi3B3on-3r_Jkl7Jhkn7kgTKxLhrZFgWvnttoi6hzIJbl7ggxKZ1WVoaGhNbn89Ikk9E7IyRllBaIou4UjBvf2gJ6WT5wr89vMFHhzSPb-YV0E7tfG5tLBTdJqrNIS1_NKngo0wcoSNZv9ARHqeZQ7DQV0cw-Od-8l9M-HJ4LC_mvqL9WGKKdTw0EhHsZHMmR1-RSMHPrxSfhNCdbI21m5lTBXADL45oK373pLyE96yFHxDSsaD-8Hogwe0tegrQUWuYTzCgXoKkdHmIz3Ycs6yintX2acUFzbkF-8Tk33JzGqoSOZf4heL95ETOLqgcekxIWyaLrUQWLn4w3wgG63-Yq24PsR620cnP7cbBUM9mzI6as3A5rOhfEYu9A86Q4zV8ES1qcveS87VQf5a-fP374L1j2WavA73Rkkj59pn5Px3a5kl2HwsEpOJ7DAItunqneGFFAD0o9lnHFL7pyl1sn_NtFviVhyreSkJMdNVUejflYntNHt4XH6vwXrfXr2nIgVJo8U1eZ9pJkvFjFZSGJfcovvrKzC4gpAKBAG-0BFKMhrGmKDwGboupfEHUldDkeELUnhW290c1xJh5GwcZ9TWg0xtWUK_eTUI62I9vHZWoNsHlS-tNMFJfEuXxysRdXUqTBGF-RIlc5vfFLViiCuQmR6KL6uXRElCrTUKPsyaIgNZhovLymyfM4sfQ7eNhAZieCU_nXaxNABk75e89kSjHdt8Uq97VV_XSTlTkfVNHvhMbON1H10PXX_5rB0lZfJfy1TCQJdeAvbU9itCYVyQpnO3P-p7yumbL9-Fa_WGpuHzNxop5dEN-sdLoFnorXwvZoTNqCmsa9ndgVWdNxApmlMGs0309DCKucQXGRG4TGoRaUpIRvZI0oWh9nAe40Mh10WYY6ooOnUuCOvoo52BNgqxA9zIiCeW95a8Dk49CGMgp26ikDnCIhrWExEyUaV4SeJfHYkbwFO-4G4aju2PvkvKq77abg9HYFTCBRKNWyRC_Xggxz46jr84Qu7xhyvOwj8dLFtcDlBdjz3knBGU71aB3DarZE_37MrWDyhufM9XF7DdpHTrGJQRCrWK8Sahi1eSUHsPeaL6G-9CmiyQgTkSrosQTtEvsA0jOYrtJpe-z4gr8e2UAYStHEGV3_lfHPvwsNxRQuBgAA.eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLUlORElBLVdFU1QtcmVkaXJlY3QuYW5hbHlzaXMud2luZG93cy5uZXQiLCJleHAiOjE3MjAxMDgwODUsImFsbG93QWNjZXNzT3ZlclB1YmxpY0ludGVybmV0Ijp0cnVlfQ==',
id: '35ee6fc9-7ad6-4096-80bd-8f06a8e56b5f',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=35ee6fc9-7ad6-4096-80bd-8f06a8e56b5f',
permissions: 1,
tokenType: models.TokenType.Embed,
};
var $reportContainer = $('#reportContainer')[0];
// Update the theme by passing in the custom theme.
// Some theme properties might not be applied if your report has custom colors set.
report = powerbi.embed($reportContainer, embedConfiguration);
//report.cssClassName="style-class-font-size";
report.fullscreen();
}
function changePage(pageNumber){
report.getPages().then(pages => pages[pageNumber].setActive());
$('.nav-link').removeClass('active');
$('.nav-link').eq(pageNumber).addClass('active');
}
</script>
</body>
</html>