在闪亮仪表板中每行放置一个框

Question

第一次在这里发布海报。

1.背景

我想在shinydashboard 中创建一个包含盒子和图表的动态 UI。我发现这篇博文非常适合我的需求：Create a dynamic number of UI elements in Shiny with purrr

2.问题

我只想更改一个设计元素。目前，仪表板每个 fluidRow 包含两个框，因为每个框都有 width=6。我可以将宽度更改为 12 来解决我的问题，但我想看看是否可以为每行创建一盒 width=6。我尝试添加br()，但这并没有多大作用。

这是我的最小示例：

Minimal App

3.代码

这是我的代码

# Load packages---------
library(tidyverse)
library(shinydashboard)
library(shiny)
library(shinyWidgets)
library(shinymanager)
library(kableExtra)
library(readxl)


# Create function that plots graphs
plot_mtcars <- function(df) {
  
  df %>% 
    ggplot(aes(wt, mpg)) +
    geom_point() +
    labs(x = "Weight",
         y = "Miles per gallon")
  
  
}




# Start of shinydashboard---------
header <- dashboardHeader(
  title = "Minimal App",
  titleWidth = 240
)

sidebar <- dashboardSidebar(

  # Width of the sidebar (in pixels)
  width = 240,
  sidebarMenu(
    
    h1("Welcome!"),
    menuItem(text = "WEEKLY RESULTS", tabName = "weekly_results")
  )
  

)

body <- dashboardBody(
  
  
  tabItems(
    tabItem(tabName = "weekly_results", 
            
            
            fluidRow(
              
              uiOutput(outputId = "graphs_ui")            
            )
            
    )
  )
)


ui <- dashboardPage(skin = "black", header = header,
                    sidebar = sidebar,
                    body = body)




server <- function(input, output, session) {
  
  
  mtcars_reactive <- reactive({
    
    mtcars %>% 
      head(8) %>% 
      mutate(car_names = rownames(head(mtcars, 8)))
    
  })
    
  
  
  # Create reactive graphs
  graphs <- reactive({
    
    mtcars_reactive() %>% 
      group_by(car_names) %>% 
      nest() %>% 
      mutate(
        graphs = map(data, plot_mtcars)) %>% 
      pull(graphs)
    
  })
  
  
  output$graphs_ui <- renderUI({
   
    
    iwalk(graphs(), ~{
      output_name <- paste0("plot_", .y)
      output[[output_name]] <- renderPlot(.x)
    })
    
    
    plots_list <- imap(graphs(), ~{
      
      tagList(
        
        
        tags$div(class = "another-box", id = paste0("danger", .y, "_id"),
                 box(width = 6,
                     title = "Mtcars Data", 
                     status = "danger", solidHeader = TRUE,
                     plotOutput(outputId = paste0("plot_", .y)), 
                     ""
                 ),
                 tags$style(HTML(
                   paste0( 
                     "
                        #danger", .y, "_id .box.box-solid.box-danger>.box-header {
                        color:#fff;
                        background:", "#FF0000","
                        }

                        #danger", .y, "_id .box.box-solid.box-danger {
                        border-bottom-color:", "#FF0000", ";
                        border-left-color:", "#FF0000", ";
                        border-right-color:", "#FF0000",";
                        border-top-color:", "#FF0000", ";
                        }

                        "
                   )
                 )) 
        ),
        
        br()
        
        
      )
      
    })
    
    tagList(plots_list)
    
    
    
  })
  
  
  
  
}


shinyApp(ui, server)

Answer 1

box()的默认宽度是6，你可以指定你想要的宽度，如下图：

library(shiny)
library(plotly)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(width=12,plotOutput("plot2"))),
    fluidRow(
      box(plotOutput("plot3"))
      #,box(DTOutput("table"))
      ),
    fluidRow(box(width=4,plotOutput("plot1")))
  )
)

server <- function(input, output) {
    output$table <- renderDT(head(iris))
    output$plot1 <- renderPlot(plot(cars))
    output$plot2 <- renderPlot(plot(pressure))
    output$plot3 <- renderPlot(plot(airquality))
}

shinyApp(ui, server)

Answer 2

在您的最小示例代码中，您可以将 class = "another-box" 更改为 class = "row" 以将每个框包装在一个行 div 中。如果你想保留another-box 类，你也可以添加row 作为一个类，即class = "another-box row"。或者，您可以使用 Shiny 函数 fluidRow() 将某些内容包装在一个行 div 中。

欲了解更多信息，请参阅Boostrap Grid Documentation