Skip to content

Commit

Permalink
add bslib layout (#117)
Browse files Browse the repository at this point in the history 
* add bslib layout

* change value box to bslib

* resolve reactable tab spacing issues

* global file update

---------

Co-authored-by: Rich Bielby <[email protected]>
  • Loading branch information
@oadetayo @rmbielby
oadetayo and rmbielby authored Jan 28, 2025
1 parent 703b022 commit 316a084
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 130 deletions.
192 changes: 84 additions & 108 deletions R/ui_panels/example_tab_1.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,39 @@ example_tab_1_panel <- function() {
div(
id = "div_a",
# User selection dropdowns ------------------------------------
gov_row(
column(
width = 6,
shinyGovstyle::select_Input(
inputId = "selectPhase",
label = "Select a school phase",
select_text = choices_phase,
select_value = choices_phase
)
bslib::layout_column_wrap(
width = 1 / 2, # Each item takes 50% width
gap = "10px", # Adjust spacing between rows and columns
shinyGovstyle::select_Input(
inputId = "selectPhase",
label = "Select a school phase",
select_text = choices_phase,
select_value = choices_phase
),
column(
width = 6,
shinyGovstyle::select_Input(
inputId = "selectArea",
label = "Choose an area:",
select_text = choices_areas$area_name,
select_value = choices_areas$area_name
)
shinyGovstyle::select_Input(
inputId = "selectArea",
label = "Choose an area:",
select_text = choices_areas$area_name,
select_value = choices_areas$area_name
),
# Download button -------------------------------------------
column(
width = 12,
paste("Download the underlying data for this dashboard:"),
br(),
downloadButton(
outputId = "download_data",
label = "Download data",
icon = shiny::icon("download"),
class = "downloadButton"
# Full-width button on a new row
bslib::layout_column_wrap(
width = 1, # Full width for the button
div(
paste("Download the underlying data for this dashboard:"),
br(),
downloadButton(
outputId = "download_data",
label = "Download data",
icon = shiny::icon("download"),
class = "downloadButton",
style = "background-color: white; color: black; border: 1px solid #ddd;"
)
)
)
)
)
),
)
),
# Tabset under dropdowns ----------------------------------------------
column(
Expand All @@ -60,17 +59,18 @@ example_tab_1_panel <- function() {
# Value boxes tab -------------------------------------------------
tabPanel(
"Valuebox example",
fluidRow(
column(
width = 12,
h2("Examples of producing value boxes in R-Shiny"),
fluidRow(
column(
width = 12,
valueBoxOutput("box_balance_latest", width = 6),
valueBoxOutput("box_balance_change", width = 6)
)
)
h2("Examples of producing value boxes in R-Shiny"),
bslib::layout_column_wrap(
width = 1 / 2,
bslib::value_box(
title = "Average revenue balance",
value = textOutput("average_revenue_balance"),
theme = value_box_theme(bg = "#1d70b8")
),
bslib::value_box(
title = "Change from previous year",
value = textOutput("balance_change"),
theme = value_box_theme(bg = "#1d70b8")
)
)
),
Expand All @@ -88,87 +88,63 @@ example_tab_1_panel <- function() {
# Map tab --------------------------------------------------
tabPanel(
"Map example",
fluidRow(
column(
width = 12,
h2("An example map using leaflet"),
# map output here ---------------------------------------
column(
width = 6,
leafletOutput(
"mapOut"
)
h2("An example map using leaflet"),
bslib::layout_column_wrap(
width = 1 / 2, # Two columns of equal width
# heights_equal = "none", # Disable equal column heights
leafletOutput("mapOut"),
div(
class = "well dynamic-height",
style = "min-height: auto; height: auto; overflow-y: visible;",
selectizeInput(
"selectMapYear",
"Select Year",
choices = df_revbal_years,
multiple = FALSE,
selected = max(df_revbal_years)
),
column(
width = 6,
div(
class = "well",
style = "min-height: 100%; height: 100%; overflow-y:
visible",
fluidRow(
# Map dropdown selection ---------------------
column(
width = 12,
selectizeInput(
"selectMapYear",
"Select Year",
choices = df_revbal_years,
multiple = FALSE,
selected = max(df_revbal_years)
),
selectizeInput(
"selectMapPhase",
"Select School Phase",
choices = choices_phase,
multiple = FALSE,
selected = "All Local authority maintained schools"
)
)
)
)
selectizeInput(
"selectMapPhase",
"Select School Phase",
choices = choices_phase,
multiple = FALSE,
selected = "All Local authority maintained schools"
)
)
)
),
# Benchmarking tab ------------------------------------------------
tabPanel(
"Benchmarking example",
h2("An example bar chart using ggplot and ggiraph"),
p("This is the standard paragraph style for adding guiding info around data content."),
fluidRow(
column(
width = 12,
h2("An example bar chart using ggplot and ggiraph"),
p("This is the standard paragraph style for adding guiding
info around data content."),
# Bar chart for benchmarking --------------------------------
column(
width = 6,
girafeOutput("colBenchmark",
width = "100%", height = "100%"
width = 6, # First column for the bar chart
girafeOutput(
"colBenchmark",
width = "100%",
height = "100%"
)
),
column(
width = 6, # Second column for the input and table
div(
class = "well",
style = "min-height: auto;
height: auto;
overflow-y: visible;
margin-bottom: 10px;", # Adjusted margin
selectizeInput(
"selectBenchLAs",
"Select benchmark local authorities",
choices = choices_las$area_name,
multiple = TRUE,
options = list(maxItems = 3)
)
),
column(
width = 6,
div(
class = "well",
style = "min-height: 100%; height: 100%; overflow-y:
visible",
fluidRow(
# Benchmarking dropdown selection ---------------------
column(
width = 12,
selectizeInput("selectBenchLAs",
"Select benchmark local authorities",
choices = choices_las$area_name,
multiple = TRUE,
options = list(maxItems = 3)
)
)
)
),
# Benchmarking table --------------------------------------
h2("An example Reactable"),
reactableOutput("tabBenchmark2")
)
h2("An Example Reactable"),
reactableOutput("tabBenchmark2")
)
)
)
Expand Down
1 change: 0 additions & 1 deletion global.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ shhh(library(ggiraph))
# Shiny extensions
shhh(library(shinyjs))
shhh(library(tools))
shhh(library(shinydashboard))
shhh(library(shinyWidgets))
shhh(library(shinytitle))
shhh(library(xfun))
Expand Down
30 changes: 11 additions & 19 deletions server.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,27 +236,19 @@ server <- function(input, output, session) {
prev_avg_rev_bal_value = previous_average_balance()
)

# Create a value box for average revenue balance
output$box_balance_latest <- renderValueBox({
value_box(
value = dfeR::pretty_num(latest_average_balance(), gbp = TRUE),
subtitle = paste0("Average revenue balance"),
color = "blue"
)
})

# Create a value box for the change on previous year
output$box_balance_change <- renderValueBox({
value_box(
value = dfeR::pretty_num(
latest_average_balance() - previous_average_balance(),
prefix = "+/-",
gbp = TRUE
),
subtitle = paste0("Change from previous year"),
color = "blue"
output$average_revenue_balance <- renderText(
dfeR::pretty_num(latest_average_balance(), gbp = TRUE)
)

output$balance_change <- renderText(
dfeR::pretty_num(
latest_average_balance() - previous_average_balance(),
prefix = "+/-",
gbp = TRUE
)
})
)


# Link in the user guide panel back to the main panel -----------------------
observeEvent(input$link_to_app_content_tab, {
Expand Down
3 changes: 1 addition & 2 deletions ui.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
#
# -----------------------------------------------------------------------------
ui <- function(input, output, session) {
fluidPage(
bslib::page_fluid(
# Set application metadata ------------------------------------------------
tags$head(HTML("<title>Department for Education (DfE) Shiny Template</title>")),
tags$head(tags$link(rel = "shortcut icon", href = "dfefavicon.png")),
Expand All @@ -46,7 +46,6 @@ ui <- function(input, output, session) {
),

# Load javascript dependencies --------------------------------------------
useShinydashboard(),
shinyjs::useShinyjs(),

# Cookies -----------------------------------------------------------------
Expand Down
13 changes: 13 additions & 0 deletions www/dfe_shiny_gov_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,19 @@ html {
color: #fff;
}

/* Ensure the dynamic-height class adjusts to fit its content */
.well.dynamic-height {
min-height: auto !important; /* Override default min-height */
height: auto !important; /* Adjust height dynamically */
display: block !important; /* Ensure it wraps its content */
padding: 15px; /* Adjust padding for proper spacing */
margin-bottom: 20px;
background-color: #1d70b8;
border: 1px solid #e3e3e3;
border-radius: 4px;
color: #fff;
}

/* Custom value boxes CSS -------------------------------------------------- */
/* Set the font sizes */
#vboxhead-small {
Expand Down

0 comments on commit 316a084

Please sign in to comment.