Dashboards em Shiny I

class: center, middle, inverse, title-slide

.title[
# Dashboards em Shiny I
]
.subtitle[
## Layouts
]
.author[
### <img src = 'https://d33wubrfki0l68.cloudfront.net/9b0699f18268059bdd2e5c21538a29eade7cbd2b/67e5c/img/logo/cursor1-5.png' width = '30%'>
]
.date[
### Setembro de 2023
]

---

## HTML

HTML é uma [linguagem de marcação](https://pt.wikipedia.org/wiki/Linguagem_de_marca%C3%A7%C3%A3o) para construir páginas web.

Uma linguagem de marcação é apenas um tipo de documento que contem texto simples (como em um bloco de notas) e um conjunto de instruções para formatar (anotar, marcar) parte específicas do conteúdo. Além do HTML, o LaTeX e o (R) Markdown são outros exemplos comuns de linguagem de marcação.

A maior parte do esforço em aprender uma linguagem de marcação está em aprender quais são e como utilizar as instruções de formatação.

---

## Tags HTML

No HTML, as instrução de formatação são chamadas *tags*. Utilizaremos as *tags* para formatar qualquer elemento da página web que estamos criando. Com elas, podemos, por exemplo, transformar um texto em negrito ou itálico, criar títulos e inserir imagens.

O pacote `shiny` traz diversas funções que simulam essas tags. As principais são:

<div id="htmlwidget-bd62c34d3011d900fbd1" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-bd62c34d3011d900fbd1">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"função":["a()","hr()","br()","h1(), ..., h6()","img()","p()","em()","strong()"],"para que serve":["cria um hiperlink","cria uma linha horizontal","insere uma quebra de linha","cria títulos","insere uma imagem","cria um parágrafo","formata o texto em itálico","formata o texto em negrito"]},"columns":[{"id":"função","name":"função","type":"character"},{"id":"para que serve","name":"para que serve","type":"character"}],"sortable":false,"dataKey":"43ae932de20709ab4137977dfe1e4a4e"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>

---
## Tags HTML

O código Shiny abaixo, por exemplo, gera o código HTML a seguir.

```r
#ui
fluidPage(
  h1("Meu Primeiro Shiny App"),
  p("O link para o site do Shiny é ",
    a(href = "https://www.rstudio.com/shiny/", "rstudio.com/shiny."),
    strong("Recomendo fortemente que você dê uma olhada!"))
)
```

```html
<div class="container-fluid">
  <h1>Meu Primeiro Shiny App</h1>
  <p>
    O link para o site do Shiny é 
    <a href="https://www.rstudio.com/shiny/">rstudio.com/shiny.</a>
    <strong>Recomendo fortemente que você dê uma olhada!</strong>
  </p>
</div>
```

---
## Tags HTML

Que, por sua vez, gera o seguinte documento web:

```html

<div class="container-fluid">
  <h1>Meu Primeiro Shiny App</h1>
  <p>
    O link para o site do Shiny é 
    <a href="https://www.rstudio.com/shiny/">rstudio.com/shiny.</a>
    <strong>Recomendo fortemente que você dê uma olhada!</strong>
  </p>
</div>
```

<h1>Meu Primeiro Shiny App</h1>
<p>
O link para o site do Shiny é 
<a href="https://www.rstudio.com/shiny/">rstudio.com/shiny.</a>
<strong>Recomendo fortemente que você dê uma olhada!</strong>
</p>

---
## Atividade

Vamos testar as funções geradoras de HTML.

<br>

<center>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300">
<br>
<br>
<span style="color:#6495ed; font-weight: bold;">Ao RStudio: 11-tags-html.r</span>
<center>

---
## Bootstrap

O layout de um Shiny app segue o *grid system* do [Bootstrap Framework](https://getbootstrap.com.br/docs/4.1/getting-started/introduction/) do Twitter. Esse layout estabelece que:

1. os elementos serão dispostos primeiramente em linhas (alinhamento horizontal);
2. cada nova linha será colocada embaixo da anterior;
3. cada linha será dividida em colunas, para dispormos os elementos horizontalmente;
4. o comprimento da página será dividido em 12 unidades, independentemente do tamanho da tela.

<center>
<img src="img/gridsystem.jpg" width = 80%>
<br>
Fonte: <a href = https://dzone.com/articles/working-with-bootstrap-4-grid-system-for-creating>dzone.com/articles/working-with-bootstrap-4-grid-system-for-creatin</a>
</center>

---
## Linhas e colunas

Para criar novas linhas, utilizamos a função `fluidRow()`. Dentro dessa função, colocamos tudo que queremos mostrar em uma dada linha.

Para criar colunas dentro de uma linha, utilizamos a função `column()`. Essa função tem dois argumentos: `width` e `offset`. O primeiro determina o comprimento da coluna (de 1 a 12). O segundo indica quanto espaço horizontal gostaríamos de "pular" antes de começar a nossa coluna.

---
## Atividade

Vamos fazer um Shiny app para observar o grid system na prática.

<br>

---
## Layouts

O pacote `shiny` fornece alguns layouts prontos. Os principais são:

- `sidebarLayout()`: para criar um aplicativo com uma barra lateral.

- `navbarPage()`: para criar um aplicativo com um menu de navegação no topo da tela.

Também conseguimos layouts prontos em outros pacotes da comunidade Shiny:

- `shinydashboard`: para criar um app com barra de navegação lateral.

- `bs4Dash`: também cria um app com barra de navegação lateral, mas utiliza uma versão mais recente do Bootstrap.

---
## sidebarLayout

Para criar um layout com barra lateral, utilizamos a estrutura a seguir.

```r
ui <- fluidPage(
  titlePanel("Shiny com sidebarLayout"),
  sidebarLayout( 
    sidebarPanel(
      sliderInput(
        "num",
        "Número de observações:",
        min = 0,
        max = 1000,
        value = 500
      )
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)
```

---
## sidebarLayout

Esse código gera o app com a seguinte UI:

---
## sidebarLayout

Todos os elementos do layout estão dentro da função `fluidPage()`.

```r
*ui <- fluidPage(
  titlePanel("Shiny com sidebarLayout"),
  sidebarLayout( 
    sidebarPanel(
      sliderInput(
        "num",
        "Número de observações:",
        min = 0,
        max = 1000,
        value = 500
      )
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
*) 
```

---
## sidebarLayout

A função `titlePanel()` é utilizada para inserirmos um título no app.

```r
ui <- fluidPage(
* titlePanel("Shiny com sidebarLayout"),
  sidebarLayout( 
    sidebarPanel(
      sliderInput(
        "num",
        "Número de observações:",
        min = 0,
        max = 1000,
        value = 500
      )
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)
```

---
## sidebarLayout

Especificamos o layout com a função `sidebarLayout()`.

```r
ui <- fluidPage(
  titlePanel("Shiny com sidebarLayout"),
* sidebarLayout(
    sidebarPanel(
      sliderInput(
        "num",
        "Número de observações:",
        min = 0,
        max = 1000,
        value = 500
      )
    ),
    mainPanel(
      plotOutput("hist")
    )
* )
)
```

---
## sidebarLayout

Criamos uma barra lateral com a função `sidebarPanel()`.

```r
ui <- fluidPage(
  titlePanel("Shiny com sidebarLayout"),
  sidebarLayout( 
*   sidebarPanel(
      sliderInput(
        "num",
        "Número de observações:",
        min = 0,
        max = 1000,
        value = 500
      )
*   ),
    mainPanel(
      plotOutput("hist")
    )
  )
)
```

---
## sidebarLayout

Dentro do `sidebarPanel()`, colocamos tudo o que queremos que apareça na barra lateral. No exemplo, teremos um slider.

```r
ui <- fluidPage(
  titlePanel("Shiny com sidebarLayout"),
  sidebarLayout( 
    sidebarPanel(
*     sliderInput(
*       "num",
*       "Número de observações:",
*       min = 0,
*       max = 1000,
*       value = 500
*     )
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)
```

---
## sidebarLayout

Por fim, utilizamos a função `mainPanel()` para especificar tudo o que aparecerá na área principal do app. No exemplo, teremos apenas um gráfico.

```r
ui <- fluidPage(
  titlePanel("Shiny com sidebarLayout"),
  sidebarLayout( 
    sidebarPanel(
      sliderInput(
        "num",
        "Número de observações:",
        min = 0,
        max = 1000,
        value = 500
      )
    ),
*   mainPanel(
      plotOutput("hist")
*   )
  ) 
)
```

---
## sidebarLayout

No exemplo, temos apenas um gráfico na área principal do app.

---
## Atividade

Vamos fazer um Shiny app com `sidebarLayout()`.

<br>

---
## navbarPage

Para criar um layout com menu de navegação superior, utilizamos a função `navbarPage()` e a estrutura a seguir.

```r
ui <- navbarPage(
  title = "Shiny com navbarPage",
  tabPanel(title = "Painel 1"),
  tabPanel(title = "Painel 2"),
  tabPanel(title = "Painel 3"),
  navbarMenu(
    title = "Mais opções",
    tabPanel(title = "Item 1"),
    tabPanel(title = "Item 2"),
    tabPanel(title = "Item 3")
  )
)
```

---
## navbarPage

Essa estrutura vai originar o seguinte layout.

Cada opção da barra superior mostra uma página diferente do aplicativo.

---
## navbarPage

O argumento `title` da função `navbarPage()` determina o título que aparecerá na barra superior.

```r
ui <- navbarPage(
* title = "Shiny com navbarPage",
  tabPanel(title = "Painel 1"),
  tabPanel(title = "Painel 2"),
  tabPanel(title = "Painel 3"),
  navbarMenu(
    title = "Mais opções",
    tabPanel(title = "Item 1"),
    tabPanel(title = "Item 2"),
    tabPanel(title = "Item 3")
  )
)
```

---
## navbarPage

Com a função `tabPanel()` criamos as diferentes páginas do aplicativo, que são acessadas pela barra superior. O argumento `title` indica o título que aparecerá em cada botão.

```r
ui <- navbarPage(
  title = "Shiny com navbarPage",
* tabPanel(title = "Painel 1"),
* tabPanel(title = "Painel 2"),
* tabPanel(title = "Painel 3"),
  navbarMenu(
    title = "Mais opções",
    tabPanel(title = "Item 1"),
    tabPanel(title = "Item 2"),
    tabPanel(title = "Item 3")
  )
)
```

---
## navbarPage

A função `navbarMenu()` nos permite agrupar opções de página em uma caixinha de seleção.

```r
ui <- navbarPage(
  title = "Shiny com navbarPage",
  tabPanel(title = "Painel 1"),
  tabPanel(title = "Painel 2"),
  tabPanel(title = "Painel 3"),
* navbarMenu(
*   title = "Mais opções",
    tabPanel(title = "Item 1"),
    tabPanel(title = "Item 2"),
    tabPanel(title = "Item 3")
* )
)
```

---
## navbarPage

Os itens desse menu também são criados pela função `tabPanel()`, colocadas dentro da função `navbarMenu()`.

```r
ui <- navbarPage(
  title = "Shiny com navbarPage",
  tabPanel(title = "Painel 1"),
  tabPanel(title = "Painel 2"),
  tabPanel(title = "Painel 3"),
  navbarMenu(
    title = "Mais opções", 
*   tabPanel(title = "Item 1"),
*   tabPanel(title = "Item 2"),
*   tabPanel(title = "Item 3")
  )
)
```

---
## navbarPage

Os inputs e outputs (e qualquer outro elemento da página) são colocados dentro de cada `tabPanel()`.

.tiny[

```r
ui <- navbarPage(
  title = "Shiny com navbarPage",
* tabPanel(
*   title = "Painel 1",
*   sliderInput(
*       "num",
*       "Número de observações:",
*       min = 0,
*       max = 1000,
*       value = 500
*   ),
*   plotOutput("hist")
* ),
  #...
)
```
]

---
## Atividade

Vamos fazer um Shiny app com `navbarLayout()`.

<br>

---
## shinydashboard

O `shinydasboard` é um pacote de R que introduz diversas ferramentas para o Shiny. A principal é um layout com barra de navegação lateral.

.pull-left[

```r
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)
```

]

.pull-right[

]

---
## Elementos do shinydashboard

.pull-left[
- A função `dashboardPage()` é responsável por criar o layout. Ela recebe três funções como argumentos: `dashboardHeader()`, `dashboardSidebar()` e `dashboardBody()`.

- A função `dashboardHeader()` é responsável por elementos da barra superior (azul).
]

.pull-right[

]

- A função `dashboardSidebar()` é responsável por elementos da barra lateral (preta). Geralmente colocamos nela um menu para criar várias páginas no nosso app.

- A função `dashboardBody()` controla os elementos da área principal do app (cinza). É nela que colocaremos as nossas visualizações.

---
## Atividade

Vamos construir um app com o layout do shinydashboard.

<br>

---
## Menu lateral

Para construir um menu na barra lateral, utilizamos a função `sidebarMenu()` dentro da função `dashboardSidebar()`. Cada item do menu é criado pela função `menuItem()`. Além do nome dado ao menu, essa função recebe um argumento chamado `tabName`, que será utilizado para nos referirmos a esse item dentro do `dashboardBody`.

```r
# ui
dashboardSidebar(
  sidebarMenu(
    menuItem("Item 1", tabName = "item1"),
    menuItem("Item 2", tabName = "item2")
  )
)
```

---
## Menu lateral

Dentro do `dashboardBody()` usamos a função `tabItems()` para listar os itens do menu. A página é criada utilizando a função `tabItem()`. Também passamos a essa função o argumento `tabName`, para podermos nos referir a cada um dos itens criados no `sidebarMenu()`. No código abaixo, substituiríamos o `...` pelos inputs e outputs que quisermos construir em cada item (página) do dashboard.

```r
# ui
dashboardBody(
  tabItems(
    tabItem(tabName = "item1",...),
    tabItem(tabName = "item2",...)
  )
)
```

---
## Menu lateral

Assim, o código da ui ficaria:

```r
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
*     menuItem("Item 1", tabName = "item1"),
      menuItem("Item 2", tabName = "item2")
    )
  ),
  dashboardBody(
    tabItems(
*     tabItem(tabName = "item1",...),
      tabItem(tabName = "item2",...)
    )
  )
)
```

---
## Atividade

Vamos construir um menu lateral no nosso shinydashboard.

<br>

---
## Outros elementos: box e tabbox

Além do layout de dashboard, o pacote `flexdashboard` trás novos elementos para a UI: o `box()` e o `tabBox()`.

.pull-left[

```r
box(
  title = "Histograma", ...
),
box(
  title = "Inputs", ...
)
```

]

.pull-right[

```r
tabBox(
  tabPanel("Aba 1",...),
  tabPanel("Aba 2",...),
  tabPanel("Aba 3",...)
)
```

]

---
## Outros elementos: valueBox e infoBox

E novos outputs:

.pull-left[

### valueBox

**`renderValueBox({}) + valueBoxOutput()`**

]

.pull-right[

### infoBox

**`renderInfoBox({}) + infoBoxOutput()`**

]

---
## Atividade

Vamos acrescentar esses novos elementos ao nosso Shinydashboard.

<br>

---
## bs4Dash

Todos os conceitos que vimos para o `shinydashboard` valem para o pacote `bs4Dash`. A ideia desse pacote é construir o mesmo layout do `shinydashboard`, mas utilizando a versão 4 do Bootstrap (em vez da 3).

Com o `bs4Dash`, teremos um dashboard com o visual mais moderno e com mais opções prontas de interface. A partir da versão 2.0 do pacote, você pode pegar um app feito em `shinydashboard` e simplesmente mudar `library(shinydashboard)` para `library(bs4Dash)` que seu app estará "traduzido" para essa nova biblioteca.

A contrapartida é que o pacote `shinydashboard` é mais simples, organizado e consistente. Se você está começando agora no Shiny, sugerimos começar por ele.

---
## Atividade

Vamos transformar um `shinydashboard` em um `bs4Dash`.

<br>

---
## Exercícios

Faça os exercícios do [Capítulo 5 do livro Programando em Shiny](https://programando-em-shiny.curso-r.com/layouts.html#exerc%C3%ADcios).

---
## Referências e material extra

- [Tutorial de Shiny do Garrett Grolemund](https://shiny.rstudio.com/tutorial/)

- [Guia de layout do Shiny](https://shiny.rstudio.com/articles/layout-guide.html)

- [Mais sobre layout](https://shiny.rstudio.com/articles/#user-interface)

- [Bootstrap](https://getbootstrap.com/)

- [Tutorial do shinydashboard](https://rstudio.github.io/shinydashboard/get_started.html)

- [Demo do bs4Dash](https://dgranjon.shinyapps.io/bs4DashDemo/)