From 888c8eef40bce6ca17ad70fcb630033dc2e77fdf Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Mon, 18 Nov 2024 14:54:19 +0100 Subject: [PATCH 01/13] restructure vizro-ai dashboard docs --- vizro-ai/docs/index.md | 19 -- .../user-guides/create-advanced-charts.md | 66 ++++++- .../user-guides/create-complex-dashboard.md | 68 ++++++- .../user-guides/run-vizro-ai-dashboard.md | 173 ++++++++++++++++++ vizro-ai/mkdocs.yml | 8 +- vizro-core/mkdocs.yml | 2 +- 6 files changed, 309 insertions(+), 27 deletions(-) create mode 100644 vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md diff --git a/vizro-ai/docs/index.md b/vizro-ai/docs/index.md index 9d629e9bc..9f2728e59 100644 --- a/vizro-ai/docs/index.md +++ b/vizro-ai/docs/index.md @@ -8,25 +8,6 @@ Even if you are an experienced data practitioner, Vizro-AI optimizes how you cre Gif to demonstrate vizro-ai -Below is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI. - -| Feature type | Feature | Availability | -|----------------------|------------------------------------------------------------------------------------------------------------------------|--------------| -| **Components** | [Graph](https://vizro.readthedocs.io/en/stable/pages/user-guides/graph/) | ✔ | -| | [AG Grid](https://vizro.readthedocs.io/en/stable/pages/user-guides/table/#ag-grid) | ✔ | -| | [Card](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✔ | -| | [Button](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✖ | -| | [Tabs](https://vizro.readthedocs.io/en/stable/pages/user-guides/tabs/) | ✖ | -| | [Containers](https://vizro.readthedocs.io/en/stable/pages/user-guides/container/) | ✖ | -| **Controls** | [Filter](https://vizro.readthedocs.io/en/stable/pages/user-guides/filters/) | ✔ | -| | [Parameter](https://vizro.readthedocs.io/en/stable/pages/user-guides/parameters/) | ✖ | -| **Navigation** | [Default navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#use-the-default-navigation) | ✔ | -| | [Custom navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#customize-the-navigation-bar) | ✖ | -| **Layout** | [Layout](https://vizro.readthedocs.io/en/stable/pages/user-guides/layouts/) | ✔ | -| **Dashboard header** | [Dashboard title](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✔ | -| | [Logo](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✖ | - -If a feature you need for your dashboard isn't currently supported by Vizro-AI you can [retrieve the dashboard code](https://vizro.readthedocs.io/projects/vizro-ai/en/vizro-ai-0.2.3/pages/user-guides/retrieve-dashboard-code/) and add the missing components before running the dashboard.
diff --git a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md index c616f88bd..fc8c7cd15 100644 --- a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md +++ b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md @@ -1,9 +1,9 @@ # Advanced charts This page explains how to use Vizro-AI to create charts with advanced visualizations and enhanced formatting. -## Animated bar chart +## Animated map chart -We'll create an animated bar chart illustrating the GDP per capita of each continent over time. Run the code below and look at the result. +We'll create an animated map chart illustrating the GDP per capita of each continent over time. Run the code below and look at the result. !!! example "Vizro-AI animated chart" @@ -76,3 +76,65 @@ Congratulations! You've now gained insights into harnessing the power of a LLM a Advanced charts are well-suited for [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard applications. You can create a chart using `vizro-ai` to plug into your `vizro` dashboard in seconds! + + +## Polar bar chart + +A polar bar chart is a circular graph where each axis represents a different variable, typically used for displaying cyclical or directional data. +It's suitable for comparing multiple variables across different categories or directions. Let's make one using Vizro-AI. + + +!!! example "Polar Bar Chart" + + === "Resulting chart" + [![VizroAIChart1]][VizroAIChart1] + + === "Code for the cell" + ```py + import vizro_ai + from vizro_ai import VizroAI + import plotly.express as px + + from dotenv import load_dotenv + load_dotenv() + + df = px.data.wind() + + vizro_ai = VizroAI(model="gpt-4o") + fig = vizro_ai.plot(df, + """Describe wind frequency and direction using bar_polar chart. + Increase the width and height of the figure. + Improve layout by placing title to the left. Show legend""") + fig.show() + ``` + + [VizroAIChart1]: ../../assets/user_guides/polar_bar_chart.png + + + +## 3D surface plot + +Let's explore how to generate a 3-dimensional surface plot with VizroAI. + +!!! example "Surface plot" + + === "Resulting chart" + [![VizroAIChart3]][VizroAIChart3] + + === "Code for the cell" + ```py + import vizro_ai + from vizro_ai import VizroAI + import plotly.express as px + + from dotenv import load_dotenv + load_dotenv() + + df = px.data.gapminder() + + vizro_ai = VizroAI(model="gpt-4o") + fig = vizro_ai.plot(df, "create a surface plot") + fig.show() + ``` + + [VizroAIChart3]: ../../assets/user_guides/surface_plot.gif \ No newline at end of file diff --git a/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md b/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md index 5ea3721ca..cdd19d16f 100644 --- a/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md @@ -105,9 +105,75 @@ The call to `dashboard()` triggers the dashboard building process. Once Vizro-AI !!! example "Generated dashboard" - === "Code" + === "Code for the cell" + ```py + import vizro_ai + from vizro_ai import VizroAI + import plotly.express as px + + from dotenv import load_dotenv + load_dotenv() + + df1 = px.data.election() + df2 = px.data.stocks(datetimes=True) + + user_question = """ + Create a 2-page dashabord. + + + Visualize the election result. + + NOTE: + 1. use consistent and default color scheme. + 1. make axis label and chart title simple and readable. + + I need 3 pie charts, 3 bar charts, 1 table, and 1 radio button as filter. + + pie chart 1: shows number of votes Coderre received, compared to total votes. + pie chart 2: shows number of votes Bergeron received, compared to total votes. + pie chart 3: shows number of votes Joly received, compared to total votes. + + bar chart 1: shows number of districts Coderre winned. put `result` on y-axis, put "count of districts" on x-axis. + bar chart 2: shows number of districts Bergeron winned. put `result` on y-axis, put "count of districts" on x-axis. + bar chart 3: shows number of districts Joly winned. put `result` on y-axis, put "count of districts" on x-axis. + + use table to show the election data. + + Layout of page 1: + Imaging the whole page is divided by a (3 by 3) grid, with 3 rows and 3 columns. + Row 1 - pie chart 1 takes column 1; pie chart 2 takes column 2; pie chart 3 takes column 3. + Row 2 - bar chart 1 takes column 1; bar chart 2 takes column 2; bar chart 3 takes column 3. + Row 3 - the table span all three columns. + + Add a filter to filter all pie charts by district, using radio button as selelctor. + + + + Visualize the tech company stock data. + I need 1 line chart, 6 cards. + + line chart: shows the stock price history of all comanies. put data on x-axis, company names as facet_row. make the y-axis label simple and readable. + + For cards, render the exact text as requested. + Card 1 has text `> Dow Jones \n\n ## **39,737.26**\n` + Card 2 has text `> S&P 500 \n\n ## **4,509.61**\n` + Card 3 has text `> NASDAQ Composite \n\n ## **14,141.48**\n` + Card 4 has text `> FTSE 100 \n\n ## **7,592.66**\n` + Card 5 has text `> DAX \n\n ## **15,948.85**\n` + Card 6 has text `> Nikkei 225 \n\n ## **32,210.78**\n` + + Page Layout: + In a grid of 7 rows and 6 columns: + column 1 to column 5 - the line chart spans 5 columns (all 7 rows) from the left. + column 6 - card 1 takes row 1; card 2 takes row 2; card 3 takes row 3; ... card 6 takes row 6; row 7 is empty. + """ + + vizro_ai = VizroAI(model="gpt-4o") + dashboard = vizro_ai.dashboard([df1, df2], user_question) + Vizro().build(dashboard).run() + ``` === "Page1" diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md new file mode 100644 index 000000000..7550ef996 --- /dev/null +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -0,0 +1,173 @@ +# How to run Vizro-AI dashboard + +This guide offers insights into different ways of running `VizroAI.dashboard` to generate Vizro dashboard. + +??? note "Note: API key" + + Make sure you have followed the [LLM setup guide](../user-guides/install.md#set-up-access-to-a-large-language-model) and thatyour api key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`). + +## Run Vizro-AI dashboard + +### 1. Prepare the data and user prompt +```py +import vizro.plotly.express as px + +df = px.data.tips() + +user_question = """ +Create a one-page dashboard layout with the following components: + +1. Card: + - Position: Left of the page + - Size: Takes up 1/4 of the total page width + - Content: Display the text "This is Tips dataset" + +2. Table: + - Position: Right of the card + - Size: Takes up the remaining 3/4 of the page width + - Content: Display the Tips dataset +""" +``` + +### 2. Generate and launch the dashboard +```py +from vizro_ai import VizroAI + +vizro_ai = VizroAI(model="gpt-4o-mini") +dashboard = vizro_ai.dashboard([df], user_question) +``` +This triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard. + +!!! example "Generated dashboard" + + === "Code" + ```py + import vizro.plotly.express as px + from vizro_ai import VizroAI + from vizro import Vizro + + df = px.data.tips() + user_question = """ + Create a one-page dashboard layout with the following components: + + 1. Card: + - Position: Left of the page + - Size: Takes up 1/4 of the total page width + - Content: Display the text "This is Tips dataset" + + 1. Table: + - Position: Right of the card + - Size: Takes up the remaining 3/4 of the page width + - Content: Display the Tips dataset + """ + vizro_ai = VizroAI(model="gpt-4o-mini") + dashboard = vizro_ai.dashboard([df], user_question) + Vizro().build(dashboard).run() + ``` + + === "Result" + [![VizroAIDashboardPage1]][VizroAIDashboardPage1] + + + [VizroAIDashboardPage1]: ../../assets/user_guides/dashboard/dashboard2_page1.png + +## Retrieve the Python code of the dashboard + +To illustrate the process, lets re-use the example provided above. + +Like the `VizroAI.plot` method, in order to produce more comprehensive output we need to set `return_elements=True`. `return_elements` is a boolean (by default `False`) which determines the return type of `VizroAI.dashboard`. + +- If set to `False` it produces a `Vizro` dashboard object. +- If set to `True`, it returns a class (a Pydantic model) containing both the dashboard object and the code string used to generate it. + +!!! example "View dashboard code" + + === "Code" + ```py + import vizro.plotly.express as px + from vizro_ai import VizroAI + from vizro import Vizro + + df = px.data.tips() + user_question = """ + Create a one-page dashboard layout with the following components: + + 1. Card: + - Position: Left of the page + - Size: Takes up 1/4 of the total page width + - Content: Display the text "This is Tips dataset" + + 1. Table: + - Position: Right of the card + - Size: Takes up the remaining 3/4 of the page width + - Content: Display the Tips dataset + """ + vizro_ai = VizroAI(model="gpt-4o-mini") + result = vizro_ai.dashboard([df], user_question, return_elements=True) + + print(result.code) + ``` + === "Result" + ```py + ######## Module Imports ########## + from vizro import Vizro + from vizro.managers import data_manager + from vizro.models.types import capture + import vizro.models as vm + from vizro.tables import dash_ag_grid + + ########## Data Imports ########## + #####!!! UNCOMMENT BELOW !!!###### + # data_manager["restaurant_bills"] = ===> Fill in here <=== + + ###### Callable definitions ###### + + + ########## Object code ########### + dashboard = vm.Dashboard( + pages=[ + vm.Page( + id="Tips Data Visualization", + components=[ + vm.Card( + id="tips_card_tips_data_visualization", + type="card", + text="This is Tips dataset", + href="", + ), + vm.AgGrid( + id="tips_table_tips_data_visualization", + figure=dash_ag_grid(data_frame="restaurant_bills"), + ), + ], + title="Tips Data Visualization", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), + controls=[], + ) + ], + title="Tips Dataset Overview", + ) + ``` + +## Available Vizro components + +Below is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI. + +| Feature type | Feature | Availability | +|----------------------|------------------------------------------------------------------------------------------------------------------------|--------------| +| **Components** | [Graph](https://vizro.readthedocs.io/en/stable/pages/user-guides/graph/) | ✔ | +| | [AG Grid](https://vizro.readthedocs.io/en/stable/pages/user-guides/table/#ag-grid) | ✔ | +| | [Card](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✔ | +| | [Button](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✖ | +| | [Tabs](https://vizro.readthedocs.io/en/stable/pages/user-guides/tabs/) | ✖ | +| | [Containers](https://vizro.readthedocs.io/en/stable/pages/user-guides/container/) | ✖ | +| **Controls** | [Filter](https://vizro.readthedocs.io/en/stable/pages/user-guides/filters/) | ✔ | +| | [Parameter](https://vizro.readthedocs.io/en/stable/pages/user-guides/parameters/) | ✖ | +| **Navigation** | [Default navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#use-the-default-navigation) | ✔ | +| | [Custom navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#customize-the-navigation-bar) | ✖ | +| **Layout** | [Layout](https://vizro.readthedocs.io/en/stable/pages/user-guides/layouts/) | ✔ | +| **Dashboard header** | [Dashboard title](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✔ | +| | [Logo](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✖ | +| | [Actions](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/) | ✖ | + +If a feature you need for your dashboard isn't currently supported by Vizro-AI you can retrieve the dashboard code and add the missing components before running the dashboard. diff --git a/vizro-ai/mkdocs.yml b/vizro-ai/mkdocs.yml index c95fbe9e0..8711a9f3c 100644 --- a/vizro-ai/mkdocs.yml +++ b/vizro-ai/mkdocs.yml @@ -16,8 +16,8 @@ nav: - Advanced charts: pages/user-guides/create-advanced-charts.md - Add Vizro-AI charts to a Vizro dashboard: pages/user-guides/add-generated-chart-usecase.md - DASHBOARDS: - - Generate a complex dashboard: pages/user-guides/create-complex-dashboard.md - - Retrieve code for a generated dashboard: pages/user-guides/retrieve-dashboard-code.md + - Run vizro_ai.dashboard: pages/user-guides/run-vizro-ai-dashboard.md + - Advanced dashboard: pages/user-guides/create-complex-dashboard.md - Use Vizro-AI methods as Langchain tools: pages/user-guides/vizro-ai-langchain-guide.md - API Reference: - VizroAI: pages/API-reference/vizro-ai.md @@ -26,8 +26,8 @@ nav: - Disclaimer: pages/explanation/disclaimer.md - Safeguard code execution: pages/explanation/safeguard.md - Safety in Vizro-AI: pages/explanation/safety-in-vizro-ai.md - - Examples: - - Chart examples: pages/user-guides/chart-examples.md + - Try out!: + - Try out!: https://vizro.mckinsey.com #- Contribute: # - Contributing: pages/contribute/contributing.md - Vizro: diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml index 7686be44e..8c80cb7ba 100644 --- a/vizro-core/mkdocs.yml +++ b/vizro-core/mkdocs.yml @@ -55,7 +55,7 @@ nav: - Contribute to Vizro: pages/explanation/contributing.md - Documentation style: pages/explanation/documentation-style-guide.md - Authors: pages/explanation/authors.md - - Examples: + - Try out!: - Vizro gallery: https://vizro.mckinsey.com/ - Vizro-AI: - Vizro-AI: https://vizro.readthedocs.io/projects/vizro-ai/ From ca17a907f9b0a1417d66e7afb95847481f39638c Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Mon, 18 Nov 2024 17:25:28 +0100 Subject: [PATCH 02/13] updating actions availability in vizro-ai dashboard --- .../user-guides/run-vizro-ai-dashboard.md | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index 7550ef996..979dc9950 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -153,21 +153,23 @@ Like the `VizroAI.plot` method, in order to produce more comprehensive output we Below is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI. -| Feature type | Feature | Availability | -|----------------------|------------------------------------------------------------------------------------------------------------------------|--------------| -| **Components** | [Graph](https://vizro.readthedocs.io/en/stable/pages/user-guides/graph/) | ✔ | -| | [AG Grid](https://vizro.readthedocs.io/en/stable/pages/user-guides/table/#ag-grid) | ✔ | -| | [Card](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✔ | -| | [Button](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✖ | -| | [Tabs](https://vizro.readthedocs.io/en/stable/pages/user-guides/tabs/) | ✖ | -| | [Containers](https://vizro.readthedocs.io/en/stable/pages/user-guides/container/) | ✖ | -| **Controls** | [Filter](https://vizro.readthedocs.io/en/stable/pages/user-guides/filters/) | ✔ | -| | [Parameter](https://vizro.readthedocs.io/en/stable/pages/user-guides/parameters/) | ✖ | -| **Navigation** | [Default navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#use-the-default-navigation) | ✔ | -| | [Custom navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#customize-the-navigation-bar) | ✖ | -| **Layout** | [Layout](https://vizro.readthedocs.io/en/stable/pages/user-guides/layouts/) | ✔ | -| **Dashboard header** | [Dashboard title](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✔ | -| | [Logo](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✖ | -| | [Actions](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/) | ✖ | +| Feature type | Feature | Availability | +|----------------------|------------------------------------------------------------------------------------------------------------------------------------------|-------------| +| **Components** | [Graph](https://vizro.readthedocs.io/en/stable/pages/user-guides/graph/) | ✔ | +| | [AG Grid](https://vizro.readthedocs.io/en/stable/pages/user-guides/table/#ag-grid) | ✔ | +| | [Card](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✔ | +| | [Button](https://vizro.readthedocs.io/en/stable/pages/user-guides/card-button/) | ✖ | +| | [Tabs](https://vizro.readthedocs.io/en/stable/pages/user-guides/tabs/) | ✖ | +| | [Containers](https://vizro.readthedocs.io/en/stable/pages/user-guides/container/) | ✖ | +| **Controls** | [Filter](https://vizro.readthedocs.io/en/stable/pages/user-guides/filters/) | ✔ | +| | [Parameter](https://vizro.readthedocs.io/en/stable/pages/user-guides/parameters/) | ✖ | +| **Navigation** | [Default navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#use-the-default-navigation) | ✔ | +| | [Custom navigation](https://vizro.readthedocs.io/en/stable/pages/user-guides/navigation/#customize-the-navigation-bar) | ✖ | +| **Layout** | [Layout](https://vizro.readthedocs.io/en/stable/pages/user-guides/layouts/) | ✔ | +| **Dashboard header** | [Dashboard title](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✔ | +| | [Logo](https://vizro.readthedocs.io/en/stable/pages/user-guides/dashboard/) | ✖ | +| **Actions** | [Pre-defined actions](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#pre-defined-actions/) | ✖ | +| | [Filter interaction between charts](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#filter-data-by-clicking-on-chart/) | ✖ | +| | [Custom actions](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#custom-actions/) | ✖ | If a feature you need for your dashboard isn't currently supported by Vizro-AI you can retrieve the dashboard code and add the missing components before running the dashboard. From da78a8111d010c32aaffd6cbfd3e1ecece215954 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 18 Nov 2024 16:30:12 +0000 Subject: [PATCH 03/13] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../docs/pages/user-guides/create-advanced-charts.md | 2 +- .../docs/pages/user-guides/run-vizro-ai-dashboard.md | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md index fc8c7cd15..15caa114e 100644 --- a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md +++ b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md @@ -137,4 +137,4 @@ Let's explore how to generate a 3-dimensional surface plot with VizroAI. fig.show() ``` - [VizroAIChart3]: ../../assets/user_guides/surface_plot.gif \ No newline at end of file + [VizroAIChart3]: ../../assets/user_guides/surface_plot.gif diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index 979dc9950..99196438f 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -1,12 +1,12 @@ # How to run Vizro-AI dashboard -This guide offers insights into different ways of running `VizroAI.dashboard` to generate Vizro dashboard. +This guide offers insights into different ways of running `VizroAI.dashboard` to generate Vizro dashboard. ??? note "Note: API key" Make sure you have followed the [LLM setup guide](../user-guides/install.md#set-up-access-to-a-large-language-model) and thatyour api key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`). -## Run Vizro-AI dashboard +## Run Vizro-AI dashboard ### 1. Prepare the data and user prompt ```py @@ -73,11 +73,11 @@ This triggers the dashboard building process. Once Vizro-AI finishes the dashboa ## Retrieve the Python code of the dashboard -To illustrate the process, lets re-use the example provided above. +To illustrate the process, lets re-use the example provided above. -Like the `VizroAI.plot` method, in order to produce more comprehensive output we need to set `return_elements=True`. `return_elements` is a boolean (by default `False`) which determines the return type of `VizroAI.dashboard`. +Like the `VizroAI.plot` method, in order to produce more comprehensive output we need to set `return_elements=True`. `return_elements` is a boolean (by default `False`) which determines the return type of `VizroAI.dashboard`. -- If set to `False` it produces a `Vizro` dashboard object. +- If set to `False` it produces a `Vizro` dashboard object. - If set to `True`, it returns a class (a Pydantic model) containing both the dashboard object and the code string used to generate it. !!! example "View dashboard code" From ac0690959b7743ddcf9766e9cfe7b94b09fc360a Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Tue, 19 Nov 2024 11:22:50 +0100 Subject: [PATCH 04/13] addressing pr comments --- vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md | 2 +- vizro-ai/mkdocs.yml | 6 +++--- vizro-core/mkdocs.yml | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index 99196438f..732873f7d 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -1,6 +1,6 @@ # How to run Vizro-AI dashboard -This guide offers insights into different ways of running `VizroAI.dashboard` to generate Vizro dashboard. +This guide offers insights into different ways of running `VizroAI.dashboard` to generate Vizro dashboards from natural language prompts. ??? note "Note: API key" diff --git a/vizro-ai/mkdocs.yml b/vizro-ai/mkdocs.yml index 8711a9f3c..cab7a6e9c 100644 --- a/vizro-ai/mkdocs.yml +++ b/vizro-ai/mkdocs.yml @@ -17,7 +17,7 @@ nav: - Add Vizro-AI charts to a Vizro dashboard: pages/user-guides/add-generated-chart-usecase.md - DASHBOARDS: - Run vizro_ai.dashboard: pages/user-guides/run-vizro-ai-dashboard.md - - Advanced dashboard: pages/user-guides/create-complex-dashboard.md + - Advanced dashboards: pages/user-guides/create-complex-dashboard.md - Use Vizro-AI methods as Langchain tools: pages/user-guides/vizro-ai-langchain-guide.md - API Reference: - VizroAI: pages/API-reference/vizro-ai.md @@ -26,8 +26,8 @@ nav: - Disclaimer: pages/explanation/disclaimer.md - Safeguard code execution: pages/explanation/safeguard.md - Safety in Vizro-AI: pages/explanation/safety-in-vizro-ai.md - - Try out!: - - Try out!: https://vizro.mckinsey.com + - Examples: + - Vizro gallery: https://vizro.mckinsey.com #- Contribute: # - Contributing: pages/contribute/contributing.md - Vizro: diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml index 8c80cb7ba..7686be44e 100644 --- a/vizro-core/mkdocs.yml +++ b/vizro-core/mkdocs.yml @@ -55,7 +55,7 @@ nav: - Contribute to Vizro: pages/explanation/contributing.md - Documentation style: pages/explanation/documentation-style-guide.md - Authors: pages/explanation/authors.md - - Try out!: + - Examples: - Vizro gallery: https://vizro.mckinsey.com/ - Vizro-AI: - Vizro-AI: https://vizro.readthedocs.io/projects/vizro-ai/ From 07d8392981fdf508a4124c5eab5b811d4c4ee405 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Tue, 19 Nov 2024 17:13:55 +0100 Subject: [PATCH 05/13] addressing pr comments part 2 --- .../pages/user-guides/create-complex-dashboard.md | 12 ++++++------ .../docs/pages/user-guides/run-vizro-ai-dashboard.md | 10 +++++----- vizro-ai/mkdocs.yml | 2 +- vizro-core/mkdocs.yml | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md b/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md index cdd19d16f..eb2e07f38 100644 --- a/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/create-complex-dashboard.md @@ -134,26 +134,26 @@ The call to `dashboard()` triggers the dashboard building process. Once Vizro-AI pie chart 2: shows number of votes Bergeron received, compared to total votes. pie chart 3: shows number of votes Joly received, compared to total votes. - bar chart 1: shows number of districts Coderre winned. put `result` on y-axis, put "count of districts" on x-axis. - bar chart 2: shows number of districts Bergeron winned. put `result` on y-axis, put "count of districts" on x-axis. - bar chart 3: shows number of districts Joly winned. put `result` on y-axis, put "count of districts" on x-axis. + bar chart 1: shows number of districts Coderre won. Put `result` on y-axis, put "count of districts" on x-axis. + bar chart 2: shows number of districts Bergeron won. Put `result` on y-axis, put "count of districts" on x-axis. + bar chart 3: shows number of districts Joly won. Put `result` on y-axis, put "count of districts" on x-axis. use table to show the election data. Layout of page 1: - Imaging the whole page is divided by a (3 by 3) grid, with 3 rows and 3 columns. + Imagine the whole page is divided by a (3 by 3) grid, with 3 rows and 3 columns. Row 1 - pie chart 1 takes column 1; pie chart 2 takes column 2; pie chart 3 takes column 3. Row 2 - bar chart 1 takes column 1; bar chart 2 takes column 2; bar chart 3 takes column 3. Row 3 - the table span all three columns. - Add a filter to filter all pie charts by district, using radio button as selelctor. + Add a filter to filter all pie charts by district, using radio button as selector. Visualize the tech company stock data. I need 1 line chart, 6 cards. - line chart: shows the stock price history of all comanies. put data on x-axis, company names as facet_row. make the y-axis label simple and readable. + line chart: shows the stock price history of all companies. Put data on x-axis, company names as facet_row. make the y-axis label simple and readable. For cards, render the exact text as requested. Card 1 has text `> Dow Jones \n\n ## **39,737.26**\n` diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index 732873f7d..d32ac37cb 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -1,10 +1,10 @@ # How to run Vizro-AI dashboard -This guide offers insights into different ways of running `VizroAI.dashboard` to generate Vizro dashboards from natural language prompts. +This guide offers insights into different ways of running `VizroAI.dashboard` to generate a Vizro dashboards from natural language prompts. ??? note "Note: API key" - Make sure you have followed the [LLM setup guide](../user-guides/install.md#set-up-access-to-a-large-language-model) and thatyour api key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`). + Make sure you have followed the [LLM setup guide](../user-guides/install.md#set-up-access-to-a-large-language-model) and that your API key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`). ## Run Vizro-AI dashboard @@ -73,7 +73,7 @@ This triggers the dashboard building process. Once Vizro-AI finishes the dashboa ## Retrieve the Python code of the dashboard -To illustrate the process, lets re-use the example provided above. +To illustrate the process, lets use the example above. Like the `VizroAI.plot` method, in order to produce more comprehensive output we need to set `return_elements=True`. `return_elements` is a boolean (by default `False`) which determines the return type of `VizroAI.dashboard`. @@ -151,7 +151,7 @@ Like the `VizroAI.plot` method, in order to produce more comprehensive output we ## Available Vizro components -Below is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI. +The following list is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI. | Feature type | Feature | Availability | |----------------------|------------------------------------------------------------------------------------------------------------------------------------------|-------------| @@ -172,4 +172,4 @@ Below is a table of the Vizro components currently supported by Vizro-AI. This l | | [Filter interaction between charts](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#filter-data-by-clicking-on-chart/) | ✖ | | | [Custom actions](https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#custom-actions/) | ✖ | -If a feature you need for your dashboard isn't currently supported by Vizro-AI you can retrieve the dashboard code and add the missing components before running the dashboard. +If a feature you need for your dashboard isn't currently supported by Vizro-AI you can retrieve the dashboard code and add it by hand before running the dashboard. diff --git a/vizro-ai/mkdocs.yml b/vizro-ai/mkdocs.yml index cab7a6e9c..7eb6e186a 100644 --- a/vizro-ai/mkdocs.yml +++ b/vizro-ai/mkdocs.yml @@ -27,7 +27,7 @@ nav: - Safeguard code execution: pages/explanation/safeguard.md - Safety in Vizro-AI: pages/explanation/safety-in-vizro-ai.md - Examples: - - Vizro gallery: https://vizro.mckinsey.com + - Gallery: https://vizro.mckinsey.com #- Contribute: # - Contributing: pages/contribute/contributing.md - Vizro: diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml index 7686be44e..b5442613f 100644 --- a/vizro-core/mkdocs.yml +++ b/vizro-core/mkdocs.yml @@ -56,7 +56,7 @@ nav: - Documentation style: pages/explanation/documentation-style-guide.md - Authors: pages/explanation/authors.md - Examples: - - Vizro gallery: https://vizro.mckinsey.com/ + - Gallery: https://vizro.mckinsey.com/ - Vizro-AI: - Vizro-AI: https://vizro.readthedocs.io/projects/vizro-ai/ From 2abec8d49f82391c315a96574514188a8ec4fe17 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Tue, 19 Nov 2024 18:01:57 +0100 Subject: [PATCH 06/13] adding paragraph explaining data manager --- .../user-guides/run-vizro-ai-dashboard.md | 41 +++++-------------- 1 file changed, 10 insertions(+), 31 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index d32ac37cb..d4fc2e4d5 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -8,36 +8,6 @@ This guide offers insights into different ways of running `VizroAI.dashboard` to ## Run Vizro-AI dashboard -### 1. Prepare the data and user prompt -```py -import vizro.plotly.express as px - -df = px.data.tips() - -user_question = """ -Create a one-page dashboard layout with the following components: - -1. Card: - - Position: Left of the page - - Size: Takes up 1/4 of the total page width - - Content: Display the text "This is Tips dataset" - -2. Table: - - Position: Right of the card - - Size: Takes up the remaining 3/4 of the page width - - Content: Display the Tips dataset -""" -``` - -### 2. Generate and launch the dashboard -```py -from vizro_ai import VizroAI - -vizro_ai = VizroAI(model="gpt-4o-mini") -dashboard = vizro_ai.dashboard([df], user_question) -``` -This triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard. - !!! example "Generated dashboard" === "Code" @@ -71,10 +41,12 @@ This triggers the dashboard building process. Once Vizro-AI finishes the dashboa [VizroAIDashboardPage1]: ../../assets/user_guides/dashboard/dashboard2_page1.png +This triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard. + ## Retrieve the Python code of the dashboard To illustrate the process, lets use the example above. - + Like the `VizroAI.plot` method, in order to produce more comprehensive output we need to set `return_elements=True`. `return_elements` is a boolean (by default `False`) which determines the return type of `VizroAI.dashboard`. - If set to `False` it produces a `Vizro` dashboard object. @@ -149,6 +121,13 @@ Like the `VizroAI.plot` method, in order to produce more comprehensive output we ) ``` +To use the above code, you will still need to add three simple steps. +1. Import your data into the Python environment. +2. Uncomment data manager instance and map the imported data. See Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/). +3. Add following code snippet at the end of the file `Vizro().build(dashboard).run()` to launch the dashboard. + +Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/vizro-ai-0.3.2/pages/tutorials/quickstart/) + ## Available Vizro components The following list is a table of the Vizro components currently supported by Vizro-AI. This list is not exhaustive, and we are actively working on adding more features to Vizro-AI. From b06c5fe2b37d477e30143fe4d0a66922faee5619 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 19 Nov 2024 17:04:16 +0000 Subject: [PATCH 07/13] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index d4fc2e4d5..77ae10321 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -121,9 +121,9 @@ Like the `VizroAI.plot` method, in order to produce more comprehensive output we ) ``` -To use the above code, you will still need to add three simple steps. -1. Import your data into the Python environment. -2. Uncomment data manager instance and map the imported data. See Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/). +To use the above code, you will still need to add three simple steps. +1. Import your data into the Python environment. +2. Uncomment data manager instance and map the imported data. See Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/). 3. Add following code snippet at the end of the file `Vizro().build(dashboard).run()` to launch the dashboard. Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/vizro-ai-0.3.2/pages/tutorials/quickstart/) From 4592d4d2a4e2c902258c0f406d697ca0675287ba Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Wed, 20 Nov 2024 11:00:19 +0000 Subject: [PATCH 08/13] Adding a temporary glitch to force Vale results --- vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md b/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md index 922fcb3b4..276940836 100644 --- a/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md +++ b/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md @@ -1,4 +1,4 @@ -# How to add Vizro-AI created charts to a Vizro dashboard +# How to Addddd Vizro-AI created charts to a Vizro dashboard This guide explains the different ways in which you can add a chart generated by Vizro-AI to an existing [Vizro dashboard](https://github.com/mckinsey/vizro/tree/main/vizro-core). From f9b10da81872dd3eff4f99cb6e0e8aaae397a4d2 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Wed, 20 Nov 2024 11:13:26 +0000 Subject: [PATCH 09/13] Rolling out the temp change as all is fine --- vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md b/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md index 276940836..922fcb3b4 100644 --- a/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md +++ b/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md @@ -1,4 +1,4 @@ -# How to Addddd Vizro-AI created charts to a Vizro dashboard +# How to add Vizro-AI created charts to a Vizro dashboard This guide explains the different ways in which you can add a chart generated by Vizro-AI to an existing [Vizro dashboard](https://github.com/mckinsey/vizro/tree/main/vizro-core). From d70b0251b45d75e5c697b6bde9e523ed14b74482 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Wed, 20 Nov 2024 13:43:46 +0100 Subject: [PATCH 10/13] addressing pr comments --- .../docs/pages/user-guides/run-vizro-ai-dashboard.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index 77ae10321..ee5f973a0 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -121,12 +121,12 @@ Like the `VizroAI.plot` method, in order to produce more comprehensive output we ) ``` -To use the above code, you will still need to add three simple steps. -1. Import your data into the Python environment. -2. Uncomment data manager instance and map the imported data. See Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/). -3. Add following code snippet at the end of the file `Vizro().build(dashboard).run()` to launch the dashboard. +To use the above code, you will still need to add three simple steps: +- Import your data into the Python environment. +- Uncomment the data manager instance and map the imported data. See the Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/). +- Add following code snippet at the end of the file `Vizro().build(dashboard).run()` to launch the dashboard. -Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/vizro-ai-0.3.2/pages/tutorials/quickstart/) +Detailed guidance is provided in [dashboard generation tutorial](Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/latest/pages/tutorials/quickstart/)) ## Available Vizro components From c723cde85b167f87cf177569a4124b453d8434f2 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Thu, 21 Nov 2024 10:46:53 +0100 Subject: [PATCH 11/13] pr comments --- .../user-guides/run-vizro-ai-dashboard.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index ee5f973a0..dc0602db3 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -122,11 +122,22 @@ Like the `VizroAI.plot` method, in order to produce more comprehensive output we ``` To use the above code, you will still need to add three simple steps: -- Import your data into the Python environment. -- Uncomment the data manager instance and map the imported data. See the Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/). -- Add following code snippet at the end of the file `Vizro().build(dashboard).run()` to launch the dashboard. -Detailed guidance is provided in [dashboard generation tutorial](Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/latest/pages/tutorials/quickstart/)) +- Import your data. + ```py + data = pd.read_csv('data.csv') # Replace 'data.csv' with your file name or path to your data + ``` +- After importing your data, register it in the data manager by uncommenting the data manager instance and assigning the imported data to it. See the Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#reference-by-name/). + + ```py + data_manager["restaurant_bills"] = data + ``` + +- Launch the dashboard by adding the code below at the end of the file: + ```py + Vizro().build(dashboard).run() + ``` +Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/latest/pages/tutorials/quickstart/)). ## Available Vizro components From 477b52fccab3f2a245b2455de12094e2d456ae12 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Thu, 21 Nov 2024 10:52:38 +0100 Subject: [PATCH 12/13] removing unused files --- vizro-ai/docs/index.md | 2 +- .../docs/pages/user-guides/chart-examples.md | 95 ------------ .../user-guides/retrieve-dashboard-code.md | 139 ------------------ 3 files changed, 1 insertion(+), 235 deletions(-) delete mode 100644 vizro-ai/docs/pages/user-guides/chart-examples.md delete mode 100644 vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md diff --git a/vizro-ai/docs/index.md b/vizro-ai/docs/index.md index 9f2728e59..4c87daffb 100644 --- a/vizro-ai/docs/index.md +++ b/vizro-ai/docs/index.md @@ -27,7 +27,7 @@ Even if you are an experienced data practitioner, Vizro-AI optimizes how you cre [:octicons-arrow-right-24: Model usage](pages/user-guides/customize-vizro-ai.md)
[:octicons-arrow-right-24: Create advanced charts](pages/user-guides/create-advanced-charts.md)
[:octicons-arrow-right-24: Add charts to a dashboard](pages/user-guides/add-generated-chart-usecase.md)
- [:octicons-arrow-right-24: Retrieve code for a generated dashboard](pages/user-guides/retrieve-dashboard-code.md) + [:octicons-arrow-right-24: Retrieve code for a generated dashboard](pages/user-guides/run-vizro-ai-dashboard.md) - :material-format-font:{ .lg .middle } __Find out more__ diff --git a/vizro-ai/docs/pages/user-guides/chart-examples.md b/vizro-ai/docs/pages/user-guides/chart-examples.md deleted file mode 100644 index 4721980c4..000000000 --- a/vizro-ai/docs/pages/user-guides/chart-examples.md +++ /dev/null @@ -1,95 +0,0 @@ -# Gallery of examples - -Take a look at some more advanced charts that can be created with Vizro-AI using data from [Plotly Express](https://plotly.com/python-api-reference/generated/plotly.express.data.html). The examples below use the OpenAI `"gpt-4o"` model as we are going to request specific updates to the layout of the charts. - -### Polar bar chart - -A polar bar chart is a circular graph where each axis represents a different variable, typically used for displaying cyclical or directional data. -It's suitable for comparing multiple variables across different categories or directions. Let's make one using Vizro-AI. - - -!!! example "Polar Bar Chart" - - === "Resulting chart" - [![VizroAIChart1]][VizroAIChart1] - - === "Code for the cell" - ```py - import vizro_ai - from vizro_ai import VizroAI - import plotly.express as px - - from dotenv import load_dotenv - load_dotenv() - - df = px.data.wind() - - vizro_ai = VizroAI(model="gpt-4o") - fig = vizro_ai.plot(df, - """Describe wind frequency and direction using bar_polar chart. - Increase the width and height of the figure. - Improve layout by placing title to the left. Show legend""") - fig.show() - ``` - - [VizroAIChart1]: ../../assets/user_guides/polar_bar_chart.png - - -### Geographical map chart - -The next chart we'll look at is a geographical map chart to visualize spatial patterns in data, which often reveals insights not seen in other charts. - -!!! example "Map chart" - - === "Resulting chart" - [![VizroAIChart2]][VizroAIChart2] - - === "Code for the cell" - ```py - import vizro_ai - from vizro_ai import VizroAI - import plotly.express as px - - from dotenv import load_dotenv - load_dotenv() - - df = px.data.gapminder() - - vizro_ai = VizroAI(model="gpt-4o") - fig = vizro_ai.plot(df, - """Visualize life expectancy over the years using map chart. Use life expectancy as the color dimension. - Improve layout by using Arial font. Increase the width and height of the map area. Outline continents on the map. - Show countries on the map. - Increase the width and height of the figure.""") - fig.show() - ``` - - [VizroAIChart2]: ../../assets/user_guides/map_chart.gif - - -### 3D surface plot - -Let's explore how to generate a 3-dimensional surface plot with VizroAI. - -!!! example "Surface plot" - - === "Resulting chart" - [![VizroAIChart3]][VizroAIChart3] - - === "Code for the cell" - ```py - import vizro_ai - from vizro_ai import VizroAI - import plotly.express as px - - from dotenv import load_dotenv - load_dotenv() - - df = px.data.gapminder() - - vizro_ai = VizroAI(model="gpt-4o") - fig = vizro_ai.plot(df, "create a surface plot") - fig.show() - ``` - - [VizroAIChart3]: ../../assets/user_guides/surface_plot.gif diff --git a/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md b/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md deleted file mode 100644 index a95d1159a..000000000 --- a/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md +++ /dev/null @@ -1,139 +0,0 @@ -# Retrieve the code of Vizro-AI generated dashboard - -This guide shows how to retrieve the code of a Vizro-AI generated dashboard. The code can be used for further iterations, improvements, and deployment. - -While Vizro-AI can follow complex user requirements well and generate high-quality dashboards, due to the nature of LLMs, the generated dashboards often only partly match user expectations. Besides refining the user prompt and re-running Vizro-AI, you can also extract the code and iterate manually to achieve the desired result. - - -## 1. Prepare the data and user prompt -```py -import vizro.plotly.express as px - -df = px.data.tips() - -user_question = """ -Create a one-page dashboard layout with the following components: - -1. Card: - - Position: Left of the page - - Size: Takes up 1/4 of the total page width - - Content: Display the text "This is Tips dataset" - -2. Table: - - Position: Right of the card - - Size: Takes up the remaining 3/4 of the page width - - Content: Display the Tips dataset -""" -``` - -## 2. Generate and launch the dashboard -```py -from vizro_ai import VizroAI - -vizro_ai = VizroAI(model="gpt-4o-mini") -result = vizro_ai.dashboard([df], user_question, return_elements=True) -``` -This triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard. - -!!! example "Generated dashboard" - - === "Code" - ```py - import vizro.plotly.express as px - from vizro_ai import VizroAI - from vizro import Vizro - - df = px.data.tips() - user_question = """ - Create a one-page dashboard layout with the following components: - - 1. Card: - - Position: Left of the page - - Size: Takes up 1/4 of the total page width - - Content: Display the text "This is Tips dataset" - - 1. Table: - - Position: Right of the card - - Size: Takes up the remaining 3/4 of the page width - - Content: Display the Tips dataset - """ - vizro_ai = VizroAI(model="gpt-4o-mini") - result = vizro_ai.dashboard([df], user_question, return_elements=True) - Vizro().build(result.dashboard).run() - ``` - - === "Result" - [![VizroAIDashboardPage1]][VizroAIDashboardPage1] - - - [VizroAIDashboardPage1]: ../../assets/user_guides/dashboard/dashboard2_page1.png - -## 3. Retrieve the Python code of the dashboard -!!! example "View dashboard code" - - === "Code" - ```py - import vizro.plotly.express as px - from vizro_ai import VizroAI - from vizro import Vizro - - df = px.data.tips() - user_question = """ - Create a one-page dashboard layout with the following components: - - 1. Card: - - Position: Left of the page - - Size: Takes up 1/4 of the total page width - - Content: Display the text "This is Tips dataset" - - 1. Table: - - Position: Right of the card - - Size: Takes up the remaining 3/4 of the page width - - Content: Display the Tips dataset - """ - vizro_ai = VizroAI(model="gpt-4o-mini") - result = vizro_ai.dashboard([df], user_question, return_elements=True) - - print(result.code) - ``` - === "Result" - ```py - ######## Module Imports ########## - from vizro import Vizro - from vizro.managers import data_manager - from vizro.models.types import capture - import vizro.models as vm - from vizro.tables import dash_ag_grid - - ########## Data Imports ########## - #####!!! UNCOMMENT BELOW !!!###### - # data_manager["restaurant_bills"] = ===> Fill in here <=== - - ###### Callable definitions ###### - - - ########## Object code ########### - dashboard = vm.Dashboard( - pages=[ - vm.Page( - id="Tips Data Visualization", - components=[ - vm.Card( - id="tips_card_tips_data_visualization", - type="card", - text="This is Tips dataset", - href="", - ), - vm.AgGrid( - id="tips_table_tips_data_visualization", - figure=dash_ag_grid(data_frame="restaurant_bills"), - ), - ], - title="Tips Data Visualization", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), - controls=[], - ) - ], - title="Tips Dataset Overview", - ) - ``` From 6d6ec6269d6074b286805e0aa871e72db5acba3f Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Thu, 21 Nov 2024 13:22:20 +0100 Subject: [PATCH 13/13] removing typo --- vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md index dc0602db3..2a9e59b52 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md @@ -125,7 +125,7 @@ To use the above code, you will still need to add three simple steps: - Import your data. ```py - data = pd.read_csv('data.csv') # Replace 'data.csv' with your file name or path to your data + data = pd.read_csv('data.csv') # Replace 'data.csv' with your filename or path to your data ``` - After importing your data, register it in the data manager by uncommenting the data manager instance and assigning the imported data to it. See the Vizro guide on [connecting dashboard to data](https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#reference-by-name/). @@ -137,7 +137,7 @@ To use the above code, you will still need to add three simple steps: ```py Vizro().build(dashboard).run() ``` -Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/latest/pages/tutorials/quickstart/)). +Detailed guidance is provided in [dashboard generation tutorial](https://vizro.readthedocs.io/projects/vizro-ai/en/latest/pages/tutorials/quickstart/). ## Available Vizro components