Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two column layout with high level header #117

Merged

Conversation

mrcaseb
Copy link
Contributor

@mrcaseb mrcaseb commented Mar 9, 2024

This is a more or less special feature I see people asking for in the nflverse discord. The main idea is to allow a high level tab header in the two column layout.
The problem here is formatting. We can either ask the user to set all the html styles themselves or try to help via gt. So in this PR, the function extracts tab header information (including all of the styling) from the header of one of the two tables. This allows the user to do all of the styling through gt.

Example

library(gt)
my_cars <- mtcars %>%
  dplyr::mutate(row_n = dplyr::row_number(), .before = mpg) %>%
  dplyr::select(row_n, mpg:drat)

tab1 <- my_cars %>%
  dplyr::slice(1:16) %>%
  gt() %>%
  gtExtras::gt_color_rows(columns = row_n, domain = 1:32) |> 
  gtExtras::gt_theme_538()

tab2 <- my_cars %>%
  dplyr::slice(17:32) %>%
  gt() %>%
  gtExtras::gt_color_rows(columns = row_n, domain = 1:32) |> 
  gt::tab_header(
    "A LONG AND VERY INFORMATIVE TITLE", "MY SUBTITLE IS ALSO VERY COOL"
  ) |> 
  gtExtras::gt_theme_538() |> 
  gt::tab_options(
    heading.background.color = "gray"
  )

listed_tables <- list(tab1, tab2)

Current implementation

gt_two_column_layout(
  listed_tables, output = "save",
  filename = "basic-two-col.png",
  vwidth = 700, vheight = 620
)

basic-two-col

With Header

gt_two_column_layout(
  listed_tables, output = "save",
  filename = "basic-two-col-title.png",
  vwidth = 600, vheight = 620,
  tab_header_from = "table2"
)

basic-two-col-title

@mrcaseb
Copy link
Contributor Author

mrcaseb commented Mar 9, 2024

I forgot to add this uses xml2 to extract styling information from raw gt html.

xml2 is already listed in Suggests but I think it's a strong reverse dependency anyway.

@mrcaseb
Copy link
Contributor Author

mrcaseb commented Mar 9, 2024

There is also room for improvements here. For example high level title and table level subtitles.

gt_subtitle <- raw_html %>%
xml2::xml_find_first("//*[contains(concat(' ',normalize-space(@class),' '),' gt_subtitle ')]")

gt_table_id <- raw_html %>%
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gt writes the table id into the selectors of the stylesheet. We extract that id here to replace it with our own id in the next step.

xml2::xml_find_first("//style") %>%
xml2::xml_contents() %>%
xml2::xml_text() %>%
gsub(gt_table_id, "mycombinedtable", x = .) %>%
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is necessary to apply the style to our top level heading

xml2::xml_contents() %>%
xml2::xml_text() %>%
gsub(gt_table_id, "mycombinedtable", x = .) %>%
gsub("mycombinedtable table", "mycombinedtable div", x = .)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The table selector sets font. Since we put the header in div tags we replace table with div in the style sheet.


xml_missing <- function(xml){
xml_txt <- xml2::xml_text(xml)
if (is.na(xml_txt)) return(NULL)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

xml2 returns NA if the text is missing. We return NULL to drop it entirely from the html.

Copy link
Owner

@jthomasmock jthomasmock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mrcaseb ! Going to merge and then we can iterate

@jthomasmock jthomasmock merged commit e810e59 into jthomasmock:master Apr 4, 2024
1 of 6 checks passed
@mrcaseb mrcaseb deleted the two-column-layout-tab-headers branch April 5, 2024 05:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants