I am building a shinydashboard app, and I want to get one box within two rows (see image below).
https://imgur.com/ilNn11M
I tried to mix column and rows, but i didn't manage du get this result.
Here is my ui test :
fluidRow(
box(
width = 3,
title = "Analyses",
dataTableOutput("ind_ana") %>% withSpinner(type = getOption("spinner.type", default = 6))
),
box(
width = 3,
title = "Limites de quantification",
dataTableOutput("ind_lq") %>% withSpinner(type = getOption("spinner.type", default = 6))
),
box(width = 3,
title = "Valeurs de références",
dataTableOutput("tabFnade")
),
box(width = 3,
title = "Seuils",
splitLayout(
numericInput("seuil1", NULL, value = 0, min = 0, max =0),
colourInput("col1", NULL, "blue")
),
splitLayout(
numericInput("seuil2", NULL, value = 0, min = 0, max =0),
colourInput("col2", NULL, "green")
),
splitLayout(
numericInput("seuil3", NULL, value = 0, min = 0, max =0),
colourInput("col3", NULL, "yellow")
),
splitLayout(
numericInput("seuil4", NULL, value = 0, min = 0, max =0),
colourInput("col4", NULL, "orange")
),
splitLayout(
numericInput("seuil5", NULL, value = 0, min = 0, max =0),
colourInput("col5", NULL, "red")
),
splitLayout(
numericInput("seuil6", NULL, value = 0, min = 0, max =0),
colourInput("col6", NULL, "brown")
)
)
Can I make this with shinydashboard, maybe with css ?
I manage to do it with shiny dashboard using two big box slided into 3 columns :
fluidRow(
column(width = 9,
box(
title = "Tab1", width = NULL, height = "200px",
column(width = 4, "Tab1"),
column(width = 4, "Tab2"),
column(width = 4, "Tab3")
),
box(
title = "Tab4", width = NULL, height = "200px"
)
),
column(width = 3,
box(
title = "Tab5", width = NULL, height = "400px"
)
)
)
Related
In noUiSliderInput() the numbers are shown as decimal by default like: 5.00
To change to integer like: 5
we can use the argument format: format = list(wNumbFormat(decimals = 0, thousand = ",", prefix = "$"))
This only works partially like here:
library( shiny )
library( shinyWidgets )
ui <- fluidPage(
div(style = 'position: absolute;left: 150px; top:270px; width:950px;margin:auto',
noUiSliderInput(
inputId = "noui2", label = "Slider vertical:",
min = 0, max = 45, step = 1,
value = c(15, 20), margin = 10,
orientation = "vertical",
width = "100px", height = "300px",
format = list(wNumbFormat(decimals = 0, thousand = ",", prefix = "$"))
),
verbatimTextOutput(outputId = "res2")
)
)
server <- function(input, output, session) {
output$res2 <- renderPrint(input$noui2)
}
shinyApp(ui, server)
What is the reason for this behavior?
I'm not sure why you are wrapping wNumbFormat in a list, but notice that while you set the prefix to "$", it does not show up in your graphic/video, suggesting that your options are not being used.
Remove the list and it works:
ui <- fluidPage(
div(style = 'position: absolute;left: 150px; top:270px; width:950px;margin:auto',
noUiSliderInput(
inputId = "noui2", label = "Slider vertical:",
min = 0, max = 45, step = 1,
value = c(15, 20), margin = 10,
orientation = "vertical",
width = "100px", height = "300px",
format = wNumbFormat(decimals = 0, thousand = ",", prefix = "$")
),
verbatimTextOutput(outputId = "res2")
)
)
I make a shiny app and I faced a trouble with the graph that disappears when I add a new fluidRow. Here is s small example
library(shinydashboard)
header <- dashboardHeader(title = 'Name')
sidebar <- dashboardSidebar()
body <- dashboardBody(
fluidRow(
box(widht = 12, title = 'Group', textOutput('group_name'))
),
fluidRow(
box(width = 4, title = 'Frim', textOutput('firm_name')),
box(width = 4, title = 'INN', textOutput('firm_inn')),
box(width = 4, title = 'Branch', textOutput('firm_branch'))
),
fluidRow(
box(status = 'primary', height = '250px', width = 4, title = 'name1', plotlyOutput('firm_limits_utiliz'), solidHeader = TRUE),
box(status = 'primary', height = '250px', width = 4, title = 'name2', plotlyOutput('firm_limits_remains'), solidHeader = TRUE),
box(status = 'warning', height = '250px', width = 4, title = 'name3', tableOutput('group_limits') , solidHeader = TRUE,
style = "overflow-x: scroll;")
) )
ui <- dashboardPage(body = body, header = header, sidebar = sidebar, skin = 'blue')
server <- function(input, output) {
output$group_name <- renderText({'Shell'})
output$firm_name <- renderText({'Shell ltd'})
output$firm_inn <- renderText({'770565479'})
output$firm_branch <- renderText({'Oil and Gas'})
output$firm_limits_utiliz <- renderPlotly({
fig <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = 270,
# title = list(text = "Speed"),
type = "indicator",
mode = "gauge+number",
height = 197, width = 393)
fig <- fig %>%
layout(margin = list(l=20,r=30))
fig
})
output$group_limit_utiliz <- renderPlotly({
fig <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = 270,
# title = list(text = "Speed"),
type = "indicator",
mode = "gauge+number",
height = 197, width = 393)
fig <- fig %>%
layout(margin = list(l=20,r=30))
fig
})
}
# Run the application
shinyApp(ui = ui, server = server)
If I run this code everything goes well. The fig graph is displayed on the dashboard.
BUT!
When I add a new fluidRow the fig graph disappears. For example let me provide you with a body part of code:
body <- dashboardBody(
fluidRow(
box(widht = 12, title = 'Group', textOutput('group_name'))
),
fluidRow(
box(width = 4, title = 'Firm', textOutput('firm_name')),
box(width = 4, title = 'INN', textOutput('firm_inn')),
box(width = 4, title = 'Branch', textOutput('firm_branch'))
),
fluidRow(
box(status = 'primary', height = '250px', width = 4, title = 'name1', plotlyOutput('firm_limits_utiliz'), solidHeader = TRUE),
box(status = 'primary', height = '250px', width = 4, title = 'name2', plotlyOutput('firm_limits_remains'), solidHeader = TRUE),
box(status = 'warning', height = '250px', width = 4, title = 'name3', tableOutput('group_limits') , solidHeader = TRUE,
style = "overflow-x: scroll;")
),
# Here i a new fluidRow
fluidRow(
box(status = 'primary', height = '250px', width = 4, title = 'name6', plotlyOutput('group_limit_utiliz'), solidHeader = TRUE),
box(status = 'primary', height = '250px', width = 4, title = 'name4', plotlyOutput('gtoup_limit_remains'), solidHeader = TRUE),
box(status = 'warning', height = '250px', width = 4, title = 'name5', tableOutput('group_limits') , solidHeader = TRUE,
style = "overflow-x: scroll;")
)
)
As you may see there is a new fluidRow. In this case the fig with firm_limits_utiliz id graph disappears.
What's the matter?
It works if you create a copy of output with another variable name:
#new fluidRow
fluidRow(
box(status = 'primary', height = '250px', width = 4, title = 'name6', plotlyOutput('group_limit_utiliz2'), solidHeader = TRUE),
box(status = 'primary', height = '250px', width = 4, title = 'name4', plotlyOutput('gtoup_limit_remains2'), solidHeader = TRUE),
box(status = 'warning', height = '250px', width = 4, title = 'name5', tableOutput('group_limits2') , solidHeader = TRUE,
style = "overflow-x: scroll;")
)
Output:
output$group_limit_utiliz2 <- renderPlotly({
fig2 <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = 270,
# title = list(text = "Speed"),
type = "indicator",
mode = "gauge+number",
height = 197, width = 393)
fig2 <- fig2 %>%
layout(margin = list(l=20,r=30))
fig2
})
Note that I added a 2 to all variable names, but everything else is the same.
I'm trying to use the menuSubItem functions to organize my inputs since I'll have a lot. What I'm finding though is that the conditional Panel is minimizing the whole menuItem and not expanding them. And what I'm also seeing is that the body doesn't change when I click on different tabs. Am I using conditionalPanels right?
library(needs)
needs(
shiny,
ggplot2,
tidyverse,
shinydashboard,
DT,
shinycssloaders,
plotly
)
# Define UI for application that draws a histogram
header = dashboardHeader(
# tags$li(class = "dropdown",
# tags$style(".main-header {max-height: 80px}"),
# tags$style(".main-header .logo {height: 80px}")),
#title = tags$img(src='logo.png',height='100',width='200')
)
sidebar = dashboardSidebar(
sidebarMenu(
id = 'panelsbar',
style = '"overflow-y:auto; max-height: 600px; position:relative;"',
menuItem('Data Input', tabName = 'data'),
conditionalPanel(
condition = "input.panelsbar== 'data'",
fileInput(
"file",
"Upload CSV files",
multiple = TRUE,
accept = ("text/comma")
)
),
menuItem('Simulate',tabName = 'sim_tab',
helpText('Adjust Simulation Parameters'),
menuSubItem('Promotion Parameters', tabName = 'promo'),
useShinyjs(),
div(id = 'sidebar_promo',
conditionalPanel("input.panelsbar==='promo'",
radioButtons('promoType',label = 'Promotion Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.promoType==="Aggregated"',
sliderInput('promoAll','Set promotion rate:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel('input.promoType==="Role Defined"',
helpText('Set Promotion Rates for each role'),
sliderInput(
'promoRole1','Role 1:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole2','Role 2:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole3','Role 3:', value = 25,min = 0, max = 100, step = 5),
sliderInput(
'promoRole4', 'Role 4:', value = 25, min = 0, max = 100,step = 5)
)
)),
menuSubItem('Candidate Slates', tabName = 'hire'),
div(id='sidebar_hire',
conditionalPanel("input.panelsbar==='hire'",
radioButtons('hireType',label = 'Candidate Slate Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.hireType==="Aggregated"',
sliderInput('hireAll','Set candidate slate rates:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel('input.promoType==="Role Defined"',
helpText('Set the Candidate Slate Diversity'),
h5('0 = Females, 100 = Males'),
sliderInput(
'hireRole1',
'Role 1:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole2',
'Role 2:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole3',
'Role 3:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole4',
'Role 4:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'hireRole5',
'Role 5:',
value = 25,
min = 0,
max = 100,
step = 5
)
))),
menuSubItem('Turnover Rates', tabName = 'turnover'),
div(id='sidebar_turnover',
conditionalPanel("input.panelsbar==='turnover'",
radioButtons('turnoverType',label = 'Turnover Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.turnoverType==="Aggregated"',
sliderInput('turnoverAll','Set turnover rate:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel(
"input.turnoverType==='Role Defined'",
helpText('Set the turnover rate for each role'),
sliderInput(
'turnoverRole1',
'Role 1:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole2',
'Role 2:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole3',
'Role 3:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole4',
'Role 4:',
value = 25,
min = 0,
max = 100,
step = 5
),
sliderInput(
'turnoverRole5',
'Role 5:',
value = 25,
min = 0,
max = 100,
step = 5
)
))
)),
actionButton('go','Run')
))
body <- dashboardBody(
tabItems(
tabItem(
tabName = 'data',
wellPanel(DT::dataTableOutput('table'))),
tabItem(
tabName = 'sim_tab',
fluidRow(h2('Average of Distribution',align = 'center')),
fluidRow(h5('Below is a table of the average distribution from the simulation',align='center')),
fluidRow(
wellPanel(
DT:::dataTableOutput('simDataTable') %>%
withSpinner(color="#ee1100")
),
fluidRow(h2('Average of Distribution',align = 'center')),
fluidRow(
wellPanel(
plotlyOutput('simPlot')
)
))
)
))
ui = shinydashboard::dashboardPage(header, sidebar, body, skin = 'red',
tags$head(tags$style(
HTML(".sidebar {
height: 90vh; overflow-y: auto;
}")
)))
There is no need to use conditionalPanel for the initial menuItem. You can try this...
shinydashboard::dashboardSidebar(width=300,
useShinyjs(),
sidebarMenu(id = "panelsbar",
#style = '"overflow-y:auto; max-height: 600px; position:relative;"',
menuItem("Home", tabName = "home", icon = icon("home")),
menuItem('Data Input', # tabName = 'data1' ,
#conditionalPanel( condition = "input.panelsbar== 'data'",
menuSubItem(
fileInput(
"file",
"Upload CSV files",
multiple = TRUE,
accept = ("text/comma")
),tabName = 'data' )
),
menuItem("Simulate", tabName = 'sim_tab',
helpText('Adjust Simulation Parameters'),
menuItem("Promotion Parameters", tabName = 'promo' ,
# div(id = 'sidebar_promo',
# conditionalPanel("input.panelsbar==='promo'",
radioButtons('promoType', label = 'Promotion Definitions:',
choices =c('Aggregated','Role Defined'),
selected = 'Aggregated',inline=F,width='200px'),
conditionalPanel('input.promoType==="Aggregated"',
sliderInput('promoAll','Set promotion rate:',value = 25,min = 0,max = 100,step = 5),
),
conditionalPanel('input.promoType==="Role Defined"',
helpText('Set Promotion Rates for each role'),
sliderInput(
'promoRole1','Role 1:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole2','Role 2:',value = 25,min = 0,max = 100,step = 5),
sliderInput(
'promoRole3','Role 3:', value = 25,min = 0, max = 100, step = 5),
sliderInput(
'promoRole4', 'Role 4:', value = 25, min = 0, max = 100,step = 5)
)
#)
#),
), ## new line
menuItem('Candidate Slates', tabName = 'hire'),
...
I'm doing some tests with shinyapp.
Does anyone know any way to update the labels of all the sliders with the value of a "text input" without having to use the function "updateSliderInput" for each of them?
Pd: I paste a sample but it really would be 100 sliders
A greeting and thanks in advance
ui <- fluidPage(
fluidRow(
textInput("caption", "Const1", "strong"),
box(width = 3, title = "box1",
solidHeader = TRUE, status = "danger",
# Sd slider:
sliderInput(inputId = "c11",
label = "Con1",
value = 5, min = 1, max = 5),
sliderInput(inputId = "c12",
label = "Con2",
value = 3, min = 1, max = 5,step = 1),
sliderInput(inputId = "c13",
label = "Con3",
value = 4, min = 1, max = 5),
sliderInput(inputId = "c14",
label = "Con4",
value = 3, min = 1, max = 5),
sliderInput(inputId = "c15",
label = "Con5",
value = 2, min = 1, max = 5)
),
box(width = 3, title = "box2",
solidHeader = TRUE, status = "danger",
# Sd slider:
sliderInput(inputId = "c21",
label = "Con1",
value = 2, min = 1, max = 5),
sliderInput(inputId = "c22",
label = "Con2",
value = 3, min = 1, max = 5,step = 1),
sliderInput(inputId = "c23",
label = "Con3",
value = 2, min = 1, max = 5),
sliderInput(inputId = "c24",
label = "Con4",
value = 4, min = 1, max = 5),
sliderInput(inputId = "c25",
label = "Con5",
value = 4, min = 1, max = 5)
)
)
)
# Define server logic required to draw
server <- function(input, output, session) {
observe({
text <- input$caption
updateSliderInput(session, "c11", label =text, value = 3 )
})
}
# Run the application
shinyApp(ui = ui, server = server)
I have the following piece of code:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
library(shinycssloaders)
library(plotly)
library(treemap)
library(viridisLite)
library(highcharter)
library(V8)
library(dplyr)
library(RColorBrewer)
library(openxlsx)
library(quantmod)
library(shinyWidgets)
library(caret)
library(lubridate)
library(tidyr)
library(flexdashboard)
xheader<-dashboardHeaderPlus( title = "ABC")
xsidebar<- dashboardSidebar(
sidebarUserPanel("USER",
subtitle = "Test",
image = "XXX"
),
sidebarMenu(id = "left_sidebar",
menuItem("DashBoard",
tabName = "ID_DashBoard",
icon = icon("desktop"))
)
)
x1body<-dashboardBody(
tabItems(
tabItem(tabName = "ID_DashBoard",
fluidRow(
column(width = 4,
fluidRow(style = "height:1000px; background-color: #E8E9EC;font-weight:bold",
column(width = 4, style = "color:green;font-weight:bold;",
gaugeOutput("gauge1", width = "100px", height = "200px")
),
column(width = 4,
gaugeOutput("gauge2", width = "100px", height = "200px")
),
column(width = 4,
gaugeOutput("gauge3", width = "100px", height = "200px")
)
)
),
column(width = 4,
fluidRow("MIDDLE", style = "height:1000px; background-color: #F2F3F5;")
),
column(width = 4,
fluidRow("RIGHT", style = "height:1000px; background-color: #E8E9EC;")
)
)
)
)
)
ui<- dashboardPagePlus(
shinyjs::useShinyjs(),
header = xheader,
sidebar = xsidebar,
body = x1body,
skin = "black",
sidebar_background = "light",
collapse_sidebar = TRUE
)
server <- function(input,output,session){
output$gauge1 = renderGauge({
gauge(0.5,
min = 0,
max = 1,
sectors = gaugeSectors(success = c(0.5, 1),
warning = c(0.3, 0.5),
danger = c(0, 0.3)),
label = "Total Commits"
)
})
output$gauge2 = renderGauge({
gauge(0.1,
min = 0,
max = 1,
sectors = gaugeSectors(success = c(0.5, 1),
warning = c(0.3, 0.5),
danger = c(0, 0.3)),
label = "Total Executed"
)
})
output$gauge3 = renderGauge({
gauge(0.1,
min = 0,
max = 1,
sectors = gaugeSectors(success = c(0.5, 1),
warning = c(0.3, 0.5),
danger = c(0, 0.3)),
label = "Total Executed"
)
})
}
shinyApp(ui, server)
The GUI looks like this currently:
as you can see in the image, the labels are not displayed properly on the grey background. I want to change the font size/color/make it bold for the following texts - Total Commits, Total Executed, Total Executed on the Gauge display and the min/max numbers on the gauge. I am unable to figure it out through CSS styling. Can someone please help me? Thanks in advance!