diff --git a/docs/demos/cookbook/index.qmd b/docs/demos/cookbook/index.qmd index c0009c9..71e9488 100644 --- a/docs/demos/cookbook/index.qmd +++ b/docs/demos/cookbook/index.qmd @@ -435,7 +435,7 @@ Reactable( ## Show data from other columns ```{python} -#| label: show-data-from-other-columns +# | label: show-data-from-other-columns import htmltools from reactable import Reactable, Column, CellInfo @@ -464,7 +464,7 @@ Reactable( "species": Column(show=False), }, default_col_def=Column(v_align="center"), - default_page_size=6, + default_page_size=4, ) ``` diff --git a/docs/demos/demo_snippets/coffee-table.qmd b/docs/demos/demo_snippets/coffee-table.qmd new file mode 100644 index 0000000..e1ee1e1 --- /dev/null +++ b/docs/demos/demo_snippets/coffee-table.qmd @@ -0,0 +1,74 @@ +--- +pagetitle: coffee table +navbar: false +--- + +:::{.shrink-example} + +```{python} +#| echo: false +# NOTE: I can't get quarto embed to work with the great-tables.qmd, +# so have just copied in the example code here :/ +import os + +os.chdir("..") + +from reactable import embed_css, render + +embed_css() + +import polars as pl +import polars.selectors as cs +from great_tables import GT, loc, style + +coffee_sales = pl.DataFrame.deserialize("coffee-sales/coffee-sales.json", format="json") + +sel_rev = cs.starts_with("revenue") +sel_prof = cs.starts_with("profit") + + +coffee_table = ( + GT(coffee_sales) + .tab_header("Sales of Coffee Equipment") + .tab_spanner(label="Revenue", columns=sel_rev) + .tab_spanner(label="Profit", columns=sel_prof) + .cols_label( + revenue_dollars="Amount", + profit_dollars="Amount", + revenue_pct="Percent", + profit_pct="Percent", + monthly_sales="Monthly Sales", + icon="", + product="Product", + ) + # formatting ---- + .fmt_number( + columns=cs.ends_with("dollars"), + compact=True, + pattern="${x}", + n_sigfig=3, + ) + .fmt_percent(columns=cs.ends_with("pct"), decimals=0) + # style ---- + .tab_style( + style=style.fill(color="aliceblue"), + locations=loc.body(columns=sel_rev), + ) + .tab_style( + style=style.fill(color="papayawhip"), + locations=loc.body(columns=sel_prof), + ) + .tab_style( + style=style.text(weight="bold"), + locations=loc.body(rows=pl.col("product") == "Total"), + ) + .fmt_nanoplot("monthly_sales", plot_type="bar") + .fmt_image("icon", path="coffee-sales") + .sub_missing(missing_text="") +) + +# coffee_table.save("data/coffee-table.png", scale=2) +render(coffee_table) +``` + +::: \ No newline at end of file diff --git a/docs/demos/demo_snippets/solar-zenith-angles.qmd b/docs/demos/demo_snippets/solar-zenith-angles.qmd new file mode 100644 index 0000000..14660d6 --- /dev/null +++ b/docs/demos/demo_snippets/solar-zenith-angles.qmd @@ -0,0 +1,46 @@ +--- +pagetitle: solar zenith angles +navbar: false +--- + +:::{.shrink-example} + +```{python} +# | echo: false +from reactable import embed_css, render + +embed_css() + + +from great_tables import GT, html +from great_tables.data import sza +import polars as pl +import polars.selectors as cs + +sza_pivot = ( + pl.from_pandas(sza) + .filter((pl.col("latitude") == "20") & (pl.col("tst") <= "1200")) + .select(pl.col("*").exclude("latitude")) + .drop_nulls() + .pivot(values="sza", index="month", on="tst", sort_columns=True) +) + +gt = ( + GT(sza_pivot, rowname_col="month") + .data_color( + domain=[90, 0], + palette=["rebeccapurple", "white", "orange"], + na_color="white", + ) + .tab_header( + title="Solar Zenith Angles from 05:30 to 12:00", + subtitle=html("Average monthly values at latitude of 20°N."), + ) + .cols_width({k: 50 for k in sza_pivot.columns}) + .sub_missing(missing_text="") +) + +render(gt) +``` + +::: \ No newline at end of file diff --git a/docs/demos/great-tables.qmd b/docs/demos/great-tables.qmd index 1938d2f..1f9bf9b 100644 --- a/docs/demos/great-tables.qmd +++ b/docs/demos/great-tables.qmd @@ -17,14 +17,15 @@ embed_css() :::::: {.column-page} ::::: {.grid} - :::{.g-col-lg-6 .g-col-12} + ```{python} import polars as pl from great_tables import GT, md, html from great_tables.data import islands from reactable import render +from reactable.render_gt import _render islands_mini = pl.from_pandas(islands).sort("size", descending=True).head(10) @@ -108,12 +109,11 @@ wide_pops = ( ) .with_columns(pl.col("country_code_2").replace(country_to_region).alias("region")) .filter(pl.col("region").is_in(["Australasia", "Melanesia"])) - .pivot(index=["country_name", "region"], columns="year", values="population") + .pivot(index=["country_name", "region"], on="year", values="population") .sort("2020", descending=True) ) gt = ( - GT(wide_pops) .tab_header(title="Populations of Oceania's Countries in 2000, 2010, and 2020") .tab_spanner(label="Total Population", columns=cs.all()) @@ -177,6 +177,7 @@ render(gt) :::{.g-col-lg-6 .g-col-12} ```{python} +# | label: solar-zenith-angles from great_tables import GT, html from great_tables.data import sza import polars as pl @@ -187,7 +188,7 @@ sza_pivot = ( .filter((pl.col("latitude") == "20") & (pl.col("tst") <= "1200")) .select(pl.col("*").exclude("latitude")) .drop_nulls() - .pivot(values="sza", index="month", columns="tst", sort_columns=True) + .pivot(values="sza", index="month", on="tst", sort_columns=True) ) gt = ( @@ -201,6 +202,7 @@ gt = ( title="Solar Zenith Angles from 05:30 to 12:00", subtitle=html("Average monthly values at latitude of 20°N."), ) + .cols_width({k: 50 for k in sza_pivot.columns}) .sub_missing(missing_text="") ) @@ -275,6 +277,7 @@ render(gt) :::{.g-col-lg-6 .g-col-12} ```{python} +# | label: coffee-table import polars as pl import polars.selectors as cs from great_tables import GT, loc, style @@ -331,5 +334,6 @@ render(coffee_table) ::: + :::::: ::::: \ No newline at end of file diff --git a/docs/demos/index.qmd b/docs/demos/index.qmd index 87f2df2..cb442d4 100644 --- a/docs/demos/index.qmd +++ b/docs/demos/index.qmd @@ -12,6 +12,16 @@ notebook-links: false iframe { overflow: hidden; } + +h3 { + text-align: center; +} + +h3 a { + text-decoration: none; + font-size: 20px; + +} @@ -22,17 +32,29 @@ iframe { :::::: {.column-page} + ## Demos ::::: {.grid} :::{.g-col-lg-6 .g-col-12 .example} ### [PyPI downloads](./pypi-downloads) - + ::: :::{.g-col-lg-6 .g-col-12 .example} ### [Twitter followers](./twitter-followers.qmd) - + +::: + +:::{.g-col-lg-6 .g-col-12 .example} +### [Great Tables - coffee table](./great-tables.qmd) + +::: + + +:::{.g-col-lg-6 .g-col-12 .example} +### [Great Tables - solar angles](./great-tables.qmd) + ::: ::::: @@ -53,68 +75,68 @@ iframe { ::::: {.grid} :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Insert links](./cookbook/index.qmd#insert-links) +### [Insert links](./cookbook/index.qmd#insert-links) {{< embed cookbook/index.qmd#insert-links >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Format colors](./cookbook/index.qmd#single-column) +### [Format colors](./cookbook/index.qmd#single-column) {{< embed cookbook/index.qmd#format-color-scales >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Format colors (2)](./cookbook/index.qmd#grid) +### [Format colors (2)](./cookbook/index.qmd#grid) {{< embed cookbook/index.qmd#format-color-scales2 >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Format changes](./cookbook/index.qmd#format-changes) +### [Format changes](./cookbook/index.qmd#format-changes) {{< embed cookbook/index.qmd#format-changes >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Format tags](./cookbook/index.qmd#format-tags-and-badges) +### [Format tags](./cookbook/index.qmd#format-tags-and-badges) {{< embed cookbook/index.qmd#format-tags >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Format badge](./cookbook/index.qmd#format-tags-and-badges) +### [Format badge](./cookbook/index.qmd#format-tags-and-badges) {{< embed cookbook/index.qmd#format-badge >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Bar charts](./cookbook/index.qmd#bar-charts) +### [Bar charts](./cookbook/index.qmd#bar-charts) {{< embed cookbook/index.qmd#bar-charts >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Embed images](./cookbook/index.qmd#embed-images) +### [Embed images](./cookbook/index.qmd#embed-images) {{< embed cookbook/index.qmd#embed-images >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Rating stars](./cookbook/index.qmd#rating-stars) +### [Rating stars](./cookbook/index.qmd#rating-stars) {{< embed cookbook/index.qmd#rating-stars >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Combine cols](./cookbook/index.qmd#show-data-from-other-columns) +### [Combine cols](./cookbook/index.qmd#show-data-from-other-columns) {{< embed cookbook/index.qmd#show-data-from-other-columns >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Total rows](./cookbook/index.qmd#total-rows) +### [Total rows](./cookbook/index.qmd#total-rows) {{< embed cookbook/index.qmd#total-rows >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Nested tables](./cookbook/index.qmd#nested-tables) +### [Nested tables](./cookbook/index.qmd#nested-tables) {{< embed cookbook/index.qmd#nested-tables >}} ::: :::{.g-col-lg-3 .g-col-12 .example .shrink-example} -## [Units on first row](./cookbook/index.qmd#units-on-first-row) +### [Units on first row](./cookbook/index.qmd#units-on-first-row) {{< embed cookbook/index.qmd#units-on-first-row >}} :::