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

docs: visually document options for theming table with opt_stylize() #438

Merged
merged 12 commits into from
Sep 16, 2024

Conversation

rich-iannone
Copy link
Member

This adds documentation in the Get Started guide, showing some possibilities for theming the table with opt_stylize(). With the six options in both the style= and color= arguments, there's a combined 36 different looks. Here, we show the six different styles with the default "blue" color, and, we show the six different color options with the default style (1).

This is what it looks like on a desktop browser (zoomed out a bit):

image

On a narrow display, the tables collapse to a single column.

Fixes: #405

Copy link

codecov bot commented Sep 12, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.68%. Comparing base (bacda7e) to head (49a4637).
Report is 25 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #438      +/-   ##
==========================================
+ Coverage   86.37%   86.68%   +0.30%     
==========================================
  Files          42       42              
  Lines        4683     4685       +2     
==========================================
+ Hits         4045     4061      +16     
+ Misses        638      624      -14     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 15:11 Destroyed
@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 15:11 Destroyed
@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 15:20 Destroyed
@rich-iannone rich-iannone marked this pull request as ready for review September 12, 2024 16:00
@rich-iannone
Copy link
Member Author

From pairing with @machow , we decided to streamline the display of the themed tables from .opt_stylize(). I removed the display of the color variations. Also, the table used in the .opt_stylize() examples borrows from the un-themed table at the top (which was slightly modified). This all cuts down the number of lines of documentation (and makes the page easier to follow).

Here's a portion of the page for the revised docs:

image

@rich-iannone rich-iannone requested a review from machow September 12, 2024 17:24
@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 17:24 Destroyed
Copy link
Collaborator

@machow machow left a comment

Choose a reason for hiding this comment

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

Left a small suggestion to link to the reference page for color options, and to link to the guide from the reference. Feel free to take or leave it 😁

```
:::
::::::

Notice that first table (blue) emphasizes the row labels with a solid background color. The second table (red) emphasizes the column labels, and uses solid lines to separate the body cell values.
Notice that first table (blue) emphasizes the row labels with a solid background color. The second table (red) emphasizes the column labels, and uses solid lines to separate the body cell values. There are six options for the `color=` argument: `"blue"`, `"cyan"`, `"pink"`, `"green"`, `"red"`, and `"gray"`.
Copy link
Collaborator

@machow machow Sep 12, 2024

Choose a reason for hiding this comment

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

WDYT of us replacing this sentence enumerating all colors with a link to the reference page (which enumerates them)? could add a note w/ a link like "see .opt_stylize() for all color options"

Maybe we could also add a link on the .opt_stylize() page to this guide? (e.g. "for examples of each style, see {Linked Name of Guide Page}")

Copy link
Member Author

Choose a reason for hiding this comment

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

Sounds good! I'll make those changes.

@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 20:41 Destroyed
@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 20:44 Destroyed
@machow
Copy link
Collaborator

machow commented Sep 12, 2024

The link in the reference doesn't work for me (though I checked very fast and may have missed that it could work after merging)

image

@rich-iannone
Copy link
Member Author

rich-iannone commented Sep 12, 2024

The link in the reference doesn't work for me (though I checked very fast and may have missed that it could work after merging)

image

Ah... I will use the absolute URL.

@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 21:22 Destroyed
@github-actions github-actions bot temporarily deployed to pr-438 September 12, 2024 21:30 Destroyed
@@ -1250,7 +1250,9 @@ def opt_stylize(self: GTSelf, style: int = 1, color: str = "blue") -> GTSelf:
have vertical lines. In addition to choosing a `style` preset, there are six `color` variations
that each use a range of five color tints. Each of the color tints have been fine-tuned to
maximize the contrast between text and its background. There are 36 combinations of `style` and
`color` to choose from.
`color` to choose from. For examples of each style, see the
[*Premade Themes*](https://posit-dev.github.io/great-tables/get-started/table-theme-premade.html)
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do you mind using quarto style linking, to refer to the qmds? Absolute links will not work correctly on site previews / if the site is moved.

https://quarto.org/docs/websites/index.html#linking

It looks like the path to the qmd may have been incorrect before (it's inside the get-started folder)

Copy link
Member Author

Choose a reason for hiding this comment

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

Link is now functional.

@github-actions github-actions bot temporarily deployed to pr-438 September 16, 2024 16:31 Destroyed
@rich-iannone rich-iannone requested a review from machow September 16, 2024 17:10
@machow machow merged commit 4d97453 into main Sep 16, 2024
13 checks passed
@rich-iannone rich-iannone deleted the docs-opt-stylize-visuals branch September 30, 2024 14:21
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.

Document or present all styles available in opt_stylize
2 participants