diff --git a/vizro-core/docs/assets/user_guides/run/pycafe_editor.png b/vizro-core/docs/assets/user_guides/run/pycafe_editor.png new file mode 100644 index 000000000..a8870aa73 Binary files /dev/null and b/vizro-core/docs/assets/user_guides/run/pycafe_editor.png differ diff --git a/vizro-core/docs/pages/tutorials/first-dashboard.md b/vizro-core/docs/pages/tutorials/first-dashboard.md index 18034f7c9..5ae4df3b4 100644 --- a/vizro-core/docs/pages/tutorials/first-dashboard.md +++ b/vizro-core/docs/pages/tutorials/first-dashboard.md @@ -2,9 +2,9 @@ There is no setup needed for your first dashboard, thanks to the amazing [Py.Cafe](https://py.cafe/). -Follow the [Edit live on Py.Cafe](https://py.cafe/stichbury/vizro-iris-analysis) link below the dashboard to see the code and experiment with it. +Follow the [Edit live on Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis-0) link and you can see the code of the below dashboard and experiment with it. - + ## Can I break your code? @@ -14,7 +14,7 @@ When you click the link to "Edit live on Py.Cafe" the dashboard is running insid ## How can I make my own dashboards? -You can use [Py.Cafe](https://py.cafe/) to experiment with your own Vizro dashboards by dropping code onto a new project. +You can use [Py.Cafe](https://py.cafe/snippet/vizro/v1) to experiment with your own Vizro dashboards by dropping code onto a new project. If you need inspiration or a starting point, we make all our examples available for you to try out on Py.Cafe. Throughout our documentation, follow the "**Run and edit this code in Py.Cafe**" link below the code snippets to open them in Py.Cafe. diff --git a/vizro-core/docs/pages/user-guides/assets.md b/vizro-core/docs/pages/user-guides/assets.md index af3ae2b07..ced21d414 100644 --- a/vizro-core/docs/pages/user-guides/assets.md +++ b/vizro-core/docs/pages/user-guides/assets.md @@ -102,7 +102,7 @@ For reference, see the [Vizro CSS files](https://github.com/mckinsey/vizro/tree/ Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "app.yaml" ```yaml @@ -164,7 +164,7 @@ Suppose you want to hide the page title on one page only. Here's how you can ach Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "app.yaml" ```yaml @@ -250,7 +250,7 @@ It's essential to understand the relationship between the targeted CSS class or Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "app.yaml" ```yaml diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index 1175a720d..32e2d8034 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -226,7 +226,7 @@ accessibility of your app. Providing an image ALT text is optional. Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "app.yaml" @@ -306,7 +306,7 @@ and give an attribute selector to select images with that matching URL hash. Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "app.yaml" ```yaml @@ -382,7 +382,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "app.yaml" ```yaml diff --git a/vizro-core/docs/pages/user-guides/custom-components.md b/vizro-core/docs/pages/user-guides/custom-components.md index 228da64c4..7b3837f08 100644 --- a/vizro-core/docs/pages/user-guides/custom-components.md +++ b/vizro-core/docs/pages/user-guides/custom-components.md @@ -472,7 +472,7 @@ As mentioned above, custom components can trigger action. To enable the custom c Vizro().build(dashboard).run() ``` - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "yaml" ```yaml # Custom components are currently only possible via python configuration diff --git a/vizro-core/docs/pages/user-guides/custom-figures.md b/vizro-core/docs/pages/user-guides/custom-figures.md index dd5f169ca..d0da35cd6 100644 --- a/vizro-core/docs/pages/user-guides/custom-figures.md +++ b/vizro-core/docs/pages/user-guides/custom-figures.md @@ -245,7 +245,7 @@ number of cards displayed dynamically adjusts based on a `vm.Parameter`. The parameter targets the `n_rows` argument of the `multiple_cards` function, determining the number of rows taken from the data. - py.cafe logoRun and edit this code in Py.Cafe + py.cafe logoRun and edit this code in Py.Cafe === "styling.css" ```css diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index a50b28424..8192ecbce 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -4,13 +4,16 @@ This guide shows you how to launch your dashboard in different ways. By default, ## Py.Cafe -You can launch your dashboard and edit the code live on [Py.Cafe](https://py.cafe/). +The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/). -For this basic example, follow the [Edit live on Py.Cafe](https://py.cafe/stichbury/vizro-iris-analysis) link below the dashboard to experiment with the code. +Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis-0), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side. - +
+ ![Py.Cafe editor](../../assets/user_guides/run/pycafe_editor.png) +
Enter your dashboard code on the left, and see the results immediately reflected in the app on the right.
+
-You can use [Py.Cafe](https://py.cafe/) to experiment with your own Vizro dashboards by dropping code into a new project. +You can use [Py.Cafe](https://py.cafe/snippet/vizro/v1) snippet mode to experiment with your own Vizro dashboards by dropping code into a new project. ## Default built-in Flask development server diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml index d57731325..de11688b8 100644 --- a/vizro-core/mkdocs.yml +++ b/vizro-core/mkdocs.yml @@ -109,7 +109,7 @@ markdown_extensions: kwds: type: vizro requirements: | - vizro + vizro==0.1.20 ruff==0.6.1 # mock - pymdownx.tabbed: alternate_style: true