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({ output$league_characteristics_plot <- renderPlotly({
width <- ifelse(is.null(input$screen_width), 760, input$screen_width) 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() country_data <- league_averages_plot_selected_data()
values <- as.numeric(country_data[1, -1]) 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("4 ", "4<br>", theta_labels)
theta_labels <- gsub("number ", "number<br>", theta_labels) theta_labels <- gsub("number ", "number<br>", theta_labels)
theta_labels <- gsub("by ", "by<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) %>% custom_plotly(type = 'scatterpolar', fill = 'toself', hoverinfo = "none", xaxis_title = "", yaxis_title = "", width = width) %>%
add_trace( add_trace(
@@ -53,7 +60,10 @@ server <- function(input, output, session) {
) %>% ) %>%
layout( layout(
margin = list(t = 50), 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 showlegend = FALSE
) )
}) })
@@ -74,6 +84,12 @@ server <- function(input, output, session) {
output$basic_profiles_characteristic_plot <- renderPlotly({ output$basic_profiles_characteristic_plot <- renderPlotly({
width <- ifelse(is.null(input$screen_width), 760, input$screen_width) 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() group_data <- basic_profiless_plot_selected_data()
values <- as.numeric(group_data[1, 2:10]) 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("4 ", "4<br>", theta_labels)
theta_labels <- gsub("number ", "number<br>", theta_labels) theta_labels <- gsub("number ", "number<br>", theta_labels)
theta_labels <- gsub("by ", "by<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) %>% custom_plotly(type = 'scatterpolar', fill = 'toself', hoverinfo = "none", xaxis_title = "", yaxis_title = "", width = width) %>%
add_trace( add_trace(
@@ -90,7 +107,10 @@ server <- function(input, output, session) {
) %>% ) %>%
layout( layout(
margin = list(t = 50), 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 showlegend = FALSE
) )
}) })
@@ -186,6 +206,12 @@ server <- function(input, output, session) {
output$clustering_characteristics_plot <- renderPlotly({ output$clustering_characteristics_plot <- renderPlotly({
width <- ifelse(is.null(input$screen_width), 760, input$screen_width) 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() group_data <- clustering_plot_selected_data()
values <- as.numeric(group_data[1, 2:10]) 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("4 ", "4<br>", theta_labels)
theta_labels <- gsub("number ", "number<br>", theta_labels) theta_labels <- gsub("number ", "number<br>", theta_labels)
theta_labels <- gsub("by ", "by<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) %>% custom_plotly(type = 'scatterpolar', fill = 'toself', hoverinfo = "none", xaxis_title = "", yaxis_title = "", width = width) %>%
add_trace( add_trace(
@@ -202,7 +229,10 @@ server <- function(input, output, session) {
) %>% ) %>%
layout( layout(
margin = list(t = 50), 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 showlegend = FALSE
) )
}) })
ui.R
+71 -55
View File
@@ -235,7 +235,7 @@ ui <- fluidPage(
#### Basic profiles characteristics #### #### Basic profiles characteristics ####
tags$header(id = "basic_profiling", class="colourheader3", tags$header(id = "basic_profiling", class="colourheader3",
tags$div(class="paddeddiv",style="position: relative;", 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(),
br(), br(),
tags$div(ID = "regression_current_year_plot", conditionalPanel(
div(class="scrolly", condition = "input.screen_width >= 768",
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( tags$div(
lapply(seq_along(regression_current_year_titles), function(i) { id = "regression_current_year_plot",
div( div(
class = "regression_current_year_plot text-article", class = "scrolly",
`data-width` = "1", tags$figure(
`data-index` = i - 1, class = "sticky",
p( style = "order: 0; display: flex; flex-direction: column;",
tags$u( tags$h4(
paste0( style = "text-align: center;",
" ", "Coefficient estimates for regression"
regression_current_year_titles[i], ),
" " plotlyOutput(
) "regression_coefficients_current_plot",
), height = "100%"
br(), )
HTML(regression_current_year_text[[i]]) ),
)
) 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(), br(),
@@ -415,7 +423,10 @@ ui <- fluidPage(
br(), br(),
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", div(class="scrolly",
tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"), tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"),
tags$h4(style="text-align: center;", "Coefficient estimates for regression"), tags$h4(style="text-align: center;", "Coefficient estimates for regression"),
@@ -443,6 +454,7 @@ ui <- fluidPage(
}) })
) )
) )
)
), ),
br(), br(),
@@ -459,34 +471,38 @@ ui <- fluidPage(
br(), br(),
br(), br(),
tags$div(ID = "regression_competition_plot", conditionalPanel(
div(class="scrolly", condition = "input.screen_width >= 768",
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( tags$div(ID = "regression_competition_plot",
lapply(seq_along(regression_competition_titles), function(i) { div(class="scrolly",
div( tags$figure(class="sticky",style=("order: 0; display: flex; flex-direction: column;"),
class = "regression_competition_plot text-article", tags$h4(style="text-align: center;", "Coefficient estimates for regression"),
`data-width` = "1", plotlyOutput("regression_coefficients_competition_plot", height = "100%")
`data-index` = i - 1, ),
p(
tags$u( tags$article(
paste0( lapply(seq_along(regression_competition_titles), function(i) {
" ", div(
regression_competition_titles[i], class = "regression_competition_plot text-article",
" " `data-width` = "1",
) `data-index` = i - 1,
), p(
br(), tags$u(
HTML(regression_competition_text[[i]]) paste0(
" ",
regression_competition_titles[i],
" "
)
),
br(),
HTML(regression_competition_text[[i]])
)
) )
) })
}) )
) )
) )
), ),
br(), br(),
www/css.css
+22 -15
View File
@@ -88,10 +88,10 @@ input:checked + .slider:before {
} }
/* Table of contents */ /* Table of contents */
.colourheader, .toc { .toc {
background: #010056; background: #010056;
color: white; color: white;
padding: 6vh; padding: 3vh;
border-radius: 10px; border-radius: 10px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
@@ -410,7 +410,7 @@ input:checked + .slider:before {
background-image: none; background-image: none;
background-attachment: fixed; background-attachment: fixed;
/*min-height: 93vh;*/ /*min-height: 93vh;*/
border-radius: 25px; border-radius: 5vh;
} }
.colourheader2{ .colourheader2{
@@ -419,7 +419,7 @@ input:checked + .slider:before {
background-image: none; background-image: none;
background-attachment: fixed; background-attachment: fixed;
/*min-height: 93vh;*/ /*min-height: 93vh;*/
border-radius: 25px; border-radius: 5vh;
} }
.colourheader3{ .colourheader3{
@@ -428,22 +428,22 @@ input:checked + .slider:before {
background-image: none; background-image: none;
background-attachment: fixed; background-attachment: fixed;
/*min-height: 93vh;*/ /*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{ .paddeddiv{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 40px 0; padding: 0 24px 24px 24px;
/*min-height: 85vh;*/ /*min-height: 85vh;*/
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
margin: 0 24px; margin: 0 0;
} }
} }
@@ -458,7 +458,7 @@ input:checked + .slider:before {
background-image: none; background-image: none;
background-attachment: fixed; background-attachment: fixed;
/*min-height: 30vh!important;*/ /*min-height: 30vh!important;*/
border-radius: 25px; border-radius: 5vh;
} }
.colourheader2{ .colourheader2{
@@ -467,7 +467,7 @@ input:checked + .slider:before {
background-image: none; background-image: none;
background-attachment: fixed; background-attachment: fixed;
/*min-height: 30vh!important;*/ /*min-height: 30vh!important;*/
border-radius: 25px; border-radius: 5vh;
} }
.colourheader3{ .colourheader3{
@@ -476,21 +476,21 @@ input:checked + .slider:before {
background-image: none; background-image: none;
background-attachment: fixed; background-attachment: fixed;
/*min-height: 93vh;*/ /*min-height: 93vh;*/
border-radius: 25px; border-radius: 5vh;
} }
.paddeddiv{ .paddeddiv{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 0; padding: 0 12px 15px 12px;
min-height: 25vh; min-height: 25vh;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
margin: 0 24px; margin: 0 0;
} }
@@ -501,12 +501,12 @@ input:checked + .slider:before {
.col-medium { .col-medium {
width: 100%; width: 100%;
max-width: 680px; max-width: 680px;
margin: 0 24px; margin: 0 0;
} }
.text-indent { .text-indent {
margin-left: 30px; margin-left: 0;
} }
.plotly .hoverlayer .hovertext { fill-opacity: 1 !important; stroke-opacity: 1 !important; } .plotly .hoverlayer .hovertext { fill-opacity: 1 !important; stroke-opacity: 1 !important; }
@@ -545,6 +545,13 @@ input:checked + .slider:before {
height: 100% !important; 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*/ /* Make plots not wider than screen length*/