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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id=chart class="mermaid" style='width:800px;'></div>
<script>
function draw() {
fetch('/db/tql', {
method: "POST",
body: `
FAKE(json({
["Task-A", 1692329338, 1.0],
["Task-A", 1692329339, 2.0],
["Task-B", 1692329340, 3.0],
["Task-B", 1692329341, 4.0],
["Task-B", 1692329342, 5.0],
["Task-B", 1692329343, 6.0],
["Task-B", 1692329344, 7.0],
["Task-B", 1692329345, 8.0],
["Task-C", 1692329346, 9.0],
["Task-D", 1692329347, 10],
["Task-D", 1692329348, 11],
["Task-D", 1692329349, 12]
}))
MAPVALUE(1, parseTime(value(1), "s"))
FILTER_CHANGED(value(0), useFirstWithLast(true))
GROUP(
by(value(0)),
first(timeUnix(value(1))),
last(timeUnix(value(1)) + 1)
)
MAPVALUE(1, parseTime(value(1), "s"))
MAPVALUE(2, parseTime(value(2), "s"))
MAPVALUE(2, timeUnix(value(2)) - timeUnix(value(1)))
JSON(timeformat("Default"), tz("Local"))`
}).then(function(rsp){
return rsp.json()
}).then(function(obj) {
let codes = Array(`gantt`)
codes.push(` title A Gantt Diagram`)
codes.push(` dateFormat YYYY-MM-DD HH:mm:ss`)
codes.push(` axisFormat %H:%M:%S`)
codes.push(` section Project`)
obj.data.rows.forEach(rec =>{
codes.push(` ${rec[0]} : task, ${rec[1]}, ${rec[2]}s`)
})
let element = document.querySelector("#chart");
element.innerHTML = codes.join("\n")
updateGantt()
})
}
</script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false });
window.updateGantt = function() {
mermaid.run();
};
draw();
</script>
</body>
</html>
|
