Кнопка для просмотра в полноэкранном режиме

Question

Я пишу блестящее приложение с highcharter.

В моем приложении я хотел бы добавить независимую кнопку для просмотра моего графика в полноэкранном режиме.

Я думаю, что мне нужно добавить JS код с кнопкой "action_fs" в моем примере ... Вот мое приложение:

library(shiny)
library(dplyr)
library(highcharter)

ui <- fluidPage(
  fluidRow(
    actionButton("mybutton","launch"),
    br(),
    column(width = 6,
           uiOutput("button_fullscreen"),
           highchartOutput("mygraph")
    )
  )
)

server = function(input, output) {

  mytab <- iris %>% group_by(Species) %>% summarise(mystat=sum(Petal.Length,na.rm = T))

  observeEvent(input$mybutton, {

    output$button_fullscreen <- renderUI({
      actionButton("action_fs","view in full screen")
    })

    output$mygraph <- renderHighchart({
      highchart() %>%
        hc_chart(type = "bar") %>%
        hc_add_series(data = mytab$mystat, name = "Petal.Length") %>%
        hc_xAxis(categories = mytab$Species)
    })
  })
}

shinyApp(ui = ui, server = server)

Answer 1

Я не могу установить highcharter (зависимость quantmod недоступна), поэтому вот пример с ggplot:

library(shiny)
library(ggplot2)

js <- "
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs", "Full screen", 
        onclick = "openFullscreen(document.getElementById('graphContainer'));"
      )
    ),
    column(
      width = 9,
      div(
        id = "graphContainer",
        plotOutput("ggplot")
      )
    )
  )
)

server <- function(input, output, session){

  output[["ggplot"]] <- renderPlot({
    ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
  })

}


shinyApp(ui, server)

---

EDIT

Проблема с вышеупомянутым решением состоит в том, что высота графика не изменяется, когда приложение находится в полноэкранном режиме. При решении, приведенном ниже, высота графика становится высотой экрана при переключении в полноэкранный режим.

library(shiny)
library(ggplot2)

js <- "
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}"

css <- "
#ggplot:-webkit-full-screen {
  height: 100%;
  margin: 0;
}
#ggplot:-ms-fullscreen {
  height: 100%;
}
#ggplot:fullscreen {
  height: 100%;
}"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js)),
    tags$style(HTML(css))
  ),
  br(),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs", "Full screen", 
        onclick = "openFullscreen(document.getElementById('ggplot'));"
      )
    ),
    column(
      width = 9,
      plotOutput("ggplot")
    )
  )
)

server <- function(input, output, session){

  output[["ggplot"]] <- renderPlot({
    ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
  })

}


shinyApp(ui, server)