Skip to content

Commit

Permalink
refactor layout and add more examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@lingyielia
lingyielia committed Jul 22, 2024
1 parent 2c97828 commit 0facbbb
Show file tree
Hide file tree
Showing 9 changed files with 368 additions and 402 deletions.
285 changes: 285 additions & 0 deletions vizro-ai/examples/example_dashboard.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,285 @@
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"id": "53e857ce-22bc-49de-9adc-9a2e7c9829cf",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"True"
]
},
"execution_count": 1,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from dotenv import load_dotenv\n",
"load_dotenv()"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "2a25acdd-20c3-4762-b97f-254de1586aeb",
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"import vizro.plotly.express as px\n",
"\n",
"from vizro import Vizro\n",
"from vizro_ai import VizroAI\n",
"\n",
"vizro_ai = VizroAI(model=\"gpt-4-turbo\")\n",
"# vizro_ai = VizroAI()"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "b5e24f1b-e698-40e5-be00-c3a59c53ec65",
"metadata": {},
"outputs": [],
"source": [
"df1 = px.data.gapminder()"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "449da2ee-c754-420a-ba2e-c9b0ef62d934",
"metadata": {},
"outputs": [],
"source": [
"df2 = px.data.stocks()"
]
},
{
"cell_type": "markdown",
"id": "ec46d4d1-d20b-4351-831d-d3d8ddc5cb70",
"metadata": {},
"source": [
"# Example: Simple dashboard request"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "6df428c5-28a3-49b6-bac9-f72ade4a34a4",
"metadata": {},
"outputs": [],
"source": [
"user_question_2_data = \"\"\"\n",
"I need a page with 1 table.\n",
"The table shows the tech companies stock data.\n",
"\n",
"I need a second page showing 2 cards and one chart.\n",
"The first card says 'The Gapminder dataset provides historical data on countries' development indicators.'\n",
"The chart is a scatter plot showing life expectancy vs. GDP per capita by country. Life expectancy on the y axis, GDP per capita on the x axis, and colored by continent.\n",
"The second card says 'Data spans from 1952 to 2007 across various countries'\n",
"The layout uses a grid of 3 columns and 2 rows.\n",
"\n",
"Row 1: The first row has three columns:\n",
"The first column is occupied by the first card.\n",
"The second and third columns are spanned by the chart.\n",
"\n",
"Row 2: The second row mirrors the layout of the first row with respect to chart, but the first column is occupied by the second card.\n",
"\n",
"Add a filter to filter the scatter plot by continent.\n",
"Add a second filter to filter the chart by year.\n",
"\"\"\""
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "31c002d9-8103-43ef-9da5-78d9180075de",
"metadata": {},
"outputs": [],
"source": [
"res = vizro_ai.dashboard([df1, df2], user_question_2_data, return_elements=True)"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "9996286e-46b0-4a63-8273-5dd4b2a91cd0",
"metadata": {},
"outputs": [],
"source": [
"vizro_ai.run_dashboard(res.dashboard, res.metadata)"
]
},
{
"cell_type": "markdown",
"id": "747964b9-fd05-4c5a-a73a-79dae82320b3",
"metadata": {},
"source": [
"# Example: 5-page dashboard request"
]
},
{
"cell_type": "raw",
"id": "067983a0-65c6-48a2-85f3-a4d3db31977b",
"metadata": {},
"source": [
"df3 = px.data.tips()"
]
},
{
"cell_type": "raw",
"id": "50ccf0bc-0afe-433d-b541-1bbb41b0e7e7",
"metadata": {},
"source": [
"user_question_3_data = \"\"\"\n",
"<Page 1>\n",
"I need a page with 1 table, showing the stock prices of GOOG, AAPL, and AMZN over time.\n",
"\n",
"<Page 2>\n",
"I need a second page showing 1 card and 1 chart.\n",
"The card says 'The Gapminder dataset provides historical data on countries' development indicators.'\n",
"The chart is a scatter plot showing GDP per capita vs. life expectancy. GDP per capita on the x axis, life expectancy on the y axis, and colored by continent.\n",
"Layout the card on the left and the chart on the right. The card takes 1/3 of the whole space on the left.\n",
"The chart takes 2/3 of the whole space and is on the right.\n",
"Add a filter to filter the scatter plot by continent.\n",
"Add a second filter to filter the chart by year.\n",
"\n",
"<Page 3>\n",
"This page displays the tips dataset. use two different charts to show data\n",
"distributions. one chart should be a bar chart and the other should be a scatter plot.\n",
"first chart is on the left and the second chart is on the right.\n",
"Add a filter to filter data in the scatter plot by smoker.\n",
"\n",
"<Page 4>\n",
"Create 3 cards on this page:\n",
"1. The first card on top says \"This page combines data from various sources including tips, stock prices, and global indicators.\"\n",
"2. The second card says \"Insights from Gapminder dataset.\"\n",
"3. The third card says \"Stock price trends over time.\"\n",
"\n",
"Layout these 3 cards in this way:\n",
"create a grid with 3 columns and 2 rows.\n",
"Row 1: The first row has three columns:\n",
"- The first column is empty.\n",
"- The second and third columns span the area for card 1.\n",
"\n",
"Row 2: The second row also has three columns:\n",
"- The first column is empty.\n",
"- The second column is occupied by the area for card 2.\n",
"- The third column is occupied by the area for card 3.\n",
"\"\"\""
]
},
{
"cell_type": "raw",
"id": "a240b98d-229b-4ed2-8e4d-93de004c6283",
"metadata": {},
"source": [
"Vizro._reset()\n",
"res = vizro_ai.dashboard([df1, df2, df3], user_question_3_data, return_elements=True)"
]
},
{
"cell_type": "raw",
"id": "7930a7ee-7dff-467a-b888-21b4c502c585",
"metadata": {},
"source": [
"vizro_ai.run_dashboard(res.dashboard, res.metadata)"
]
},
{
"cell_type": "markdown",
"id": "bbf5c920-0432-4415-996f-1acb9d7b6b8a",
"metadata": {},
"source": [
"# Example: Request with unsupported features"
]
},
{
"cell_type": "raw",
"id": "c8c278d5-eb8b-4244-843b-92cf63e8866f",
"metadata": {},
"source": [
"user_question_2_data = \"\"\"\n",
"<Page 1>\n",
"I need a page showing 2 cards, one chart, and 1 button.\n",
"The first card says 'The Tips dataset provides insights into customer tipping behavior.'\n",
"The chart is a bar chart showing the total bill amount by day. Day on the x axis, total bill amount on the y axis, and colored by time of day.\n",
"The second card says 'Data collected from various days and times.'\n",
"Layout the two cards on the left and the chart on the right. Two cards take 1/3 of the whole space on the left in total.\n",
"The first card is on top of the second card vertically.\n",
"The chart takes 2/3 of the whole space and is on the right.\n",
"The button would trigger a download action to download the Tips dataset.\n",
"Add a filter to filter the bar chart by `size`.\n",
"Make another tab on this page,\n",
"In this tab, create a card saying \"Tipping patterns and trends.\"\n",
"Group all the above content into the first NavLink.\n",
"\n",
"<Second NavLink>\n",
"Create two pages:\n",
"1. The first page has a card saying \"Analyzing global development trends.\"\n",
"2. The second page has a scatter plot showing GDP per capita vs. life expectancy. GDP per capita on the x axis, life expectancy on the y axis, and colored by continent.\n",
"Add a parameter to control the title of the scatter plot, with title options \"Economic Growth vs. Health\" and \"Development Indicators.\"\n",
"Also create a button and a spinning circle on the right-hand side of the page.\n",
"\n",
"<Third NavLink>\n",
"Create one page:\n",
"1. The first page has a card saying \"Stock price trends over time.\"\n",
"Create a button and a spinning circle on the right-hand side of the page.\n",
"\n",
"For hosting the dashboard on AWS, which service should I use?\n",
"\"\"\""
]
},
{
"cell_type": "raw",
"id": "f338d294-ec84-49f1-b729-646b0b419108",
"metadata": {},
"source": [
"Vizro._reset()\n",
"res = vizro_ai.dashboard([df3, df2], user_question_2_data, return_elements=True)"
]
},
{
"cell_type": "raw",
"id": "4dbe8aae-f7ae-4a94-8bce-6a394faabcd4",
"metadata": {},
"source": [
"vizro_ai.run_dashboard(res.dashboard, res.metadata)"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "9408a882-f0bf-4eb6-bd74-ca415f5d83a8",
"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
}
4 changes: 2 additions & 2 deletions vizro-ai/examples/example_dashboard.py
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"""Example of creating a dashboard using VizroAI."""

import vizro.plotly.express as px
from vizro_ai import VizroAI

vizro_ai = VizroAI(model="gpt-4-turbo")
# vizro_ai = VizroAI()

gapminder_data = px.data.gapminder()
tips_data = px.data.tips()
Expand All @@ -19,7 +19,7 @@
"page2 displays the tips dataset. use two different charts to help me understand the data "
"distributions. one chart should be a bar chart and the other should be a scatter plot. "
"first chart is on the left and the second chart is on the right. "
"add a filter to filter data in the scatter plot."
"add a filter to filter data in the scatter plot by smoker."
)

res = vizro_ai.dashboard(dfs=dfs, user_input=input_text, return_elements=True)
Expand Down
Loading

0 comments on commit 0facbbb

Please sign in to comment.