diff --git a/.vale/styles/Microsoft/ignore.txt b/.vale/styles/Microsoft/ignore.txt index 2cb10f1f8..85356782c 100644 --- a/.vale/styles/Microsoft/ignore.txt +++ b/.vale/styles/Microsoft/ignore.txt @@ -91,3 +91,4 @@ memoization setosa versicolor virginica +Hugging Face diff --git a/vizro-core/changelog.d/20240712_095053_huong_li_nguyen_update_demos.md b/vizro-core/changelog.d/20240712_095053_huong_li_nguyen_update_demos.md new file mode 100644 index 000000000..c74db5d27 --- /dev/null +++ b/vizro-core/changelog.d/20240712_095053_huong_li_nguyen_update_demos.md @@ -0,0 +1,46 @@ + + + + +### Removed + +- Remove `demo` dashboard folder from repository. ([#581](https://github.com/mckinsey/vizro/pull/581)) + + + +### Changed + +- Rename `features` demo dashboard folder to `dev`. ([#581](https://github.com/mckinsey/vizro/pull/581)) + + + + diff --git a/vizro-core/docs/pages/examples/examples.md b/vizro-core/docs/pages/examples/examples.md index 9f3f4fa6e..fbfdeb30a 100644 --- a/vizro-core/docs/pages/examples/examples.md +++ b/vizro-core/docs/pages/examples/examples.md @@ -13,14 +13,14 @@ The dashboard launches with a home page that offers four other pages: * Continent summary: Summarizes the main findings for each continent. -You can find the code for each of the charts, for each page of the dashboard, in the `examples` folder of the `vizro-core` package, within [Vizro's GitHub repository](https://github.com/mckinsey/vizro). The code is available as a [`.py` file](https://github.com/mckinsey/vizro/blob/main/vizro-core/examples/demo/app.py) or as a [Jupyter Notebook](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/demo/jupyter_version). +You can find the code for the dashboard on our [Hugging Face gapminder demo space](https://huggingface.co/spaces/vizro/demo-gapminder). The code is available as a [`.py` file](https://huggingface.co/spaces/vizro/demo-gapminder/blob/main/app.py). !!! note If you have any problems running the example code, please [raise an issue](https://github.com/mckinsey/vizro/issues) on the Vizro repository. ## Vizro features -The [`examples/features` folder](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/features) of the `vizro-core` package within [Vizro's GitHub repository](https://github.com/mckinsey/vizro) contains an example that illustrates Vizro's features. The code is available as a Python script, plus there is an alternative `yaml_version` that offers the same example as the pydantic model but via YAML configuration. +The [`examples/dev` folder](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/dev) of the `vizro-core` package within [Vizro's GitHub repository](https://github.com/mckinsey/vizro) contains an example that illustrates Vizro's features. The code is available as a Python script, plus there is an alternative `yaml_version` that offers the same example as the pydantic model but via YAML configuration. The pydantic model should be your preferred method of dashboard configuration, but you can also [define a dashboard with YAML, JSON, or as a Python dictionary](../user-guides/dashboard.md). diff --git a/vizro-core/examples/demo/app.py b/vizro-core/examples/demo/app.py deleted file mode 100644 index 768f2568f..000000000 --- a/vizro-core/examples/demo/app.py +++ /dev/null @@ -1,547 +0,0 @@ -"""Example to show dashboard configuration.""" - -from typing import Optional - -import pandas as pd -import vizro.models as vm -import vizro.plotly.express as px -from vizro import Vizro -from vizro.actions import export_data, filter_interaction -from vizro.models.types import capture -from vizro.tables import dash_ag_grid - -gapminder = px.data.gapminder() -gapminder_mean = ( - gapminder.groupby(by=["continent", "year"]) - .agg({"lifeExp": "mean", "pop": "mean", "gdpPercap": "mean"}) - .reset_index() -) -gapminder_mean_2007 = gapminder_mean.query("year == 2007") - -gapminder_transformed = gapminder.copy() -gapminder_transformed["lifeExp"] = gapminder.groupby(by=["continent", "year"])["lifeExp"].transform("mean") -gapminder_transformed["gdpPercap"] = gapminder.groupby(by=["continent", "year"])["gdpPercap"].transform("mean") -gapminder_transformed["pop"] = gapminder.groupby(by=["continent", "year"])["pop"].transform("sum") -gapminder_concat = pd.concat( - [gapminder_transformed.assign(color="Continent Avg."), gapminder.assign(color="Country")], ignore_index=True -) - - -@capture("graph") -def variable_map(data_frame: pd.DataFrame = None, color: Optional[str] = None): - """Custom choropleth figure that needs post update calls.""" - fig = px.choropleth( - data_frame, - locations="iso_alpha", - color=color, - hover_name="country", - animation_frame="year", - labels={ - "year": "year", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - }, - title="Global development over time", - ) - fig.update_layout(showlegend=False) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "right"}}) - return fig - - -@capture("graph") -def variable_boxplot(y: str, data_frame: pd.DataFrame = None): - """Custom boxplot figure that needs post update calls.""" - fig = px.box( - data_frame, - x="continent", - y=y, - color="continent", - labels={ - "year": "year", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - "continent": "Continent", - }, - title="Distribution per continent", - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ) - fig.update_layout(showlegend=False) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - return fig - - -@capture("graph") -def variable_bar(x: str, data_frame: pd.DataFrame = None): - """Custom bar figure that needs post update calls.""" - fig = px.bar( - data_frame, - x=x, - y="continent", - orientation="h", - title="Continent comparison (2007)", - labels={ - "year": "year", - "continent": "Continent", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - }, - color="continent", - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ) - - fig.update_layout(showlegend=False) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - return fig - - -@capture("graph") -def scatter_relation(x: str, y: str, size: str, data_frame: pd.DataFrame = None): - """Custom scatter figure that needs post update calls.""" - fig = px.scatter( - data_frame, - x=x, - y=y, - animation_frame="year", - animation_group="country", - size=size, - size_max=60, - color="continent", - hover_name="country", - labels={ - "gdpPercap": "GDP per capita", - "pop": "Population", - "lifeExp": "Life expectancy", - "continent": "Continent", - }, - range_y=[25, 90], - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ) - - fig.update_layout( - title="Relationship over time", - legend={"orientation": "v", "yanchor": "bottom", "y": 0, "xanchor": "right", "x": 1}, - ) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - return fig - - -def create_variable_analysis(): - """Function returns a page with gapminder data to do variable analysis.""" - page_variable = vm.Page( - title="Variable Analysis", - description="Analyzing population, GDP per capita and life expectancy on country and continent level", - layout=vm.Layout( - grid=[ - # fmt: off - [0, 1, 1, 1], - [2, 3, 3, 3], - [4, 5, 5, 5], - [6, 7, 7, 7], - # fmt: on - ], - row_min_height="400px", - row_gap="24px", - ), - components=[ - vm.Card( - text=""" - ### Overview - The world map provides initial insights into the variations of metrics across countries and - continents. Click on Play to see the animation and explore the development over time. - - #### Observation - A global trend of increasing life expectancy emerges, with some exceptions in specific African - countries. Additionally, despite similar population growth rates across continents, the overall - global population continues to expand, with India and China leading the way. Meanwhile, GDP per - capita experiences growth in most regions. - - """ - ), - vm.Graph( - id="variable_map", - figure=variable_map(data_frame=gapminder, color="lifeExp"), - ), - vm.Card( - text=""" - ### Distribution - The boxplot illustrates the distribution of each metric across continents, facilitating comparisons - of life expectancy, GDP per capita, and population statistics. - - Observations reveal that Europe and Oceania have the highest life expectancy and GDP per capita, - likely influenced by their smaller population growth. Additionally, Asia and America exhibit - notable GDP per capita outliers, indicating variations among countries within these continents or - large growth over the observed years. - """ - ), - vm.Graph( - id="variable_boxplot", - figure=variable_boxplot(data_frame=gapminder, y="lifeExp"), - ), - vm.Card( - text=""" - ### Development - The line chart tracks the variable's progress from 1952 to 2007, facilitating a deeper comprehension - of each metric. - - #### Observation - Oceania and Europe are found to have the highest total GDP per capita and exhibit significant - growth. In contrast, Asia, Africa, and America demonstrate a more pronounced upward trend in - population increase compared to Europe and Oceania, suggesting that GDP per capita growth might be - influenced by relatively smaller population growth in the latter two continents. - - """ - ), - vm.Graph( - id="variable_line", - figure=px.line( - gapminder_mean, - y="lifeExp", - x="year", - color="continent", - title="Avg. Development (1952 - 2007)", - labels={ - "year": "Year", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - "continent": "Continent", - }, - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ), - ), - vm.Card( - text=""" - ### Recent status - Examining the data for 2007 provides insight into the current status of each continent and metrics. - - #### Observation - Asia held the largest population, followed by America, Europe, Africa, and Oceania. Life expectancy - surpassed 70 years for all continents, except Africa with 55 years. GDP per capita aligns with - earlier findings, with Oceania and Europe reporting the highest values and Africa recording the - lowest. - """ - ), - vm.Graph( - id="variable_bar", - figure=variable_bar(data_frame=gapminder_mean_2007, x="lifeExp"), - ), - ], - controls=[ - vm.Parameter( - targets=["variable_map.color", "variable_boxplot.y", "variable_line.y", "variable_bar.x"], - selector=vm.RadioItems(options=["lifeExp", "pop", "gdpPercap"], title="Select variable"), - ) - ], - ) - return page_variable - - -def create_relation_analysis(): - """Function returns a page to perform relation analysis.""" - page_relation_analysis = vm.Page( - title="Relationship Analysis", - description="Investigating the interconnection between population, GDP per capita and life expectancy", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] + [[1, 1, 1, 1, 1]] * 4, - row_min_height="100px", - row_gap="24px", - ), - components=[ - vm.Card( - text=""" - Population, GDP per capita, and life expectancy are interconnected metrics that provide insights - into the socioeconomic well-being of a country. - Rapid population growth can strain resources and infrastructure, impacting GDP per capita. Higher - GDP per capita often enables better healthcare and improved life expectancy, but other factors such - as healthcare quality and social policies also play significant roles. - """ - ), - vm.Graph( - id="scatter_relation", - figure=scatter_relation(data_frame=gapminder, x="gdpPercap", y="lifeExp", size="pop"), - ), - ], - controls=[ - vm.Parameter( - targets=["scatter_relation.x"], - selector=vm.Dropdown( - options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis" - ), - ), - vm.Parameter( - targets=["scatter_relation.size"], - selector=vm.Dropdown( - options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size" - ), - ), - ], - ) - return page_relation_analysis - - -def create_continent_summary(): - """Function returns a page with markdown including images.""" - page_summary = vm.Page( - title="Continent Summary", - description="Summarizing the main findings for each continent", - layout=vm.Layout(grid=[[i] for i in range(5)], row_min_height="190px", row_gap="25px"), - components=[ - vm.Card( - text=""" - ### Africa - ![](assets/images/continents/africa.svg#my-image) - - Africa, a diverse and expansive continent, faces both challenges and progress in its socioeconomic - landscape. In 2007, Africa's GDP per capita was approximately $3,000, reflecting relatively slower - growth compared to other continents like Oceania and Europe. - - However, Africa has shown notable improvements in life expectancy over time, reaching 55 years in - 2007. Despite these economic disparities, Africa's population has been steadily increasing, - reflecting its significant potential for development. - """ - ), - vm.Card( - text=""" - ### Americas - ![](assets/images/continents/america.svg#my-image) - - Comprising North and South America, Americas represents a region of vast geographical and cultural - diversity. In 2007, the continent experienced substantial population growth, with a diverse mix of - countries contributing to this expansion. - - Although its GDP per capita of $11,000 in 2007 exhibited variations across countries, America - maintained similar levels to Asia, reflecting its economic significance. With North America - generally reporting higher life expectancy compared to South America, America remains a region of - opportunities and challenges. - """ - ), - vm.Card( - text=""" - ### Asia - ![](assets/images/continents/asia.svg#my-image) - - Asia holds a central role in the global economy. It's growth in GDP per capita to $12,000 in 2007 - and population has been significant, outpacing many other continents. In 2007, it boasted the - highest population among all continents, with countries like China and India leading the way. - - Despite facing various socioeconomic challenges, Asia's increasing life expectancy from 46 years - to 70 over the years reflects advancements in healthcare and overall well-being, making it a vital - region driving global progress and development. - """ - ), - vm.Card( - text=""" - ### Europe - ![](assets/images/continents/europe.svg#my-image) - - Europe boasts a strong and thriving economy. In 2007, it exhibited the second-highest GDP per - capita of $25,000 among continents, indicating sustained economic growth and development. - - Europe's life expectancy surpassed 75 years, showcasing a high standard of living and - well-established healthcare systems. With its robust infrastructure, advanced industries, and - quality of life, Europe continues to be a leading force in the global economy. Between 1952 and - 2007, Europe's population experienced moderate growth, with a factor of approximately 1.5, - notably lower compared to other continents like Asia and America. - """ - ), - vm.Card( - text=""" - ### Oceania - ![](assets/images/continents/oceania.svg#my-image) - - Oceania, comprising countries like Australia and New Zealand, stands out with notable economic - prosperity and longer life expectancy. In 2007, it boasted the highest GDP per capita of $27,000 - among continents and exhibited one of the highest life expectancy levels, surpassing 80 years. - - Despite a relatively smaller population size, Oceania's strong economic growth has contributed - to improved living standards and overall well-being of its population. - """ - ), - ], - ) - return page_summary - - -def create_benchmark_analysis(): - """Function returns a page to perform analysis on country level.""" - # Apply formatting to grid columns - cellStyle = { - "styleConditions": [ - { - "condition": "params.value < 1045", - "style": {"backgroundColor": "#ff9222"}, - }, - { - "condition": "params.value >= 1045 && params.value <= 4095", - "style": {"backgroundColor": "#de9e75"}, - }, - { - "condition": "params.value > 4095 && params.value <= 12695", - "style": {"backgroundColor": "#aaa9ba"}, - }, - { - "condition": "params.value > 12695", - "style": {"backgroundColor": "#00b4ff"}, - }, - ] - } - columnsDefs = [ - {"field": "country", "flex": 3}, - {"field": "continent", "flex": 3}, - {"field": "year", "flex": 2}, - {"field": "lifeExp", "cellDataType": "numeric", "flex": 3}, - {"field": "gdpPercap", "cellDataType": "dollar", "cellStyle": cellStyle, "flex": 3}, - {"field": "pop", "flex": 3}, - ] - - page_country = vm.Page( - title="Benchmark Analysis", - description="Discovering how the metrics differ for each country and export data for further investigation", - layout=vm.Layout(grid=[[0, 1]] * 5 + [[2, -1]]), - components=[ - vm.AgGrid( - title="Click on a cell in country column:", - figure=dash_ag_grid(data_frame=gapminder, columnDefs=columnsDefs, dashGridOptions={"pagination": True}), - actions=[vm.Action(function=filter_interaction(targets=["line_country"]))], - ), - vm.Graph( - id="line_country", - figure=px.line( - gapminder_concat, - title="Country vs. Continent", - x="year", - y="gdpPercap", - color="color", - labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"}, - color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"}, - markers=True, - hover_name="country", - ), - ), - vm.Button(text="Export data", actions=[vm.Action(function=export_data(targets=["line_country"]))]), - ], - controls=[ - vm.Filter(column="continent", selector=vm.Dropdown(value="Europe", multi=False, title="Select continent")), - vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe", step=1, marks=None)), - vm.Parameter( - targets=["line_country.y"], - selector=vm.Dropdown( - options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose y-axis" - ), - ), - ], - ) - return page_country - - -def create_home_page(): - """Function returns the homepage.""" - page_home = vm.Page( - title="Homepage", - description="Vizro demo app for studying gapminder data", - layout=vm.Layout(grid=[[0, 1], [2, 3]]), - components=[ - vm.Card( - text=""" - ![](assets/images/icons/hypotheses.svg#icon-top) - - ### Variable Analysis - - Analyzing population, GDP per capita and life expectancy on country and continent level. - """, - href="/variable-analysis", - ), - vm.Card( - text=""" - ![](assets/images/icons/hypotheses.svg#icon-top) - - ### Relationship Analysis - - Investigating the interconnection between population, GDP per capita and life expectancy. - """, - href="/relationship-analysis", - ), - vm.Card( - text=""" - ![](assets/images/icons/collections.svg#icon-top) - - ### Continent Summary - - Summarizing the main findings for each continent. - """, - href="/continent-summary", - ), - vm.Card( - text=""" - ![](assets/images/icons/features.svg#icon-top) - - ### Benchmark Analysis - - Discovering how the metrics differ for each country compared to the continent average - and export data for further investigation. - """, - href="/benchmark-analysis", - ), - ], - ) - return page_home - - -dashboard = vm.Dashboard( - title="Vizro Demo", - pages=[ - create_home_page(), - create_variable_analysis(), - create_relation_analysis(), - create_continent_summary(), - create_benchmark_analysis(), - ], - navigation=vm.Navigation( - nav_selector=vm.NavBar( - items=[ - vm.NavLink(label="Homepage", pages=["Homepage"], icon="Home"), - vm.NavLink( - label="Analysis", - pages=["Variable Analysis", "Relationship Analysis", "Benchmark Analysis"], - icon="Stacked Bar Chart", - ), - vm.NavLink(label="Summary", pages=["Continent Summary"], icon="Globe"), - ] - ) - ), -) - -if __name__ == "__main__": - Vizro().build(dashboard).run() diff --git a/vizro-core/examples/demo/assets/css/custom.css b/vizro-core/examples/demo/assets/css/custom.css deleted file mode 100644 index 8658c2b57..000000000 --- a/vizro-core/examples/demo/assets/css/custom.css +++ /dev/null @@ -1,10 +0,0 @@ -img[src*="#my-image"] { - float: left; - height: 100px; - margin: 10px 25px; - width: 100px; -} - -#page-header { - padding-left: 8px; -} diff --git a/vizro-core/examples/demo/assets/images/continents/africa.svg b/vizro-core/examples/demo/assets/images/continents/africa.svg deleted file mode 100644 index 116ea957b..000000000 --- a/vizro-core/examples/demo/assets/images/continents/africa.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/vizro-core/examples/demo/assets/images/continents/america.svg b/vizro-core/examples/demo/assets/images/continents/america.svg deleted file mode 100644 index f048a977d..000000000 --- a/vizro-core/examples/demo/assets/images/continents/america.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/vizro-core/examples/demo/assets/images/continents/asia.svg b/vizro-core/examples/demo/assets/images/continents/asia.svg deleted file mode 100644 index 0721f0374..000000000 --- a/vizro-core/examples/demo/assets/images/continents/asia.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/vizro-core/examples/demo/assets/images/continents/europe.svg b/vizro-core/examples/demo/assets/images/continents/europe.svg deleted file mode 100644 index 18afc0896..000000000 --- a/vizro-core/examples/demo/assets/images/continents/europe.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/vizro-core/examples/demo/assets/images/continents/oceania.svg b/vizro-core/examples/demo/assets/images/continents/oceania.svg deleted file mode 100644 index bc00f2b84..000000000 --- a/vizro-core/examples/demo/assets/images/continents/oceania.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/vizro-core/examples/demo/assets/images/icons/collections.svg b/vizro-core/examples/demo/assets/images/icons/collections.svg deleted file mode 100644 index 62333018e..000000000 --- a/vizro-core/examples/demo/assets/images/icons/collections.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/examples/demo/assets/images/icons/features.svg b/vizro-core/examples/demo/assets/images/icons/features.svg deleted file mode 100644 index 645c58733..000000000 --- a/vizro-core/examples/demo/assets/images/icons/features.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/examples/demo/assets/images/icons/hypotheses.svg b/vizro-core/examples/demo/assets/images/icons/hypotheses.svg deleted file mode 100644 index 505d7c7cd..000000000 --- a/vizro-core/examples/demo/assets/images/icons/hypotheses.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/examples/demo/jupyter_version/app.ipynb b/vizro-core/examples/demo/jupyter_version/app.ipynb deleted file mode 100644 index 1b398d741..000000000 --- a/vizro-core/examples/demo/jupyter_version/app.ipynb +++ /dev/null @@ -1,603 +0,0 @@ -{ - "cells": [ - { - "cell_type": "code", - "metadata": {}, - "source": [ - "from typing import Optional\n", - "\n", - "import pandas as pd\n", - "import vizro.models as vm\n", - "import vizro.plotly.express as px\n", - "from vizro import Vizro\n", - "from vizro.actions import export_data, filter_interaction\n", - "from vizro.models.types import capture\n", - "from vizro.tables import dash_ag_grid" - ], - "outputs": [], - "execution_count": null - }, - { - "cell_type": "code", - "metadata": {}, - "source": [ - "gapminder = px.data.gapminder()\n", - "gapminder_mean = (\n", - " gapminder.groupby(by=[\"continent\", \"year\"])\n", - " .agg({\"lifeExp\": \"mean\", \"pop\": \"mean\", \"gdpPercap\": \"mean\"})\n", - " .reset_index()\n", - ")\n", - "gapminder_mean_2007 = gapminder_mean.query(\"year == 2007\")\n", - "\n", - "gapminder_transformed = gapminder.copy()\n", - "gapminder_transformed[\"lifeExp\"] = gapminder.groupby(by=[\"continent\", \"year\"])[\"lifeExp\"].transform(\"mean\")\n", - "gapminder_transformed[\"gdpPercap\"] = gapminder.groupby(by=[\"continent\", \"year\"])[\"gdpPercap\"].transform(\"mean\")\n", - "gapminder_transformed[\"pop\"] = gapminder.groupby(by=[\"continent\", \"year\"])[\"pop\"].transform(\"sum\")\n", - "gapminder_concat = pd.concat(\n", - " [gapminder_transformed.assign(color=\"Continent Avg.\"), gapminder.assign(color=\"Country\")], ignore_index=True\n", - ")\n" - ], - "outputs": [], - "execution_count": null - }, - { - "cell_type": "code", - "metadata": {}, - "source": [ - "@capture(\"graph\")\n", - "def variable_map(data_frame: pd.DataFrame = None, color: Optional[str] = None):\n", - " \"\"\"Custom choropleth figure that needs post update calls.\"\"\"\n", - " fig = px.choropleth(\n", - " data_frame,\n", - " locations=\"iso_alpha\",\n", - " color=color,\n", - " hover_name=\"country\",\n", - " animation_frame=\"year\",\n", - " labels={\n", - " \"year\": \"year\",\n", - " \"lifeExp\": \"Life expectancy\",\n", - " \"pop\": \"Population\",\n", - " \"gdpPercap\": \"GDP per capita\",\n", - " },\n", - " title=\"Global development over time\",\n", - " )\n", - " fig.update_layout(showlegend=False)\n", - " fig.update_yaxes(automargin=True)\n", - " fig.update_xaxes(automargin=True)\n", - " fig.update_coloraxes(colorbar={\"thickness\": 10, \"title\": {\"side\": \"right\"}})\n", - " return fig\n", - "\n", - "\n", - "@capture(\"graph\")\n", - "def variable_boxplot(y: str, data_frame: pd.DataFrame = None):\n", - " \"\"\"Custom boxplot figure that needs post update calls.\"\"\"\n", - " fig = px.box(\n", - " data_frame,\n", - " x=\"continent\",\n", - " y=y,\n", - " color=\"continent\",\n", - " labels={\n", - " \"year\": \"year\",\n", - " \"lifeExp\": \"Life expectancy\",\n", - " \"pop\": \"Population\",\n", - " \"gdpPercap\": \"GDP per capita\",\n", - " \"continent\": \"Continent\",\n", - " },\n", - " title=\"Distribution per continent\",\n", - " color_discrete_map={\n", - " \"Africa\": \"#00b4ff\",\n", - " \"Americas\": \"#ff9222\",\n", - " \"Asia\": \"#3949ab\",\n", - " \"Europe\": \"#ff5267\",\n", - " \"Oceania\": \"#08bdba\",\n", - " },\n", - " )\n", - " fig.update_layout(showlegend=False)\n", - " fig.update_yaxes(automargin=True)\n", - " fig.update_xaxes(automargin=True)\n", - " return fig\n", - "\n", - "\n", - "@capture(\"graph\")\n", - "def variable_bar(x: str, data_frame: pd.DataFrame = None):\n", - " \"\"\"Custom bar figure that needs post update calls.\"\"\"\n", - " fig = px.bar(\n", - " data_frame,\n", - " x=x,\n", - " y=\"continent\",\n", - " orientation=\"h\",\n", - " title=\"Continent comparison (2007)\",\n", - " labels={\n", - " \"year\": \"year\",\n", - " \"continent\": \"Continent\",\n", - " \"lifeExp\": \"Life expectancy\",\n", - " \"pop\": \"Population\",\n", - " \"gdpPercap\": \"GDP per capita\",\n", - " },\n", - " color=\"continent\",\n", - " color_discrete_map={\n", - " \"Africa\": \"#00b4ff\",\n", - " \"Americas\": \"#ff9222\",\n", - " \"Asia\": \"#3949ab\",\n", - " \"Europe\": \"#ff5267\",\n", - " \"Oceania\": \"#08bdba\",\n", - " },\n", - " )\n", - "\n", - " fig.update_layout(showlegend=False)\n", - " fig.update_yaxes(automargin=True)\n", - " fig.update_xaxes(automargin=True)\n", - " return fig\n", - "\n", - "\n", - "@capture(\"graph\")\n", - "def scatter_relation(x: str, y: str, size: str, data_frame: pd.DataFrame = None):\n", - " \"\"\"Custom scatter figure that needs post update calls.\"\"\"\n", - " fig = px.scatter(\n", - " data_frame,\n", - " x=x,\n", - " y=y,\n", - " animation_frame=\"year\",\n", - " animation_group=\"country\",\n", - " size=size,\n", - " size_max=60,\n", - " color=\"continent\",\n", - " hover_name=\"country\",\n", - " labels={\n", - " \"gdpPercap\": \"GDP per capita\",\n", - " \"pop\": \"Population\",\n", - " \"lifeExp\": \"Life expectancy\",\n", - " \"continent\": \"Continent\",\n", - " },\n", - " range_y=[25, 90],\n", - " color_discrete_map={\n", - " \"Africa\": \"#00b4ff\",\n", - " \"Americas\": \"#ff9222\",\n", - " \"Asia\": \"#3949ab\",\n", - " \"Europe\": \"#ff5267\",\n", - " \"Oceania\": \"#08bdba\",\n", - " },\n", - " )\n", - "\n", - " fig.update_layout(\n", - " title=\"Relationship over time\",\n", - " legend={\"orientation\": \"v\", \"yanchor\": \"bottom\", \"y\": 0, \"xanchor\": \"right\", \"x\": 1},\n", - " )\n", - " fig.update_yaxes(automargin=True)\n", - " fig.update_xaxes(automargin=True)\n", - " return fig\n", - "\n", - "\n", - "def create_variable_analysis():\n", - " \"\"\"Function returns a page with gapminder data to do variable analysis.\"\"\"\n", - " page_variable = vm.Page(\n", - " title=\"Variable Analysis\",\n", - " description=\"Analyzing population, GDP per capita and life expectancy on country and continent level\",\n", - " layout=vm.Layout(\n", - " grid=[\n", - " # fmt: off\n", - " [0, 1, 1, 1],\n", - " [2, 3, 3, 3],\n", - " [4, 5, 5, 5],\n", - " [6, 7, 7, 7],\n", - " # fmt: on\n", - " ],\n", - " row_min_height=\"400px\",\n", - " row_gap=\"24px\",\n", - " ),\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Overview\n", - " The world map provides initial insights into the variations of metrics across countries and\n", - " continents. Click on Play to see the animation and explore the development over time.\n", - "\n", - " #### Observation\n", - " A global trend of increasing life expectancy emerges, with some exceptions in specific African\n", - " countries. Additionally, despite similar population growth rates across continents, the overall\n", - " global population continues to expand, with India and China leading the way. Meanwhile, GDP per\n", - " capita experiences growth in most regions.\n", - "\n", - " \"\"\"\n", - " ),\n", - " vm.Graph(\n", - " id=\"variable_map\",\n", - " figure=variable_map(data_frame=gapminder, color=\"lifeExp\"),\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Distribution\n", - " The boxplot illustrates the distribution of each metric across continents, facilitating comparisons\n", - " of life expectancy, GDP per capita, and population statistics.\n", - "\n", - " Observations reveal that Europe and Oceania have the highest life expectancy and GDP per capita,\n", - " likely influenced by their smaller population growth. Additionally, Asia and America exhibit\n", - " notable GDP per capita outliers, indicating variations among countries within these continents or\n", - " large growth over the observed years.\n", - " \"\"\"\n", - " ),\n", - " vm.Graph(\n", - " id=\"variable_boxplot\",\n", - " figure=variable_boxplot(data_frame=gapminder, y=\"lifeExp\"),\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Development\n", - " The line chart tracks the variable's progress from 1952 to 2007, facilitating a deeper comprehension\n", - " of each metric.\n", - "\n", - " #### Observation\n", - " Oceania and Europe are found to have the highest total GDP per capita and exhibit significant\n", - " growth. In contrast, Asia, Africa, and America demonstrate a more pronounced upward trend in\n", - " population increase compared to Europe and Oceania, suggesting that GDP per capita growth might be\n", - " influenced by relatively smaller population growth in the latter two continents.\n", - "\n", - " \"\"\"\n", - " ),\n", - " vm.Graph(\n", - " id=\"variable_line\",\n", - " figure=px.line(\n", - " gapminder_mean,\n", - " y=\"lifeExp\",\n", - " x=\"year\",\n", - " color=\"continent\",\n", - " title=\"Avg. Development (1952 - 2007)\",\n", - " labels={\n", - " \"year\": \"Year\",\n", - " \"lifeExp\": \"Life expectancy\",\n", - " \"pop\": \"Population\",\n", - " \"gdpPercap\": \"GDP per capita\",\n", - " \"continent\": \"Continent\",\n", - " },\n", - " color_discrete_map={\n", - " \"Africa\": \"#00b4ff\",\n", - " \"Americas\": \"#ff9222\",\n", - " \"Asia\": \"#3949ab\",\n", - " \"Europe\": \"#ff5267\",\n", - " \"Oceania\": \"#08bdba\",\n", - " },\n", - " ),\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Recent status\n", - " Examining the data for 2007 provides insight into the current status of each continent and metrics.\n", - "\n", - " #### Observation\n", - " Asia held the largest population, followed by America, Europe, Africa, and Oceania. Life expectancy\n", - " surpassed 70 years for all continents, except Africa with 55 years. GDP per capita aligns with\n", - " earlier findings, with Oceania and Europe reporting the highest values and Africa recording the\n", - " lowest.\n", - " \"\"\"\n", - " ),\n", - " vm.Graph(\n", - " id=\"variable_bar\",\n", - " figure=variable_bar(data_frame=gapminder_mean_2007, x=\"lifeExp\"),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Parameter(\n", - " targets=[\"variable_map.color\", \"variable_boxplot.y\", \"variable_line.y\", \"variable_bar.x\"],\n", - " selector=vm.RadioItems(options=[\"lifeExp\", \"pop\", \"gdpPercap\"], title=\"Select variable\"),\n", - " )\n", - " ],\n", - " )\n", - " return page_variable\n", - "\n", - "\n", - "def create_relation_analysis():\n", - " \"\"\"Function returns a page to perform relation analysis.\"\"\"\n", - " page_relation_analysis = vm.Page(\n", - " title=\"Relationship Analysis\",\n", - " description=\"Investigating the interconnection between population, GDP per capita and life expectancy\",\n", - " layout=vm.Layout(\n", - " grid=[[0, 0, 0, 0, 0]] + [[1, 1, 1, 1, 1]] * 4,\n", - " row_min_height=\"100px\",\n", - " row_gap=\"24px\",\n", - " ),\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " Population, GDP per capita, and life expectancy are interconnected metrics that provide insights\n", - " into the socioeconomic well-being of a country.\n", - " Rapid population growth can strain resources and infrastructure, impacting GDP per capita. Higher\n", - " GDP per capita often enables better healthcare and improved life expectancy, but other factors such\n", - " as healthcare quality and social policies also play significant roles.\n", - " \"\"\"\n", - " ),\n", - " vm.Graph(\n", - " id=\"scatter_relation\",\n", - " figure=scatter_relation(data_frame=gapminder, x=\"gdpPercap\", y=\"lifeExp\", size=\"pop\"),\n", - " ),\n", - " ],\n", - " controls=[\n", - " vm.Parameter(\n", - " targets=[\"scatter_relation.x\"],\n", - " selector=vm.Dropdown(\n", - " options=[\"lifeExp\", \"gdpPercap\", \"pop\"], multi=False, value=\"gdpPercap\", title=\"Choose x-axis\"\n", - " ),\n", - " ),\n", - " vm.Parameter(\n", - " targets=[\"scatter_relation.size\"],\n", - " selector=vm.Dropdown(\n", - " options=[\"lifeExp\", \"gdpPercap\", \"pop\"], multi=False, value=\"pop\", title=\"Choose bubble size\"\n", - " ),\n", - " ),\n", - " ],\n", - " )\n", - " return page_relation_analysis\n", - "\n", - "\n", - "def create_continent_summary():\n", - " \"\"\"Function returns a page with markdown including images.\"\"\"\n", - " page_summary = vm.Page(\n", - " title=\"Continent Summary\",\n", - " description=\"Summarizing the main findings for each continent\",\n", - " layout=vm.Layout(grid=[[i] for i in range(5)], row_min_height=\"190px\", row_gap=\"25px\"),\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Africa\n", - " ![](assets/images/continents/africa.svg#my-image)\n", - "\n", - " Africa, a diverse and expansive continent, faces both challenges and progress in its socioeconomic\n", - " landscape. In 2007, Africa's GDP per capita was approximately $3,000, reflecting relatively slower\n", - " growth compared to other continents like Oceania and Europe.\n", - "\n", - " However, Africa has shown notable improvements in life expectancy over time, reaching 55 years in\n", - " 2007. Despite these economic disparities, Africa's population has been steadily increasing,\n", - " reflecting its significant potential for development.\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Americas\n", - " ![](assets/images/continents/america.svg#my-image)\n", - "\n", - " Comprising North and South America, Americas represents a region of vast geographical and cultural\n", - " diversity. In 2007, the continent experienced substantial population growth, with a diverse mix of\n", - " countries contributing to this expansion.\n", - "\n", - " Although its GDP per capita of $11,000 in 2007 exhibited variations across countries, America\n", - " maintained similar levels to Asia, reflecting its economic significance. With North America\n", - " generally reporting higher life expectancy compared to South America, America remains a region of\n", - " opportunities and challenges.\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Asia\n", - " ![](assets/images/continents/asia.svg#my-image)\n", - "\n", - " Asia holds a central role in the global economy. It's growth in GDP per capita to $12,000 in 2007\n", - " and population has been significant, outpacing many other continents. In 2007, it boasted the\n", - " highest population among all continents, with countries like China and India leading the way.\n", - "\n", - " Despite facing various socioeconomic challenges, Asia's increasing life expectancy from 46 years\n", - " to 70 over the years reflects advancements in healthcare and overall well-being, making it a vital\n", - " region driving global progress and development.\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Europe\n", - " ![](assets/images/continents/europe.svg#my-image)\n", - "\n", - " Europe boasts a strong and thriving economy. In 2007, it exhibited the second-highest GDP per\n", - " capita of $25,000 among continents, indicating sustained economic growth and development.\n", - "\n", - " Europe's life expectancy surpassed 75 years, showcasing a high standard of living and\n", - " well-established healthcare systems. With its robust infrastructure, advanced industries, and\n", - " quality of life, Europe continues to be a leading force in the global economy. Between 1952 and\n", - " 2007, Europe's population experienced moderate growth, with a factor of approximately 1.5,\n", - " notably lower compared to other continents like Asia and America.\n", - " \"\"\"\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ### Oceania\n", - " ![](assets/images/continents/oceania.svg#my-image)\n", - "\n", - " Oceania, comprising countries like Australia and New Zealand, stands out with notable economic\n", - " prosperity and longer life expectancy. In 2007, it boasted the highest GDP per capita of $27,000\n", - " among continents and exhibited one of the highest life expectancy levels, surpassing 80 years.\n", - "\n", - " Despite a relatively smaller population size, Oceania's strong economic growth has contributed\n", - " to improved living standards and overall well-being of its population.\n", - " \"\"\"\n", - " ),\n", - " ],\n", - " )\n", - " return page_summary\n", - "\n", - "\n", - "def create_benchmark_analysis():\n", - " \"\"\"Function returns a page to perform analysis on country level.\"\"\"\n", - " # Apply formatting to grid columns\n", - " cellStyle = {\n", - " \"styleConditions\": [\n", - " {\n", - " \"condition\": \"params.value < 1045\",\n", - " \"style\": {\"backgroundColor\": \"#ff9222\"},\n", - " },\n", - " {\n", - " \"condition\": \"params.value >= 1045 && params.value <= 4095\",\n", - " \"style\": {\"backgroundColor\": \"#de9e75\"},\n", - " },\n", - " {\n", - " \"condition\": \"params.value > 4095 && params.value <= 12695\",\n", - " \"style\": {\"backgroundColor\": \"#aaa9ba\"},\n", - " },\n", - " {\n", - " \"condition\": \"params.value > 12695\",\n", - " \"style\": {\"backgroundColor\": \"#00b4ff\"},\n", - " },\n", - " ]\n", - " }\n", - " columnsDefs = [\n", - " {\"field\": \"country\", \"flex\": 3},\n", - " {\"field\": \"continent\", \"flex\": 3},\n", - " {\"field\": \"year\", \"flex\": 2},\n", - " {\"field\": \"lifeExp\", \"cellDataType\": \"numeric\", \"flex\": 3},\n", - " {\"field\": \"gdpPercap\", \"cellDataType\": \"dollar\", \"cellStyle\": cellStyle, \"flex\": 3},\n", - " {\"field\": \"pop\", \"flex\": 3},\n", - " ]\n", - "\n", - " page_country = vm.Page(\n", - " title=\"Benchmark Analysis\",\n", - " description=\"Discovering how the metrics differ for each country and export data for further investigation\",\n", - " layout=vm.Layout(grid=[[0, 1]] * 5 + [[2, -1]]),\n", - " components=[\n", - " vm.AgGrid(\n", - " title=\"Click on a cell in country column:\",\n", - " figure=dash_ag_grid(data_frame=gapminder, columnDefs=columnsDefs, dashGridOptions={\"pagination\": True}),\n", - " actions=[vm.Action(function=filter_interaction(targets=[\"line_country\"]))],\n", - " ),\n", - " vm.Graph(\n", - " id=\"line_country\",\n", - " figure=px.line(\n", - " gapminder_concat,\n", - " title=\"Country vs. Continent\",\n", - " x=\"year\",\n", - " y=\"gdpPercap\",\n", - " color=\"color\",\n", - " labels={\"year\": \"Year\", \"data\": \"Data\", \"gdpPercap\": \"GDP per capita\"},\n", - " color_discrete_map={\"Country\": \"#afe7f9\", \"Continent\": \"#003875\"},\n", - " markers=True,\n", - " hover_name=\"country\",\n", - " ),\n", - " ),\n", - " vm.Button(text=\"Export data\", actions=[vm.Action(function=export_data(targets=[\"line_country\"]))]),\n", - " ],\n", - " controls=[\n", - " vm.Filter(column=\"continent\", selector=vm.Dropdown(value=\"Europe\", multi=False, title=\"Select continent\")),\n", - " vm.Filter(column=\"year\", selector=vm.RangeSlider(title=\"Select timeframe\", step=1, marks=None)),\n", - " vm.Parameter(\n", - " targets=[\"line_country.y\"],\n", - " selector=vm.Dropdown(\n", - " options=[\"lifeExp\", \"gdpPercap\", \"pop\"], multi=False, value=\"gdpPercap\", title=\"Choose y-axis\"\n", - " ),\n", - " ),\n", - " ],\n", - " )\n", - " return page_country\n", - "\n", - "\n", - "def create_home_page():\n", - " \"\"\"Function returns the homepage.\"\"\"\n", - " page_home = vm.Page(\n", - " title=\"Homepage\",\n", - " description=\"Vizro demo app for studying gapminder data\",\n", - " layout=vm.Layout(grid=[[0, 1], [2, 3]]),\n", - " components=[\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/hypotheses.svg#icon-top)\n", - "\n", - " ### Variable Analysis\n", - "\n", - " Analyzing population, GDP per capita and life expectancy on country and continent level.\n", - " \"\"\",\n", - " href=\"/variable-analysis\",\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/hypotheses.svg#icon-top)\n", - "\n", - " ### Relationship Analysis\n", - "\n", - " Investigating the interconnection between population, GDP per capita and life expectancy.\n", - " \"\"\",\n", - " href=\"/relationship-analysis\",\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/collections.svg#icon-top)\n", - "\n", - " ### Continent Summary\n", - "\n", - " Summarizing the main findings for each continent.\n", - " \"\"\",\n", - " href=\"/continent-summary\",\n", - " ),\n", - " vm.Card(\n", - " text=\"\"\"\n", - " ![](assets/images/icons/features.svg#icon-top)\n", - "\n", - " ### Benchmark Analysis\n", - "\n", - " Discovering how the metrics differ for each country compared to the continent average\n", - " and export data for further investigation.\n", - " \"\"\",\n", - " href=\"/benchmark-analysis\",\n", - " ),\n", - " ],\n", - " )\n", - " return page_home" - ], - "outputs": [], - "execution_count": null - }, - { - "cell_type": "code", - "metadata": {}, - "source": [ - "dashboard = vm.Dashboard(\n", - " title=\"Vizro Demo\",\n", - " pages=[\n", - " create_home_page(),\n", - " create_variable_analysis(),\n", - " create_relation_analysis(),\n", - " create_continent_summary(),\n", - " create_benchmark_analysis(),\n", - " ],\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=\"Analysis\",\n", - " pages=[\"Variable Analysis\", \"Relationship Analysis\", \"Benchmark Analysis\"],\n", - " icon=\"Stacked Bar Chart\",\n", - " ),\n", - " vm.NavLink(label=\"Summary\", pages=[\"Continent Summary\"], icon=\"Globe\"),\n", - " ]\n", - " )\n", - " ),\n", - ")" - ], - "outputs": [], - "execution_count": null - }, - { - "cell_type": "code", - "metadata": {}, - "source": [ - "Vizro(assets_folder=\"../assets\").build(dashboard).run()" - ], - "outputs": [], - "execution_count": null - } - ], - "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 -} diff --git a/vizro-core/examples/features/app.py b/vizro-core/examples/dev/app.py similarity index 99% rename from vizro-core/examples/features/app.py rename to vizro-core/examples/dev/app.py index 6d4722c32..a35b5a271 100644 --- a/vizro-core/examples/features/app.py +++ b/vizro-core/examples/dev/app.py @@ -91,13 +91,6 @@ ), ] -page = vm.Page( - title="KPI Indicators", - layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]), - components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards], - controls=[vm.Filter(column="Category")], -) - # HOME ------------------------------------------------------------------------ home = vm.Page( @@ -765,6 +758,15 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html. ), ], ) + +kpi_indicators = vm.Page( + title="KPI Indicators", + layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]), + components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards], + controls=[vm.Filter(column="Category")], +) + + # DASHBOARD ------------------------------------------------------------------- components = [graphs, ag_grid, table, cards, figure, button, containers, tabs] controls = [filters, parameters, selectors] diff --git a/vizro-core/examples/features/assets/css/custom.css b/vizro-core/examples/dev/assets/css/custom.css similarity index 100% rename from vizro-core/examples/features/assets/css/custom.css rename to vizro-core/examples/dev/assets/css/custom.css diff --git a/vizro-core/examples/_dev/assets/favicon.ico b/vizro-core/examples/dev/assets/favicon.ico similarity index 100% rename from vizro-core/examples/_dev/assets/favicon.ico rename to vizro-core/examples/dev/assets/favicon.ico diff --git a/vizro-core/examples/_dev/assets/images/app.svg b/vizro-core/examples/dev/assets/images/app.svg similarity index 100% rename from vizro-core/examples/_dev/assets/images/app.svg rename to vizro-core/examples/dev/assets/images/app.svg diff --git a/vizro-core/examples/features/assets/images/icons/download.svg b/vizro-core/examples/dev/assets/images/icons/download.svg similarity index 100% rename from vizro-core/examples/features/assets/images/icons/download.svg rename to vizro-core/examples/dev/assets/images/icons/download.svg diff --git a/vizro-core/examples/features/assets/images/icons/filters.svg b/vizro-core/examples/dev/assets/images/icons/filters.svg similarity index 100% rename from vizro-core/examples/features/assets/images/icons/filters.svg rename to vizro-core/examples/dev/assets/images/icons/filters.svg diff --git a/vizro-core/examples/features/assets/images/icons/line-chart.svg b/vizro-core/examples/dev/assets/images/icons/line-chart.svg similarity index 100% rename from vizro-core/examples/features/assets/images/icons/line-chart.svg rename to vizro-core/examples/dev/assets/images/icons/line-chart.svg diff --git a/vizro-core/examples/features/assets/images/icons/use-case.svg b/vizro-core/examples/dev/assets/images/icons/use-case.svg similarity index 100% rename from vizro-core/examples/features/assets/images/icons/use-case.svg rename to vizro-core/examples/dev/assets/images/icons/use-case.svg diff --git a/vizro-core/examples/demo/assets/images/logo.svg b/vizro-core/examples/dev/assets/images/logo.svg similarity index 100% rename from vizro-core/examples/demo/assets/images/logo.svg rename to vizro-core/examples/dev/assets/images/logo.svg diff --git a/vizro-core/examples/dev/jupyter_version/app.ipynb b/vizro-core/examples/dev/jupyter_version/app.ipynb new file mode 100644 index 000000000..8443b2954 --- /dev/null +++ b/vizro-core/examples/dev/jupyter_version/app.ipynb @@ -0,0 +1,860 @@ +{ + "cells": [ + { + "cell_type": "code", + "metadata": {}, + "source": [ + "from time import sleep\n", + "from typing import List, 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" + ], + "outputs": [], + "execution_count": null + }, + { + "cell_type": "code", + "metadata": {}, + "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", + "]\n" + ], + "outputs": [], + "execution_count": null + }, + { + "cell_type": "code", + "metadata": {}, + "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_matrix(\n", + " iris,\n", + " dimensions=[\"sepal_length\", \"sepal_width\", \"petal_length\", \"petal_width\"],\n", + " color=\"species\",\n", + " )\n", + " )\n", + " ],\n", + " controls=[vm.Filter(column=\"species\", selector=vm.Dropdown(title=\"Species\"))],\n", + ")\n", + "\n", + "ag_grid = vm.Page(\n", + " title=\"AG Grid\",\n", + " components=[\n", + " vm.AgGrid(\n", + " title=\"Dash AG Grid\", figure=dash_ag_grid(data_frame=gapminder_2007, dashGridOptions={\"pagination\": True})\n", + " )\n", + " ],\n", + " controls=[vm.Filter(column=\"continent\")],\n", + ")\n", + "\n", + "table = vm.Page(\n", + " title=\"Table\",\n", + " components=[\n", + " vm.Table(\n", + " title=\"Dash DataTable\",\n", + " figure=dash_data_table(data_frame=gapminder_2007),\n", + " )\n", + " ],\n", + " controls=[vm.Filter(column=\"continent\")],\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): # noqa: PLR0913\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", + ")" + ], + "outputs": [], + "execution_count": null + }, + { + "cell_type": "code", + "metadata": {}, + "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", + ")" + ], + "outputs": [], + "execution_count": null + }, + { + "cell_type": "code", + "metadata": {}, + "source": [ + "Vizro(assets_folder=\"../assets\").build(dashboard).run()" + ], + "outputs": [], + "execution_count": null + } + ], + "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 +} diff --git a/vizro-core/examples/features/yaml_version/app.py b/vizro-core/examples/dev/yaml_version/app.py similarity index 100% rename from vizro-core/examples/features/yaml_version/app.py rename to vizro-core/examples/dev/yaml_version/app.py diff --git a/vizro-core/examples/features/yaml_version/dashboard.yaml b/vizro-core/examples/dev/yaml_version/dashboard.yaml similarity index 100% rename from vizro-core/examples/features/yaml_version/dashboard.yaml rename to vizro-core/examples/dev/yaml_version/dashboard.yaml diff --git a/vizro-core/examples/features/assets/favicon.ico b/vizro-core/examples/features/assets/favicon.ico deleted file mode 100644 index 240c9f541..000000000 Binary files a/vizro-core/examples/features/assets/favicon.ico and /dev/null differ diff --git a/vizro-core/examples/features/assets/images/app.svg b/vizro-core/examples/features/assets/images/app.svg deleted file mode 100644 index 9d07d6372..000000000 --- a/vizro-core/examples/features/assets/images/app.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/vizro-core/examples/features/assets/images/logo.svg b/vizro-core/examples/features/assets/images/logo.svg deleted file mode 100644 index 0904b87de..000000000 --- a/vizro-core/examples/features/assets/images/logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/scratch_dev/app.py similarity index 100% rename from vizro-core/examples/_dev/app.py rename to vizro-core/examples/scratch_dev/app.py diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css similarity index 100% rename from vizro-core/examples/_dev/assets/css/custom.css rename to vizro-core/examples/scratch_dev/assets/css/custom.css diff --git a/vizro-core/examples/demo/assets/favicon.ico b/vizro-core/examples/scratch_dev/assets/favicon.ico similarity index 100% rename from vizro-core/examples/demo/assets/favicon.ico rename to vizro-core/examples/scratch_dev/assets/favicon.ico diff --git a/vizro-core/examples/demo/assets/images/app.svg b/vizro-core/examples/scratch_dev/assets/images/app.svg similarity index 100% rename from vizro-core/examples/demo/assets/images/app.svg rename to vizro-core/examples/scratch_dev/assets/images/app.svg diff --git a/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg b/vizro-core/examples/scratch_dev/assets/images/icons/hypotheses.svg similarity index 100% rename from vizro-core/examples/_dev/assets/images/icons/hypotheses.svg rename to vizro-core/examples/scratch_dev/assets/images/icons/hypotheses.svg diff --git a/vizro-core/examples/_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py similarity index 100% rename from vizro-core/examples/_dev/yaml_version/app.py rename to vizro-core/examples/scratch_dev/yaml_version/app.py diff --git a/vizro-core/examples/_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml similarity index 100% rename from vizro-core/examples/_dev/yaml_version/dashboard.yaml rename to vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml index abd43a8cd..02e1cb25f 100644 --- a/vizro-core/hatch.toml +++ b/vizro-core/hatch.toml @@ -34,7 +34,7 @@ DASH_DEBUG = "true" VIZRO_LOG_LEVEL = "DEBUG" [envs.default.scripts] -example = "cd examples/{args:_dev}; python app.py" +example = "cd examples/{args:scratch_dev}; python app.py" lint = "hatch run lint:lint {args:--all-files}" prep-release = [ "hatch version release", diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index ab9876280..4627b1c9e 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -45,12 +45,11 @@ def dashboard(request, monkeypatch): @pytest.mark.parametrize( "example_path, version", [ - (examples_path / "_dev", ""), - (examples_path / "features", ""), - (examples_path / "demo", ""), + (examples_path / "scratch_dev", ""), + (examples_path / "dev", ""), (examples_path / "kpi", ""), - (examples_path / "_dev", "yaml_version"), - (examples_path / "features", "yaml_version"), + (examples_path / "scratch_dev", "yaml_version"), + (examples_path / "dev", "yaml_version"), ], ) def test_dashboard(dash_duo, example_path, dashboard, version):