From 35e1c155988f1d2ce8d18c7994536ee67a3c1a05 Mon Sep 17 00:00:00 2001 From: Lingyi Zhang Date: Wed, 12 Jun 2024 00:41:16 -0400 Subject: [PATCH] example notebook --- .../examples/example_dashboard_code.ipynb | 233 ++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 vizro-ai/examples/example_dashboard_code.ipynb diff --git a/vizro-ai/examples/example_dashboard_code.ipynb b/vizro-ai/examples/example_dashboard_code.ipynb new file mode 100644 index 000000000..b44296eda --- /dev/null +++ b/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 +}