Artigo feito em colaboração com Bethânia Kelly
O pacote Bs4Dash é uma extensão do Shiny que permite criar dashboards modernos e responsivos utilizando o Bootstrap 4 e o AdminLTE3. O Shiny, amplamente utilizado para desenvolver aplicações web interativas no R, frequentemente emprega o shinydashboard, que é baseado no Bootstrap 3. O Bs4Dash foi desenvolvido para aproveitar as funcionalidades e o design mais moderno do Bootstrap 4, permitindo uma transição suave para quem já está acostumado com o shinydashboard, pois sua sintaxe é bastante similar (David Granjon).
Existem vários benefícios em utilizar o Bs4Dash, sendo um dos principais a possibilidade de criar dashboards com um design mais atualizado e recursos mais avançados, comparado ao Bootstrap 3. Além disso, o Bs4Dash oferece maior flexibilidade e customização, permitindo que os usuários ajustem seus dashboards para atender às necessidades específicas de seus projetos, tudo isso sem perder a simplicidade na migração de códigos que já utilizam o shinydashboard.
Instalação e Configuração
Para instalar o pacote Bs4Dash, você deverá usar o CRAN. Abaixo estão os comandos necessários para instalação e carregamento do pacote:
`install.packages("bs4Dash")
library("bs4Dash")`- Estrutura básica de um dashboard:
library(shiny)
library(bs4Dash)
ui <- bs4DashPage(
navbar = bs4DashNavbar(
title = "Bs4Dash Example"
),
sidebar = bs4DashSidebar(
skin = "light",
status = "warning",
title = "Menu",
bs4SidebarMenu(
bs4SidebarMenuItem("Home", tabName = "home", icon = "house"),
bs4SidebarMenuItem("Settings", tabName = "settings", icon = "gears")
)
),
body = bs4DashBody(
bs4TabItems(
bs4TabItem(
tabName = "home",
fluidRow(
bs4Box(
title = "Welcome",
width = 12,
"This is the home tab content."
)
)
),
bs4TabItem(
tabName = "settings",
fluidRow(
bs4Box(
title = "Settings",
width = 12,
"This is the settings tab content."
)
)
)
)
),
controlbar = bs4DashControlbar(
skin = "dark",
title = "Extra Controls",
bs4Card(
title = "Card Title",
width = 12,
sliderInput("slider1", "Select Value:", 1, 100, 50)
)
),
footer = bs4DashFooter(
left_text = "Custom footer text",
right_text = "2024 © Your Company"
)
)
server <- function(input, output) {
# Server logic (if any) goes here
}
shinyApp(ui, server)Componentes e Layouts
Definindo a Interface do Usuário (UI): O código começa definindo a interface do usuário (UI), que é a parte visível do aplicativo e onde todos os componentes visuais do dashboard são montados. No Bs4Dash, essa interface é criada com a função bs4DashPage(), que organiza os principais elementos do layout, como a barra de navegação (navbar), a barra lateral (sidebar), o corpo do conteúdo (body), a barra de controle (controlbar), e o rodapé (footer).
Barra de Navegação (Navbar): A navbar é a barra superior do dashboard e serve para exibir um título ou outros elementos de navegação. No exemplo, o título “Bs4Dash Example” é exibido na barra superior, mas você pode personalizá-la com botões, menus suspensos, e ícones conforme necessário.
Barra Lateral (Sidebar): A sidebar funciona como um menu de navegação lateral onde os usuários podem escolher diferentes seções ou abas do dashboard. No exemplo, dois itens de menu são criados: “Home” e “Settings”. Cada item é associado a uma aba específica no corpo do dashboard, permitindo que os usuários alternem entre essas abas.
Body: O body é a área principal onde o conteúdo do dashboard é exibido. No exemplo, a estrutura é definida usando bs4TabItems() para organizar as diferentes abas que o usuário pode acessar. Cada aba, como “Home” e “Settings”, é definida por um bs4TabItem() e pode conter qualquer conteúdo que você deseja exibir, como gráficos, tabelas, ou texto.
Controlbar: A controlbar é uma barra lateral adicional que pode ser usada para exibir controles extras, como sliders, botões, ou configurações. No exemplo, a barra de controle contém um bs4Card() com um sliderInput() que permite ao usuário ajustar valores interativamente.
Rodapé (Footer): O footer é a seção na parte inferior do dashboard onde você pode adicionar informações adicionais, como direitos autorais ou links para políticas de privacidade. No exemplo, o rodapé exibe textos personalizados à esquerda e à direita, oferecendo uma maneira discreta de incluir informações importantes.
Server: Por fim, o server é onde a lógica de backend do aplicativo é implementada. Embora o exemplo fornecido não inclua nenhuma lógica complexa, este é o local onde você definiria reações a interações do usuário, como a geração de gráficos ou a manipulação de dados com base nos inputs fornecidos na UI.
Interatividade com Bs4Dash
O Bs4Dash oferece uma ampla variedade de widgets interativos, como sliders, inputs de texto, seletores de data, e gráficos dinâmicos, que podem ser facilmente incorporados em dashboards. Estes widgets são altamente customizáveis e permitem que os usuários interajam diretamente com os dados apresentados. Por exemplo, você pode adicionar um sliderInput para filtrar dados numéricos em gráficos ou tabelas, ou usar actionButtons para permitir que os usuários realizem ações específicas, como atualizar gráficos ou aplicar filtros adicionais. Além disso, os gráficos dinâmicos podem ser atualizados em tempo real com base nas interações do usuário, o que melhora a experiência e a usabilidade do dashboard.
Este exemplo mostra como criar um dashboard simples com widgets interativos como sliders e botões:
`library(shiny)
library(bs4Dash)
ui <- dashboardPage(
header = dashboardHeader(title = "Exemplo Bs4Dash"),
sidebar = dashboardSidebar(),
body = dashboardBody(
fluidRow(
box(
title = "Interatividade com Sliders",
width = 6,
sliderInput("obs", "Número de Observações:", min = 1, max = 1000, value = 500),
actionButton("update", "Atualizar Gráfico")
),
box(
title = "Gráfico Dinâmico",
width = 6,
plotOutput("distPlot")
)
)
)
)
server <- function(input, output) {
observeEvent(input$update, {
output$distPlot <- renderPlot({
hist(rnorm(input$obs))
})
})
}
shinyApp(ui, server)`Uma das grandes vantagens do Bs4Dash é sua capacidade de integração com outros pacotes populares do R, como plotly, DT, e leaflet, que são essenciais para criar visualizações interativas avançadas.
Aqui, usamos plotly para criar gráficos interativos dentro de um dashboard Bs4Dash:
`library(shiny)
library(bs4Dash)
library(plotly)
ui <- dashboardPage(
header = dashboardHeader(title = "Integração com Plotly"),
sidebar = dashboardSidebar(),
body = dashboardBody(
fluidRow(
box(
title = "Gráfico Interativo com Plotly",
width = 12,
plotlyOutput("plotlyGraph")
)
)
)
)
server <- function(input, output) {
output$plotlyGraph <- renderPlotly({
plot_ly(data = mtcars, x = ~mpg, y = ~wt, type = "scatter", mode = "markers")
})
}
shinyApp(ui, server)`Estilos e Temas Personalizados
Para personalizar o tema do seu dashboard, você pode ajustar aspectos como cores, fontes e outras propriedades CSS diretamente dentro do Bs4Dash. Isso é feito através dos parâmetros disponíveis na função dashboardPage, dashboardHeader, dashboardSidebar, e dashboardBody.
Aqui está um exemplo de como personalizar as cores e fontes:
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
freshTheme = create_theme(
bs4dash_vars(
navbar_light_color = "#000000",
navbar_light_active_color = "#FF5733",
sidebar_light_bg = "#F4F6F9"
),
bs4dash_yiq(
contrasted_threshold = 50,
text_dark = "#000000",
text_light = "#FFFFFF"
),
bs4dash_layout(main_bg = "#E3F2FD")
),
header = dashboardHeader(title = "Dashboard Personalizado"),
sidebar = dashboardSidebar(),
body = dashboardBody(
fluidRow(
box(
title = "Exemplo de Personalização",
width = 12,
"Este é um exemplo de como alterar cores e fontes."
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)Neste código, utilizamos o pacote fresh para criar um tema personalizado que altera as cores da barra de navegação, fundo da sidebar, e fundo principal do dashboard. Você pode adaptar as cores e fontes para se adequar à identidade visual desejada.
Você também pode usar a função icon() para adicionar ícones do FontAwesome ao seu dashboard. Essas personalizações tornam o dashboard mais dinâmico e envolvente, melhorando tanto a estética quanto a experiência do usuário.
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
header = dashboardHeader(title = tagList(icon("dashboard"), "Dashboard com Ícones")),
sidebar = dashboardSidebar(
menuItem("Home", tabName = "home", icon = icon("home")),
menuItem("Gráficos", tabName = "charts", icon = icon("chart-bar"))
),
body = dashboardBody(
fluidRow(
box(
title = tagList(icon("cogs"), "Configurações"),
width = 12,
"Aqui você pode configurar seu dashboard."
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)Conclusão
Neste artigo, exploramos as diversas funcionalidades do Bs4Dash e como ele pode ser utilizado para criar dashboards interativos e visualmente atraentes no R. Vimos como o pacote permite a personalização de temas, incluindo a modificação de cores, fontes, e outros elementos visuais, o que é essencial para alinhar o design do dashboard à identidade visual da sua organização. Também discutimos a integração com outros pacotes populares, como plotly, DT, e leaflet, que ampliam as capacidades do Bs4Dash, permitindo a criação de gráficos interativos, tabelas reativas, e mapas dinâmicos.
A capacidade de adicionar ícones e animações oferece uma camada extra de usabilidade e estética, tornando o dashboard não apenas funcional, mas também intuitivo e envolvente para o usuário final. Esses recursos combinados fazem do Bs4Dash uma ferramenta poderosa para profissionais de dados, desenvolvedores e qualquer pessoa interessada em criar dashboards eficazes e personalizados.
