Panelsets displaying html widgets (echarts4r) weirdly

[oobd]

Hi,

I am trying to use panelsets to present some echarts4r charts on the same page.
The issue seems similar to #64 where the html widget doesn't resize properly when switching tabs.
The first chart (default tab) displays properly but second one doesn't and only gets fixed when browser is refreshed but this then breaks the first chart when tab is switched back.

I really do think panelsets are a great way to break up the page into more digestible sections... is there a way for this to work with echarts4r?

Reprex and screenshots included below

The first chart displays correctly

But the second displays weirdly

The second chart gets fixed only when I refresh the browser but this then makes the first chart display weirdly when tab is switched back to first chart

---
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    self_contained: true
---


```{r, include=F}
library(dplyr)
library(xaringan)
library(xaringanExtra)
library(echarts4r)
xaringanExtra::use_panelset()
```

.panelset[
.panel[.panel-name[Chart 1]
```{r echo=F}
df <- data.frame(
  x = seq(50),
  y = rnorm(50, 10, 3),
  z = rnorm(50, 11, 2),
  w = rnorm(50, 9, 2)
)

 df |>
  e_charts(x) |>
  e_line(z) |>
  e_area(w) |>
  e_title("Line and area charts")
```
]

.panel[.panel-name[Chart 2]
```{r, echo=F}
df |>
  e_charts(x) |>
  e_scatter(y, z) |>
  e_visual_map(z, scale = e_scale) |> # scale color
  e_legend(FALSE) # hide legend
```
]]

[gadenbuie]

Can you try with the dev version of xaringanExtra? I did a bunch of panelset work (that I need to release, thanks for the reminder) and I remember fixing this kind of issue.

See Installation for two ways to install the dev version.

[oobd]

@gadenbuie
Unfortunately same issue with the dev version

[gadenbuie]

I don't think this is a panelset problem, I can reproduce the issue with two echarts on separate slides. I think you should report the issue upstream.

---
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    self_contained: true
---


```{r, include=F}
library(dplyr)
library(xaringan)
library(xaringanExtra)
library(echarts4r)
xaringanExtra::use_panelset()
```

```{r echo=F}
df <- data.frame(
  x = seq(50),
  y = rnorm(50, 10, 3),
  z = rnorm(50, 11, 2),
  w = rnorm(50, 9, 2)
)

 df |>
  e_charts(x) |>
  e_line(z) |>
  e_area(w) |>
  e_title("Line and area charts")
```

---

```{r, echo=F}
df |>
  e_charts(x) |>
  e_scatter(y, z) |>
  e_visual_map(z, scale = e_scale) |> # scale color
  e_legend(FALSE) # hide legend
```

[oobd]

@gadenbuie
Thanks for looking into this!

It works as expected for me when it's on separate slides and not part of panelsets
Both slides are displayed correctly with no cutting off of axis labels / correct display of the slider for scatter plot / no resizing of any of the charts when browser is refreshed

Included session info at the bottom in case that could help

R version 4.3.2 (2023-10-31 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

Matrix products: default


locale:
[1] LC_COLLATE=Korean_Korea.utf8  LC_CTYPE=Korean_Korea.utf8    LC_MONETARY=Korean_Korea.utf8 LC_NUMERIC=C                  LC_TIME=Korean_Korea.utf8    

time zone: Australia/Sydney
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] vctrs_0.6.5         cli_3.6.1           knitr_1.45          rlang_1.1.2         xfun_0.41           xaringan_0.28       promises_1.2.1      generics_0.1.3      shiny_1.8.0        
[10] xtable_1.8-4        glue_1.6.2          DT_0.31             htmltools_0.5.7     httpuv_1.6.13       xaringanExtra_0.7.0 fansi_1.0.5         rmarkdown_2.26      evaluate_0.23      
[19] tibble_3.2.1        ellipsis_0.3.2      fastmap_1.1.1       yaml_2.3.7          lifecycle_1.0.4     compiler_4.3.2      dplyr_1.1.4         htmlwidgets_1.6.4   Rcpp_1.0.11        
[28] echarts4r_0.4.5     pkgconfig_2.0.3     later_1.3.2         rstudioapi_0.15.0   digest_0.6.33       R6_2.5.1            tidyselect_1.2.0    utf8_1.2.4          pillar_1.9.0       
[37] magrittr_2.0.3      tools_4.3.2         mime_0.12          

[gadenbuie]

I also see what appear to be normal-looking plots... until the browser is resized.

Kapture.2024-05-10.at.12.13.46.mp4

xaringan (well remarkjs, really) use CSS scaling to adjust the size of the slides to fit the screen, this causes issues with some htmlwidgets (there are more than a few issues in the xaringan repo about this). The fix, if there is one, would have to come from echarts4r.

[oobd]

Ah i see...
Thanks again for looking into it!