From f22650685616d555113ebb56aa7b3c9d09aadf43 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Tue, 5 Sep 2023 17:24:08 -0500 Subject: [PATCH] add complex application example --- newdocs/docs/getting-started.md | 302 ++++++++++---------------------- newdocs/docs/index_original.md | 17 -- newdocs/mkdocs.yml | 2 +- 3 files changed, 97 insertions(+), 224 deletions(-) delete mode 100644 newdocs/docs/index_original.md diff --git a/newdocs/docs/getting-started.md b/newdocs/docs/getting-started.md index 24ae06b7..e37cfa63 100644 --- a/newdocs/docs/getting-started.md +++ b/newdocs/docs/getting-started.md @@ -136,7 +136,7 @@ First, create a new file called `hello.html` and paste in the following content **Hint:** In the example below, click on the ➕ icon to read hints about specific sections in the code examples -```html title="hello_world.py" +```html title="hello_world.html" @@ -144,10 +144,7 @@ First, create a new file called `hello.html` and paste in the following content My First PyScript APP: Hello World! - + @@ -197,15 +194,12 @@ this feature, we'd have the following: My First PyScript APP: Hello World! - + - + - + + + + + Ice Cream Picker + + - - -``` - -In this first step, we have created the index file, imported `pyscript.css` and `pyscript.js`. We are ready to start adding the elements we need for our application. - -### Importing the needed libraries - -For this example, we will need to install `pandas` and `matplotlib`. We can install libraries using the `` tag so we can import them later. Please refer to the [``](../reference/elements/py-config.md) documentation for more information. - -```html - - - Ice Cream Picker - - - - - - - - packages = ["matplotlib", "pandas"] - - - - -``` - -### Importing the data and exploring - -Now that we have installed the needed libraries, we can import and explore the data. In this step, we need to create a `` tag to import our dependencies, read the data with pandas and then use `py-repl` to explore the data. - -You may want to read the [``](../reference/elements/py-script.md) and [``](../reference/elements/py-repl.md) documentation for more information about these elements. - - -```html - - - Ice Cream Picker - - - - - - - - packages = ["matplotlib", "pandas"] - - - - import pandas as pd - - from pyodide.http import open_url - - url = ( - "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv" - ) - ice_data = pd.read_csv(open_url(url)) - - - - ice_data - - - -``` - -Note that we are adding `ice_data` to `py-repl` to pre-populate the REPL with this variable, so you don't have to type it yourself. - -### Creating the plot - -Now that we have the data, we can create the plot. We will use the `matplotlib` library to make the plot. We will use the `display` API to display the plot on the page. You may want to read the [`display`](../reference/API/display.md) documentation for more information. - -```html - - - Ice Cream Picker - - - - - - - - packages = ["matplotlib", "pandas"] - - - - import pandas as pd - import matplotlib.pyplot as plt - - from pyodide.http import open_url - - url = ( - "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv" - ) - ice_data = pd.read_csv(open_url(url)) - - def plot(data): - plt.rcParams["figure.figsize"] = (22,20) - fig, ax = plt.subplots() - bars = ax.barh(data["name"], data["rating"], height=0.7) - ax.bar_label(bars) - plt.title("Rating of ice cream flavours of your choice") - display(fig, target="graph-area", append=False) - - plot(ice_data) - - - - ice_data - - -
- - -``` - -### Select specific flavours - -Now that we have a way to explore the data using `py-repl` and a way to create the plot using all of the data, it's time for us to add a way to select specific flavours. - -```html - - - Ice Cream Picker - - - - - - - - packages = ["matplotlib", "pandas"] - - - - import js - import pandas as pd - import matplotlib.pyplot as plt - - from pyodide.http import open_url - from pyodide.ffi import create_proxy - - url = ( - "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv" - ) - ice_data = pd.read_csv(open_url(url)) - - current_selected = [] - flavour_elements = js.document.getElementsByName("flavour") - - def plot(data): - plt.rcParams["figure.figsize"] = (22,20) - fig, ax = plt.subplots() - bars = ax.barh(data["name"], data["rating"], height=0.7) - ax.bar_label(bars) - plt.title("Rating of ice cream flavours of your choice") - display(fig, target="graph-area", append=False) - - def select_flavour(event): - for ele in flavour_elements: - if ele.checked: - current_selected = ele.value - break - if current_selected == "ALL": - plot(ice_data) - else: - filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1) - plot(ice_data[filter]) - - ele_proxy = create_proxy(select_flavour) - - for ele in flavour_elements: - if ele.value == "ALL": - ele.checked = True - current_selected = ele.value - ele.addEventListener("change", ele_proxy) - - plot(ice_data) - - + +
Select your 🍨 flavour:
@@ -449,11 +269,81 @@ Now that we have a way to explore the data using `py-repl` and a way to create t
- - ice_data - -
``` + +This creates a solid base for our application and we are ready to start adding the elements we need for our application. + +### Importing the needed libraries + +For this example, we will need to install `pandas` and `matplotlib`. We can install libraries using the `` tag +we already added to the `index.html` file above. All we have to do now is to create the `pyscript.toml` file with the +right dependencies: + +```toml title="pyscript.toml" +packages = ["matplotlib", "pandas"] +``` + +For more information on the configuration files, please refer to the [`` documentation](../reference/elements/py-config.md) + +### Importing and plotting the data + +Now that we have installed the needed libraries, we can import and explore the data. In this step, we need +to create a `` tag to import our dependencies, read the data with pandas and then use `py-repl` +to explore the data. + +You may want to read the [``](../reference/elements/py-script.md) documentation for more information about it. + + +```python title="main.py" +import pandas as pd +import matplotlib.pyplot as plt + +from pyodide.http import open_url +from pyodide.ffi import create_proxy +from pyscript import display +import js + + +url = ( + "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv" +) +ice_data = pd.read_csv(open_url(url)) + +current_selected = [] +flavour_elements = js.document.getElementsByName("flavour") + +def plot(data): + plt.rcParams["figure.figsize"] = (22,20) + fig, ax = plt.subplots() + bars = ax.barh(data["name"], data["rating"], height=0.7) + ax.bar_label(bars) + plt.title("Rating of ice cream flavours of your choice") + display(fig, target="graph-area", append=False) + +def select_flavour(event): + for ele in flavour_elements: + if ele.checked: + current_selected = ele.value + break + if current_selected == "ALL": + plot(ice_data) + else: + filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1) + plot(ice_data[filter]) + +ele_proxy = create_proxy(select_flavour) + +for ele in flavour_elements: + if ele.value == "ALL": + ele.checked = True + current_selected = ele.value + ele.addEventListener("change", ele_proxy) + +plot(ice_data) + +``` + +open this example on pyscript.com diff --git a/newdocs/docs/index_original.md b/newdocs/docs/index_original.md deleted file mode 100644 index 000ea345..00000000 --- a/newdocs/docs/index_original.md +++ /dev/null @@ -1,17 +0,0 @@ -# Welcome to MkDocs - -For full documentation visit [mkdocs.org](https://www.mkdocs.org). - -## Commands - -* `mkdocs new [dir-name]` - Create a new project. -* `mkdocs serve` - Start the live-reloading docs server. -* `mkdocs build` - Build the documentation site. -* `mkdocs -h` - Print help message and exit. - -## Project layout - - mkdocs.yml # The configuration file. - docs/ - index.md # The documentation homepage. - ... # Other markdown pages, images and other files. diff --git a/newdocs/mkdocs.yml b/newdocs/mkdocs.yml index 778399a0..e3afcfb2 100644 --- a/newdocs/mkdocs.yml +++ b/newdocs/mkdocs.yml @@ -1,4 +1,4 @@ -site_name: My Docs +site_name: PyScript theme: name: material