Участок не изменяет размер 100% ширины после отображения/скрытия боковой панели в R блестящей странице

У меня есть график, который установлен на 100% ширину (по умолчанию) на главной панели страницы с двумя панелями в R Shiny. Боковая панель скрыта с помощью кнопки переключения.

Когда боковая панель видима (по умолчанию), сюжет заполняет ширину основной панели. Когда боковая панель скрыта, я хочу, чтобы график расширялся, чтобы заполнить 100% доступного пространства, то есть всего окна браузера. Но этого не бывает! Он поддерживает одинаковый размер.

library(shiny)
library(shinyBS)

UI <- fluidPage(
    bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
    sidebarLayout(
        conditionalPanel(condition = "input.showpanel == true",
                         sidebarPanel("This is my sidebar.")
                         ),
        mainPanel(plotOutput("plot", width = "100%"))
        )
    )

SERVER <- function(input, output) {
        output$plot <- renderPlot({
        plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
    })
}

runApp(shinyApp(UI,SERVER))

Попытка до сих пор:

Возможные обходы:

  • Сделайте ширину графика динамическим и в зависимости от состояния кнопки переключения. Затем я могу сделать сюжет, например. Ширина 140% при скрытой боковой панели. Это не очень хорошо обобщает и теряет смысл использования адаптивности fluidPage.

(fluidPage изменяет макет, зависящий от размера окна браузера. Например, если вы сделаете окно своего браузера о размере мобильного телефона, он поместит боковую панель над основной панелью.)

ОТВЕТЫ

Ответ 1

Один из способов сделать это - использовать реактивный макет (на это много вопросов, например Переключение между макетами реактивно с блестящим). В вашем случае это будет что-то вроде

library(shiny)
library(shinyBS)

UI <- shinyUI(
        fluidPage(
            bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
            uiOutput('ui')
        )
    )

SERVER <- function(input, output) {

    output$ui <- renderUI({
        if (input$showpanel) {
            sidebarLayout(
                sidebarPanel("This is my sidebar."),
                mainPanel(plotOutput('plot'))
            )
        } else {
            plotOutput('plot')
        }
    })

    output$plot <- renderPlot({
        plot(1:10, main = "The width of this plot adjusts\nto window resizes and to\nshow/hide sidepanel!")
    })
}

runApp(shinyApp(UI,SERVER))

Ответ 2

Ответ на

@konvas действительно хорош и, вероятно, так, как вы этого не сделали, но если вы хотите использовать sidebarLayout (и ради другого ответа), вы можете использовать jQuery для переключения колонок начальной загрузки, например

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script(
      HTML("
            $(document).ready(function(){
              // Mark columns we want to toggle
              $('body').find('div [class=col-sm-4]').addClass('sidebarPanel');
              $('body').find('div [class=col-sm-8]').addClass('mainPanel');
            })


            Shiny.addCustomMessageHandler ('resize',function (message) {
              $('.sidebarPanel').toggle();
              $('.mainPanel').toggleClass('col-sm-8 col-sm-12');
              $(window).trigger('resize')
            });

           ")
    )
  ),
  actionButton("showpanel", "Show/hide sidebar"),
  sidebarLayout(
    sidebarPanel("This is my sidebar."),
    mainPanel(plotOutput("plot", width = "100%"))
  )
)

server <- function(input, output, session) {
  observeEvent(input$showpanel,{
    session$sendCustomMessage(type = 'resize', message = 1)

  })
  output$plot <- renderPlot({
    plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
  })
}

runApp(shinyApp(ui,server))

Такая же методология применима, если вы используете столбцы в fluidRow или что-то подобное.