diff --git a/docs/tutorials/articles/sales_dashboard/step_01/step_01.md b/docs/tutorials/articles/sales_dashboard/step_01/step_01.md index fe4a37efa..ba1000c56 100644 --- a/docs/tutorials/articles/sales_dashboard/step_01/step_01.md +++ b/docs/tutorials/articles/sales_dashboard/step_01/step_01.md @@ -3,13 +3,13 @@ hide: - toc --- -The full code for this step is available -[here](https://github.com/Avaiga/taipy-course-gui/blob/develop/2_visual_elements/main.py){: .tp-btn target='blank' } - Let's start by creating a simple page with 3 components: a selector to select a category of items, a bar chart which displays the sales of the top 10 countries for this category and a table which displays data for the selected category +[Download the code](https://github.com/Avaiga/taipy-course-gui/blob/develop/2_visual_elements/main.py){: .tp-btn target='blank' } + + ![Step 1 Application](images/simple_app.png){ width=90% : .tp-image-border } Let's start by importing the necessary libraries: diff --git a/docs/tutorials/articles/sales_dashboard/step_02/step_02.md b/docs/tutorials/articles/sales_dashboard/step_02/step_02.md index fe448dda1..d4f9b2100 100644 --- a/docs/tutorials/articles/sales_dashboard/step_02/step_02.md +++ b/docs/tutorials/articles/sales_dashboard/step_02/step_02.md @@ -3,12 +3,11 @@ hide: - toc --- -The full code for this step is available -[here](https://github.com/Avaiga/taipy-course-gui/tree/develop/3_styling){: .tp-btn target='blank' } - This step will be about styling the application. We will add more filters, layout the visual element and regroup them in parts. +[Download the code](https://github.com/Avaiga/taipy-course-gui/tree/develop/3_styling){: .tp-btn target='blank' } + ![Styling Application](images/styling_app.png){ width=90% : .tp-image-border } We can still use the same code as the previous step, but let's recreate the page from scratch: @@ -157,7 +156,7 @@ Check out the styling part of [button](../../../../refmans/gui/viselements/gener This will add a margin to the top of the button to align it with the filters. We can also add properties to all Taipy buttons by applying properties to the `taipy-button` class -(You can find these class names by inspecting the page on a visual element) +(You can find these class names by inspecting the page on a visual element). ```css .taipy-button { diff --git a/docs/tutorials/articles/sales_dashboard/step_03/step_03.md b/docs/tutorials/articles/sales_dashboard/step_03/step_03.md index bbcfdf862..67ab30207 100644 --- a/docs/tutorials/articles/sales_dashboard/step_03/step_03.md +++ b/docs/tutorials/articles/sales_dashboard/step_03/step_03.md @@ -3,11 +3,10 @@ hide: - toc --- -The full code for this step is available -[here](https://github.com/Avaiga/taipy-course-gui/tree/develop/4_charts){: .tp-btn target='blank' } - In this part we will embed a Plotly map figure in our application. +[Download the code](https://github.com/Avaiga/taipy-course-gui/tree/develop/4_charts){: .tp-btn target='blank' } + ![Map embedded in application](images/map.png){ width=90% : .tp-image-border } For this purpose, we will use the `generate_map` function defined diff --git a/docs/tutorials/articles/sales_dashboard/step_04/step_04.md b/docs/tutorials/articles/sales_dashboard/step_04/step_04.md index bb6f76eea..a0ae1bbdd 100644 --- a/docs/tutorials/articles/sales_dashboard/step_04/step_04.md +++ b/docs/tutorials/articles/sales_dashboard/step_04/step_04.md @@ -3,11 +3,10 @@ hide: - toc --- -The full code for this step is available -[here](https://github.com/Avaiga/taipy-course-gui/tree/develop/5_multipage){: .tp-btn target='blank' } - In this part we will add a second page to our application and a sidebar menu to navigate between pages. +[Download the code](https://github.com/Avaiga/taipy-course-gui/tree/develop/5_multipage){: .tp-btn target='blank' } + ![Sidebar Menu](images/menu.png){ width=90% : .tp-image-border } Using the same code as the previous steps, let's add a root page which will contain the sidebar menu @@ -87,7 +86,6 @@ def menu_option_selected(state, action, info): The callback signature for `menu` visual element is described [here](../../../../refmans/gui/viselements/generic/menu.md). Here we extract the page URL from the `info` dictionary and use the `navigate` function to change the page. -You can learn more about multi-page navigation [here](../../../../userman/gui/pages/navigate/index.md) Lastly, we can add some CSS to resize the images and make the login button smaller: @@ -102,4 +100,4 @@ Lastly, we can add some CSS to resize the images and make the login button small } ``` -You can learn more about multi-page navigation [here](../../../../userman/gui/pages/navigate/index.md) \ No newline at end of file +You can learn more about multi-page navigation [here](../../../../userman/gui/pages/navigate/index.md). \ No newline at end of file