Interaktivní prvky v shinydashboard

Tvorba dashboardů pomocí shinydashboard

Png Kee Seng

Researcher

Scénář

Pracujeme pro cestovní agenturu v Londýně.
Turisté potřebují místo k ubytování.
Jak jim můžeme pomoci?

Grafika Londýna

Počet nabídek v daném cenovém rozmezí
Podíl soukromých pokojů
Průměrné ceny
Několik grafů
Datová tabulka
Mapa Londýna

¹ Image by Freepik

Náčrt dashboardu

Hrubý náčrt dashboardu.

Tvorba dashboardu: Nastavení základní struktury

Wireframing: vytvoření prázdného shinydashboardu s požadovaným názvem a tlačítky postranního panelu.

header <- dashboardHeader(
  title = "Home rental listings")
sidebar <- dashboardSidebar()
body <- dashboardBody()
ui <- dashboardPage(header, 
                    sidebar, 
                    body)

server <- function(input, output) {}

shinyApp(ui, server)

Tvorba dashboardu: Přidání ValueBox

Přidání valueboxů v rámci wireframingu.

V body:

fluidRow(
    valueBoxOutput(outputId = "count"),
    valueBoxOutput(outputId = "prop"),
    valueBoxOutput(outputId = "avg"))

V server:

output$count <- renderValueBox({
    valueBox(..., icon = ...)})
output$prop <- renderValueBox(...)
...

Tvorba dashboardu: Přidání ovládacích prvků

Přidání vstupů – ovládacích prvků pro uživatele.

V body:

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "Select price range:",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

Aktualizujte server pomocí input$range[1] a input$range[2]

Tvorba dashboardu: Přidání interaktivních grafů

Přidání interaktivních grafů pomocí plotly.

V body:

plotlyOutput("plots", 
    height = 500, 
    width = 600)

V server:

output$plots <- renderPlotly({
      ...
  })

Tvorba dashboardu: Přidání dalšího grafu

Přidání druhého grafu na stejné stránce dashboardu přístupného přes rozbalovací nabídku.

V body:

selectInput(inputId = "select", 
    label = "Select group:", 
    choices = c("Neighbourhood", 
            "Room Type"))

V server:

output$plots <- renderPlotly({
    if (input$select == ...){plot1}
    else if(input$select == ...){plot2}
  })

Tvorba dashboardu: Přidání popisu a záložek

Přidání doplňujícího textu s popisem dashboardu.

V body:

box(side = "right", ...,
    title = "Welcome to London!", 
    "...")

Aktualizujte v body:

tabBox(id = "tabset", ...,
    tabPanel("Charts", ...),
    tabPanel("Data table", ...)

Tvorba dashboardu: Přidání interaktivních tabulek

Přidání interaktivních tabulek pomocí funkcí dataTable.

Lze použít funkce shiny.

V body:

dataTableOutput("table")

V server:

output$table <- 
    renderDataTable(listings)

Tvorba dashboardu: Přidání interaktivní mapy

Přidání mapy leaflet do dashboardu.

V sidebar:

sidebarMenu(
    menuItem("Charts", ...),
    menuItem("Map", ...))

V body:

leafletOutput("map",...)

V server:

output$map <- renderLeaflet(map)

Lass uns üben!

Tvorba dashboardů pomocí shinydashboard