How to make a gradient box closable in shiny - shiny

Now intially the box is open instead of that i need the box should be closed.
The box should't open untill i click on the collapsible
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
gradientBox(
title = "My gradient Box",
icon = "fa fa-th",
gradientColor = "teal",
boxToolSize = "sm",
footer = sliderInput(
"obs",
"Number of observations:",
min = 0, max = 1000, value = 500
),
"This is a gradient box"
)
),
title = "Description Blocks"
),
server = function(input, output) { }
)

There doesn't seem to be an argument in gradientBox that enables the box to be collapsed on startup.
Since {shinydashboardPlus} version 2.0.0 gradientBox has been removed and can use box instead. This has the argument collapsed which when true will start collapsed:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(
"This is a gradient box",
title = "My gradient Box",
gradient = TRUE,
background = "teal",
collapsible = TRUE,
collapsed = TRUE,
boxToolSize = "sm",
footer = sliderInput(
"obs",
"Number of observations:",
min = 0,
max = 1000,
value = 500
)
)
),
title = "Description Blocks"
)
shinyApp(
ui = ui,
server = function(input, output) { }
)
If you cannot upgrade {shinydashboardPlus} then you can use boxPlus. It won't be able to use the gradient, but will still be able to start collapsed.

Related

Shinydashboard. How to unselect menuItem?

I have this code:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(userOutput("user")),
sidebar = dashboardSidebar(shinyjs::useShinyjs(),uiOutput("sidebarpanel")),
body = dashboardBody(uiOutput("body")),
title = "DashboardPage"
),
server = function(input, output) {
output$user <- renderUser({
dashboardUser(
name = "Divad Nojnarg",
image = "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
title = "shinydashboardPlus",
subtitle = "Author",
footer = p("The footer", class = "text-center"),
fluidRow(
actionButton("personalInfo","Personal Info")
)
)
})
observeEvent(input$personalInfo, {
output$body <- renderUI({h4("Personal Info Dahsboard (no menuItem)")})
})
output$sidebarpanel <- renderUI({
sidebarMenu(id="tabs",
menuItem("Dashboard 1", tabName = "dashboard1", icon = icon("dashboard"))
,menuItem("Dashboard 2", tabName = "dashboard2", icon = icon("dashboard"))
)
})
output$body <- renderUI({
tabItems(
tabItem(tabName ="dashboard1",
fluidRow(box(width = 12, h4("Dashboard 1 (menuItem)"))))
,tabItem(tabName ="dashboard2",
fluidRow(box(width = 12, h4("Dashboard 2 (menuItem)"))))
)
})
}
)
I would like to do two things:
First: When I click on "Personal Info" button, then, prevent the menuItem to be shadowed (I assume I need to remove the class "selected" or "active" or something like that)
Second: I want to fix this: After pressing "Personal Info" button, the menuItems do not work:
As already shown in my earlier answer here we can use a hidden menuItem to modify the body content independent from the visibly selected menuItem.
Furthermore, I'd recommend to stop using renderUI in this scenario. In general it is slower to re-render a UI element instead of updating an existing element (here we can switch to the hidden menuItem via updateTabItems - however, this applies also to e.g. using updateSelectInput instead of renderUI({selectInput(...)})). In this context you should also question whether you really need the to create the dashboardUser on the server side.
If you really need a server side generated dashboardSidebar you still should not use renderUI - There are the renderMenu() / sidebarMenuOutput() functions available for this. Please see the related docs here.
library(shiny)
library(shinyjs)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(userOutput("user")),
sidebar = dashboardSidebar(shinyjs::useShinyjs(),
sidebarMenu(id="tabs",
menuItem("Tab 1", tabName = "tab1", icon = icon("dashboard")),
menuItem("Tab 2", tabName = "tab2", icon = icon("dashboard")),
hidden(menuItem("Personal Tab", tabName = "personal_tab", icon = icon("dashboard")))
)),
body = dashboardBody(useShinyjs(),
tabItems(
tabItem(tabName ="tab1",
fluidRow(box(width = 12, h4("Tab 1 (menuItem)")))),
tabItem(tabName ="tab2",
fluidRow(box(width = 12, h4("Tab 2 (menuItem)")))),
tabItem(tabName ="personal_tab",
fluidRow(box(width = 12, h4("Personal Info Dahsboard (no menuItem)"))))
)
),
title = "DashboardPage"
),
server = function(input, output, session) {
output$user <- renderUser({
dashboardUser(
name = "Divad Nojnarg",
image = "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
title = "shinydashboardPlus",
subtitle = "Author",
footer = p("The footer", class = "text-center"),
fluidRow(
actionButton("personalInfo","Personal Info")
)
)
})
observeEvent(input$personalInfo, {
shinydashboard::updateTabItems(session, inputId = "tabs", selected = "personal_tab")
})
}
)

Layout in R Shiny app that include R Markdown file

I am facing a problem with the layout in R Shiny when I use the R Markdown file inside it I get the final result in a wired layout size (small and only in the middle of the screen ) as shown in the following photo:
Attached to you the code:
library(shiny)
library(shinydashboard)
library(knitr)
ui <-
dashboardPage(
dashboardHeader(title ='Virtual Excursion'),
dashboardSidebar( sliderTextInput(
inputId = "mySliderText",
label = "Story line",
grid = TRUE,
force_edges = TRUE,
choices = c('1','2')
)
),
dashboardBody(
fluidRow(
column(9,
box(
title = "Operations ",
closable = FALSE,
width = 9,
status = "primary",
solidHeader = FALSE,
collapsible = TRUE,
uiOutput("operations")
)
)
),
fluidRow(
column(9,
box(
title = "Challenges",
closable = FALSE,
width = 9,
status = "primary",
solidHeader = FALSE,
collapsible = TRUE,
uiOutput("challenges")
)
)
)
)
)
server <- function(input, output,session){
output$operations <- renderUI({
req(input$mySliderText==1)
HTML(markdown::markdownToHTML(knit('trial1.rmd', quiet = TRUE)))
})
}
shinyApp(ui = ui, server = server)
Could you please guide me on how to fix this problem!
The problem is that you are including an full html file within an html page. The conflicts between the two pages is causing the display problem. You need to output an html fragment which excludes the heading. Add fragment.only = TRUE to your markdown render function.
HTML(markdown::markdownToHTML(knit("trial1.rmd", quiet=T),fragment.only = T))
You can also add output: html_fragment in your yaml section inside the rmd file for good measure.

Tabs of the menuItem, in Shinydashboard, not working when put items inside

Lets take the example of the reference: https://rstudio.github.io/shinydashboard/structure.html#sidebar-menu-items-and-tabs. When put more items in the menuItem(), your associate tab don't works anymore. I tried in this simple modification in example below and just shown the widgets' tab:
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("Dashboard",
tabName = "dashboard",
icon = icon("dashboard"),
selected = TRUE,
startExpanded = TRUE,
numericInput("num1",
"Put the First Number",
value = 1,
min = 0),
numericInput("num2",
"Put the Second Number",
value = 1,
min = 0)
),
menuItem("Widgets",
icon = icon("th"),
tabName = "widgets")
)
)
body <- dashboardBody(
tabItems(
tabItem(tabName = "dashboard",
h2("Dashboard tab content"),
fluidRow(
valueBoxOutput("box1", width = 6),
valueBoxOutput("box2", width = 6)
)
),
tabItem(tabName = "widgets",
h2("Widgets tab content")
)
)
)
# Put them together into a dashboardPage
ui <- dashboardPage(
skin = "green",
dashboardHeader(title = "Example"),
sidebar,
body
)
server <- function(input, output){
output$box1 <- renderValueBox({
valueBox(input$num1,
"First Number",
color = "aqua",
icon = icon("chart-line"))
})
output$box2 <- renderValueBox({
valueBox(input$num2,
"Second Number",
color = "aqua",
icon = icon("chart-line"))
})
}
shinyApp(ui, server)
That is because childfull menuItem behaves differently as noted here. Therefore, you need to define a menuItem or a menSubItem within that dashboard page so that your desired content can be displayed.
Try this
sidebarMenu(id = "tabs",
menuItem("Dashboard",
tabName = "dashboard",
icon = icon("tachometer-alt"),
selected = TRUE,
startExpanded = TRUE,
#icon = icon(fontawesome:::fa_tbl[[1]][505]),
menuItem("Sub-item 1", tabName = "subitem1"),
### menuSubItem("Sub-item 1", tabName = "subitem1"), ## it can be menuSubItem instead of menuItem
numericInput("num1",
"Put the First Number",
value = 1,
min = 0),
numericInput("num2",
"Put the Second Number",
value = 2,
min = 0)
),
menuItem("Widgets",
icon = icon("th"),
tabName = "widgets")
)
)
body <- shinydashboard::dashboardBody(
tabItems(
tabItem(tabName = "subitem1",
h2("Sub item1 tab content in Dashboard"),
fluidRow(
valueBoxOutput("box1", width = 6),
valueBoxOutput("box2", width = 6)
)
),
tabItem(tabName = "widgets",
h2("Widgets tab content")
)
)
)
# Put them together into a dashboardPage
ui <- shinydashboard::dashboardPage(
skin = "green",
shinydashboard::dashboardHeader(title = "Example"),
sidebar,
body
)
server <- function(input, output, session){
output$box1 <- renderValueBox({
valueBox(input$num1,
"First Number",
color = "aqua",
icon = icon("chart-line"))
})
output$box2 <- renderValueBox({
valueBox(input$num2,
"Second Number",
color = "aqua",
icon = icon("chart-line"))
})
observe({print(input$tabs)})
}
shinyApp(ui, server)

Change position of icon in valueBox

Suppose you have a simple valueBox() from the shinydashboard package:
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
fluidRow(width = 12,
valueBoxOutput("box")
)
)
)
)
server <- function(input, output) {
output$box<-renderValueBox(
valueBox(
value = "ValueBox Title",
subtitle = tagList("Some information about the box.",
p(""),
"Some more information about the box.",
p(""),
"Even more information about the box.",
shinyWidgets::progressBar(id = "test", value = 10, total = 10, display_pct = FALSE, striped = FALSE, status = "danger")
),
icon = icon("user-check"),
color = "green"
))
}
app<-shinyApp(ui = ui, server = server)
runApp(app, host="0.0.0.0",port=5050, launch.browser = TRUE)
I have added some extra information into the valueBox() like some extra subtitles and a progress bar. You'll notice, however, that the valueBox icon is aligned to the bottom right of the box, meaning that the progress bar (or other content) can get in the way of the icon. Is there a simple way to align valueBox icons to the top right of the box?
This can be done through CSS.
Add tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))) to the body and you should be good to go.
Full code:
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
tags$head(tags$style(HTML('.small-box .icon-large {top: 5px;}'))),
fluidRow(width = 12,
valueBoxOutput("box")
)
)
)
)
server <- function(input, output) {
output$box<-renderValueBox(
valueBox(
value = "ValueBox Title",
subtitle = tagList("Some information about the box.",
p(""),
"Some more information about the box.",
p(""),
"Even more information about the box.",
shinyWidgets::progressBar(id = "test", value = 10, total = 10, display_pct = FALSE, striped = FALSE, status = "danger")
),
icon = icon("user-check"),
color = "green"
))
}
app<-shinyApp(ui = ui, server = server)
runApp(app, host="0.0.0.0",port=5050, launch.browser = TRUE)

How to add tooltips to html widgets in shiny dashboard

I am struggling to add tooltips to html widgets in Rshiny. bs_embed_tooltip from library(flexdashboard) does the job for some shiny widgets but returns the following error when it is applied to an html widget:
Error in .tag_validate(.) :
tag is not a shiny.tag - tag must be generated using htmltools or shiny
Here is my minimal working example (modifying example code from shinydashboard):
## app.R ##
library(shinydashboard)
library(flexdashboard)
library(bsplus) # For shiny tooltips
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
# Boxes need to be put in a row (or column)
fluidRow(
box(plotOutput("plot1", height = 250) %>%
bs_embed_tooltip("This is the output chart.", placement = 'bottom')
),
box(title = "Controls",
sliderInput("slider", "Number of observations:", 1, 100, 50) %>%
bs_embed_tooltip("Use this slider to select the number of observations.", placement = 'bottom')
),
box(title = "Guage",
gaugeOutput("guage_value") # %>% bs_embed_tooltip("This gauge shows the input value from the slider.", placement = 'bottom')
)
)
)
)
server <- function(input, output) {
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
output$guage_value <- renderGauge({
gauge(input$slider, min = 0, max = 100, symbol = '', gaugeSectors(
danger = c(0, 30), warning = c(31, 70), success = c(71, 100) ))
})
}
shinyApp(ui, server)
Your help to get around the code in the comment would be much appreciated.
Try with this new box for the gauge-box:
box(title = "Guage",
gaugeOutput("guage_value"),
bsTooltip(id = "guage_value", title = "This gauge shows the input value from the slider.", placement = "bottom")
)