quarto-dev / quarto-dev/quarto-cli
timeline htmlwidget not rendering properly
@cderv is already working on this.
Since Apr 14, 2025.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
---
title: "test timeline"
format:
dashboard:
embed-resources: true
scrolling: false
nav-buttons:
- icon: globe
theme: [sandstone, theme/custom2.css]
---
```{r dataprep}
#| message: false
#| show: false
#| include: false
library(timevis)
countryToCode <- list(
"Argentina" = "ar",
"Belgium" = "be",
"Brazil" = "br",
"Colombia" = "co",
"Costa Rica" = "cr",
"France" = "fr",
"Germany" = "de",
"Netherlands" = "nl"
)
# Template for world cup HTML of each item
templateWC <- function(stage, team1, team2, score1, score2) {
sprintf(
'<table><tbody>
<tr><td colspan="3"><em>%s</em></td></tr>
<tr>
<td>%s</td>
<th> %s - %s </th>
<td>%s</td>
</tr>
<tr>
<td><img src="https://flagpedia.net/data/flags/mini/%s.png" width="31" height="20" alt="%s"></td>
<th></th>
<td><img src="https://flagpedia.net/data/flags/mini/%s.png" width="31" height="20" alt="%s"></td>
</tr>
</tbody></table>',
stage, team1, score1, score2, team2, countryToCode[[team1]], team1, countryToCode[[team2]], team2
)
}
# Data for world cup 2014
dataWC <- data.frame(
start = c(
"2014-07-04 13:00",
"2014-07-04 17:00",
"2014-07-05 13:00",
"2014-07-05 17:00",
"2014-07-08 17:00",
"2014-07-09 17:00",
"2014-07-13 16:00"
),
content = c(
templateWC("quarter-finals", "France", "Germany", 0, 1),
templateWC("quarter-finals", "Brazil", "Colombia", 2, 1),
templateWC("quarter-finals", "Argentina", "Belgium", 1, 0),
templateWC("quarter-finals", "Netherlands", "Costa Rica", "0 (4)", "0 (3)"),
templateWC("semi-finals", "Brazil", "Germany", 1, 7),
templateWC("semi-finals", "Netherlands", "Argentina", "0 (2)", "0 (4)"),
templateWC("final", "Germany", "Argentina", 1, 0)
),
goalsHome = c(0, 2, 1, 4, 1, 2, 1),
goalsAway = c(1, 1, 0, 3, 7, 4, 0)
)
```
# Timeline (showing as expected)
## Row {height="100%"}
```{r}
#| title: ⏰ timeline
timevis(dataWC)
```
# Timeline 2 (not showing as expected)
## Row {height="100%"}
```{r}
#| title: ⏰ timeline
timevis(dataWC)
```
Steps to reproduce
when I render this above dashboard, the first tab 'timeline' is showing the expected timeline but the second tab is not: the height is incorrect and the data are not displayed properly.
I also tried to save my widget and include it as iframe but same issue when the timevis is not on the first tab...
# Save widget to an HTML file
timevis(dataOB, height = "700px", width = "1800px") %>%
saveWidget("timevis_widget.html", selfcontained = TRUE)
<iframe src="timevis_widget.html" width="100%" height="600px" style="border:none;">
</iframe>
Actual behavior
No response
Expected behavior
No response
Your environment
No response
Quarto check output
quarto check
Quarto 1.6.42
[✓] Checking environment information...
Quarto cache location: /Users//Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.46.3: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.6.42
Path: /Applications/quarto/bin
[✓] Checking tools....................OK
TinyTeX: v2025.01
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users//Library/TinyTeX/bin/universal-darwin
Version: 2024
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.9.12 (Conda)
Path: /Users//opt/miniconda3/bin/python
Jupyter: 5.7.2
Kernels: julia-0.5, julia-0.6, python3
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.0.5
Path: /Users//opt/miniconda3/lib/R
LibPaths:
- /Users//opt/miniconda3/lib/R/library
knitr: 1.40
rmarkdown: 2.16
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.