timevis height does not change when changing height option, css, sizingPolicy,etc.

[zac-garland]

Hello,

I've been trying to figure this out for more than 3 days and probably have spent 4 hours trying to get it to work. At this point I'm stuck.

I've tried modifying the htmlwidgets sizingPolicy directly, I've tried custom css, I've tried using the height argument, I've tried looking into the min.visjs.css file to see if there was anything I was missing, I've tried to create custom containers, and still no avail.

The problem I'm trying to solve occurs in Rmarkdown's flexdashboard. But the problem can be reproduced directly in the viewer pane. I'd like to fit the below timeline into a full page. e.g. 100% width, and adjust the height to fit all of the content in one page.

After many attempts, I figure it would be a good time to check in with you.

Do you have any idea how to accomplish what I'm setting out to do? The height does not auto adjust to fit all contents which from my understanding was what it was set to do. I've also tried this with no styling and decreasing the font-size.

Reprex is below.

Thanks for your help in advance.

library(tidyverse)
library(timevis)

group_df <- structure(list(content = c("group 1", "group 2", "group 3", "group 4", 
"group 5"), id = c(1, 2, 3, 4, 5), style = c("background: #ff671b; font-size: 1em;", 
"background: #f38b00; font-size: 1em;", "background: #ffc81f; font-size: 1em;", 
"background: #8db92e;  font-size: 1em;", "background: #4fcdb0; font-size: 1em;"
)), row.names = c(NA, -5L), class = c("tbl_df", "tbl", "data.frame"
))  

content_df <- structure(list(content = c("content 1", "content 2", "content 3", 
"content 4", "content 5", "content 6", "content 7", "content 8", 
"content 9", "content 10", "content 11", "content 12", "content 13", 
"content 14", "content 15", "content 16", "content 17", "content 18", 
"content 18", "content 19", "content 20", "content 21", "content 22", 
"content 23", "content 24", "content 25", "content 26", "content 27", 
"content 28", "content 29", "content 20", "content 30", "content 31", 
"content 32", "content 33", "content 34", "content 35", "content 36", 
"content 37", "content 38", "content 39", "content 40", "content 41", 
"content 42", "content 43"), group_char = c("group 1", "group 2", 
"group 1", "group 3", "group 3", "group 3", "group 4", "group 4", 
"group 4", "group 4", "group 1", "group 3", "group 3", "group 3", 
"group 4", "group 4", "group 4", "group 5", "group 5", "group 5", 
"group 5", "group 5", "group 5", "group 5", "group 5", "group 5", 
"group 5", "group 5", "group 5", "group 5", "group 5", "group 5", 
"group 5", "group 5", "group 5", "group 5", "group 5", "group 5", 
"group 5", "group 5", "group 5", "group 5", "group 5", "group 5", 
"group 5"), start = structure(c(18078, 18078, 18260, 18260, 18260, 
18260, 18260, 18260, 18260, 18260, 18444, 18444, 18444, 18444, 
18444, 18444, 18444, 18081, 18081, 18081, 18081, 18081, 18081, 
18081, 18081, 18081, 18081, 18081, 18081, 18081, 18321, 18321, 
18321, 18321, 18321, 18321, 18321, 18321, 18321, 18321, 18505, 
18505, 18505, 18505, 18505), class = "Date"), end = structure(c(18261, 
18261, 18443, 18443, 18443, 18443, 18443, 18443, 18443, 18443, 
18627, 18627, 18627, 18627, 18627, 18627, 18627, 18261, 18261, 
18261, 18261, 18261, 18261, 18261, 18261, 18261, 18261, 18261, 
18261, 18261, 18443, 18443, 18443, 18443, 18443, 18443, 18443, 
18443, 18443, 18443, 18627, 18627, 18627, 18627, 18627), class = "Date")), row.names = c(NA, 
-45L), class = c("tbl_df", "tbl", "data.frame"))

# In my viewer pane, bottom group is cut in half
content_df %>% 
  left_join(group_df, by = c("group_char" = "content")) %>%
  rename(group = id) %>% 
  timevis(groups = group_df)

# adjusts width to 100% in markdown successfully
content_df %>% 
  left_join(group_df, by = c("group_char" = "content")) %>%
  rename(group = id) %>% 
  timevis(groups = group_df,width = "100%")

# doesn't change anything
content_df %>% 
  left_join(group_df, by = c("group_char" = "content")) %>%
  rename(group = id) %>% 
  timevis(groups = group_df,width = "100%", height = "50%")

[daattali]

Honestly, I never really understood how this works in htmlwidgets, I wasn't sure how I'm supposed to implement it. I looked at a few other wiedgets when I wrote timevis and none of the ones I looked at did anything special with these sizing policies, and I couldn't find much documentation or uses of them, so I didn't do anything.

Does this work for other htmlwidgets?

[zac-garland]

Funny enough, I was looking to see if I could find an example... wasn't this a similar issue that you posted on re: ggiraph that was solved?

Shiny: ggiraph output object is huge, goes beyond its height, overlaps content below it

[daattali]

I'm not sure about sizing policy (what it does or how it works), but I just tested the width+height properties and they do in fact work.

timevis::timevis(timevis::timevisData, height="700px")
timevis::timevis(timevis::timevisData, width="200px")

# in shiny:
timevis::timevisOutput("test", height="700px", width="200px")

All of the above do work

[zac-garland]

consider the attached (where I removed font size styling to ensure it was timevis behavior)

where the left side 700px has the same relative "size" as the 50% on the right.

I can't disagree with you that the height option works. e.g. it decreases or increases the height of the plot container.

But rather than adjusting the contents inside (adjusts font size, and content to reflect its container) it adjusts just the container and leaves the content the same size.

As a simple example, when I decrease the size of the picture in word, e.g. click on the bottom and drag up, I wouldn't expect to lose half the picture in the process or for half the picture to disappear under my new height container.

My goal is to fit the above content into one screen, otherwise whats the use of a timeline if you can only see one section? This limits the use-ability to people with just a few tasks, otherwise you are off the screen or dragging up and down trying to remember what happens when.

It's okay if this isn't possible, just trying to determine whether we can use this for a presentation or not.

Thanks for taking a look!

Zac

[daattali]

I don't think this widget is meant to decrease the font size and everything inside it relatively. The size is just meant to tell the browser how many pixels to allow it to take up. You can try using the underlying javascript library visjs's timeline and see if setting the height does what you want - but I doubt it!

[daattali]

I just tested this out, and I can confirm that visjs does not scale the contents of the timeline. The height parameter in visjs is also just a number of pixels to occupy in the browser. Closing this issue as it's not a timevis (R implementation) issue