daattali / daattali/timevis

timevis not rendering properly in quarto dashboard

Open
#154 7 comments 0 reactions 0 assignees View on GitHub
Dominant language
R
Stars
683
Forks
154
PR merge metrics
No merged PRs in 30d

Description

Hello
I have an issue with htmlwidgets - I was hoping you could help given your expertise with js and htmlwidget.
when I render R dashboard like below, 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.if I refresh manually my browser, it 'works' but I have to do it each time I move to a new layout panel or a new tabset within a tab

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)

```

see below before refresh the second tab

![Image](https://github.com/user-attachments/assets/1561508a-8e7e-498c-bc88-ff9160cd401a)

and after refresh the second tab

![Image](https://github.com/user-attachments/assets/c550374e-5d5a-4d88-b236-1ec58970217b)

my quarto code:
````qmd
---
title: "test timeline"
format:
dashboard:
embed-resources: true
scrolling: false
nav-buttons:
- icon: globe
---

# Timeline (showing as expected)

## Row {height="100%"}

```{r}
#| title: ⏰ timeline

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(
'
%s

%s
 %s - %s 
%s


%s

%s

',
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)
)

timevis(dataWC)

```

# Timeline 2 (not showing as expected)

## Row {height="100%"}

```{r}
#| title: ⏰ timeline

timevis(dataWC)

```

````

thank you!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.