have anyone seen something that we can call horizontalProgress in Shiny? I found function verticalProgress which is almost perfect for my, unfortunately I need to transposition it. Maybe how to help my? Maybe using CSS?
if (interactive()) {
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
verticalProgress(
value = 20,
status = "danger",
size = "xs",
height = "60%"
)
),
rightsidebar = rightSidebar(),
title = "Right Sidebar"
),
server = function(input, output) { }
)
}
You can use transform in the style :
div(style="display: inline-block; transform: rotate(10deg);",verticalProgress(
value = 20,
status = "danger",
size = "xs",
height = "60%"
))
Alternatively you can use shinyWidgets library which has progressBar
if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
shinyApp(
ui = dashboardPagePlus(
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
column(2,
progressBar(id = "pb6", value = 20, status = "danger", size = "xs")
)
),
rightsidebar = rightSidebar(),
title = "Right Sidebar"
),
server = function(input, output) { }
)
}
Related
How can I change the size of an icon() in shiny dashboard?
library(shiny)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(skin = "purple",
options = list(sidebarExpandOnHover = TRUE),
header = dashboardHeader(
controlbarIcon = shiny::icon("filter")
),
sidebar = dashboardSidebar(),
body = dashboardBody(
tags$style(".fa-filter {color:red;size:26px}"),
),
controlbar = dashboardControlbar(
id = "controlbar",
collapsed = FALSE,
overlay = TRUE,
skin = "light",
pinned = T
)
),
server = function(input, output, session) {
}
)
You have to set the CSS property font-size instead of size:
library(shiny)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
skin = "purple",
options = list(sidebarExpandOnHover = TRUE),
header = dashboardHeader(
controlbarIcon = shiny::icon("filter")
),
sidebar = dashboardSidebar(),
body = shinydashboard::dashboardBody(
tags$style(".fa-filter {color:red; font-size:26px}"),
),
controlbar = dashboardControlbar(
id = "controlbar",
collapsed = FALSE,
overlay = TRUE,
skin = "light",
pinned = T
)
),
server = function(input, output, session) {
}
)
#>
#> Listening on http://127.0.0.1:6563
Below please find two alternative ways not requiring a separate style tag:
library(shiny)
library(fontawesome)
shinyApp(
basicPage(
shiny::icon("filter", class = "fa-3x"),
fontawesome::fa("filter", height = "3em")
),
server = function(input, output, session) {
}
)
Furthermore, please check this related article.
Using your example:
library(shiny)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
skin = "purple",
options = list(sidebarExpandOnHover = TRUE),
header = dashboardHeader(
controlbarIcon = shiny::icon("filter", class = "fa-3x", style = "color:red;")
# controlbarIcon = fontawesome::fa("filter", height = "3em", fill = "red")
),
sidebar = dashboardSidebar(),
body = shinydashboard::dashboardBody(),
controlbar = dashboardControlbar(
id = "controlbar",
collapsed = FALSE,
overlay = TRUE,
skin = "light",
pinned = T
)
),
server = function(input, output, session) {
}
)
How can someone change the color and icon of the gear of shinydashboard dashboardControlBar?
library(shiny)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(
#tags$style(".fa-thumbtack {color:rgb(255,0,0)}"), ## this changes only the horizontal pin color
tags$head(tags$style(type = "text/css", ".fa-thumbtack {color:rgb(255,0,0) !important;}"))
),
controlbar = dashboardControlbar(
id = "controlbar",
collapsed = FALSE,
overlay = TRUE,
skin = "light",
pinned = T
)
),
server = function(input, output, session) {
}
)
To change the color use skin = where you can set various colors: see here https://rstudio.github.io/shinydashboard/appearance.html
To change the icon of the former known "right-sidebar" now known as "controlbar" use controlbarIcon in dashboardHeader: Here we changed the gear icon with the info icon:
library(shiny)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(skin = "purple",
options = list(sidebarExpandOnHover = TRUE),
header = dashboardHeader(
controlbarIcon = shiny::icon("info")
),
sidebar = dashboardSidebar(),
body = dashboardBody(
#tags$style(".fa-thumbtack {color:rgb(255,0,0)}"), ## this changes only the horizontal pin color
tags$head(tags$style(type = "text/css", ".fa-thumbtack {color:rgb(255,0,0) !important;}"))
),
controlbar = dashboardControlbar(
id = "controlbar",
collapsed = FALSE,
overlay = TRUE,
skin = "light",
pinned = T
)
),
server = function(input, output, session) {
}
)
Here's the most basic 3 slide carousel implemented using shinydashboardPlus
The default behaviour is to show the previous/next slide chevrons. However, I can't seem to get them to appear. Why is this?
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- fluidPage(
titlePanel("Carousel Demo"),
carousel(indicators = TRUE,
id = "mycarousel",
carouselItem(
tags$img(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Slide+1")
),
carouselItem(
tags$img(src = "https://placehold.it/900x500/bbbbbb/ffffff&text=Slide+2")
),
carouselItem(
tags$img(src = "https://placehold.it/900x500/ff0000/ffffff&text=Slide+3")
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
It seems you have to use caroussel from within a dashboardPagePlus to get its default layout.
Set disable = TRUE to hide the header, and width = 0 to hide the sidebar, if you don't need them:
ui <- dashboardPagePlus(
header = dashboardHeaderPlus( disable = TRUE ),
sidebar = dashboardSidebar( width = 0 ),
body = dashboardBody(
carousel(indicators = TRUE,
id = "mycarousel",
carouselItem(
tags$img(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=Slide+1")
),
carouselItem(
tags$img(src = "https://placehold.it/900x500/bbbbbb/ffffff&text=Slide+2")
),
carouselItem(
tags$img(src = "https://placehold.it/900x500/ff0000/ffffff&text=Slide+3")
)
)
)
)
Is there a way of aligning a widget inside a shinydashboard box? For example, in the following app:
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(box(
title = "Test", width = 4, solidHeader = TRUE, status = "primary",
dropdownButton(
inputId = "mydropdown",
label = "Controls",
icon = icon("sliders"),
status = "primary",
circle = FALSE,
numericInput("obs", "Observations:", 10, min = 1, max = 100)
),
plotOutput('plot')
))
)
server <- function(input, output) {
output$plot <- renderPlot({
hist(runif(input$obs))
})
}
shinyApp(ui, server)
I would like to align the dropdownButton widget to the bottom right corner of the Test box. How can I do that?
Just put the dropdownButton after the plot and inside a div with a class "pull-right"
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(box(
title = "Test", width = 4, solidHeader = TRUE, status = "primary",
plotOutput('plot'),
div(class = "pull-right",
dropdownButton(
inputId = "mydropdown",
label = "Controls",
icon = icon("sliders"),
status = "primary",
circle = FALSE,
numericInput("obs", "Observations:", 10, min = 1, max = 100)
)
)
))
)
server <- function(input, output) {
output$plot <- renderPlot({
hist(runif(input$obs))
})
}
shinyApp(ui, server)
Is there a way to display the box with the available dates a little lower than the default position after clicking a dateRangeInput()? I have an issue in my original app which I do not know why happens and therefore I cannot recreate it.
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
tags$head(
tags$style(
HTML(
".control-sidebar-tabs {display:none;}"
)
)
),
header = dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears"
),
sidebar = dashboardSidebar(),
body = dashboardBody(
),
rightsidebar = rightSidebar(
background = "dark",
uiOutput("sel"),
uiOutput("dr")
),
title = "Right Sidebar"
)),
server = function(input, output) {
output$dr <- renderUI({
dateRangeInput("range_date", "Enter Date Range", start = "2001-01-01",
end = "2010-12-31" , format = "yyyy-mm")
})
output$sel<-renderUI({
selectInput("variable", "Variable:",
c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear"))
})
}
)