example notebook

vizro-ai/examples/example_dashboard_code.ipynb

@@ -0,0 +1,233 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c81ca231-69c0-455e-91d6-252c845b8619",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from dotenv import load_dotenv\n",
+    "load_dotenv()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "632a9013-6872-447d-936f-1dbcd1cc0f12",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from vizro_ai import VizroAI\n",
+    "vizro_ai = VizroAI()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e962a5af-cbe1-49d5-9858-55ee651643bb",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from vizro_ai.dashboard.graph.code_generation import _create_and_compile_graph\n",
+    "from IPython.display import Image\n",
+    "\n",
+    "graph = _create_and_compile_graph()\n",
+    "\n",
+    "Image(graph.get_graph().draw_mermaid_png())"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "86cd816b-e043-45af-9f7d-6b99706d6a47",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import vizro.plotly.express as px\n",
+    "df = px.data.gapminder()\n",
+    "df.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "07c18cfb-9172-45b1-be7e-0085ee1fd66a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "df_stocks = px.data.stocks()\n",
+    "df_stocks.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ad727cae-28d7-4629-8d91-6cf03b6eccd1",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "user_question_2_data = \"\"\"\n",
+    "I need a page with 2 tables.\n",
+    "One table shows the population per continent.\n",
+    "The second table shows the stock price of some major companies.\n",
+    "add a filter to filter the world demographic table by continent.\n",
+    "I also want a second page with two \n",
+    "cards on it. One should be a card saying: `This was the jolly data dashboard, it was created in Vizro which is amazing` \n",
+    ", and the second card says 'To learn more, visit Vizro docs' and should link to `https://vizro.readthedocs.io/`. The title of the dashboard should be: `My wonderful \n",
+    "jolly dashboard showing a lot of info`.\n",
+    "The layout of this page should use `grid=[[0,1]]`\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "af9ffbfc-0efd-411f-9038-4eca24b510ee",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "res = vizro_ai.dashboard([df, df_stocks], user_question_2_data)\n",
+    "res"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d74ace77-1754-4cad-a8fb-29afad44fc43",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from vizro import Vizro\n",
+    "Vizro._reset()"
+   ]
+  },
+  {
+   "cell_type": "raw",
+   "id": "696a1494-cf3b-401a-83e2-ec9c94df7b7d",
+   "metadata": {},
+   "source": [
+    "user_question_1_data_1filter = \"\"\"\n",
+    "I need a page with 1 table and filter.\n",
+    "One table shows the population per continent.\n",
+    "add a filter to filter the table by continent column.\n",
+    "\"\"\""
+   ]
+  },
+  {
+   "cell_type": "raw",
+   "id": "0a258294-0c4d-4151-92ed-80c29e185ab7",
+   "metadata": {},
+   "source": [
+    "res = vizro_ai.dashboard([df], user_question_1_data_1filter)\n",
+    "res"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "b825c427-7f65-4a04-a430-e72ea93f8fd8",
+   "metadata": {},
+   "source": [
+    "# Check cost"
+   ]
+  },
+  {
+   "cell_type": "raw",
+   "id": "239aabcd-5fc9-4cfe-b2d0-a7c62e8c5c17",
+   "metadata": {},
+   "source": [
+    "from langchain_community.callbacks import get_openai_callback\n",
+    "\n",
+    "with get_openai_callback() as cb:\n",
+    "    vizro_ai.dashboard([df,], user_question_1_data_1filter)\n",
+    "    print(cb)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "82d8f97f-1cba-4b0e-ba63-2b894858e49a",
+   "metadata": {},
+   "source": [
+    "# Test the generated code is working"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fc3427ff-2e3a-40df-a618-2905c326a614",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from vizro import Vizro\n",
+    "Vizro._reset()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4150cc59-e7f8-49d5-a560-df3c064fcd12",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# example data manager code to run before running the generated dashboard code\n",
+    "from vizro.managers import data_manager\n",
+    "\n",
+    "def population_data():\n",
+    "    df = px.data.gapminder()\n",
+    "    return df\n",
+    "\n",
+    "def stock_data():\n",
+    "    df_stocks = px.data.stocks()\n",
+    "    return df_stocks\n",
+    "   \n",
+    "\n",
+    "data_manager[\"world_indicators\"] = population_data\n",
+    "data_manager[\"tech_stocks_performance\"] = stock_data"
+   ]
+  },
+  {
+   "cell_type": "raw",
+   "id": "753b8b5a-80b0-43fa-ab0a-483e77edf0f6",
+   "metadata": {},
+   "source": [
+    "from vizro import Vizro\n",
+    "from vizro.models import Page, AgGrid, Dashboard, Card\n",
+    "from vizro.tables import dash_ag_grid\n",
+    "import pandas as pd\n",
+    "\n",
+    "dashboard=Dashboard(pages=[Page(id='Data Tables', components=[AgGrid(id='population_by_continent', figure=dash_ag_grid(data_frame='country_demographics_overview')), AgGrid(id='stock_prices', figure=dash_ag_grid(data_frame='tech_stocks_performance'))], title='Data Tables', controls=[]), Page(id='Information Cards', components=[Card(type='card', text=\"**User Inquiry:**\\n\\nThe user expressed enthusiasm about a data dashboard referred to as the 'jolly data dashboard,' which was created using Vizro.\", href=''), Card(type='card', text='To learn more, visit Vizro docs at [Vizro Documentation](https://vizro.readthedocs.io/)', href='')], title='Information Cards', controls=[])], title='My wonderful jolly dashboard showing a lot of info')\n",
+    "\n",
+    "Vizro().build(dashboard).run()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f32aad5b-d62e-44d4-a9a9-ab7cefb4a04f",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}