ciaran/football-competitiveness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1 fully mobile compatible (scrolling spaced, coefficient plots removed & radar plots visible)
Build and Push Docker Image / build (push) Successful in 1m10s
Details

Browse Source
This commit is contained in:
ciaran
2026-08-21 17:59:54 +01:00
parent d0a9d448b0
commit c083cc1099
3 changed files with 128 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server.R
+33 -3
View File
@@ -37,6 +37,12 @@ server <- function(input, output, session) {
output$league_characteristics_plot <- renderPlotly({
width <- ifelse(is.null(input$screen_width), 760, input$screen_width)
domain_size <- if(width <= 767) {
c(0.2, 0.8)
} else {
c(0.02, 0.98)
}
country_data <- league_averages_plot_selected_data()
values <- as.numeric(country_data[1, -1])
@@ -45,6 +51,7 @@ server <- function(input, output, session) {
theta_labels <- gsub("4 ", "4<br>", theta_labels)
theta_labels <- gsub("number ", "number<br>", theta_labels)
theta_labels <- gsub("by ", "by<br>", theta_labels)
theta_labels <- gsub("Gini ", "Gini<br>", theta_labels)
custom_plotly(type = 'scatterpolar', fill = 'toself', hoverinfo = "none", xaxis_title = "", yaxis_title = "", width = width) %>%
add_trace(
@@ -53,7 +60,10 @@ server <- function(input, output, session) {
) %>%
layout(
margin = list(t = 50),
polar = list(radialaxis = list(range = c(0,1))),
polar = list(
domain = list(x = domain_size),
radialaxis = list(range = c(0,1))
),
showlegend = FALSE
)
})
@@ -74,6 +84,12 @@ server <- function(input, output, session) {
output$basic_profiles_characteristic_plot <- renderPlotly({
width <- ifelse(is.null(input$screen_width), 760, input$screen_width)
domain_size <- if(width <= 767) {
c(0.2, 0.8)
} else {
c(0.02, 0.98)
}
group_data <- basic_profiless_plot_selected_data()
values <- as.numeric(group_data[1, 2:10])
@@ -82,6 +98,7 @@ server <- function(input, output, session) {
theta_labels <- gsub("4 ", "4<br>", theta_labels)
theta_labels <- gsub("number ", "number<br>", theta_labels)
theta_labels <- gsub("by ", "by<br>", theta_labels)
theta_labels <- gsub("Gini ", "Gini<br>", theta_labels)
custom_plotly(type = 'scatterpolar', fill = 'toself', hoverinfo = "none", xaxis_title = "", yaxis_title = "", width = width) %>%
add_trace(
@@ -90,7 +107,10 @@ server <- function(input, output, session) {
) %>%
layout(
margin = list(t = 50),
polar = list(radialaxis = list(range = c(-0.4,0.4))),
polar = list(
domain = list(x = domain_size),
radialaxis = list(range = c(-0.4,0.4))
),
showlegend = FALSE
)
})
@@ -186,6 +206,12 @@ server <- function(input, output, session) {
output$clustering_characteristics_plot <- renderPlotly({
width <- ifelse(is.null(input$screen_width), 760, input$screen_width)
domain_size <- if(width <= 767) {
c(0.2, 0.8)
} else {
c(0.02, 0.98)
}
group_data <- clustering_plot_selected_data()
values <- as.numeric(group_data[1, 2:10])
@@ -194,6 +220,7 @@ server <- function(input, output, session) {
theta_labels <- gsub("4 ", "4<br>", theta_labels)
theta_labels <- gsub("number ", "number<br>", theta_labels)
theta_labels <- gsub("by ", "by<br>", theta_labels)
theta_labels <- gsub("Gini ", "Gini<br>", theta_labels)
custom_plotly(type = 'scatterpolar', fill = 'toself', hoverinfo = "none", xaxis_title = "", yaxis_title = "", width = width) %>%
add_trace(
@@ -202,7 +229,10 @@ server <- function(input, output, session) {
) %>%
layout(
margin = list(t = 50),
polar = list(radialaxis = list(range = c(-0.7,1.5))),
polar = list(
domain = list(x = domain_size),
radialaxis = list(range = c(-0.7,1.5))
),
showlegend = FALSE
)
})
ui.R
+71 -55
View File
@@ -235,7 +235,7 @@ ui <- fluidPage(
#### Basic profiles characteristics ####
tags$header(id = "basic_profiling", class="colourheader3",
tags$div(class="paddeddiv",style="position: relative;",
p(style="margin-top: 5px;",paste0(characteristics_of_leagues_grouped_by_performance))
p(paste0(characteristics_of_leagues_grouped_by_performance))
)
),
@@ -371,34 +371,42 @@ ui <- fluidPage(
br(),
br(),
tags$div(ID = "regression_current_year_plot",
div(class="scrolly",
tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"),
tags$h4(style="text-align: center;", "Coefficient estimates for regression"),
plotlyOutput("regression_coefficients_current_plot", height = "100%")
),
conditionalPanel(
condition = "input.screen_width >= 768",
tags$article(
lapply(seq_along(regression_current_year_titles), function(i) {
div(
class = "regression_current_year_plot text-article",
`data-width` = "1",
`data-index` = i - 1,
p(
tags$u(
paste0(
" ",
regression_current_year_titles[i],
" "
)
),
br(),
HTML(regression_current_year_text[[i]])
)
)
})
)
)
tags$div(
id = "regression_current_year_plot",
div(
class = "scrolly",
tags$figure(
class = "sticky",
style = "order: 0; display: flex; flex-direction: column;",
tags$h4(
style = "text-align: center;",
"Coefficient estimates for regression"
),
plotlyOutput(
"regression_coefficients_current_plot",
height = "100%"
)
),
tags$article(
lapply(seq_along(regression_current_year_titles), function(i) {
div(
class = "regression_current_year_plot text-article",
`data-width` = "1",
`data-index` = i - 1,
p(
tags$u(paste0(" ", regression_current_year_titles[i], " ")),
br(),
HTML(regression_current_year_text[[i]])
)
)
})
)
)
)
),
br(),
@@ -415,7 +423,10 @@ ui <- fluidPage(
br(),
br(),
tags$div(ID = "regression_next_year_plot",
conditionalPanel(
condition = "input.screen_width >= 768",
tags$div(ID = "regression_next_year_plot",
div(class="scrolly",
tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"),
tags$h4(style="text-align: center;", "Coefficient estimates for regression"),
@@ -443,6 +454,7 @@ ui <- fluidPage(
})
)
)
)
),
br(),
@@ -459,34 +471,38 @@ ui <- fluidPage(
br(),
br(),
tags$div(ID = "regression_competition_plot",
div(class="scrolly",
tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"),
tags$h4(style="text-align: center;", "Coefficient estimates for regression"),
plotlyOutput("regression_coefficients_competition_plot", height = "100%")
),
conditionalPanel(
condition = "input.screen_width >= 768",
tags$article(
lapply(seq_along(regression_competition_titles), function(i) {
div(
class = "regression_competition_plot text-article",
`data-width` = "1",
`data-index` = i - 1,
p(
tags$u(
paste0(
" ",
regression_competition_titles[i],
" "
)
),
br(),
HTML(regression_competition_text[[i]])
tags$div(ID = "regression_competition_plot",
div(class="scrolly",
tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"),
tags$h4(style="text-align: center;", "Coefficient estimates for regression"),
plotlyOutput("regression_coefficients_competition_plot", height = "100%")
),
tags$article(
lapply(seq_along(regression_competition_titles), function(i) {
div(
class = "regression_competition_plot text-article",
`data-width` = "1",
`data-index` = i - 1,
p(
tags$u(
paste0(
" ",
regression_competition_titles[i],
" "
)
),
br(),
HTML(regression_competition_text[[i]])
)
)
)
})
)
)
})
)
)
)
),
br(),
www/css.css
+22 -15
View File
@@ -88,10 +88,10 @@ input:checked + .slider:before {
}
/* Table of contents */
.colourheader, .toc {
.toc {
background: #010056;
color: white;
padding: 6vh;
padding: 3vh;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
}
@@ -410,7 +410,7 @@ input:checked + .slider:before {
background-image: none;
background-attachment: fixed;
/*min-height: 93vh;*/
border-radius: 25px;
border-radius: 5vh;
}
.colourheader2{
@@ -419,7 +419,7 @@ input:checked + .slider:before {
background-image: none;
background-attachment: fixed;
/*min-height: 93vh;*/
border-radius: 25px;
border-radius: 5vh;
}
.colourheader3{
@@ -428,22 +428,22 @@ input:checked + .slider:before {
background-image: none;
background-attachment: fixed;
/*min-height: 93vh;*/
border-radius: 25px;
border-radius: 5vh;
}
/* This pads element so it is a smaller block within contaiing element, eg to make text start closer to center */
/* This pads element so it is a smaller block within containing element, eg to make text start closer to center */
.paddeddiv{
position: relative;
box-sizing: border-box;
padding: 40px 0;
padding: 0 24px 24px 24px;
/*min-height: 85vh;*/
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 0 24px;
margin: 0 0;
}
}
@@ -458,7 +458,7 @@ input:checked + .slider:before {
background-image: none;
background-attachment: fixed;
/*min-height: 30vh!important;*/
border-radius: 25px;
border-radius: 5vh;
}
.colourheader2{
@@ -467,7 +467,7 @@ input:checked + .slider:before {
background-image: none;
background-attachment: fixed;
/*min-height: 30vh!important;*/
border-radius: 25px;
border-radius: 5vh;
}
.colourheader3{
@@ -476,21 +476,21 @@ input:checked + .slider:before {
background-image: none;
background-attachment: fixed;
/*min-height: 93vh;*/
border-radius: 25px;
border-radius: 5vh;
}
.paddeddiv{
position: relative;
box-sizing: border-box;
padding: 10px 0;
padding: 0 12px 15px 12px;
min-height: 25vh;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 0 24px;
margin: 0 0;
}
@@ -501,12 +501,12 @@ input:checked + .slider:before {
.col-medium {
width: 100%;
max-width: 680px;
margin: 0 24px;
margin: 0 0;
}
.text-indent {
margin-left: 30px;
margin-left: 0;
}
.plotly .hoverlayer .hovertext { fill-opacity: 1 !important; stroke-opacity: 1 !important; }
@@ -545,6 +545,13 @@ input:checked + .slider:before {
height: 100% !important;
}
.scrolly article .clustering_plot {
min-height: 100vh;
padding-bottom: 80vh;
display: flex;
align-items: center;
}
}
/* Make plots not wider than screen length*/