Shiny layout guide(shinydashboard)

Shiny的UI界面可用多个方式来展示,你可以用shiny基本布局函数+theme主题函数来实现;也可以用shinydashboard来定义你网页的布局,当然还有shiny的JS插件以及其他技巧。

这里主要介绍一下shiny的一些基本布局函数(对之前Learning Shiny的一些补充)以及shinydashboard包的使用


首先的是Shiny layout guide:

Grid Layout

fluidRow( 
    column(4,
      wellPanel(
        sliderInput("obs", "Number of observations:",  
                    min = 1, max = 1000, value = 500)
      )       
    )

1. fluidRow():类似流动布局,如果该函数下面有多个column,则从左到右排布;
2. column(4,):代表宽度4,总宽度为12,如果该函数下面有多个部件,则从上到下排布;
3. wellPanel():一种布局显示方式

Tabsets

ui <- fluidPage(
  titlePanel("Tabsets"),

  sidebarLayout(

    sidebarPanel(
      # Inputs excluded for brevity
    ),

    mainPanel(
      tabsetPanel(
        tabPanel("Plot", plotOutput("plot")), 
        tabPanel("Summary", verbatimTextOutput("summary")), 
        tabPanel("Table", tableOutput("table"))
      )
    )
  )
)

1. 上述代码的UI布局,将“plot”、“Summary”和“Table”三块内容分别以tab形式放置的mainPanel上;
2. tabsetPanel(position = “”)可以设置这些tab的相对于content的方位,如below,left,right等,默认是在上方

Navlists

以list的形式展示需要的各个内容

ui <- fluidPage(
  titlePanel("Application Title"),

  navlistPanel(
    "Header A",
    tabPanel("Component 1"),
    tabPanel("Component 2"),
    "Header B",
    tabPanel("Component 3"),
    tabPanel("Component 4"),
    "-----",
    tabPanel("Component 5")
  )
)

Navbar Pages

以置顶的tab形式展示各块内容,其中navbarMenu()函数还可以设置子块,形成一个下拉菜单

ui <- navbarPage("My Application",
             tabPanel("Component 1"),
             tabPanel("Component 2"),
             navbarMenu("More",
                        tabPanel("Sub-Component A"),
                        tabPanel("Sub-Component B"))
)

Column Offsetting

offset:表示偏移量,一般我的理解是相对上一个column的偏移量,如果不设置偏移量,一般默认是紧挨着的

ui <- fluidPage(
  fluidRow(
    column(4,
           "4"
    ),
    column(4, offset = 4,
           "4 offset 4"
    )      
  ),
  fluidRow(
    column(3, offset = 3,
           "3 offset 3"
    ),
    column(3, offset = 3,
           "3 offset 3"
    )  
  )
)

Column Nesting

这里就是column的嵌套过程

ui <- fluidPage(
  fluidRow(
    column(12,
           "Fluid 12",
           fluidRow(
             column(6,
                    "Fluid 6",
                    fluidRow(
                      column(6, 
                             "Fluid 6"),
                      column(6,
                             "Fluid 6")
                    )
             ),
             column(width = 6,
                    "Fluid 6")
           )
    )
  )
)

下面则是shinydashboard包的一些用法:

Shiny中用shinydashboard包是来展示dashboards,如果想简单做个UI界面的话,上述的几点layout就足够了。但是如果想做个美观的UI界面,那么可以尝试下shinydashboard

shinydashboard在UI中主要也有三部分(header,sidebar和body)组成:

dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

dashboardHeader()用于设定dashboards的标题;dashboardSidebar()相当于shiny默认布局方式中的sidebarPanel,用于设定导航栏;dashboardBody()则类似于tabsetPanel

dashboardHeader()基本用法是设定标题,但是其还有Message menus来设定一些信息栏(信封的标签),Notification menus来设定一些通知栏(感叹号的标签),Task menus(这个不太清楚)

Sidebar这个快速导航功能则是靠dashboardSidebar()来实现的

如果设定Sidebar的宽度,则dashboardSidebar(width=300)即可,header标题的宽度也是类似dashboardHeader(titleWidth = 350)

如果展示多个页面(类似上面的Navbar Pages),则可以在dashboardSidebar()函数中调用menuItem();如果一个menu下还要一个sub menu,那么用menuSubItem()函数;而icon则可以选择tabPanel的标签样式,可在https://fontawesome.com/icons?from=io自行挑选

dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  )

上述的id = "tabs"可以让你在server.R中用input$tabs来获取你在UI界面中选择的menuItem的tabName,这个很有用的

设定了menuItem后,那么在dashboardBody中需要加入tabItem来对每个menu设定各自的布局样式;如果有多个menu,那么先用tabItems函数表示有多个menu(一般也是有多个menu才会用这个函数),再用tabItem对每个menu进行设定

dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
        fluidRow(
          box(plotOutput("plot1", height = 250))
        )
      ),

      # Second tab content
      tabItem(tabName = "widgets",
        h2("Widgets tab content")
      )
    )
  )

在sidebar部分,我们可以加入一些输入小插件,类似于fileInputradioButtonsactionButton等等

dashboardSidebar(
    fileInput(),
    radioButtons(),
    actionButton()
  )

如果不想要sidebar部分,则用dashboardSidebar(disable = TRUE)来禁止其使用

Body则是整个网页的主体部分,用于展示最终的内容,其主要靠dashboardBody函数

dashboardBody也是使用fluidRow函数进行流动布局,对于每框内容则使用box函数(这是shinydashboard特有的),在box函数里还可以使用多个参数,其中可下拉折叠collapsible功能这个觉得很好用

box(width = NULL,
    status = "info",
    title = "PRM Protein List",
    collapsible = T, collapsed = F,
    textOutput("warning"))

如果你想对每个box下有多快内容,类似于tabpanels,那么用tabBox代替box即可,如下:

tabBox(
  side = "left", height = "250px",
  selected = "Tab1",
  tabPanel("Tab1", "Tab content 1"),
  tabPanel("Tab2", "Tab content 2"),
)

还有类似于box的infoBox和valueBox,是一种另类展示一些简单信息的box,我不太常用。。。

除了上述比较常用的布局功能外,还有一些小细节的东西,比如用dashboardPage(skin = "blue")来设定主题颜色

如果想自定义的CSS,则需将CSS文件放在shiny文件夹下的www目录下,如www/custom.css

参考资料:
http://shiny.rstudio.com/articles/layout-guide.html
http://shiny.rstudio.com/articles/dashboards.html

本文出自于http://www.bioinfo-scrounger.com转载请注明出处