-
Notifications
You must be signed in to change notification settings - Fork 8
/
dashboard.html
88 lines (85 loc) · 3.36 KB
/
dashboard.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GD-DASHBOARD - Web Components Playground</title>
<script type="module" src="https://staging.anywhere.gooddata.com/components/d96366a8366b4db481950eaa2e20eefe.js?auth=sso"></script>
</head>
<body>
<menu>
<a href="./index.html">gd-insight</a>
<a href="./dashboard.html">gd-dashboard</a>
<a href="./local.html">http://localhost:3000</a>
<a href="./euce1.html">euce1</a>
</menu>
<section>
<h2>Configure</h2>
<p>Useful to test live updates to the dashboard properties.</p>
<p><label>
Select dashboard
<select id="dashboard-selector">
<option selected value="07ab1194-be2d-428b-ac8c-b6ed512d49bb">1</option>
<option value="0c6f8d0d-6da1-4899-ac90-d34df8619e08">2</option>
</select>
</label></p>
<p><label>
Select locale
<select id="locale">
<option selected value="en-US">en-US</option>
<option value="ja-JP">ja-JP</option>
</select>
</label></p>
<p><label>
<input type="checkbox" id="readonly"/> Readonly
</label></p>
</section>
<section>
<h2>Result</h2>
<gd-dashboard
id="dashboard"
dashboard="07ab1194-be2d-428b-ac8c-b6ed512d49bb"
></gd-dashboard>
</section>
<section>
<h2>Event log</h2>
<div id="log" style="height:20em;overflow-y:auto;border:1px dotted gray;"></div>
</section>
<script type="module">
const dashboard = document.getElementById("dashboard");
const dashboardSelector = document.getElementById("dashboard-selector");
const localeSelector = document.getElementById("locale");
const eventLog = document.getElementById("log");
const readonlyToggle = document.getElementById("readonly");
dashboardSelector.addEventListener("change", e => {
dashboard.setAttribute("dashboard", e.target.value);
});
localeSelector.addEventListener("change", e => {
dashboard.setAttribute("locale", e.target.value);
});
readonlyToggle.addEventListener("change", e => {
if (e.checked)
dashboard.setAttribute("readonly", "");
else
dashboard.removeAttribute("readonly");
});
// Log events
[
"GDC.DASH/EVT.INITIALIZED", "GDC.DASH/EVT.DEINITIALIZED", "GDC.DASH/EVT.SAVED",
"GDC.DASH/EVT.COPY_SAVED", "GDC.DASH/EVT.SHARING.CHANGED", "GDC.DASH/EVT.FILTER_CONTEXT.CHANGED",
"GDC.DASH/EVT.FILTER_CONTEXT.DATE_FILTER.SELECTION_CHANGED",
"GDC.DASH/EVT.FILTER_CONTEXT.ATTRIBUTE_FILTER.SELECTION_CHANGED",
].map(eventType => {
dashboard.addEventListener(eventType, e => {
const div = document.createElement("pre");
div.style.height = "1em";
// div.style.whiteSpace = "nowrap";
div.style.overflow = "hidden";
div.style.borderBottom = "1px dashed gray";
div.innerText = `${eventType.padEnd(20)}: ${JSON.stringify(e.detail)}`;
eventLog.appendChild(div);
console.log(eventType, e.detail);
});
});
</script>
</body>
</html>