quarto-dev / quarto-dev/quarto-cli

Quarto Slideshow Output Display with echarts4r Not Meeting Expectations

Open
#6,150 7 comments 0 reactions 1 assignee View on GitHub

@cderv is already working on this.

Since Jul 12, 2023.

bug html third-party
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

This abnormality can be rectified with a simple refresh. Additionally, there are no such issues under the same version of Edge on Mac.

Steps to reproduce
  • Step one, render the following code.
  • Step Two, in the associated Edge browser window that pops up, press the o key, then locate the slide before the echarts4r output, press the o key again, then navigate to the slide containing the echarts4r output. You should be able to see this anomaly.
---
title: "test"
date:  last-modified
format:
    revealjs:
        incremental: false
        embed-resources: true
        smaller: true
        number-sections: true
        width: 1280
        height: 720
execute: 
  echo: false
---

```{r load_library}
library(conflicted)
library(tidyverse)
conflict_prefer("filter", "dplyr", "stats")
library(magrittr)
library(echarts4r)
library(htmlwidgets)
```

## echarts4r output

:::: columns

::: {.column width="82%"}
```{r}
months <- c("m1", "m2", "m3", "m4", "m5", "m6")
set.seed(123)
year_2022 <- round(runif(6, min = 2000, max = 3000), 2)
year_2023 <- round(runif(6, min = 1000, max = 1500), 2)
df <-
  tibble(Month = months,
         Y2022 = year_2022,
         Y2023 = year_2023) %>%
  mutate(growth_rate = Y2023 / Y2022 - 1,
         growth_value = Y2023 - Y2022)

list_label <- list(
  show = TRUE,
  fontSize = 10,
  fontWeight = "fontWeight",
  position = "top",
  rotate = 45,
  formatter = JS(
    "function(params){
             var num = Math.floor(params.value[1]);
                  return num.toLocaleString('en-US');
             }"
  )
)

df %>%
  e_charts(Month, width = 1000, height = 600, renderer = "svg") |>
  e_bar(Y2022, y_index = 0,
        label = list_label) |>
  e_bar(Y2023, y_index = 0, label = list_label) |>
  e_bar(growth_value, y_index = 0, label = list_label) |>
  e_line(
    growth_rate,
    y_index = 1,
    smooth = TRUE,
    label = list(
      show = TRUE,
      position = "bottom",
      formatter = JS(
        "function(params){
                  return (params.value[1] * 100).toFixed(0) + '%';
            }"
      )
    )
  ) |>
  e_y_axis(index = 0,
           splitLine = list(show = FALSE)) |>
  e_y_axis(
    index = 1,
    formatter = e_axis_formatter("percent", digits = 0),
    splitLine = list(show = FALSE)
  ) |>
  e_legend(bottom = 0)
```
:::


::: {.column width="18%"}

::: {.callout-important appearance="simple"}
balala
:::

:::

::::
Expected behavior
image
Actual behavior
image
Your environment
  • Browser Version: Edge, 114.0.1823.67 (Official build) (64-bit)
  • IDE:RStudio 2023.06.0+421 "Mountain Hydrangea" Release (583b465ecc45e60ee9de085148cd2f9741cc5214, 2023-06-05) for windows
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2023.06.0+421 Chrome/110.0.5481.208 Electron/23.3.0 Safari/537.36
R version 4.3.0 (2023-04-21 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

Matrix products: default


locale:
[1] LC_COLLATE=Chinese (Simplified)_China.utf8  LC_CTYPE=Chinese (Simplified)_China.utf8    LC_MONETARY=Chinese (Simplified)_China.utf8 LC_NUMERIC=C                                LC_TIME=Chinese (Simplified)_China.utf8    

time zone: Asia/Shanghai
tzcode source: internal

...
Quarto check output
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.3.353
      Path: C:\Program Files\RStudio\resources\app\bin\quarto\bin
      CodePage: 65001

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.3.0
      Path: C:/PROGRA~1/R/R-43~1.0
      LibPaths:
        - C:/Program Files/R/R-4.3.0/library
      knitr: 1.42
      rmarkdown: 2.22

[>] 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.