diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index 6f92f8461..3bcce552b 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -524,27 +524,10 @@ def create_home_page(): ], navigation=vm.Navigation( pages={ - "Analysis": ["Homepage", "Variable Analysis"], - "Summary": ["Relationship Analysis", "Continent Summary"], + "Analysis": ["Homepage", "Variable Analysis", "Relationship Analysis", "Country Analysis"], + "Summary": ["Continent Summary"], } - ) - # selector=vm.NavBar( - # items=[ - # vm.NavLink( - # text="asdf", - # pages={ - # "Analysis": ["Homepage", "Variable Analysis"], - # "Summary": ["Relationship Analysis", "Continent Summary"], - # }, - # ), - # vm.NavLink( - # text="ASDF", - # pages=["Country Analysis"], - # icon="summarize", - # ), - # ] - # ), - # ), + ), ) if __name__ == "__main__": diff --git a/vizro-core/examples/from_yaml/dashboard.yaml b/vizro-core/examples/from_yaml/dashboard.yaml index b081f14ea..1c873dbe8 100644 --- a/vizro-core/examples/from_yaml/dashboard.yaml +++ b/vizro-core/examples/from_yaml/dashboard.yaml @@ -1,38 +1,449 @@ -# Still requires a .py to register data connector in Data Manager and parse yaml configuration -# See from_yaml example pages: - components: + - text: | + ![](assets/images/icons/content/hypotheses.svg#icon-top) + + ### Variable Analysis + Analyzing population, GDP per capita and life expectancy on country and continent level. + href: /variable-analysis + type: card + - text: | + ![](assets/images/icons/content/hypotheses.svg#icon-top) + + ### Relationship Analysis + Investigating the interconnection between population, GDP per capita and life expectancy. + href: /relationship-analysis + type: card + - text: | + ![](assets/images/icons/content/collections.svg#icon-top) + + ### Continent Summary + Summarizing the main findings for each continent. + href: /continent-summary + type: card + - text: | + ![](assets/images/icons/content/features.svg#icon-top) + + ### Country Analysis + Discovering how the metrics differ for each country and export data for further investigation. + href: /country-analysis + type: card + layout: + grid: [[0, 1], [2, 3]] + col_gap: 25px + row_gap: 16px + title: Homepage + - components: + - 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. + type: card + - figure: + _target_: choropleth + color: lifeExp + data_frame: gapminder + locations: iso_alpha + animation_frame: year + title: Global development over time + labels: + year: Year + lifeExp: Life expectancy + pop: Population + gdpPercap: GDP per capita + id: variable_map + type: graph + - text: | + ### Distribution + The boxplot illustrates the distribution of each metric across continents, facilitating comparisons of life + expectancy, GDP per capita, and population statistics. + + #### Observation + 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. + type: card + - figure: + _target_: box + color: continent + data_frame: gapminder + x: continent + y: lifeExp + title: Distribution per continent + 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" + id: variable_boxplot + type: graph + - 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. + type: card + - figure: + _target_: line + color: continent + data_frame: gapminder_avg + x: year + y: lifeExp + title: Development between 1952 and 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" + id: variable_line + type: graph + - 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. + type: card + - figure: + _target_: bar + color: continent + data_frame: gapminder_avg_2007 + x: lifeExp + y: continent + orientation: h + title: Comparison of average metric for 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" + id: variable_bar + type: graph + controls: + - selector: + title: Select variable + type: radio_items + value: lifeExp + options: + - lifeExp + - pop + - gdpPercap + targets: + - variable_map.color + - variable_boxplot.y + - variable_line.y + - variable_bar.x + type: parameter + layout: + grid: [[0, 1, 1, 1], [2, 3, 3, 3], [4, 5, 5, 5], [6, 7, 7, 7]] + row_min_height: 400px + row_gap: 25px + title: Variable Analysis + - components: + - text: | + Population, GDP per capita, and life expectancy are interconnected metrics that provide insights into the + socio-economic 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. + type: card + - text: | + #### Last updated + November, 2023 + type: card + - figure: + _target_: box + color: continent + data_frame: gapminder_2007 + x: continent + y: lifeExp + title: Relationship in 2007 + hover_name: country + 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" + custom_data: ["continent"] + id: bar_relation_2007 + type: graph + actions: + - function: + _target_: filter_interaction + targets: + - scatter_relation_2007 - figure: _target_: scatter - data_frame: iris - x: sepal_length - y: petal_width - color: species + color: continent + data_frame: gapminder_2007 + x: gdpPercap + y: lifeExp + hover_name: country + size_max: 60 + size: pop + 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" + id: scatter_relation_2007 type: graph - title: My first page + - figure: + _target_: scatter + color: continent + data_frame: gapminder + x: gdpPercap + y: lifeExp + animation_frame: year + animation_group: country + size: pop + hover_name: country + facet_col: continent + range_y: [25, 90] + 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" + id: scatter_relation + type: graph + controls: + - selector: + title: Choose x-axis + type: dropdown + value: lifeExp + multi: False + options: + - lifeExp + - pop + - gdpPercap + targets: + - scatter_relation_2007.x + - scatter_relation.x + type: parameter + - selector: + title: Choose y-axis + type: dropdown + value: gdpPercap + multi: False + options: + - lifeExp + - pop + - gdpPercap + targets: + - scatter_relation_2007.y + - scatter_relation.y + - bar_relation_2007.y + type: parameter + - selector: + title: Choose bubble size + type: dropdown + value: pop + multi: False + options: + - lifeExp + - pop + - gdpPercap + targets: + - scatter_relation_2007.size + - scatter_relation.size + type: parameter + layout: + grid: + [ + [0, 0, 0, 0, 1], + [2, 2, 3, 3, 3], + [2, 2, 3, 3, 3], + [2, 2, 3, 3, 3], + [2, 2, 3, 3, 3], + [4, 4, 4, 4, 4], + [4, 4, 4, 4, 4], + [4, 4, 4, 4, 4], + [4, 4, 4, 4, 4], + [4, 4, 4, 4, 4], + ] + row_min_height: 100px + row_gap: 25px + title: Relationship Analysis - components: - - text: My text here + - text: | + ### Africa + ![](assets/images/continents/africa.svg#my-image) + + Africa, a diverse and expansive continent, faces both challenges and progress in its socio-economic 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. + type: 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. + type: 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 socio-economic 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. + type: 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. type: card - title: My second page + - 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. + type: card + layout: + grid: [[0], [1], [2], [3], [4]] + row_min_height: 190px + row_gap: 25px + title: Continent Summary - components: - figure: - _target_: scatter - data_frame: iris - x: sepal_length - y: sepal_width - color: species + _target_: dash_data_table + data_frame: gapminder + id: dash_data_table_country + id: table_country + title: Table Country + type: table + actions: + - function: + _target_: filter_interaction + targets: + - line_country + - figure: + _target_: line + color: data + data_frame: gapminder_country_analysis + title: Line Country + x: year + y: gdpPercap + labels: + year: Year + data: Data + gdpPercap: GDP per capita + color_discrete_map: + Country: "#afe7f9" + Continent: "#003875" + markers: True + hover_name: country + id: line_country type: graph - title: My third page + - type: button + text: Export data + id: export_data + actions: + - function: + _target_: export_data + targets: + - line_country + controls: + - column: continent + selector: + type: dropdown + value: Europe + multi: False + title: Select continent + type: filter + - column: year + selector: + type: range_slider + title: Select timeframe + type: filter + title: Country Analysis navigation: - nav_selector: - type: nav_bar - items: - - label: Section 1 - icon: bar_chart - pages: - - My first page - - My second page - - label: Section 1 - icon: pie_chart - pages: - - My third page + pages: + Analysis: + - Homepage + - Variable Analysis + - Relationship Analysis + - Country Analysis + Summary: + - Continent Summary