-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo1.html
44 lines (38 loc) · 1.66 KB
/
demo1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HeatmapComponent demo 1</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
<script src="../build/heatmap-component.js"></script>
</head>
<body>
<div style="width: 1000px; max-width: 95%; min-width: 400px; margin-inline: auto; margin-top: 20px;">
<!-- Your visualization will be placed here -->
<div id="app" style="width: 100%; height: 300px; border: solid gainsboro 1px;"></div>
<div style="display: flex; justify-content: space-between; margin: 5px;">
<div>xMinIndex: <span id="xminindex">?</span></div>
<div>xMaxIndex: <span id="xmaxindex">?</span></div>
</div>
<div style="display: flex; justify-content: space-between; margin: 5px;">
<div>xMin: <span id="xmin">?</span></div>
<div>xMax: <span id="xmax">?</span></div>
</div>
<div style="display: flex; justify-content: space-between; margin: 5px;">
<div>xFirstVisibleIndex: <span id="xfirstvisibleindex">?</span></div>
<div>xLastVisibleIndex: <span id="xlastvisibleindex">?</span></div>
</div>
<div style="display: flex; justify-content: space-between; margin: 5px;">
<div>xFirstVisible: <span id="xfirstvisible">?</span></div>
<div>xLastVisible: <span id="xlastvisible">?</span></div>
</div>
<p style=>Use scroll to zoom, Shift+scroll (or horizontal scroll) to pan.</p>
<p><a href="../src/heatmap-component/demo.ts">Source code</a></p>
<div style="height: 100vh;"></div>
</div>
<script>
HeatmapComponent.demos.demo1('app');
</script>
</body>
</html>