From a7172850bc41e893eba22cef3689fe043cb072ba Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Fri, 18 Oct 2024 12:04:31 +0100 Subject: [PATCH] Remove old Jupyter notebook example --- .../examples/dev/jupyter_version/app.ipynb | 867 ------------------ 1 file changed, 867 deletions(-) delete mode 100644 vizro-core/examples/dev/jupyter_version/app.ipynb diff --git a/vizro-core/examples/dev/jupyter_version/app.ipynb b/vizro-core/examples/dev/jupyter_version/app.ipynb deleted file mode 100644 index a1bd24223..000000000 --- a/vizro-core/examples/dev/jupyter_version/app.ipynb +++ /dev/null @@ -1,867 +0,0 @@ -{ - "cells": [ - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "from time import sleep\n", - "from typing import Literal, Optional\n", - "\n", - "import dash_bootstrap_components as dbc\n", - "import pandas as pd\n", - "import plotly.graph_objects as go\n", - "import vizro.models as vm\n", - "import vizro.plotly.express as px\n", - "from dash import dash_table, dcc, html\n", - "from vizro import Vizro\n", - "from vizro.actions import export_data, filter_interaction\n", - "from vizro.figures import kpi_card, kpi_card_reference\n", - "from vizro.models.types import capture\n", - "from vizro.tables import dash_ag_grid, dash_data_table" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "iris = px.data.iris()\n", - "tips = px.data.tips()\n", - "stocks = px.data.stocks(datetimes=True)\n", - "gapminder_2007 = px.data.gapminder().query(\"year == 2007\")\n", - "waterfall_df = pd.DataFrame(\n", - " {\n", - " \"measure\": [\"relative\", \"relative\", \"total\", \"relative\", \"relative\", \"total\"],\n", - " \"x\": [\"Sales\", \"Consulting\", \"Net revenue\", \"Purchases\", \"Other expenses\", \"Profit before tax\"],\n", - " \"text\": [\"+60\", \"+80\", \"\", \"-40\", \"-20\", \"Total\"],\n", - " \"y\": [60, 80, 0, -40, -20, 0],\n", - " }\n", - ")\n", - "custom_fig_df = pd.DataFrame(\n", - " {\n", - " \"text\": [\n", - " \"Lorem ipsum dolor sit amet, consetetur sadipscing no sea elitr sed diam nonumy.\",\n", - " \"Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\",\n", - " \"Sed diam voluptua. At vero eos et accusam et justo no duo dolores et ea rebum.\",\n", - " \"Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\",\n", - " \"Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.\",\n", - " \"Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\",\n", - " ]\n", - " * 2\n", - " }\n", - ")\n", - "\n", - "df_kpi = pd.DataFrame({\"Actual\": [100, 200, 700], \"Reference\": [100, 300, 500], \"Category\": [\"A\", \"B\", \"C\"]})\n", - "\n", - "example_cards = [\n", - " kpi_card(data_frame=df_kpi, value_column=\"Actual\", title=\"KPI with value\"),\n", - " kpi_card(data_frame=df_kpi, value_column=\"Actual\", title=\"KPI with aggregation\", agg_func=\"median\"),\n", - " kpi_card(\n", - " data_frame=df_kpi,\n", - " value_column=\"Actual\",\n", - " title=\"KPI with formatting\",\n", - " value_format=\"${value:.2f}\",\n", - " ),\n", - " kpi_card(\n", - " data_frame=df_kpi,\n", - " value_column=\"Actual\",\n", - " title=\"KPI with icon\",\n", - " icon=\"shopping_cart\",\n", - " ),\n", - "]\n", - "\n", - "example_reference_cards = [\n", - " kpi_card_reference(\n", - " data_frame=df_kpi,\n", - " value_column=\"Actual\",\n", - " reference_column=\"Reference\",\n", - " title=\"KPI reference (pos)\",\n", - " ),\n", - " kpi_card_reference(\n", - " data_frame=df_kpi,\n", - " value_column=\"Actual\",\n", - " reference_column=\"Reference\",\n", - " agg_func=\"median\",\n", - " title=\"KPI reference (neg)\",\n", - " ),\n", - " kpi_card_reference(\n", - " data_frame=df_kpi,\n", - " value_column=\"Actual\",\n", - " reference_column=\"Reference\",\n", - " title=\"KPI reference with formatting\",\n", - " value_format=\"{value:.2f}$\",\n", - " reference_format=\"{delta:.2f}$ vs. last year ({reference:.2f}$)\",\n", - " ),\n", - " kpi_card_reference(\n", - " data_frame=df_kpi,\n", - " value_column=\"Actual\",\n", - " reference_column=\"Reference\",\n", - " title=\"KPI reference with icon\",\n", - " icon=\"shopping_cart\",\n", - " ),\n", - "]" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "# HOME ------------------------------------------------------------------------\n", - "home = vm.Page(\n", - " title=\"Homepage\",\n", - " layout=vm.Layout(grid=[[0, 1], [2, 3]], row_gap=\"16px\", col_gap=\"24px\"),\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/line-chart.svg#icon-top)\n", - "\n", - " ### Components\n", - "\n", - " Main components of Vizro include **charts**, **tables**, **cards**, **figures**, **containers**,\n", - " **buttons** and **tabs**.\n", - " \"\"\",\n", - " href=\"/graphs\",\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/filters.svg#icon-top)\n", - "\n", - " ### Controls\n", - "\n", - " Vizro has two different control types **Filter** and **Parameter**.\n", - "\n", - " You can use any pre-existing selector inside the **Filter** or **Parameter**:\n", - "\n", - " * Dropdown\n", - " * Checklist\n", - " * RadioItems\n", - " * RangeSlider\n", - " * Slider\n", - " * DatePicker\n", - " \"\"\",\n", - " href=\"/filters\",\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/download.svg#icon-top)\n", - "\n", - " ### Actions\n", - "\n", - " Standard predefined actions are made available including **export data** and **filter interactions**.\n", - " \"\"\",\n", - " href=\"/export-data\",\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/use-case.svg#icon-top)\n", - "\n", - " ### Extensions\n", - "\n", - " Vizro enables customization of **plotly express** and **graph object charts** as well as\n", - " creating custom components based on Dash.\n", - " \"\"\",\n", - " href=\"/custom-charts\",\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "# COMPONENTS ------------------------------------------------------------------\n", - "graphs = vm.Page(\n", - " title=\"Graphs\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(iris, x=\"sepal_width\", y=\"sepal_length\", color=\"species\"),\n", - " title=\"Relationships between Sepal Width and Sepal Length\",\n", - " header=\"\"\"\n", - " Each point in the scatter plot represents one of the 150 iris flowers, with colors indicating their\n", - " types. The Setosa type is easily identifiable by its short and wide sepals.\n", - "\n", - " However, there is still overlap between the Versicolor and Virginica types when considering only sepal\n", - " width and length.\n", - " \"\"\",\n", - " footer=\"\"\"SOURCE: **Plotly iris data set, 2024**\"\"\",\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "ag_grid = vm.Page(\n", - " title=\"AG Grid\",\n", - " components=[\n", - " vm.AgGrid(\n", - " figure=dash_ag_grid(data_frame=gapminder_2007, dashGridOptions={\"pagination\": True}),\n", - " title=\"Gapminder Data Insights\",\n", - " header=\"\"\"An Interactive Exploration of Global Health, Wealth, and Population\"\"\",\n", - " footer=\"\"\"SOURCE: **Plotly gapminder data set, 2024**\"\"\",\n", - " )\n", - " ],\n", - ")\n", - "\n", - "table = vm.Page(\n", - " title=\"Table\",\n", - " components=[\n", - " vm.Table(\n", - " figure=dash_data_table(data_frame=gapminder_2007),\n", - " title=\"Gapminder Data Insights\",\n", - " header=\"\"\"An Interactive Exploration of Global Health, Wealth, and Population\"\"\",\n", - " footer=\"\"\"SOURCE: **Plotly gapminder data set, 2024**\"\"\",\n", - " )\n", - " ],\n", - ")\n", - "\n", - "cards = vm.Page(\n", - " title=\"Cards\",\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " # Header level 1

\n", - "\n", - " ## Header level 2

\n", - "\n", - " ### Header level 3

\n", - "\n", - " #### Header level 4

\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Paragraphs\n", - " Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit.\n", - "\n", - " Fugiat iusto fuga praesentium option, eaque rerum! Provident similique accusantium nemo autem.\n", - "\n", - " Obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid.\n", - "\n", - " Culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas.\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Block Quotes\n", - "\n", - " >\n", - " > A block quote is a long quotation, indented to create a separate block of text.\n", - " >\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Lists\n", - "\n", - " * Item A\n", - " * Sub Item 1\n", - " * Sub Item 2\n", - " * Item B\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Emphasis\n", - "\n", - " This word will be *italic*\n", - "\n", - " This word will be **bold**\n", - "\n", - " This word will be _**bold and italic**_\n", - " \"\"\"\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "figure = vm.Page(\n", - " title=\"Figure\",\n", - " layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),\n", - " components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],\n", - " controls=[vm.Filter(column=\"Category\")],\n", - ")\n", - "\n", - "\n", - "button = vm.Page(\n", - " title=\"Button\",\n", - " layout=vm.Layout(grid=[[0], [0], [0], [0], [1]]),\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"sepal_width\",\n", - " y=\"sepal_length\",\n", - " color=\"species\",\n", - " size=\"petal_length\",\n", - " ),\n", - " ),\n", - " vm.Button(text=\"Export data\", actions=[vm.Action(function=export_data())]),\n", - " ],\n", - " controls=[vm.Filter(column=\"species\", selector=vm.Dropdown(title=\"Species\"))],\n", - ")\n", - "\n", - "containers = vm.Page(\n", - " title=\"Containers\",\n", - " components=[\n", - " vm.Container(\n", - " title=\"Container I\",\n", - " layout=vm.Layout(grid=[[0, 1]]),\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"sepal_length\",\n", - " y=\"petal_width\",\n", - " color=\"species\",\n", - " title=\"Container I - Scatter\",\n", - " )\n", - " ),\n", - " vm.Graph(\n", - " figure=px.bar(\n", - " iris,\n", - " x=\"sepal_length\",\n", - " y=\"sepal_width\",\n", - " color=\"species\",\n", - " title=\"Container I - Bar\",\n", - " )\n", - " ),\n", - " ],\n", - " ),\n", - " vm.Container(\n", - " title=\"Container II\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"sepal_width\",\n", - " y=\"sepal_length\",\n", - " color=\"species\",\n", - " marginal_y=\"violin\",\n", - " marginal_x=\"box\",\n", - " title=\"Container II - Scatter\",\n", - " )\n", - " )\n", - " ],\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "tab_1 = vm.Container(\n", - " title=\"Tab I\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.bar(\n", - " gapminder_2007,\n", - " title=\"Graph 1\",\n", - " x=\"continent\",\n", - " y=\"lifeExp\",\n", - " color=\"continent\",\n", - " ),\n", - " ),\n", - " vm.Graph(\n", - " figure=px.box(\n", - " gapminder_2007,\n", - " title=\"Graph 2\",\n", - " x=\"continent\",\n", - " y=\"lifeExp\",\n", - " color=\"continent\",\n", - " ),\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "tab_2 = vm.Container(\n", - " title=\"Tab II\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(\n", - " gapminder_2007,\n", - " title=\"Graph 3\",\n", - " x=\"gdpPercap\",\n", - " y=\"lifeExp\",\n", - " size=\"pop\",\n", - " color=\"continent\",\n", - " ),\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "tabs = vm.Page(title=\"Tabs\", components=[vm.Tabs(tabs=[tab_1, tab_2])], controls=[vm.Filter(column=\"continent\")])\n", - "\n", - "# CONTROLS --------------------------------------------------------------------\n", - "filters = vm.Page(\n", - " title=\"Filters\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"sepal_length\",\n", - " y=\"petal_width\",\n", - " color=\"species\",\n", - " )\n", - " ),\n", - " vm.Graph(\n", - " id=\"scatter_chart2\",\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"petal_length\",\n", - " y=\"sepal_width\",\n", - " color=\"species\",\n", - " ),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Filter(column=\"species\"),\n", - " vm.Filter(\n", - " column=\"petal_length\",\n", - " targets=[\"scatter_chart2\"],\n", - " selector=vm.RangeSlider(),\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "parameters = vm.Page(\n", - " title=\"Parameters\",\n", - " components=[\n", - " vm.Graph(\n", - " id=\"scatter_chart_pm\",\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"sepal_width\",\n", - " y=\"sepal_length\",\n", - " color=\"species\",\n", - " size=\"petal_length\",\n", - " color_discrete_map={\"setosa\": \"#00b4ff\", \"versicolor\": \"#ff9222\"},\n", - " ),\n", - " ),\n", - " vm.Graph(\n", - " id=\"bar_chart_pm\",\n", - " figure=px.bar(\n", - " iris,\n", - " x=\"sepal_width\",\n", - " y=\"sepal_length\",\n", - " color=\"species\",\n", - " color_discrete_map={\"setosa\": \"#00b4ff\", \"versicolor\": \"#ff9222\"},\n", - " ),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Parameter(\n", - " targets=[\"scatter_chart_pm.color_discrete_map.virginica\", \"bar_chart_pm.color_discrete_map.virginica\"],\n", - " selector=vm.Dropdown(options=[\"#ff5267\", \"#3949ab\"], multi=False, value=\"#3949ab\"),\n", - " )\n", - " ],\n", - ")\n", - "\n", - "selectors = vm.Page(\n", - " title=\"Selectors\",\n", - " layout=vm.Layout(grid=[[0], [1], [1], [1], [2], [2], [2], [3], [3], [3]], row_min_height=\"170px\", row_gap=\"24px\"),\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " A selector can be used within the **Parameter** or **Filter** component to allow the user to select a value.\n", - "\n", - " The following selectors are available:\n", - " * Dropdown (**categorical** multi and single option selector)\n", - " * Checklist (**categorical** multi option selector only)\n", - " * RadioItems (**categorical** single option selector only)\n", - " * RangeSlider (**numerical** multi option selector only)\n", - " * Slider (**numerical** single option selector only)\n", - " * DatePicker(**temporal** multi and single option selector)\n", - "\n", - " \"\"\"\n", - " ),\n", - " vm.Table(\n", - " id=\"table-gapminder\",\n", - " figure=dash_data_table(data_frame=gapminder_2007, page_size=10),\n", - " title=\"Gapminder Data\",\n", - " ),\n", - " vm.Table(id=\"table-tips\", figure=dash_data_table(data_frame=tips, page_size=10), title=\"Tips Data\"),\n", - " vm.Graph(\n", - " id=\"graph-stocks\",\n", - " figure=px.line(stocks, x=\"date\", y=\"GOOG\", title=\"Stocks Data\"),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Filter(\n", - " targets=[\"table-gapminder\"],\n", - " column=\"lifeExp\",\n", - " selector=vm.RangeSlider(title=\"Range Slider (Gapminder - lifeExp)\", step=1, marks=None),\n", - " ),\n", - " vm.Filter(\n", - " targets=[\"table-gapminder\"],\n", - " column=\"continent\",\n", - " selector=vm.Checklist(title=\"Checklist (Gapminder - continent)\"),\n", - " ),\n", - " vm.Filter(\n", - " targets=[\"table-gapminder\"],\n", - " column=\"country\",\n", - " selector=vm.Dropdown(title=\"Dropdown (Gapminder - country)\"),\n", - " ),\n", - " vm.Filter(\n", - " targets=[\"table-tips\"],\n", - " column=\"day\",\n", - " selector=vm.Dropdown(title=\"Dropdown (Tips - day)\", multi=False, value=\"Sat\"),\n", - " ),\n", - " vm.Filter(\n", - " targets=[\"table-tips\"],\n", - " column=\"sex\",\n", - " selector=vm.RadioItems(title=\"Radio Items (Tips - sex)\"),\n", - " ),\n", - " vm.Filter(\n", - " targets=[\"table-tips\"],\n", - " column=\"size\",\n", - " selector=vm.Slider(title=\"Slider (Tips - size)\", step=1, value=2),\n", - " ),\n", - " vm.Filter(targets=[\"graph-stocks\"], column=\"date\", selector=vm.DatePicker(title=\"Date Picker (Stocks - date)\")),\n", - " ],\n", - ")\n", - "\n", - "# ACTIONS ---------------------------------------------------------------------\n", - "export_data_action = vm.Page(\n", - " title=\"Export data\",\n", - " components=[\n", - " vm.Graph(figure=px.scatter(iris, x=\"petal_length\", y=\"sepal_length\", color=\"species\")),\n", - " vm.Graph(figure=px.histogram(iris, x=\"petal_length\", color=\"species\")),\n", - " vm.Button(text=\"Export data\", actions=[vm.Action(function=export_data())]),\n", - " ],\n", - " controls=[vm.Filter(column=\"species\")],\n", - ")\n", - "\n", - "\n", - "chart_interaction = vm.Page(\n", - " title=\"Chart interaction\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.box(\n", - " gapminder_2007,\n", - " x=\"continent\",\n", - " y=\"lifeExp\",\n", - " color=\"continent\",\n", - " custom_data=[\"continent\"],\n", - " ),\n", - " actions=[vm.Action(function=filter_interaction(targets=[\"scatter_relation_2007\"]))],\n", - " ),\n", - " vm.Graph(\n", - " id=\"scatter_relation_2007\",\n", - " figure=px.scatter(\n", - " gapminder_2007,\n", - " x=\"gdpPercap\",\n", - " y=\"lifeExp\",\n", - " size=\"pop\",\n", - " color=\"continent\",\n", - " ),\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "\n", - "# CUSTOM CHARTS ------------------------------------------------------------------\n", - "@capture(\"graph\")\n", - "def scatter_with_line(data_frame, x, y, hline=None, title=None):\n", - " \"\"\"Custom scatter chart based on px.\"\"\"\n", - " fig = px.scatter(data_frame=data_frame, x=x, y=y, title=title)\n", - " fig.add_hline(y=hline, line_color=\"orange\")\n", - " return fig\n", - "\n", - "\n", - "@capture(\"graph\")\n", - "def waterfall(data_frame, measure, x, y, text, title=None):\n", - " \"\"\"Custom waterfall chart based on go.\"\"\"\n", - " fig = go.Figure()\n", - " fig.add_traces(\n", - " go.Waterfall(\n", - " measure=data_frame[measure],\n", - " x=data_frame[x],\n", - " y=data_frame[y],\n", - " text=data_frame[text],\n", - " decreasing={\"marker\": {\"color\": \"#ff5267\"}},\n", - " increasing={\"marker\": {\"color\": \"#08bdba\"}},\n", - " totals={\"marker\": {\"color\": \"#00b4ff\"}},\n", - " )\n", - " )\n", - " fig.update_layout(title=title)\n", - " return fig\n", - "\n", - "\n", - "custom_charts = vm.Page(\n", - " title=\"Custom Charts\",\n", - " components=[\n", - " vm.Graph(\n", - " id=\"custom_scatter\",\n", - " figure=scatter_with_line(\n", - " x=\"sepal_length\",\n", - " y=\"sepal_width\",\n", - " hline=3.5,\n", - " data_frame=iris,\n", - " title=\"Custom px chart\",\n", - " ),\n", - " ),\n", - " vm.Graph(\n", - " id=\"custom_waterfall\",\n", - " figure=waterfall(\n", - " data_frame=waterfall_df,\n", - " measure=\"measure\",\n", - " x=\"x\",\n", - " y=\"y\",\n", - " text=\"text\",\n", - " title=\"Custom go chart\",\n", - " ),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Filter(column=\"petal_width\", targets=[\"custom_scatter\"]),\n", - " vm.Filter(\n", - " column=\"x\",\n", - " targets=[\"custom_waterfall\"],\n", - " selector=vm.Dropdown(title=\"Financial categories\", multi=True),\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "\n", - "# CUSTOM TABLE ------------------------------------------------------------------\n", - "@capture(\"table\")\n", - "def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None):\n", - " \"\"\"Custom table with added logic to filter on chosen columns.\"\"\"\n", - " columns = [{\"name\": i, \"id\": i} for i in chosen_columns]\n", - " defaults = {\n", - " \"style_as_list_view\": True,\n", - " \"style_data\": {\"border_bottom\": \"1px solid var(--border-subtle-alpha-01)\", \"height\": \"40px\"},\n", - " \"style_header\": {\n", - " \"border_bottom\": \"1px solid var(--state-overlays-selected-hover)\",\n", - " \"border_top\": \"1px solid var(--main-container-bg-color)\",\n", - " \"height\": \"32px\",\n", - " },\n", - " }\n", - " return dash_table.DataTable(data=data_frame.to_dict(\"records\"), columns=columns, **defaults)\n", - "\n", - "\n", - "custom_tables = vm.Page(\n", - " title=\"Custom Tables\",\n", - " components=[\n", - " vm.Table(\n", - " id=\"custom_table\",\n", - " title=\"Custom Dash DataTable\",\n", - " figure=my_custom_table(\n", - " data_frame=gapminder_2007,\n", - " chosen_columns=[\"country\", \"continent\", \"lifeExp\", \"pop\", \"gdpPercap\"],\n", - " ),\n", - " )\n", - " ],\n", - " controls=[\n", - " vm.Parameter(\n", - " targets=[\"custom_table.chosen_columns\"],\n", - " selector=vm.Dropdown(\n", - " title=\"Choose columns\",\n", - " options=gapminder_2007.columns.to_list(),\n", - " multi=True,\n", - " ),\n", - " )\n", - " ],\n", - ")\n", - "\n", - "\n", - "# CUSTOM COMPONENTS -------------------------------------------------------------\n", - "# 1. Extend existing components\n", - "class TooltipNonCrossRangeSlider(vm.RangeSlider):\n", - " \"\"\"Custom numeric multi-selector `TooltipNonCrossRangeSlider`.\"\"\"\n", - "\n", - " type: Literal[\"other_range_slider\"] = \"other_range_slider\"\n", - "\n", - " def build(self):\n", - " \"\"\"Extend existing component by calling the super build and update properties.\"\"\"\n", - " range_slider_build_obj = super().build()\n", - " range_slider_build_obj[self.id].allowCross = False\n", - " range_slider_build_obj[self.id].tooltip = {\"always_visible\": True, \"placement\": \"bottom\"}\n", - " return range_slider_build_obj\n", - "\n", - "\n", - "vm.Filter.add_type(\"selector\", TooltipNonCrossRangeSlider)\n", - "\n", - "\n", - "# 2. Create new custom component\n", - "class Jumbotron(vm.VizroBaseModel):\n", - " \"\"\"New custom component `Jumbotron`.\"\"\"\n", - "\n", - " type: Literal[\"jumbotron\"] = \"jumbotron\"\n", - " title: str\n", - " subtitle: str\n", - " text: str\n", - "\n", - " def build(self):\n", - " \"\"\"Build the new component based on Dash components.\"\"\"\n", - " return html.Div([html.H2(self.title), html.H3(self.subtitle), html.P(self.text)])\n", - "\n", - "\n", - "vm.Page.add_type(\"components\", Jumbotron)\n", - "\n", - "custom_components = vm.Page(\n", - " title=\"Custom Components\",\n", - " components=[\n", - " Jumbotron(\n", - " title=\"Custom component based on new creation\",\n", - " subtitle=\"This is a subtitle to summarize some content.\",\n", - " text=\"This is the main body of text of the Jumbotron.\",\n", - " ),\n", - " vm.Graph(\n", - " id=\"for_custom_chart\",\n", - " figure=px.scatter(\n", - " iris,\n", - " title=\"Iris Dataset\",\n", - " x=\"sepal_length\",\n", - " y=\"petal_width\",\n", - " color=\"sepal_width\",\n", - " ),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Filter(\n", - " column=\"sepal_length\",\n", - " targets=[\"for_custom_chart\"],\n", - " selector=TooltipNonCrossRangeSlider(title=\"Custom component based on extension\"),\n", - " )\n", - " ],\n", - ")\n", - "\n", - "\n", - "# CUSTOM ACTIONS ---------------------------------------------------------------\n", - "@capture(\"action\")\n", - "def my_custom_action(t: int):\n", - " \"\"\"Custom action.\"\"\"\n", - " sleep(t)\n", - "\n", - "\n", - "custom_actions = vm.Page(\n", - " title=\"Custom Actions\",\n", - " components=[\n", - " vm.Graph(\n", - " figure=px.scatter(\n", - " iris,\n", - " x=\"sepal_length\",\n", - " y=\"petal_width\",\n", - " color=\"species\",\n", - " )\n", - " ),\n", - " vm.Button(\n", - " text=\"Export data\",\n", - " actions=[\n", - " vm.Action(function=export_data()),\n", - " vm.Action(function=my_custom_action(t=2)),\n", - " vm.Action(function=export_data(file_format=\"xlsx\")),\n", - " ],\n", - " ),\n", - " ],\n", - " controls=[vm.Filter(column=\"species\", selector=vm.Dropdown(title=\"Species\"))],\n", - ")\n", - "\n", - "\n", - "# CUSTOM FIGURE ----------------------------------------------------------------\n", - "@capture(\"figure\") # (1)!\n", - "def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.Div:\n", - " \"\"\"Creates a list with a variable number of `vm.Card` components from the provided data_frame.\n", - "\n", - " Args:\n", - " data_frame: Data frame containing the data.\n", - " n_rows: Number of rows to use from the data_frame. Defaults to 1.\n", - "\n", - " Returns:\n", - " html.Div with a list of dbc.Card objects generated from the data.\n", - "\n", - " \"\"\"\n", - " texts = data_frame.head(n_rows)[\"text\"]\n", - " return html.Div(\n", - " [dbc.Card(dcc.Markdown(f\"### Card #{i}\\n{text}\")) for i, text in enumerate(texts, 1)],\n", - " className=\"multiple-cards-container\",\n", - " )\n", - "\n", - "\n", - "custom_figures = vm.Page(\n", - " title=\"Custom Figures\",\n", - " components=[vm.Figure(id=\"my-figure\", figure=multiple_cards(data_frame=custom_fig_df))],\n", - " controls=[\n", - " vm.Parameter(\n", - " targets=[\"my-figure.n_rows\"],\n", - " selector=vm.Slider(min=2, max=12, step=2, value=8, title=\"Number of cards to display\"),\n", - " ),\n", - " ],\n", - ")\n", - "\n", - "kpi_indicators = vm.Page(\n", - " title=\"KPI Indicators\",\n", - " layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),\n", - " components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],\n", - " controls=[vm.Filter(column=\"Category\")],\n", - ")" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "components = [graphs, ag_grid, table, cards, figure, button, containers, tabs]\n", - "controls = [filters, parameters, selectors]\n", - "actions = [export_data_action, chart_interaction]\n", - "extensions = [custom_charts, custom_tables, custom_components, custom_actions, custom_figures]\n", - "\n", - "dashboard = vm.Dashboard(\n", - " title=\"Vizro Features\",\n", - " pages=[home, *components, *controls, *actions, *extensions],\n", - " navigation=vm.Navigation(\n", - " nav_selector=vm.NavBar(\n", - " items=[\n", - " vm.NavLink(label=\"Homepage\", pages=[\"Homepage\"], icon=\"Home\"),\n", - " vm.NavLink(\n", - " label=\"Features\",\n", - " pages={\n", - " \"Components\": [\"Graphs\", \"AG Grid\", \"Table\", \"Cards\", \"Figure\", \"Button\", \"Containers\", \"Tabs\"],\n", - " \"Controls\": [\"Filters\", \"Parameters\", \"Selectors\"],\n", - " \"Actions\": [\"Export data\", \"Chart interaction\"],\n", - " \"Extensions\": [\n", - " \"Custom Charts\",\n", - " \"Custom Tables\",\n", - " \"Custom Components\",\n", - " \"Custom Actions\",\n", - " \"Custom Figures\",\n", - " ],\n", - " },\n", - " icon=\"Library Add\",\n", - " ),\n", - " ]\n", - " )\n", - " ),\n", - ")" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "Vizro(assets_folder=\"../assets\").build(dashboard).run()" - ] - } - ], - "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.8.18" - } - }, - "nbformat": 4, - "nbformat_minor": 4 -}