Záhlaví a postranní panel

Tvorba dashboardů pomocí shinydashboard

Png Kee Seng

Researcher

Záhlaví

Záhlaví je jako vývěsní štít restaurace
Může obsahovat název dashboardu
Může obsahovat rozbalovací nabídky
- Např. zprávy, oznámení, úkoly

Příklad jednoduchého průčelí obchodu.

Záhlaví je jako vývěsní štít restaurace. Může obsahovat praktické i estetické prvky. Příklad složitého průčelí.

¹ Image by upklyak on Freepik

Název shinydashboardu

Záhlaví se definuje pomocí dashboardHeader()
Co když je název příliš dlouhý?
- Nastavte argument titleWidth
- Výchozí hodnota je 230 pixelů

header <- dashboardHeader(title = "Soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")
                            titleWidth = 400)

Šířku záhlaví lze upravit pro dlouhé názvy.

Přidání rozbalovací nabídky se zprávou

Do záhlaví lze přidat rozbalovací nabídky
Tři typy rozbalovacích nabídek
- Zprávy
- Oznámení
- Úkoly
Přidejte dropdownMenu() s type "messages"
- Přidejte messageItem()
- Výchozí ikona je icon("user")
- Lze také nastavit time

header <- dashboardHeader(
  title = "Analysis for FIFA world cup",
  titleWidth = 300,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",

      time = "5 mins"

)))

Rozbalovací nabídka s jednou zprávou.

Přidání rozbalovací nabídky s více zprávami

Přidejte další messageItem() do dropdownMenu() s názvem "Twitter"

Rozbalovací nabídka se dvěma zprávami.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"
    ),

    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")
    )
  )
)

Přidání rozbalovací nabídky s více položkami

Lze přidat i další typy položek
- messageItem()
- notificationItem()
- taskItem()
Vzhled se liší
- messageItem(): Výchozí ikona je icon("user")
- notificationItem(): Výchozí ikona je icon("exclamation-triangle")
- taskItem(): Obsahuje ukazatel průběhu

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),

    notificationItem("This is a notification."
    ),

    taskItem(value = 30, color = "blue",
      "Dashboard construction")
))

Přidání rozbalovací nabídky s více položkami

Rozbalovací nabídka s více položkami

Přidání více rozbalovacích nabídek

Lze přidat i další rozbalovací nabídku

Záhlaví s více než jednou rozbalovací nabídkou.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,

  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),
    notificationItem("This is a notification."),
    taskItem(value = 30, color = "blue",
      "Dashboard construction")),

  dropdownMenu(type = "notifications",
    notificationItem(icon = icon("users"),
      "This is another notification."
)))

Postranní panel

Postranní panel se definuje pomocí dashboardSidebar()
Šířku lze upravit parametrem width.
sidebarMenu() umožňuje přidat více stránek do shinydashboardu

Postranní panel se dvěma tlačítky

sidebar <- dashboardSidebar()

sidebar <- dashboardSidebar(width=400)

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
        icon = icon("chart-line")),
    menuItem("Statistics", icon = icon("file-excel"), 
        tabName = "stats")
  )
)

sidebar <- dashboardSidebar(disable = TRUE)

Přidání odznaku

Lze také přidat odznak
- Nastavte badgeLabel a badgeColor

Postranní panel s odznaky

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),

             badgeLabel = "New content!", 
             badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "stats", 

             badgeLabel = "urgent", 
             badgeColor = "red")

  )
)

Přidání podzáložek

Podzáložky lze přidat pomocí menuSubItem()
Poznámka: k záložce obsahující podzáložky nelze přidat odznak

Postranní panel s podzáložkami

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
                     icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
                     icon=icon("user")))
  )
)

Přidání vstupů a výstupů do postranního panelu

Do postranního panelu lze přidat vstupy a výstupy
Vstupy a výstupy je také nutné definovat v server

Postranní panel s prvkem checkboxGroupInput().

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
            icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
            icon=icon("user"))),

    menuItem("A couple of checkboxes",  
             checkboxGroupInput("checkboxes", 
              "Day of the week", 
              choices =  c("Mon","Tue","Wed","Thu","Fri","Sat","Sun"),
              selected = c("Mon","Tue","Wed","Thu","Fri")))
  )
)

Lass uns üben!

Tvorba dashboardů pomocí shinydashboard