-
Notifications
You must be signed in to change notification settings - Fork 23
/
script.js
103 lines (91 loc) · 3.03 KB
/
script.js
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
/* globals vega, g1, vegaTooltip */
var APP = {T: {}, data: {}}
document.querySelectorAll('script[type="text/html"]').forEach(el => {
APP.T[el.className] = _.template(el.innerHTML)
})
Promise.all([fetchCSV('./spec/index.csv'), fetchCSV('./spec/indexlist.csv')])
.then(arr => {
APP.data['index'] = arr[0]
APP.data['indexlist'] = arr[1]
draw()
}).catch(err => { console.log(err) } )
window.addEventListener('hashchange', draw)
window.addEventListener('resize', _.debounce(resize, 50))
function fetchCSV(url) {
return vega.loader().load(url)
.then(data => { return vega.read(data, {type: 'csv', parse: 'auto'}) })
}
function draw() {
APP.path = location.hash.slice(1).replace(/\//g, '')
var tmpl = (APP.path)?'panel':'index'
document.querySelector('.main').innerHTML = APP.T[tmpl]({APP})
if (APP.path) {
document.querySelectorAll('.vegachart').forEach(el => {
vega.loader()
.load(el.getAttribute('data-vg'))
.then(data => { render(el, JSON.parse(data)) })
})
document.querySelectorAll('.posteditor').forEach(el => {
el.addEventListener('click', event => {
var spec = event.target.closest('.box').querySelector('.vegachart').spec.spec
setDataURL(spec)
postEditor('https://vega.github.io/editor/', {spec: JSON.stringify(spec)})
})
})
}
}
function setDataURL(spec) {
spec.data.forEach(d => {
if ('url' in d) {
d.url = window.location.origin + window.location.pathname + d.url.replace('./', '')
}
})
}
function render(el, spec) {
delete spec.title
var tooltip = new vegaTooltip.Handler()
var view = new vega.View(vega.parse(spec))
.logLevel(vega.Warn)
.renderer('svg') // set renderer (canvas or svg)
.initialize(el) // initialize view within parent DOM container
.hover() // enable hover encode set processing
.tooltip(tooltip.call)
.run();
el.spec = {'view': view, 'spec': spec}
_resizeVega(el)
}
function _resizeVega(el) {
// TODO: check containerSize https://vega.github.io/vega/docs/expressions/#containerSize
var view = el.spec.view
if (!el.getAttribute('data-width'))
view.width(el.clientWidth)
if (!el.getAttribute('data-height'))
view.height(view.height() || el.clientHeight)
view.run()
}
function resize() {
document.querySelectorAll('.vegachart').forEach(function(x) {
_resizeVega(x)
})
}
function postEditor(url, data) {
// postEditor('https://vega.github.io/editor/', {spec: JSON.stringify(spec)})
data = Object.assign({}, data, {config: {}, mode: 'vega', renderer: 'svg'})
var editor = window.open(url)
var wait = 10000, step = 250, count = ~~(wait / step)
function listen(evt) {
if (evt.source === editor) {
count = 0
window.removeEventListener('message', listen, false)
}
}
window.addEventListener('message', listen, false)
// send message; periodically resend until ack received or timeout
function send() {
if (count <= 0) { return }
editor.postMessage(data, '*')
setTimeout(send, step)
count -= 1
}
setTimeout(send, step)
}