shiny.flent 중 하나

개시하다

shiny.flent는 Shiny에서 Microsoft Fuluent UI를 사용하는 데 사용되는 패키지입니다.
https://github.com/Appsilon/shiny.fluent
Fluent UI는 Flent Design System을 구현한 제품입니다.아래 보도에서 말한 바와 같이 이것은 네 가지 원칙에 기초한 것이다.
https://medium.com/microsoft-design/four-principles-for-the-future-of-design-78922340cece
한 번 보면 곧 안다.flument를 사용하기 시작하는 방법을 알고 있습니다.
내용은 대체로 Tutorial: Create your first shiny.fluent dashboard와 같다.
다음은 묘사해 봅시다.

설치하다.

github에서 직접 설치합니다.

remotes::install_github("Appsilon/shiny.react")
remotes::install_github("Appsilon/shiny.fluent")

리소스

https://demo.appsilon.com/apps/fluentui/#!/
https://developer.microsoft.com/en-us/fluentui#/controls/web

Hello World 애플리케이션

상기 강좌에서 우리는 먼저 Hello World 응용 프로그램을 만들었고 Shiny 응용 프로그램으로서 Fuluent UI의 기능과 구성 요소를 사용하여 텍스트를 표시하는 방법을 소개했다.
app.R

library(shiny)
library(shiny.fluent)

ui <- fluentPage(
  Text("Hello World !", variant = "mega")
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

UI는 Shiny입니다.flent의fluentPage()를 사용합니다.
교재는 샤니야.flentText() 구성 요소를 사용하여 표시합니다.여기서 variant 매개변수는 문자의 크기를 지정합니다.이렇게 Text 구성 요소의 옵션은 마이크로소프트 전 세계 전신 번호에 설명되어 있습니다.

테이블에 데이터 표시

테이블에 데이터 테이블을 표시합니다.데이터는 샤니야.fluenent 부속 가상 데이터fluentSalesDeals를 사용합니다.
app.R

library(shiny)
library(shiny.fluent)
library(tibble)

columns <- tibble(
  fieldName = c('rep_name', "date", "deal_amount", "city", "is_closed"),
  name = c("Sales rep", "Close date", "Amount", "City", "Is closed?")
)

ui <- fluentPage(
  Text("Hello !", variant = "mega"),
  uiOutput("table")
)

server <- function(input, output) {
  output$table <- renderUI({
    DetailsList(items = fluentSalesDeals,
                columns = columns)
  })
}

shinyApp(ui = ui, server = server)

UIuiOutput()를 테이블 출력으로 사용합니다.대응하는 출력server에서 renderUI()로 제작.이렇게 하면 전용 출력 및 렌더기가 제공되지 않고 UI 계열이 사용됩니다.
shiny.flentDetailsList() 구성 요소를 사용하여 데이터를 표로 표시합니다.테이블에 표시되는 열과 표시 이름을 매개변수columns로 지정합니다.열 이름 지정은 데이터 프레임 형식으로 데이터의 열 이름fieldName과 표시의 열 이름"rep_name"으로 지정됩니다.
옵션shiny.flent의 DetailsList 및 Microsoft Fuluent UI React의 DetailsList.하지만 옵션에 대해서는 잘 모르겠어요.

단순 입력 추가

간단한 입력 예시로 표 데이터를 필터하는 시각을 추가했습니다.표name의 값이 "Sales rep"인 경우 개방된 거래이기 때문에 이것을 필터하는 각도를 입력으로 추가합니다.데이터는 입력에 따라 여과되기 때문에 사용is_closed.
app.R

library(shiny)
library(shiny.fluent)
library(tibble)
library(dplyr)

columns <- tibble(
  fieldName = c('rep_name', "date", "deal_amount", "city", "is_closed"),
  name = c("Sales rep", "Close date", "Amount", "City", "Is closed?")
)

ui <- fluentPage(
  Toggle.shinyInput("includeOpen", label = "Include open deals"),
  Text("Hello !", variant = "mega"),
  uiOutput("table")
)

server <- function(input, output) {
  filteredData <- reactive({
    fluentSalesDeals %>%
      filter(
        is_closed | input$includeOpen
      )
  })

  output$table <- renderUI({
    DetailsList(items = filteredData,
                columns = columns
  })
}

shinyApp(ui = ui, server = server)

shiny.플랜트Toggle.shinyInput를 사용하여 각도 스위치의 입력을 제작했습니다.첫 번째 매개변수는 입력한 이름과 레이블 매개변수를 사용할 수 있습니다.구성 요소 이름 0 의 함수를 제공합니다.
toguru의 값이 갑옷이기 때문에 필터가 이걸 사용하고 있습니다.필터 대상 열reactive()의 값도 0이고 이러한 논리와(OR)를 사용하면 각도 값이 0일 때.shinyInput의 값은 1만 필터링하고 각도 값이 1일 때is_closed의 값이 0이나 1일 때도 필터링(필터링하지 않음)할 수 있다.
옵션Microsoft Global UI React의 Togle.예를 들어, 각도 스위치 옆에 On/Off를 표시하면 다음과 같습니다.

Toggle.shinyInput("includeOpen", label = "Include open deals", 
		  onText = "On", offText = "Off")	

카드로 외관 개선

페이지의 일부분에 음영이나 간격을 두어 쉽게 구분할 수 있도록 합니다.여기서는 카드의 은유를 고려해 외관을 구별하기 쉽다.Fluent UI Style Elevation 사용is_closed류의 외관 제어가 있다.여기 사용is_closed.

ui <- fluentPage(
  div(class = "ms-depth-8",
    Toggle.shinyInput("includeOpen", label = "Include open deals"),
  ),
  div(class = "ms-depth-8",
    Text("Hello !", variant = "mega"),
    uiOutput("table")
  )
)

다음에 설정div 등을 해서 더욱 쉽게 이해할 수 있도록 한다.

ui <- fluentPage(
  Stack(
    class = "ms-depth-8",    
    tokens = list(padding = 20, childrenGap = 10),  
  　Text("Filter", variant = "large),
    Toggle.shinyInput("includeOpen", label = "Include open deals"),
  ),
  div(
    class = "ms-depth-8",    
    tokens = list(padding = 20, childrenGap = 10),
    Text("Sales deals details", variant = "large"),
    uiOutput("table")
  )
)

shiny.flentStack를 사용하여 어셈블리를 정렬합니다.마이크로소프트 글로벌 포지셔닝 시스템에는 ms-depth-8와 padding의 설명이 있다.
이들 padding 중에서 지정childrenGap, 지정div, 지정class, 제목이 있는 텍스트, 구성 요소가 있다.이러한 모양새를 함수로 지정합니다.

Card <- function(..., title = NULL) {
  Stack(
    class = "ms-depth-8",
    tokens = list(padding = 20, childrenGap = 10),
    if (!is.null(title)) Text(title, variant = "large"),
    ...
  )
}

이렇게 함수화하면 다음과 같이 사용할 수 있다.

filter <- tagList(
  Toggle.shinyInput("includeOpen", label = "Include open deals")
)

Card(title = "Filter", filter),
Card(title = "Hello.", uiOutput("table"))

padding는 제목을 지정할 수 있고 내용이 있는 함수화할 수 있다.childrenGap용Card에서 filter열거Card의 구성 요소를 사용합니다.

Grid 레이아웃

배치를 격자로 설정하여 설비의 유연한 배치를 실현하였다.Microsoft Fuluent UI React의 Layout에는 Grid 레이아웃에 대한 설명이 있고 정의할 수 있는 클래스 이름과 설명이 있습니다.
클래스 이름tagList은 Grid 레이아웃의 성명이고 Card은 열로 지정되며 ms-Grid는 창 크기가 smmall(320px-479px)일 때 너비가 12열로 지정됩니다.

div(class="ms-Grid", dir="ltr", style = "padding: 0px",
  div(class="ms-Grid-col ms-sm12", style = "passing: 10px", 
    Card(title = "Filter", filter),
  ),
  div(class="ms-Grid-col ms-sm12", style = "passing: 10px", 
    Card(title = "Hello.", uiOutput("table"))
  )
)

중복된ms-Grid-col 정의 부분, 첫 번째ms-sm12와 그 다음div을 각각 div와 div로 함수화한 후 다음과 같다.

Grid <- function(...) {
  div(
    class = "ms-Grid",
    dir = "ltr",
    style = "padding: 0px",
    ...
  )
}

GridItem <- function(..., class = "ms-sm12") {
  div(
    class = paste("ms-Grid-col", class),
    style = "padding: 10px",
    ...
  )
}

Grid(
  GridItem(Card(title = "Filter", filter)),
  GridItem(Card(title = "Hello.", uiOutput("table"))
)

Grid는 GridItem를 매개 변수로, Grid는 GridItem를 매개 변수로 할 수 있다.

추가 필터 추가

fluentSalesDeals 데이터 Sales rep 필터를 추가합니다.fluentPeople 데이터 사용이 데이터는 키, 이미지 Url, 이미지 Initials,text,secandary Text,tertiary Text,optional Text,isValid,presence,can Expand,색채의 열로 구성되어 있다.
NormalPeoplePicker.shinyInputShiny 사용PeoplePicker을 허용하고 인물 선택 폼을 선택할 때 데이터에 포함된 이름, 이미지 정보, 존재하는 정보로 구성된 구성 요소를 응용하여 풍부한 인물 선택 형식을 실현할 수 있다.

filters <- tagList(
  div(
    Label("Salse Representative"),
    NormalPeoplePicker.shinyInput("people", options = fluentPeople)
  ),
  Toggle.shinyInput("includeOpen", label = "Include open deals")
)

GridItem의 선택값은 Card로 데이터 필터에 사용됩니다.

  filteredData <- reactive({
    fluentSalesDeals %>% filter(
      length(input$people) == 0 | rep_id %in% input$people,
      is_closed | input$includeOpen
    )
  })

여기NormalPeoplePicker는 논리와(OR)를 사용하고input$people 중 선택 수가 0일 때 모두TRUE가 되므로 모든 기록을 보존하고filter 중 1개 이상의 선택 수가 있을 경우 OR 이후의 조건에 따라 여과한다.즉, 선택이 없으면 모든 기록을 표시하기 위해 여과되지 않고, 누군가가 선택한 조건으로 선별된다는 것이다.

막대 차트 추가

몇 개의 필터 입력을 통해 데이터를 선택할 수 있기 때문에 선택한 데이터는 스트라이프로 표시됩니다.
여기에 Grid 레이아웃 카테고리를 지정하여 창 너비에 따라 필터와 막대 그래프의 구성을 변경합니다.필터 지정input$people과 input$people, 스트라이프 지정ms-sm12과 ms-xl4.이렇게 하면 창의 폭이 좁을 때(smmall, 320px-479px) 둘 다 12열 너비의 열, 너비(extra large, 1024px-1365px) 필터 패널은 4열 너비, 스트라이프 그림은 8열 너비이다.Layout에는 해설이 있다.
막대 그래프의 표시 사용ms-sm12으로 높이를 지정합니다.

ui <- fluentPage(
  Grid(
    GridItem(class = "ms-sm12 ms-xl4",
             Card(title = "Filters", filters)
    ),
    GridItem(class = "ms-sm12 ms-xl8",
             Card(title = " Deals count",
                  div(
                    plotlyOutput("plot", height = "300px")
                  )
              )
    ),
    GridItem(
      Card(title = "Deals data",
           div(style = 'height: 500px; overflow: auto',
               uiOutput("table")
           )
      )
    )
  )
)

막대형 그림의 그리기는 ggplot2와 Plattly를 사용한다.

  output$plot <- renderPlotly({
    ggplot(filteredData(), aes(x = rep_name)) +
      geom_bar(fill = unique(filteredData()$color)) +
      xlab("Sales rep") +
      ylab("Number of deals") +
      theme_light()
  })

끝말

교과서를 한 번 봤을 때의 필기로 완성되었다.People Picker와 같은 풍부한 UI와 Grid 레이아웃을 즉시 사용할 수 있어서 정말 좋습니다.
한편, 샤니.fluent의 사용 시작은 이미 알고 있지만 DetailsList에서 열 이름을 클릭한 후 정렬 등 실제 사용 시 요구사항을 어떻게 실시하는지 아직 모른다.나는 어느 정도의 이해가 없으면 능숙하게 사용할 수 없다고 생각한다.
다음은 내가 볼게Tutorial: Build a Full Shiny Dashboard With shiny.fluent.