@@ -46,7 +27,7 @@ If a feature you need for your dashboard isn't currently supported by Vizro-AI y
[: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/explanation/safety-in-vizro-ai.md b/vizro-ai/docs/pages/explanation/safety-in-vizro-ai.md
index 669f01d30..489e5aa33 100644
--- a/vizro-ai/docs/pages/explanation/safety-in-vizro-ai.md
+++ b/vizro-ai/docs/pages/explanation/safety-in-vizro-ai.md
@@ -68,3 +68,13 @@ Users must exercise caution when executing code generated by or influenced by AI
- Always review and understand the selected model before connecting with `vizro_ai`
To learn more, refer to the section that describes how to [safeguard execution of dynamic code](safeguard.md).
+
+
+## Debugging in Vizro-AI with LangSmith and LangFuse
+
+[LangSmith](https://docs.smith.langchain.com/) and [LangFuse](https://langfuse.com/docs) are tools designed to enhance transparency and interpretability in AI workflows.
+To improve debugging and traceability, you can use the advanced observability and evaluation features of these tools with Vizro-AI.
+
+To ensure responsible use, review their data privacy and security policies. See [LangFuse Data Security & Privacy ](https://langfuse.com/docs/data-security-privacy) and [LangSmith Privacy Policy](https://www.langchain.com/privacy-policy) site for more details.
+
+Additionally, both support self-hosting options, which may be critical for security oriented users.See [LangSmith](https://docs.smith.langchain.com/self_hosting) and [LangFuse](https://langfuse.com/docs/deployment/self-host) self-hosting guides for more details. LangFuse offers a self-hosting service under the MIT License.
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/create-advanced-charts.md b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md
index c616f88bd..15caa114e 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
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..eb2e07f38 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 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:
+ 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 selector.
+
+
+
+ Visualize the tech company stock data.
+ I need 1 line chart, 6 cards.
+
+ 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`
+ 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/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",
- )
- ```
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..2a9e59b52
--- /dev/null
+++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai-dashboard.md
@@ -0,0 +1,165 @@
+# How to run Vizro-AI dashboard
+
+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 that your API key is set up in a `.env` file in the same folder as your Notebook file (`.ipynb`).
+
+## Run Vizro-AI 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
+
+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.
+- 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",
+ )
+ ```
+
+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 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/).
+
+ ```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
+
+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 |
+|----------------------|------------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| **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 it by hand before running the dashboard.
diff --git a/vizro-ai/mkdocs.yml b/vizro-ai/mkdocs.yml
index c95fbe9e0..7eb6e186a 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 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
@@ -27,7 +27,7 @@ nav:
- 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
+ - 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/
diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
index c394b99cd..7e1f16cc1 100644
--- a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
+++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
@@ -1,5 +1,8 @@
-/* This file contains overwrites, which we want to have as defaults for vizro
-but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough. */
+/* This file contains overwrites, which we want to have as defaults for vizro framework
+but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough
+for a pure Dash app.
+
+All the HEX values starting with --text-code are taken from the Github code highlighting style. */
[data-bs-theme="dark"] {
--dropdown-label-bg: var(--primary-800);
--right-side-bg: var(--surfaces-bg03);
-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.