class: center, middle, inverse, title-slide # Dashboards com R ## via flexdashboard ### Benilton Carvalho ### IMECC, UNICAMP ### (Atualizado em: 2021-11-16) --- ## O pacote `flexdashboard` <img src="logo_flexdashboard.png" width="25%" style="display: block; margin: auto;" /> Permite: * o uso de RMarkdown para a criação de visualizações do tipo dashboards; * o emprego de componentes diversas como htmlwidgets, dados tabulares, anotações, medidores; * a utilização de diferentes formatos de apresentação. --- ## Criando um dashboard * Instale o pacote `flexdashboard`; * Utilizando os menus do RStudio: * File * New File * RMarkdown * From Template * Flexdashboard <img src="screenshot_flexdashboard.png" width="50%" style="display: block; margin: auto;" /> --- # Dashboard de Coluna Única * Dashboards são divididos em linhas e colunas; * Componentes de saída são marcados usando cabeçalhos markdown de nível 3 (`###`); * Por padrão, dashboards são criados com uma única coluna; - gráficos empilhados verticalmente em uma coluna; - coluna com tamanho para preencher verticalmente a janela do browser. <img src="screenshot_coluna1fill.png" width="70%" style="display: block; margin: auto;" /> --- # Dashboard com Coluna Única e Rolamento * Algumas vezes, pode ser interessante ter a possibilidade de rolar a tela; * Isto permite que componentes tenham alturas naturais (que não se encaixariam no formato anterior); * Observe a mudança para `vertical_layout: scroll`. <img src="screenshot_coluna1scroll.png" width="70%" style="display: block; margin: auto;" /> --- # Dashboard com Múltiplas Colunas * Para utilizar várias colunas, você necessita de cabeçalhos markdown nível 2 (`-----------`) para cada coluna; * Cada coluna pode ter tamanhos diferentes. <img src="screenshot_colunaN.png" width="70%" style="display: block; margin: auto;" /> --- # Dashboard com Orientação de Linhas * Ao invés de múltiplas colunas, você pode escolher que seu dashboard tenha múltiplas linhas; * Para isso, utilize a opção `orientation: rows`; <img src="screenshot_linhas.png" width="70%" style="display: block; margin: auto;" /> --- # Componentes HTML Widgets Você pode utilizar ferramentas de visualização dinâmica: * Leaflet: mapas dinâmicos * dygraphs: visualização de séries temporais * Plotly: gráficos interativos (inc. ggplot2) * rbokeh: gráficos interativos para web * Highcharter: gráficos interativos para web * visNetwork: visualização de redes --- # Componentes Gráficas e Tabulares * Gráficos: * Podem ser utilizados sem maiores configurações; * Basta adicionar o código para o gráfico de interesse em um chunk; * Assim como em documentos RMarkdown, você pode configurar dimensões usando `fig.height` e `fig.width`; * Tabelas * Podem ser adicionadas via `knitr::kable` ou `DT::datatable`; * `knitr::kable`: tabelas estáticas * `DT::datatable`: tabelas dinâmicas --- # Caixas de Valores * Componentes gráficas * Permitem adição de texto e valores * Título é adicionado com `###` * Sintaxe: `valueBox(valor, icon = icone, color = cor)` * Valor: valor numérico * Icon: ícone de versões gratuitas da "Font Awesome" ("fa-<icone>"), "Ionicons" ("ion-<icone>") ou "Bootstrap Glyphicons" ("glyphicon-<icone>") * Color: "primary", "success", "warning" ou "danger" (também vale qualquer cor CSS válida) <img src="screenshot_valuebox.png" width="100%" style="display: block; margin: auto;" /> --- # Medidores * Componente Gráfica * Apresenta medidor (imagine um velocímetro analógico) * Título é adicionado com `###` * Sintaxe: `gauge(valor, min = , max = , symbol = , gaugeSectors( success = <fx>, warning = <fx>, danger = <fx>))` <img src="screenshot_medidor.png" width="100%" style="display: block; margin: auto;" /> --- # Outras Possibilidades * Ao necessitar de interações em seu webapp, busque entradas/saídas via Shiny (procure o site com exemplos) * Funções de interesse podem ser: - `sliderInput` - `checkboxInput` - `selectInput` * Acima: acessíveis via `input$<objeto>` * Procure, também, as funções do tipo `render*` (eg.: `renderPlot()`) --- # Referências - [https://pkgs.rstudio.com/flexdashboard/](https://pkgs.rstudio.com/flexdashboard/)