forked from nick-dolan/jesse-correlations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample.html
executable file
·127 lines (111 loc) · 7.27 KB
/
sample.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#DATE</title>
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
<link rel="icon" type="image/png" sizes="16x16"
href=" data:image/png;base64,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"/>
<style>
[v-cloak] {
display: none;
}
body {
max-width: initial;
}
table {
margin: 0;
padding: 0;
}
tr:nth-child(2n) {
background: initial;
}
td, th {
border: 1px solid white;
white-space: nowrap;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: min-content;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 8px;
position: absolute;
z-index: 1;
bottom: 160%;
left: 50%;
margin-left: -100px;
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
}
.table_wrapper {
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<script src="https://unpkg.com/petite-vue" defer init></script>
<div v-cloak
v-scope='#JSON'>
<section>
<ul>
<li><strong>Exchange:</strong> {{ metadata.exchange }}</li>
<li><strong>Timeframe:</strong> {{ metadata.timeframe }}</li>
<li><strong>Date range:</strong> {{ metadata.start_date }} → {{ metadata.finish_date }}</li>
</ul>
</section>
<div style="overflow-x: auto">
<div style="min-width: 100%; display: inline-block">
<div style="overflow: hidden">
<table>
<thead>
<tr>
<th></th>
<th v-for="item in metadata.pairs">
{{ item }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(pair, index) in metadata.pairs">
<th>{{ pair }}</th>
<td :style="{ backgroundColor: corr > 0 ? `rgba(76, 180, 170, ${corr})` : `rgba(187, 68, 48, ${Math.abs(corr)})` }"
v-for="(corr, i) in grid[index]">
<div class="tooltip" style="width: 100%">
{{ parseFloat(corr.toFixed(2)) }}
<span class="tooltip-text">{{ pair }} | {{ metadata.pairs[i] }}</span>
</div>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>