상태, 색상, 스킨

shinydashboard로 대시보드 만들기

Png Kee Seng

Researcher

레스토랑 꾸미기

대시보드 커스텀은 레스토랑을 보기 좋게 꾸미는 것과 비슷합니다
우리는 먼저 눈으로 먹는다고 하죠
시각적으로 매력적인 대시보드는 사용자 경험을 높입니다
일부 요소의 색을 바꾸는 데 집중해 봅시다

보기 좋게 꾸민 레스토랑과 먹음직스러운 음식.

¹ Image by Freepik

shinydashboard의 상태

일부 shinydashboard 객체에는 status 속성이 있습니다
이 상태는 status 인수로 지정합니다
```
<object>(status = <status>, ...)
```

shinydashboard의 상태

notificationItem의 상태

헤더에 알림 항목 두 개를 추가합시다
- 매수 알림은 success 메시지로 설정
- 매도 알림은 danger 메시지로 설정
notificationItem()의 기본 상태는 "success"입니다

notificationItem의 success와 danger 상태.

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

       notificationItem("Sell alert",

       status = "danger"

       ),

       notificationItem("Buy alert",

       status = "success"

       )

))
...

박스의 상태

status를 비워 두면 무채색 박스입니다
status를 "info"로 설정
제목 설정
solidHeader = TRUE 설정

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

        title="Stock name title",

        width = 6,

        status = "info",

        solidHeader = TRUE)),

...

info 상태의 박스.

info 상태와 제목이 있는 박스.

info 상태, 제목, 단색 헤더가 있는 박스.

shinydashboard에 색 추가

일부 shinydashboard 객체에서는 color를 설정할 수 있습니다
close 가격이 어제보다 2% 하락했다고 가정
- Sally에게 경고하도록 빨간색으로 valueBox() 렌더링

valueBox()에 색을 적용할 수 있습니다.

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

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

            color = "red"

            ),

    ...)
...

더 많은 색상

shinydashboard의 사용 가능 색상:

shinydashboard에서 사용 가능한 색상.

?validStatuses, ?validColors로 상태와 색상 확인 가능

shinydashboard의 스킨

shinydashboard에는 미리 정의된 스킨이 있습니다
dashboardPage()의 skin 인수로 적용합니다

dashboardPage(skin = <color>)

가능한 색상

"blue" (기본)
"black"
"purple"
"green"
"red"
"yellow"

스킨 바꿔 보기

보라색으로 설정하여 시험해 보기
검은색으로 설정해 차이를 확인

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

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

보라색 스킨.

검은색 스킨

연습해 봅시다!

shinydashboard로 대시보드 만들기