Gövde

shinydashboard ile Panolar Oluşturma

Png Kee Seng

Researcher

Genel bakış

shinydashboard arayüzünün ana kısmı
Genelde girişler ve çıktılar burada yer alır
- Restorandaki yemekler ve siparişler gibidir
- Sunucu iletişimi sağlar
Gövde dashboardBody() ile tanımlanır ve genelde body olarak saklanır

body <- dashboardBody(...)

Wireframing

Tel kafes (wireframe) hazırlayın
- İçerikten önce yapıyı kurun
Bir shinydashboard'da, önce nesnelerin konumlarını belirleyin

Bir zeplinin tel kafesi.

¹ Brett Jordan, Flickr

Satırlar ve kutular ekleme: boş kutular

fluidRow() ile satırlar ekleyin
box() ile kutular ekleyin

İki satır, her birinde iki boş kutu olan pano.

body <- dashboardBody(

  fluidRow(

           box("Satır 1, kutu 1"), 
           box("Satır 1, kutu 2")

           ),
  fluidRow(

           box("Satır 2, kutu 1"), 
           box("Satır 2, kutu 2")

           )

)

Satırlar ve kutular ekleme: kutularda içerik

Bazı kutuları dolu, dört kutulu bir gövde.

body <- dashboardBody(
  fluidRow(box("Satır 1, kutu 1", 

               plotOutput('plot')),

           box("Satır 1, kutu 2")),
  fluidRow(box("Satır 2, kutu 1"), 
           box("Satır 2, kutu 2", 

               selectInput("select", 
                           "Takım numarasını seçin:", 
                           choices = c(1,2))))

)

Taşan kutuları önleme

Varsayılan olarak her kutu, yatay alanın 12 biriminden 6'sını kaplar
Taşmayı önlemek için width ayarlayın
- Örneğimizde genişlikleri 3, 5 ve 4 yapın
box() eklemek şiddetle önerilir

Gövdeye daha fazla kutu

body <- dashboardBody(
  fluidRow(box("Satır 1, kutu 1"), 
           box("Satır 1, kutu 2"),
           box("Satır 1, kutu 3")),
  fluidRow(box("Satır 2, kutu 1"), 
           box("Satır 2, kutu 2"))
)

body <- dashboardBody(
  fluidRow(box("Satır 1, kutu 1", width = 3), 
           box("Satır 1, kutu 2", width = 5),
           box("Satır 1, kutu 3", width = 4)),
  fluidRow(box("Satır 2, kutu 1"), 
           box("Satır 2, kutu 2"))
)

valueBox ve infoBox

Az miktarda bilgi gösteren kutular da vardır
- valueBox()
- infoBox()

Gövde içinde valueBox ve infoBox.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Verilen kırmızı kart sayısı", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Atılan gol sayısı", 
                   icon = icon("futbol"))
           ))

valueBoxOutput ve infoBoxOutput

valueBox() ve infoBox() çeşitleri: valueBoxOutput() ve infoBoxOutput()
Bunlar çıktı fonksiyonlarıdır
renderValueBox() ve renderInfoBox() da vardır
valueBox() ve infoBox() gereklidir

Gövde içinde valueBoxOutput ve infoBoxOutput. Oluşturulan shinydashboard öncekiyle aynıdır.

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Verilen kırmızı kart sayısı",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Atılan gol sayısı", 
                   icon = icon("futbol")))
}

valueBoxOutput ve plotOutput benzetmesi

plotOutput():
- UI'da yer alır
- Shinydashboard içindeki konumunu belirler
renderPlot():
- server() içinde yer alır
- Bir ggplot() nesnesi içerir

valueBoxOutput():
- UI'da yer alır
- Shinydashboard içindeki konumunu belirler
renderValueBox():
- server() içinde yer alır
- Bir valueBox() nesnesi içerir

Kenar çubuğu ve gövdeyi bağlama

Daha önce kenar çubuğunda "charts" ve "statistics" adlı iki düğme vardı, hatırlayın
Bunları gövdeye bağlamak için tabItems() eklemeliyiz
- Her sayfa bir tabItem() ile tanımlanır
- Her menuItem()-tabItem() çifti etiketleri eşleşmelidir

Gövde ve kenar çubuğu artık bağlı

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "pages",

    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "statistics", 
             badgeLabel = "urgent", badgeColor = "red")
 ))

body <- dashboardBody(
  tabItems(

    tabItem("charts",
      "Grafikler buraya gelecek."
    ),
    tabItem("statistics",
      "İstatistikler buraya gelecek."
)))

Gövde içinde sekmeler

Bir shinyApp'te, sekmeler tabsetPanel() ile de tanımlanabilir
- Her sekme tabPanel() ile tanımlanır
tabItems() ve tabItem() ile karıştırmayın

Gövde içinde sekme setleri ekleme

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Maç tarihini girin:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Veri burada.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Kırmızı kart"))
  output$yellow <- renderValueBox(valueBox(6, "Sarı kart"))
}

Ayo berlatih!

shinydashboard ile Panolar Oluşturma