daattali
commented
1 year ago Thanks for the report. I tried using the exact data that you used in this example to troubleshoot whether the problem is with the R package or with the javascript library. I converted the data that's used for the widget into JSON:
`{"items":[{"title":"Dog","start":"2022-03-20","end":"2022-04-20","group":"Animal","id":"180a61d0-805c-4f84-9be7-7c1db6b7b2f9"}],"groups":[{"group":"Animal","id":"Animal","content":"<style>\\n table {\\n table-layout:fixed;\\n width:200px; \\n height: 25px;\\n text-align: center;\\n } th, \\n td {border: 1px solid grey;\\n border-collapse: collapse;\\n word-wrap: break-word; \\n word-break: break-all;\\n }\\n </style>\\n <table>\\n <colgroup>\\n <col span='1' style='width: 10%;'>\\n <col span='1' style='width: 50%;'>\\n <col span='1' style='width: 20%;'>\\n <col span='1' style='width: 20%;'>\\n </colgroup>\\n <tbody>\\n <tr>\\n <td>PS</td>\\n <td>Dogs</td><td>8</td>\\n <td>Pets</td>\\n </tr>\\n </tbody></table>"}],"showZoom":true,"zoomFactor":0.5,"fit":true,"options":{},"height":null,"timezone":null,"api":[{"start":"2021-12-20","end":"2022-07-18","options":{"animation":false}}]}`and tried creating a timeline using the old (4.16.1) and new (7.4.9) versions of the javascript library. The results of this debugging show me that this is indeed a bug in the javascript library, not in timevis.
Proof: this HTML page uses the 4.16.1 version and it works: (you can see it here https://jsfiddle.net/80jLqkxu/)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-19'}
]
var timeline = new vis.Timeline(container, [], {});
opts = `{"items":[{"title":"Dog","start":"2022-03-20","end":"2022-04-20","group":"Animal","id":"180a61d0-805c-4f84-9be7-7c1db6b7b2f9"}],"groups":[{"group":"Animal","id":"Animal","content":"<style>\\n table {\\n table-layout:fixed;\\n width:200px; \\n height: 25px;\\n text-align: center;\\n } th, \\n td {border: 1px solid grey;\\n border-collapse: collapse;\\n word-wrap: break-word; \\n word-break: break-all;\\n }\\n </style>\\n <table>\\n <colgroup>\\n <col span='1' style='width: 10%;'>\\n <col span='1' style='width: 50%;'>\\n <col span='1' style='width: 20%;'>\\n <col span='1' style='width: 20%;'>\\n </colgroup>\\n <tbody>\\n <tr>\\n <td>PS</td>\\n <td>Dogs</td><td>8</td>\\n <td>Pets</td>\\n </tr>\\n </tbody></table>"}],"showZoom":true,"zoomFactor":0.5,"fit":true,"options":{},"height":null,"timezone":null,"api":[{"start":"2021-12-20","end":"2022-07-18","options":{"animation":false}}]}`;
opts = JSON.parse(opts);
timeline.itemsData.add(opts.items);
timeline.setGroups(opts.groups);
timeline.setOptions(opts.options)
</script>
</body>
</html>The following uses the same code as above but with the new version and it doesn't work: (https://jsfiddle.net/80jLqkxu/1/)
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.4.9/vis-timeline-graph2d.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.4.9/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-19'}
]
var timeline = new vis.Timeline(container, [], {});
opts = `{"items":[{"title":"Dog","start":"2022-03-20","end":"2022-04-20","group":"Animal","id":"180a61d0-805c-4f84-9be7-7c1db6b7b2f9"}],"groups":[{"group":"Animal","id":"Animal","content":"<style>\\n table {\\n table-layout:fixed;\\n width:200px; \\n height: 25px;\\n text-align: center;\\n } th, \\n td {border: 1px solid grey;\\n border-collapse: collapse;\\n word-wrap: break-word; \\n word-break: break-all;\\n }\\n </style>\\n <table>\\n <colgroup>\\n <col span='1' style='width: 10%;'>\\n <col span='1' style='width: 50%;'>\\n <col span='1' style='width: 20%;'>\\n <col span='1' style='width: 20%;'>\\n </colgroup>\\n <tbody>\\n <tr>\\n <td>PS</td>\\n <td>Dogs</td><td>8</td>\\n <td>Pets</td>\\n </tr>\\n </tbody></table>"}],"showZoom":true,"zoomFactor":0.5,"fit":true,"options":{},"height":null,"timezone":null,"api":[{"start":"2021-12-20","end":"2022-07-18","options":{"animation":false}}]}`;
opts = JSON.parse(opts);
timeline.itemsData.add(opts.items);
timeline.setGroups(opts.groups);
timeline.setOptions(opts.options)
</script>
</body>
</html>In fact, it looks like it broke between version 7.4.3. to 7.4.4
I would like to submit the issue to the javascript library's maintainers, but the current example is not great because it's fairly large and complex - @MacBurt could you please come up with a more minimal example that shows the issue with as least code as possible?
MacBurt
This timevis group allowed nice html styling in 1.0.0.0
Now in 2.0.0, the HTML is turned into text
Thanks for looking into this
library(timevis) library(dplyr) data = data.frame(title = "Dog", start = as.Date('2022-03-20'), end = as.Date('2022-04-20'), group = 'Animal') groups = data.frame(group = 'Animal', id = 'Animal', content = "