-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
53 lines (47 loc) · 1.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preset Test Embedded App</title>
<!-- Loading the Preset Embedded SDK from the CDN -->
<script src="https://unpkg.com/@preset-sdk/embedded"></script>
</head>
<body>
<!-- Specifying the iframe size -->
<style>
iframe
{
width: 100%;
height:100%;
}
</style>
<!-- Creating a div that will be used by the SDK to embed the dashboard -->
<div id="dashboard-container"></div>
<script>
// 1. Request guest_token from our backend, which runs at localhost:5000 by default
async function fetchGuestTokenFromBackend() {
let response = await fetch('http://127.0.0.1:8080/guest-token');
let data = await response.json()
if (data["error"]){
alert("ERROR: " + data.error);
return null;
}
return data;
}
// 2. Uses Preset Embedded SDK to embed the dashboard as an iFrame
const dashboardId = "{{ dashboardId }}";
const supersetDomain = "{{ supersetDomain }}";
const myLightDashboard = presetSdk.embedDashboard({
id: dashboardId,
supersetDomain: supersetDomain,
mountPoint: document.getElementById("dashboard-container"), // any html element that can contain an iframe
fetchGuestToken: async () => fetchGuestTokenFromBackend(),
dashboardUiConfig: { // dashboard UI config: hideTitle, hideChartControls, filters (all optional)
hideTitle: false, // change it to `true` to hide the dashboard title
hideChartControls: false, // change it to `true` to hide the chart controls (ellipses menu)
filters: {
expanded: true, // change it to `false` so that dashboard filters are collapsed (for vertical filter bar)
},
}
});
</script>
</body>