Stavy, barvy a vzhled

Tvorba dashboardů pomocí shinydashboard

Png Kee Seng

Researcher

Zkrášlení restaurace

Přizpůsobení dashboardu je jako zkrášlení restaurace
Říká se, že nejdřív jíme očima
Vizuálně přitažlivý dashboard také zlepšuje uživatelský zážitek
Zaměřme se na změnu barev některých prvků

Zkrášlená restaurace s vizuálně atraktivním jídlem.

¹ Image by Freepik

Stavy v shinydashboard

Některé objekty shinydashboard mají vlastnost status
Stav lze nastavit pomocí argumentu status
```
<object>(status = <status>, ...)
```

Stavy v shinydashboard

Stavy v notificationItems

Přidejme dvě oznámení do záhlaví
- Nastavte upozornění na nákup jako zprávu o úspěchu
- Nastavte upozornění na prodej jako zprávu o nebezpečí
Výchozí stav pro notificationItem() je "success"

Stavy success a danger pro notificationItem.

header <- dashboardHeader(
  ...
  dropdownMenu(type = "notifications",

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

Stavy v polích

Ponechání status beze změny vytvoří nebarevné pole
Nastavte status na "info"
Nastavte název
Nastavte solidHeader = TRUE

...
body <- dashboardBody(...,
        box("Stock name",

        title="Stock name title",

        width = 6,

        status = "info",

        solidHeader = TRUE)),

...

Pole se stavem info.

Pole se stavem info a názvem.

Pole se stavem info, názvem a plným vyplněním.

Přidání barvy do shinydashboard

Některé objekty shinydashboard umožňují nastavit color
Předpokládejme, že cena close klesla o 2 % oproti včerejšku
- Vykreslete valueBox() červeně jako varování pro Sally

Barevný valueBox().

...
body <- dashboardBody(...,

    valueBox("Close (%)", 
            "-2%", 
            width = 2,

            color = "red"

            ),

    ...)
...

Více barev

Dostupné barvy v shinydashboard:

Dostupné barvy v shinydashboard.

Dostupné stavy a barvy lze ověřit pomocí ?validStatuses a ?validColors

Motivy v shinydashboard

V shinydashboard jsou k dispozici předdefinované motivy
Aplikují se nastavením argumentu skin ve funkci dashboardPage()

dashboardPage(skin = <color>)

Dostupné barvy

"blue" (výchozí)
"black"
"purple"
"green"
"red"
"yellow"

Zkoušení různých motivů

Nastavte barvu na fialovou a vyzkoušejte to
Nastavte barvu na černou a sledujte rozdíly

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

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

Fialový motiv.

Černý motiv

Pojďme procvičovat!

Tvorba dashboardů pomocí shinydashboard