Shiny wellpanel width - css

library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
wellPanel(tags$div(id="pane",
fluidRow(
column(width = 6,valueBox("test","test1"),
valueBox("test","test2"))),
fluidRow(
column(width = 6,valueBox("test","test3"),
valueBox("test","test4")
))),
tags$style(type="text/css","#pane{font-size:20px;}"))
))
# )
server <- function(input, output) {}
shinyApp(ui, server)
Results
However, I only need the highlighted portion; ie wellpanel width should be as per boxes
This is just an example, I will be adding four more boxes besides with a different wellpanel.

Try using width in valueBox
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(column(width = 6, wellPanel(tags$div(id="pane",
fluidRow(valueBox(width = 6, "test","test1"), valueBox(width = 6, "test","test2")),
fluidRow(valueBox(width = 6, "test","test3"), valueBox(width = 6, "test","test4")),
tags$style(type="text/css","#pane{font-size:20px;}")
))))
)
)
server <- function(input, output) {}
shinyApp(ui, server)

Related

How to make a box in shiny app user interface

I'm trying to have a box inside my shiny app while using the shinythems library :
library(shiny)
library(DT)
library(shinythemes)
library(shinydashboard)
ui <- fluidPage(
theme = shinytheme("lumen"),
navbarPage("test theme",
tabPanel("tab1",
mainPanel(width = 12,
fluidRow(
box(width=6,title = "title",status = "navy", solidHeader = TRUE,
dataTableOutput(outputId = "tab"))))
))
)
)
Server <- function(input, output,session){
output$tab = renderDataTable(mtcars)
}
shinyApp(ui, server)
But it does not work as I expected !
I was hoping to get something like :
I tried the titlePanel as well but it did not work !
I don't believe you can mix-n-match Shiny fluidPage, shinythemes & elements from shinydashboard just like that. For box to properly work it needs shinydashboard CSS and to include this you'd normally use
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody()
)
layout instead of fluidPage() / fixedPage() Shiny layouts.
Though.. there's shinyWidgets::useShinydashboard() :
library(DT)
library(shiny)
library(shinythemes)
library(shinydashboard)
library(shinyWidgets)
ui <- fluidPage(
theme = shinytheme("lumen"),
shinyWidgets::useShinydashboard(),
navbarPage("test theme",
tabPanel("tab1",
mainPanel(width = 12,
fluidRow(
box(width = 12,
title = "title", status = "warning", solidHeader = TRUE,
dataTableOutput(outputId = "tab")
)
)
)
)
)
)
server <- function(input, output, session) {
output$tab <- renderDataTable(mtcars)
}
shinyApp(ui, server)
DT might not be the best example here as it requires some setup for responsiveness (it doesn't respect box boundaries and box(width = 6, ...) just draws over half of the table).

If I use the function includeHTML in shiny, javascript based graphing packages dont work

Once I add an HTML document in my shiny app my graphs stop populating. I am using bs4dash but shinydashboard also has the exact same issue.
Below is my code as well as a screenshot of what is happening.
Code before i add HTML document
Ui
library(shiny)
library(bs4Dash)
library(highcharter)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
)
),
fluidRow(
box(
#width = 12,
#includeHTML("first.html")
)
)
)
)
Server
server <- function(input, output) {
a = rnorm(100)
output$plot1 = renderPlotly({
plot_ly(x = ~a, type = "histogram")
})
}
Now when i remove the hastags to display my HMTL document. My graph all of a sudden disappears.
Ui
library(shiny)
library(bs4Dash)
library(highcharter)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
)
),
fluidRow(
box(
width = 12,
includeHTML("first.html")
)
)
)
)
Server
server <- function(input, output) {
a = rnorm(100)
output$plot1 = renderPlotly({
plot_ly(x = ~a, type = "histogram")
})
}
I would like to have the graph still show. What is going wrong in the code. Thank you
I cannot reproduce your problem. I just observed that your fluidRow is the fourth parameter of dashboardPage which, however, expects a dashboardControlbar. Both, putting the fluidRow into dashboardBody or wrapping it in a call to dashboardControlbar works for me.
So either it is your first.html or indeed "just" the missing dashboardControlbar.
first.html
<span>I am an external HTML</span>
app.R
library(shiny)
library(bs4Dash)
library(highcharter)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
),
fluidRow(
box(
width = 12,
includeHTML("first.html")
)
)
)
)
ui2 <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
)
),
dashboardControlbar(
fluidRow(
box(
width = 12,
includeHTML("first.html")
)
)
)
)
server <- function(input, output) {
a = rnorm(100)
output$plot1 = renderPlotly({
plot_ly(x = ~a, type = "histogram")
})
}
shinyApp(ui, server)
## shinyApp(ui2, server) ## works likewise
Screenshots

Place text in the middle of shinydashboard body

How can you place text exactly in the middle between left and right end of shiny dashboard body at this height?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = T),
dashboardBody(
fluidRow(
column(5,),
column(4,
span(h2(strong("Covid-19 Situation Dashboard"), style = 'font-size:30px;color:#6cbabf;')))
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Use align = "center", as shown below.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = T),
dashboardBody(
fluidRow(
#column(5,),
column(12,
span(h2(strong("Covid-19 Situation Dashboard"), align = "center", style = 'font-size:30px;color:#6cbabf;')))
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)

Set font size and color in title of shinydashboard box

How can I change the font size and color of title in shinydashboard box()?
library(shiny)
library(plotly)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width=12)),
fluidRow(
box(title="Title")
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
r
You can use a header tag and style option within it.
library(shiny)
library(plotly)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width=12)),
fluidRow(
box(title=h3("Title", style = 'font-size:42px;color:blue;'))
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)

How to use R package "formattable" in shiny dashboard?

Below is the code I have written. I am not able to use formattable in my shiny. formattable helps in formatting the tables and improves the visualization also.
library("shinydashboard")
library("shiny")
library("formattable")
body <- dashboardBody(
fluidRow(
column(width = 12,
box(tableOutput(formattable(test.table, list())))
)
)
)
ui <- dashboardPage(
dashboardHeader(title = "Column layout"),
dashboardSidebar(),
body
)
server <- function(input, output) {
test.table <- data.frame(lapply(1:8, function(x) {1:10}))
output$table <- renderTable({test.table})
}
shinyApp(ui = ui, server = server)
you have to use renderFormattable, formattableOutput and formattable, all three for it to work
library("shinydashboard")
library("shiny")
library("formattable")
body <- dashboardBody(
fluidRow(
column(width = 12,
box(formattableOutput("table"))
)
)
)
ui <- dashboardPage(
dashboardHeader(title = "Column layout"),
dashboardSidebar(),
body
)
server <- function(input, output) {
test.table <- data.frame(lapply(1:8, function(x) {1:10}))
output$table <- renderFormattable({formattable(test.table, list())})
}
shinyApp(ui = ui, server = server)

Resources