Estados y completar la UI
Uno de los principios de un buen diseño de UI dice que debemos usar los colores de forma intuitiva. Por suerte, shinydashboard permite establecer estados en algunos elementos de shinydashboard. Se hace añadiendo un argumento status a los elementos adecuados, como box(), notificationItem(), dropdownMenu(), aunque estas dos últimas funciones no se tratan en este curso.
Configurar status = "success" aplica un color verde, status = "danger" aplica un color rojo, status = "warning" es naranja, y así sucesivamente.
Este ejercicio forma parte del curso
Creación de paneles con shinydashboard
Instrucciones del ejercicio
- Cambia el estado de la primera caja en la tercera fila a "success".
- Revisa las líneas 28 a 33, donde se especifican los valores de los
ValueBox()de la segunda fila, y haz lo mismo para los de la tercera fila. - Define la salida del objeto de
plotlyque se llamó "line" en el paso anterior. - Renderiza el shinydashboard usando el
uiy elserverque acabas de definir.
ejercicio interactivo práctico
Prueba este ejercicio completando este código de ejemplo.
header <- dashboardHeader(title = "Portfolio information")
sidebar <- dashboardSidebar(disable = TRUE)
body <- dashboardBody(
fluidRow(box(selectInput("stock", "Stock name", choices = c("AAPL", "DIS")))),
fluidRow(valueBoxOutput("name", width = 2),
valueBoxOutput("open", width = 2),
valueBoxOutput("close", width = 2),
valueBoxOutput("high", width = 2),
valueBoxOutput("low", width = 2),
valueBoxOutput("vol", width = 2)),
# Change status to "success"
fluidRow(box("This stock is in your portfolio", width = 2, status = "danger"),
valueBoxOutput("open_pct", width = 2),
valueBoxOutput("close_pct", width = 2),
valueBoxOutput("high_pct", width = 2),
valueBoxOutput("low_pct", width = 2),
valueBoxOutput("vol_pct", width = 2)),
fluidRow(box(plotlyOutput("line")),
box(radioButtons("feature", "Features",
choiceNames = c("Open", "Close", "High", "Low", "Volume"),
choiceValues = c("open", "close", "high", "low", "volume")) ) )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
output$name <- renderValueBox(valueBox("Stock name", get_name(input$stock), color = "black"))
output$open <- renderValueBox(valueBox("Open price", most_recent(input$stock, "open"), color = "black"))
output$close <- renderValueBox(valueBox("Close price", most_recent(input$stock, "close"), color = "black"))
output$high <- renderValueBox(valueBox("High", most_recent(input$stock, "high"), color = "black"))
output$low <- renderValueBox(valueBox("Low", most_recent(input$stock, "low"), color = "black"))
output$vol <- renderValueBox(valueBox("Volume", most_recent(input$stock, "volume"), color = "black"))
# Specify the values for ValueBoxes in the third row
output$open_pct <- ___(valueBox("Change", paste0(most_recent_pct(input$stock, "open"),"%"), color = box_color(most_recent_pct(input$stock, "open"))))
___ <- ___(___("Change", paste0(most_recent_pct(input$stock, "close"),"%"), color = box_color(most_recent_pct(input$stock, "close"))))
___ <- ___(___("Change", paste0(most_recent_pct(input$stock, "high"),"%"), color = box_color(most_recent_pct(input$stock, "high"))))
___ <- ___(___("Change", paste0(most_recent_pct(input$stock, ___),"%"), color = box_color(most_recent_pct(input$stock, ___))))
___ <- ___(___("Change", paste0(most_recent_pct(___, ___),"%"), color = box_color(most_recent_pct(___, ___))))
# Plotly object in the fourth row
___ <- ___(plot_line(input$stock, input$feature))
}
# Render the dashboard using shinyApp()
___