-
Notifications
You must be signed in to change notification settings - Fork 0
/
vistimeline.html
79 lines (71 loc) · 2.54 KB
/
vistimeline.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
<!doctype html>
<html>
<head>
<title>Timeline</title>
<script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
<script type="text/javascript" src="vis-timeline-graph2d.min.js"></script>
<link href="vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: arial, sans-serif;
font-size: 10pt;
}
#visualization {
border: 1px solid lightgray;
}
.vis-item.blue {
background-color: #066df7;
color: white;
}
.vis-item.green {
background-color: lightgreen;
}
.vis-item.orange {
background-color: #e67a5c;
color: white;
}
.vis-item.purple {
background-color: #b78aee;
}
.vis-item.red {
background-color: #e62d2d;
color: white
}
.vis-item.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var options = {
stack: false
};
var timeline = new vis.Timeline(container, null, options);
grist.ready({columns: [
{ name: "content", title: "Content", optional: false, description: "Some text", allowMultiple: false },
{ name: "start", title: "Start", optional: false, type: "Date", description: "Some text", allowMultiple: false },
{ name: "end", title: "End", optional: true, type: "Date", description: "Some text", allowMultiple: false },
{ name: "group", title: "Group", optional: true, description: "Some text", allowMultiple: false },
{ name: "className", title: "Color", optional: true, description: "any color between red, bleu, yellow, green, purple", allowMultiple: false },
], requiredAccess: 'read table'});
grist.onRecords(function (records, mappings) {
const items = grist.mapColumnNames(records);
const groups = Array.from(new Set(items.map(item => item.group))).map((group, index) => ({id: index, content: group}));
items.forEach(item => {
const helper = groups.find(g => g.content === item.group);
if (helper) {
item.group = helper.id; // replace the group name with the ID from helperList
}
});
const items_dataset = new vis.DataSet(items);
const groups_dataset = new vis.DataSet(groups);
timeline.setItems(items_dataset);
timeline.setGroups(groups_dataset);
timeline.fit();
});
</script>
</body>
</html>