quarto-dev / quarto-dev/quarto-cli

timeline htmlwidget not rendering properly

Open
#12,526 23 comments 0 reactions 1 assignee View on GitHub

@cderv is already working on this.

Since Apr 14, 2025.

bug engines-knitr html third-party
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>&nbsp;%s - %s&nbsp;</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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.