Skip to content

Commit

Permalink
docs: add 2 great tables to examples page
Browse files Browse the repository at this point in the history
  • Loading branch information
@machow
machow committed Aug 9, 2024
1 parent 8eb421a commit c8c40b9
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 21 deletions.
4 changes: 2 additions & 2 deletions docs/demos/cookbook/index.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -464,7 +464,7 @@ Reactable(
"species": Column(show=False),
},
default_col_def=Column(v_align="center"),
default_page_size=6,
default_page_size=4,
)
```

Expand Down
74 changes: 74 additions & 0 deletions docs/demos/demo_snippets/coffee-table.qmd
View file
Original file line number Diff line number Diff line change
@@ -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)
```

:::
46 changes: 46 additions & 0 deletions docs/demos/demo_snippets/solar-zenith-angles.qmd
View file
Original file line number Diff line number Diff line change
@@ -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&deg;N."),
)
.cols_width({k: 50 for k in sza_pivot.columns})
.sub_missing(missing_text="")
)
render(gt)
```

:::
12 changes: 8 additions & 4 deletions docs/demos/great-tables.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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())
Expand Down Expand Up @@ -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
Expand All @@ -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 = (
Expand All @@ -201,6 +202,7 @@ gt = (
title="Solar Zenith Angles from 05:30 to 12:00",
subtitle=html("Average monthly values at latitude of 20&deg;N."),
)
.cols_width({k: 50 for k in sza_pivot.columns})
.sub_missing(missing_text="")
)
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -331,5 +334,6 @@ render(coffee_table)

:::


::::::
:::::
52 changes: 37 additions & 15 deletions docs/demos/index.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@ notebook-links: false
iframe {
overflow: hidden;
}

h3 {
text-align: center;
}

h3 a {
text-decoration: none;
font-size: 20px;

}
</style>


Expand All @@ -22,17 +32,29 @@ iframe {

:::::: {.column-page}


## Demos

::::: {.grid}
:::{.g-col-lg-6 .g-col-12 .example}
### [PyPI downloads](./pypi-downloads)
<iframe src="./demo_snippets/pypi-downloads.html" width="100%" height="500px" scrolling="no"></iframe>
<iframe src="./demo_snippets/pypi-downloads.html" width="100%" height="400px" scrolling="no"></iframe>
:::

:::{.g-col-lg-6 .g-col-12 .example}
### [Twitter followers](./twitter-followers.qmd)
<iframe src="./demo_snippets/twitter-followers.html" width="100%" height="600px" scrolling="no"></iframe>
<iframe src="./demo_snippets/twitter-followers.html" width="100%" height="400px" scrolling="no"></iframe>
:::

:::{.g-col-lg-6 .g-col-12 .example}
### [Great Tables - coffee table](./great-tables.qmd)
<iframe src="./demo_snippets/coffee-table.html" width="100%" height="400px" scrolling="no"></iframe>
:::


:::{.g-col-lg-6 .g-col-12 .example}
### [Great Tables - solar angles](./great-tables.qmd)
<iframe src="./demo_snippets/solar-zenith-angles.html" width="100%" height="400px" scrolling="no"></iframe>
:::

:::::
Expand All @@ -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 >}}
:::

Expand Down

0 comments on commit c8c40b9

Please sign in to comment.