[Docs] Restructure of Vizro-AI dashboard docs (#883)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Jo Stichbury <[email protected]>

vizro-ai/docs/index.md

@@ -8,25 +8,6 @@ Even if you are an experienced data practitioner, Vizro-AI optimizes how you cre
 
 <img src=".//assets/readme/readme_animation.gif" alt="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.
 
 <div class="grid cards" markdown>
 
@@ -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)</br>
     [:octicons-arrow-right-24: Create advanced charts](pages/user-guides/create-advanced-charts.md)</br>
     [:octicons-arrow-right-24: Add charts to a dashboard](pages/user-guides/add-generated-chart-usecase.md)</br>
-    [: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__
 

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

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.
+
+        <Page 1>
+        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.
+
+
+        <Page 2>
+        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"