Пример ShinyLive

Автор

Е.Н. Матеров

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 700
#| viewerWidth: 1300
library(shiny)
library(bslib)

# Define UI for app that draws a histogram ----
ui <- page_sidebar(

  # App title ----
  title = "Привет Shiny!",

  # Sidebar panel for inputs ----
  sidebar = sidebar(

    # Input: Slider for the number of bins ----
    sliderInput(
      inputId = "bins",
      label = "Количество разбиений:",
      min = 1,
      max = 50,
      value = 30
    )
  ),

  # Output: Histogram ----
  plotOutput(outputId = "distPlot")
)

# Define server logic required to draw a histogram ----
server <- function(input, output) {

  # Histogram of the Old Faithful Geyser Data ----
  # with requested number of bins
  # This expression that generates a histogram is wrapped in a call
  # to renderPlot to indicate that:
  #
  # 1. It is "reactive" and therefore should be automatically
  #    re-executed when inputs (input$bins) change
  # 2. Its output type is a plot
  output$distPlot <- renderPlot({
    x <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(
      x,
      breaks = bins,
      col = "#75AADB",
      border = "white",
      xlab = "Время ожидания следующего извержения (в минутах)",
      main = "Гистограмма времени ожидания"
    )
  })
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)

Установка

Этапы установки описаны на странице R-shinylive app in Quarto! и в видео Creating a Serverless R Shiny App using Quarto with R Shinylive (“Include” method).

Шаг 1.

Необходимо установить библиотеку shinylive (также мы предполагаем что библиотеки shiny и bslib установлены):

R
# install.packages("pak")
pak::pak("posit-dev/r-shinylive")

Шаг 2.

Создаем проект Quarto (можно внедрить ShinyLive и в обычную страницу, но тогда мы не сможем опубликовать результат в сети Интернет с помощью команды quarto publish):

bash
quarto create project website shinylive-example

Шаг 3.

В папке проекта открываем терминал и устанавливаем ShinyLive-расширение:

bash
quarto add quarto-ext/shinylive

Шаг 4.

Проверяем что в файле _quarto.yml прописано:

project:
  type: website

Добавляем зависимость от расширения:

filters:
  - shinylive

Также нужно указать формат как live-html и (возможно) указать параметры макета страницы. Вот полный код _quarto.yml для данного проекта:

_quarto.yml
project:
  type: website

author: "Е.Н. Матеров"

lang: ru

filters:
  - shinylive

format:
  live-html: 
    theme:
      - cosmo
    grid:
      sidebar-width: 200px
      body-width: 900px
      margin-width: 450px
      gutter-width: 2em
    code-tools:
      source: true

Шаг 5.

Наполняем проект. Пример кода приведен на данной странице (в разделе Код в правом верхнем углу). Обратите внимание на размеры блока shinylive (параметры viewerHeight и viewerWidth).


```{shinylive-r}
#| standalone: true
#| viewerHeight: 700
#| viewerWidth: 1300

Блок с Shiny-кодом
```

Шаг 6.

Публикуем проект. Можно опубликовать приложение через привязку к GitHub-репозиторию, либо, используя одну из следующих команд в терминале, на известных хостингах:

на Netlify

bash
quarto publish netlify

на GitHub Pages

bash
quarto publish gh-pages

на Quarto Pub

bash
quarto publish quarto-pub