I have created a shiny application and there is no extra spacing between the tabs which I have rendered to the UI. I am using bs4dash shiny framework for the UI. Is this issue related to the this framework?
code :
tabsetPanel(type = "tabs",
tabPanel(title = "abc",
rHandsontableOutput("contentsl"),tags$style(type="text/css", "#contentsl th {font-weight:bold;}")),
tabPanel(title = "fgh",
rHandsontableOutput("content1"),tags$style(type="text/css", "#content1 th {font-weight:bold;}")),
tabPanel(title = "hjk",
rHandsontableOutput("content2"),tags$style(type="text/css", "#content2 th {font-weight:bold;}")),
tabPanel(title="pqr",rHandsontableOutput("prem"),tags$style(type="text/css", "#prem th {font-weight:bold;}")),
tabPanel(title="Scatter Plot View",plotlyOutput("pl9",width = "100%",height = "600px")),
tabPanel(title = "Box Plot View",plotlyOutput("pl8",width = "100%",height = "600px")),
tabPanel(title = "Plot Data",rHandsontableOutput("pl.data",width = "100%",height = "100%"),tags$style(type="text/css","#pl.data th {font-weight:bold;}"))
))
Your code works fine for me if I implement it in a basic Shiny app (automatically created). Here's the code (this is not really an answer but it can't fit in a comment so if it is useless I will remove it):
#
# This is a Shiny web application. You can run the application by clicking
# the 'Run App' button above.
#
# Find out more about building applications with Shiny here:
#
# http://shiny.rstudio.com/
#
library(shiny)
library(rhandsontable)
library(plotly)
# Define UI for application that draws a histogram
ui <- fluidPage(
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Show a plot of the generated distribution
mainPanel(
tabsetPanel(
type = "tabs",
tabPanel(
title = "abc",
rHandsontableOutput("contentsl"),
tags$style(type = "text/css", "#contentsl th {font-weight:bold;}")
),
tabPanel(
title = "fgh",
rHandsontableOutput("content1"),
tags$style(type = "text/css", "#content1 th {font-weight:bold;}")
),
tabPanel(
title = "hjk",
rHandsontableOutput("content2"),
tags$style(type = "text/css", "#content2 th {font-weight:bold;}")
),
tabPanel(
title = "pqr",
rHandsontableOutput("prem"),
tags$style(type = "text/css", "#prem th {font-weight:bold;}")
),
tabPanel(title = "Scatter Plot View", plotlyOutput(
"pl9", width = "100%", height = "600px"
)),
tabPanel(title = "Box Plot View", plotlyOutput(
"pl8", width = "100%", height = "600px"
)),
tabPanel(
title = "Plot Data",
rHandsontableOutput("pl.data", width = "100%", height = "100%"),
tags$style(type = "text/css", "#pl.data th {font-weight:bold;}")
)
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
Related
Taking the example from the shinyBS website, I would like to add a boxdropdown menu with an element which - when clicked/hovered over - should display some information. I followed the example but somehow the info is not displayed.
library(shiny)
library(shinyBS)
library(shinydashboardPlus)
shinyApp(
ui =
fluidPage(
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",
"right", options = list(container = "body"))
),
mainPanel(
box(
title = "Plot",
plotOutput("distPlot"),
solidHeader = T,
dropdownMenu = boxDropdown(
boxDropdownItem(id = "showDescription", "Description", icon = icon("info-circle")),
icon = icon("bars")
)
)
)
)
),
server =
function(input, output, session) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
addPopover(session, "showDescription", "Data", content = paste0("blablabla"), trigger = 'click')
}
)
I have a shiny app with fileInput.
I created a reset button to clear the file from the fileInput. I know the file is cached in the shiny memory, but I just want to reset the FileInput object to look like how it originally did before I uploaded the file, when I press the reset button.
I googled a bit and found most people get around this problem using shinyjs, but shinyjs does not work in the R package I am creating so I am trying to find a work around.
I insert a executable code below!
library(shiny)
library(shinythemes)
ui <- fluidPage(
titlePanel("Old Faithful Geyser Data"),
fileInput(inputId = "ABC", label = "Input File", multiple = FALSE, accept = NULL,
width = "20%", buttonLabel = "Browse...",
placeholder = "You didn't choose any files to test, so select beside"),
sidebarLayout(
sidebarPanel(h4("Select the best the number of bins"),
br(),
br(),
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
actionButton("reset", "Reset"),
),
mainPanel(
plotOutput("distPlot")
)
)
)
server <- function(input, output,session) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
observeEvent(input$reset, {
updateSliderInput(session,"bins",value = 1)
})
}
shinyApp(ui = ui, server = server)
One way would be to use fileInput dynamically from server side, so when the reset button is clicked you can reload the input.
library(shiny)
library(shinythemes)
ui <- fluidPage(
titlePanel("Old Faithful Geyser Data"),
uiOutput('file'),
sidebarLayout(
sidebarPanel(h4("Select the best the number of bins"),
br(),
br(),
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
actionButton("reset", "Reset"),
),
mainPanel(
plotOutput("distPlot")
)
)
)
server <- function(input, output,session) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
output$file <- renderUI({
fileInput(inputId = "ABC", label = "Input File", multiple = FALSE, accept = NULL,
width = "20%", buttonLabel = "Browse...",
placeholder = "You didn't choose any files to test, so select beside")
})
observeEvent(input$reset, {
updateSliderInput(session,"bins",value = 1)
output$file <- renderUI({
fileInput(inputId = "ABC", label = "Input File", multiple = FALSE, accept = NULL,
width = "20%", buttonLabel = "Browse...",
placeholder = "You didn't choose any files to test, so select beside")
})
})
}
shinyApp(ui = ui, server = server)
I'm just starting using R and Shiny App and I'm a bit confused about how to achieve what I'm trying to do. I want to change the UI of my Shiny App. As a C# developer, I work with HTML/CSS, AdminLTE and so on. I can't find a proper documentation how to change the UI in a Shiny App.
What I want to achieve in the UI is something like the following image:
First, I removed the sidebar. Now, my problem is to box the UI. In the header, I want to add a dropdown menu with few options. Then, I want in the middle of the page to have a panel with 2 column: in the first column first row I desire to see the graph generate by R, then same text around it to explain the graph.
On top of that, I want to change the style for example of tabs or buttons.
After 2 days of work, I wrote this code but it is very far from what I want to achieve.
library(shiny)
library(shinydashboard)
# Define UI for application that draws a histogram
ui <- navbarPage(
"Test",
tabPanel(
"Introduction",
titlePanel(
div(
windowTitle = "Test window"
)
),
div(class = "my-class",
h3("LAI287 basal insulin study"),
p("Lorem ipsum dolor sit amet..."),
p("Lorem ipsum dolor sit amet..."),
actionButton(
inputId = "btnStart",
label = "Start analysis",
className = "btn-primary"
)
)
),
tabPanel(
"Attribute specification"
),
tabPanel(
dropdownMenu(type = "notifications",
notificationItem(
text = "5 new users today",
icon("users")
),
notificationItem(
text = "12 items delivered",
icon("truck"),
status = "success"
),
notificationItem(
text = "Server load at 86%",
icon = icon("exclamation-triangle"),
status = "warning"
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
The result of this code is in the following screenshot. The only dropdown I found was for messages or notifications.
I know AdminLTE quite well but I don't understand how to write the code for Shiny App. Do you have any idea or suggestion how I can implement this UI? Is there any good tutorial I can read?
Update
I found some documentation on RStudio Shiny dashboard. First, I don't understand the difference between dashboardPage and navbarPage. Can I add a navbarPage to a dashboardPage?
From the documentation, I added this code:
box(
title = "Histogram", status = "primary", solidHeader = TRUE,
collapsible = TRUE,
plotOutput("plot3", height = 250)
),
box(
title = "Inputs", status = "warning", solidHeader = TRUE,
"Box content here", br(), "More box content",
sliderInput("slider", "Slider input:", 1, 100, 50),
textInput("text", "Text input:")
)
and I expect something like
but my result is like that (thanks Jan for the menu)
I saw on the other page of the documentation that it is possible to add
dashboardPage(skin = "blue")
but in my case I don't have a dashboardPage.
Are you aware of the navbarMenu function? You can add menu items to the navbarPage with it:
navbarPage("App Title",
tabPanel("Plot"),
navbarMenu("More",
tabPanel("Summary"),
"----",
"Section header",
tabPanel("Table")
)
)
Layouting can be done with fluid layouts, e.g.
fluidRow(
column(width = 4,
"4"
),
column(width = 3, offset = 2,
"3 offset 2"
)
See the layout guide for the necessary details.
If you are familiar with AdminLTE then I strongly recommend using bs4Dash. It is a very robust package that allows for the use of boxes and other features that are regularly a part of AdminLTE (including Bootstrap 4). But the core of the language is still Shiny, so you may need to work through a few basic examples before attempting anything with greater complexity.
You can change colors, font-sizes, etc. in bs4Dash by following the instructions on this page.
For a demo of what is possible, see here.
I've provided a very basic example at the bottom of this answer.
Otherwise adding a dropdown navigation in bs4Dash is a bit tricky, and will require a combination of Javascript, CSS, and HTML. Luckily, you can modify all of these things.
Good luck!
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
header = dashboardHeader(
leftUi = tagList(
dropdownMenu(
badgeStatus = "info",
type = "notifications",
notificationItem(
inputId = "notice1",
text = "Put text here!",
status = "danger"
)
),
dropdownMenu(
badgeStatus = "info",
type = "tasks",
taskItem(
inputId = "notice2",
text = "My progress",
color = "orange",
value = 10
)
)
)
),
dashboardSidebar(disable = T),
body = dashboardBody(
fluidRow(
column(width = 8,
box(width = NULL, title = "Old Faithful Geyser Data",
collapsible = F,
wellPanel( sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)),
plotOutput("distPlot")
),
box(width = NULL, title = NULL, collapsible = F,
fluidRow(
column(width = 5,
tags$img(src = "https://i.stack.imgur.com/EslMF.png", width = '100%')
),
column(width = 7,
tags$h4("Card Title"),
tags$p("Some text here")
)
)
)
),
column(width = 4,
box(width = NULL, title = "Header", status = "info", collapsible = F),
box(width = NULL, title = "Header", status = "success", collapsible = F),
box(width = NULL, title = "Header", status = "secondary", collapsible = F)
)
)
),
controlbar = dashboardControlbar(
collapsed = FALSE,
div(class = "p-3", skinSelector()),
pinned = TRUE
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
shinyApp(ui = ui, server = server)
How to make a menutem badge to align differently than default?
in the shinyUI.:
menuItem("Test", tabName = "test", icon = icon("line-chart"),badgeLabel = "2nd", badgeColor = "green")
Full example:
library(shiny)
library(shinydashboard)
# Default shiny
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
sidebarMenu(
menuItem("Test", tabName = "test", icon = icon("line-chart"),
badgeLabel = "2nd", badgeColor = "green")
)),
dashboardBody(
tabItems(
tabItem(tabName = "test",
box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
# Show a plot of the generated distribution
plotOutput("distPlot")
)
)
)))
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
In the browser inspecting it shows the following code/:
<small class="badge pull-right bg-green">2nd</small>
test pic
I need:
<small class="badge center-block bg-green">2nd</small>
desired pic
Any idea?
You can use css as follows:
tags$style(type = 'text/css',".badge{min-width: 200px;}")
In your code it would come something like this:
library(shiny)
library(shinydashboard)
# Default shiny
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
##The added css
tags$style(type = 'text/css',".badge{min-width: 200px;}"),
sidebarMenu(
menuItem("Test", tabName = "test", icon = icon("line-chart"),
badgeLabel = "2nd", badgeColor = "green")
)),
dashboardBody(
tabItems(
tabItem(tabName = "test",
box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
# Show a plot of the generated distribution
plotOutput("distPlot")
)
)
)))
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
You get something like this:
Hope it helps!
I am trying to insert footer in shiny app dashboard in bottom and centre of the page. But it is coming in the centre of the body. Also I am unable to place it in the bottom of the page
Here is my code:
library(shiny)
library(shinydashboard)
library(DT)
library(ggvis)
library(shiny)
ui <- dashboardPage(
dashboardHeader(title = "Dashboard"),
dashboardSidebar(sidebarMenu(
menuItem("Instructions", tabName = "genIns", icon = icon("info-circle")),
menuItem("Data", tabName = "data", icon = icon("table"))
)),
dashboardBody(
tabItems(
# First tab content
tabItem(tabName = "genIns",
fluidPage(
titlePanel("General Instruction will go here"))
),
# Second tab content
tabItem(tabName = "data",
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
plotOutput("distPlot")
)
),
tags$footer("My footer", align = "center")
)
)
server.ui
shinyServer(function(input, output, session) {
output$distPlot <- renderPlot({
x <- faithful[, 2] # Old Faithful Geyser data
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
})
You can wrap dashbordPage into tagList and then place tags$footer as a second argument to tagList. You can also further modify the style of your footer with css.
Full example:
library(shiny)
library(shinydashboard)
library(DT)
library(ggvis)
library(shiny)
ui <- tagList(
dashboardPage(
dashboardHeader(title = "Dashboard"),
dashboardSidebar(sidebarMenu(
menuItem("Instructions", tabName = "genIns", icon = icon("info-circle")),
menuItem("Data", tabName = "data", icon = icon("table"))
)),
dashboardBody(
tabItems(
# First tab content
tabItem(tabName = "genIns",
fluidPage(
titlePanel("General Instruction will go here"))
),
# Second tab content
tabItem(tabName = "data",
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
plotOutput("distPlot")
)
)
)
),#end dashboardPage
tags$footer("My footer", align = "center", style = "
position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
color: white;
padding: 10px;
background-color: black;
z-index: 1000;")
)#end tagList
server <- shinyServer(function(input, output, session) {
output$distPlot <- renderPlot({
x <- faithful[, 2] # Old Faithful Geyser data
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
})
shinyApp(ui, server)