From 76749f26362d6d201120595fc9fec96eb9f5d6bc Mon Sep 17 00:00:00 2001 From: Maximilian Schulz <83698606+maxschulz-COL@users.noreply.github.com> Date: Mon, 15 Jul 2024 11:49:05 +0200 Subject: [PATCH 1/4] [Docs] Small docs fix (#579) Co-authored-by: Antony Milne <49395058+antonymilne@users.noreply.github.com> --- ...40711_110926_maximilian_schulz_fix_typo.md | 48 +++++++++++++++++++ .../docs/pages/user-guides/card-button.md | 1 - 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md diff --git a/vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md b/vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240711_110926_maximilian_schulz_fix_typo.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index b43893ed4..62c9e2891 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -564,7 +564,6 @@ If you now click on the card area, you should automatically be redirected to the ### Create a KPI card To create a KPI card, you can use the existing KPI card functions from [`vizro.figures`](../API-reference/figure-callables.md). -Unlike the static text card `vm.Card`, a KPI card must be created using a figure function. Unlike the static text card `vm.Card`, a KPI card must be created using a figure function, which enables the text content of the KPI to change based on input from controls or actions. From b8b15d403d05423c1c7c29bcb0d54fd32e6d7ba9 Mon Sep 17 00:00:00 2001 From: Antony Milne <49395058+antonymilne@users.noreply.github.com> Date: Mon, 15 Jul 2024 15:55:45 +0100 Subject: [PATCH 2/4] [Tidy] Various small tidyings (#583) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- CODEOWNERS | 2 +- ...0240712_090435_antony.milne_custom_icon.md | 48 +++++++++++++++++++ .../docs/pages/user-guides/navigation.md | 4 +- .../vizro/models/_components/form/dropdown.py | 11 ++++- .../models/_components/form/test_dropdown.py | 7 +-- 5 files changed, 64 insertions(+), 8 deletions(-) create mode 100644 vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md diff --git a/CODEOWNERS b/CODEOWNERS index 3c14a2e3b..6ed16c91e 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,3 +1,3 @@ * @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL vizro-ai/ @Joseph-Perkins @Anna-Xiong @lingyielia @maxschulz-COL -docs/ @stichbury +docs/ @stichbury @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL diff --git a/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md b/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/pages/user-guides/navigation.md b/vizro-core/docs/pages/user-guides/navigation.md index 62a98f2bd..61898224a 100644 --- a/vizro-core/docs/pages/user-guides/navigation.md +++ b/vizro-core/docs/pages/user-guides/navigation.md @@ -244,7 +244,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M icon="Bar Chart", pages=["My first page", "My second page"], ), - vm.NavLink(label="Section 2", icon="pie_chart", pages=["My third page"]), + vm.NavLink(label="Section 2", icon="Pie Chart", pages=["My third page"]), ] ) ), @@ -266,7 +266,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M - My first page - My second page - label: Section 1 - icon: pie_chart + icon: Pie Chart pages: - My third page ``` diff --git a/vizro-core/src/vizro/models/_components/form/dropdown.py b/vizro-core/src/vizro/models/_components/form/dropdown.py index 1eb84679a..619b28f2e 100755 --- a/vizro-core/src/vizro/models/_components/form/dropdown.py +++ b/vizro-core/src/vizro/models/_components/form/dropdown.py @@ -63,6 +63,14 @@ def validate_multi(cls, multi, values): @_log_call def build(self): full_options, default_value = get_options_and_default(options=self.options, multi=self.multi) + # 30 characters is roughly the number of "A" characters you can fit comfortably on a line in the dropdown. + # "A" is representative of a slightly wider than average character: + # https://stackoverflow.com/questions/3949422/which-letter-of-the-english-alphabet-takes-up-most-pixels + # We look at the longest option to find number_of_lines it requires. Option height is the same for all options + # and needs 24px for each line + 8px padding. + number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 30) + option_height = 8 + 24 * number_of_lines + return html.Div( children=[ dbc.Label(self.title, html_for=self.id) if self.title else None, @@ -72,8 +80,7 @@ def build(self): value=self.value if self.value is not None else default_value, multi=self.multi, persistence=True, - # 37 is the cut-off character length where the text inside the dropdown starts to wrap - optionHeight=32 + 24 * math.floor(max(len(str(option)) for option in full_options) / 37), + optionHeight=option_height, persistence_type="session", ), ] diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py index 1ab6ba483..b401f89aa 100755 --- a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py +++ b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py @@ -190,9 +190,10 @@ def test_dropdown_without_all_option(self): [ (["A", "B", "C"], 32), ([10, 20, 30], 32), - (["A text with a length of 36..........", "B", "C"], 32), - (["A text with a length of 37...........", "B", "C"], 56), - (["A text with a length of 37..........." + "A text with a length of 37...........", "B", "C"], 80), + (["A" * 30, "B", "C"], 32), + (["A" * 31, "B", "C"], 56), + (["A" * 60, "B", "C"], 56), + (["A" * 61, "B", "C"], 80), ], ) def test_dropdown_dynamic_option_height(self, options, option_height): From 6ac7fce4a943dd8dc02146225e11b85a562dd633 Mon Sep 17 00:00:00 2001 From: nadijagraca <108531476+nadijagraca@users.noreply.github.com> Date: Mon, 15 Jul 2024 18:15:20 +0200 Subject: [PATCH 3/4] [Bug] Fix duplicate figure display in jupyter notebook (#527) Signed-off-by: dependabot[bot] Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Petar Pejovic <108530920+petar-qb@users.noreply.github.com> Co-authored-by: Anna Xiong Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Co-authored-by: Maximilian Schulz <83698606+maxschulz-COL@users.noreply.github.com> --- ...a_ratkusic_graca_duplicate_fig_diplayed.md | 47 +++++++++++++++++++ vizro-ai/docs/pages/tutorials/quickstart.md | 6 ++- .../add-generated-chart-usecase.md | 3 +- .../docs/pages/user-guides/chart-examples.md | 12 ++--- .../user-guides/create-advanced-charts.md | 9 ++-- .../pages/user-guides/customize-vizro-ai.md | 3 +- .../docs/pages/user-guides/run-vizro-ai.md | 3 +- .../user-guides/use-different-languages.md | 6 ++- vizro-ai/src/vizro_ai/_vizro_ai.py | 10 ++-- vizro-ai/src/vizro_ai/utils/helper.py | 8 +--- 10 files changed, 80 insertions(+), 27 deletions(-) create mode 100644 vizro-ai/changelog.d/20240619_092410_nadija_ratkusic_graca_duplicate_fig_diplayed.md diff --git a/vizro-ai/changelog.d/20240619_092410_nadija_ratkusic_graca_duplicate_fig_diplayed.md b/vizro-ai/changelog.d/20240619_092410_nadija_ratkusic_graca_duplicate_fig_diplayed.md new file mode 100644 index 000000000..4016c0671 --- /dev/null +++ b/vizro-ai/changelog.d/20240619_092410_nadija_ratkusic_graca_duplicate_fig_diplayed.md @@ -0,0 +1,47 @@ + + + + + + +### Changed + +- Disabled figure display upon variable assignment, to display outcome of `VizroAI.plot()` add `.show()`. Enable feature XXX ([#527](https://github.com/mckinsey/vizro/pull/527)) + + + + diff --git a/vizro-ai/docs/pages/tutorials/quickstart.md b/vizro-ai/docs/pages/tutorials/quickstart.md index 958cbf7c4..91f99f556 100644 --- a/vizro-ai/docs/pages/tutorials/quickstart.md +++ b/vizro-ai/docs/pages/tutorials/quickstart.md @@ -92,7 +92,8 @@ And that's it! By passing the prepared data and written visualization request, V df = px.data.gapminder() vizro_ai = VizroAI() - vizro_ai.plot(df, "create a line graph for GDP per capita since 1950 for each continent. Mark the x axis as Year, y axis as GDP Per Cap and don't include a title", explain=True) + fig = vizro_ai.plot(df, "create a line graph for GDP per capita since 1950 for each continent. Mark the x axis as Year, y axis as GDP Per Cap and don't include a title", explain=True) + fig.show() ``` === "Result" [![LineGraph]][LineGraph] @@ -128,7 +129,8 @@ Let's create another example to illustrate the code and insights returned when p === "Code for the cell" ```py - vizro_ai.plot(df, "show me the geo distribution of life expectancy", explain=True) + fig = vizro_ai.plot(df, "show me the geo distribution of life expectancy", explain=True) + fig.show() ``` === "Result" [![GeoDistribution]][GeoDistribution] diff --git a/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md b/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md index b1cfc7cd6..b20280e35 100644 --- a/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md +++ b/vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md @@ -22,12 +22,13 @@ This guide explains the different ways in which you can add a chart generated by df = px.data.gapminder() vizro_ai = VizroAI(model="gpt-4-0613") - vizro_ai.plot(df, + fig = vizro_ai.plot(df, """Plot a bubble chart to show the changes in life expectancy and GDP per capita for each country over time. Color the bubbles by continent. Add animation on yearly basis, and do not use facets. Put the legend on top""", explain=True) + fig.show() ``` === "Result" [![VizroAIChart]][VizroAIChart] diff --git a/vizro-ai/docs/pages/user-guides/chart-examples.md b/vizro-ai/docs/pages/user-guides/chart-examples.md index 5fd609565..7d33420f7 100644 --- a/vizro-ai/docs/pages/user-guides/chart-examples.md +++ b/vizro-ai/docs/pages/user-guides/chart-examples.md @@ -25,11 +25,11 @@ It's suitable for comparing multiple variables across different categories or di df = px.data.wind() vizro_ai = VizroAI(model="gpt-4-0613") - vizro_ai.plot(df, + fig = vizro_ai.plot(df, """Describe wind frequency and direction using bar_polar chart. Increase the width and height of the figure. Improve layout by placing title to the left. Show legend""", explain=True) - + fig.show() ``` [VizroAIChart1]: ../../assets/user_guides/polar_bar_chart.png @@ -56,12 +56,12 @@ The next chart we'll look at is a geographical map chart to visualize spatial pa df = px.data.wind() vizro_ai = VizroAI(model="gpt-4-0613") - vizro_ai.plot(df, + fig = vizro_ai.plot(df, """Visualize life expectancy over the years using map chart. Use life expectancy as the color dimension. Improve layout by using Arial font. Increase the width and height of the map area. Outline continents on the map. Show countries on the map. Increase the width and height of the figure.""", explain=True) - + fig.show() ``` [VizroAIChart2]: ../../assets/user_guides/map_chart.gif @@ -88,8 +88,8 @@ Let's explore how to generate a 3-dimensional surface plot with VizroAI. df = px.data.gapminder() vizro_ai = VizroAI(model="gpt-4-0613") - vizro_ai.plot(df, "create a surface plot") - + fig = vizro_ai.plot(df, "create a surface plot") + fig.show() ``` [VizroAIChart3]: ../../assets/user_guides/surface_plot.gif diff --git a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md index 054b05ce5..b4c4fdcea 100644 --- a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md +++ b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md @@ -13,7 +13,8 @@ We'll create an animated bar chart illustrating the population development of ea df = px.data.gapminder() vizro_ai = VizroAI() - vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years.") + fig = vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years.") + fig.show() ``` === "Result" [![AnimatedChart1]][AnimatedChart1] @@ -32,7 +33,8 @@ Having unveiled our animated bar chart showcasing population development per cou df = px.data.gapminder() vizro_ai = VizroAI() - vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years. Please improve layout.") + fig = vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years. Please improve layout.") + fig.show() ``` === "Result" [![AnimatedChart2]][AnimatedChart2] @@ -54,7 +56,8 @@ Upon closer inspection, two challenges emerge: the legend overlaps the x-axis an df = px.data.gapminder() vizro_ai = VizroAI() - vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years. Make sure that y axis range fits entire data. Please improve layout and optimize layout of legend.") + fig = vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years. Make sure that y axis range fits entire data. Please improve layout and optimize layout of legend.") + fig.show() ``` === "Result" [![AnimatedChart3]][AnimatedChart3] diff --git a/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md b/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md index 963a746d7..1fb0ada68 100644 --- a/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md +++ b/vizro-ai/docs/pages/user-guides/customize-vizro-ai.md @@ -77,7 +77,8 @@ To ensure a deterministic answer to our queries, we've set the temperature to 0. max_retries=5, ) vizro_ai = VizroAI(model=llm) - vizro_ai.plot(df, "describe the composition of gdp in continent") + fig = vizro_ai.plot(df, "describe the composition of gdp in continent") + fig.show() ``` Passing an instantiated model to `VizroAI` lets you customize it, and additionally, it enables you to use an OpenAI model that is not included in the above list of [supported models](#supported-models). diff --git a/vizro-ai/docs/pages/user-guides/run-vizro-ai.md b/vizro-ai/docs/pages/user-guides/run-vizro-ai.md index 4aa7cb051..e26209774 100644 --- a/vizro-ai/docs/pages/user-guides/run-vizro-ai.md +++ b/vizro-ai/docs/pages/user-guides/run-vizro-ai.md @@ -19,7 +19,8 @@ To run Vizro-AI code in a Jupyter Notebook, create a new cell and execute the co vizro_ai = VizroAI() df = px.data.gapminder() - vizro_ai.plot(df, "visualize the life expectancy per continent and color each continent") + fig = vizro_ai.plot(df, "visualize the life expectancy per continent and color each continent") + fig.show() ``` === "Result" [![BarChart]][BarChart] diff --git a/vizro-ai/docs/pages/user-guides/use-different-languages.md b/vizro-ai/docs/pages/user-guides/use-different-languages.md index 1dbd0039a..1f687af20 100644 --- a/vizro-ai/docs/pages/user-guides/use-different-languages.md +++ b/vizro-ai/docs/pages/user-guides/use-different-languages.md @@ -11,7 +11,8 @@ Vizro-AI is versatile, supporting prompts and chart visualizations in languages df = px.data.gapminder() vizro_ai = VizroAI() - vizro_ai.plot(df, "请画一个世界年均GDP的趋势图") + fig = vizro_ai.plot(df, "请画一个世界年均GDP的趋势图") + fig.show() ``` === "Result" [![ChineseChart]][ChineseChart] @@ -30,7 +31,8 @@ Subsequently, we'll switch to German and prompt the visualization of life expect df = px.data.gapminder() vizro_ai = VizroAI() - vizro_ai.plot(df, "Visualiere den Trend von der Lebenserwartung in USA über die Jahre im Vergleich zur Veränderung der weltweiten Lebenserwartung über die Jahre und kreiere eine deutsche Visualisierung", explain=True) + fig = vizro_ai.plot(df, "Visualiere den Trend von der Lebenserwartung in USA über die Jahre im Vergleich zur Veränderung der weltweiten Lebenserwartung über die Jahre und kreiere eine deutsche Visualisierung", explain=True) + fig.show() ``` === "Result" [![GermanChart]][GermanChart] diff --git a/vizro-ai/src/vizro_ai/_vizro_ai.py b/vizro-ai/src/vizro_ai/_vizro_ai.py index bca23cf3e..2432fbe71 100644 --- a/vizro-ai/src/vizro_ai/_vizro_ai.py +++ b/vizro-ai/src/vizro_ai/_vizro_ai.py @@ -56,7 +56,11 @@ def _lazy_get_component(self, component_class: Any) -> Any: # TODO configure co return self.components_instances[component_class] def _run_plot_tasks( - self, df: pd.DataFrame, user_input: str, max_debug_retry: int = 3, explain: bool = False + self, + df: pd.DataFrame, + user_input: str, + max_debug_retry: int = 3, + explain: bool = False, ) -> PlotOutputs: """Task execution.""" chart_type_pipeline = self.pipeline_manager.chart_type_pipeline @@ -83,9 +87,7 @@ def _run_plot_tasks( "or try to select a different model. Fallout response is provided: \n\n" + code_string ) - fig_object = _exec_code_and_retrieve_fig( - code=code_string, local_args={"df": df}, show_fig=_is_jupyter(), is_notebook_env=_is_jupyter() - ) + fig_object = _exec_code_and_retrieve_fig(code=code_string, local_args={"df": df}, is_notebook_env=_is_jupyter()) if explain: business_insights, code_explanation = self._lazy_get_component(GetCodeExplanation).run( chain_input=user_input, code_snippet=code_string diff --git a/vizro-ai/src/vizro_ai/utils/helper.py b/vizro-ai/src/vizro_ai/utils/helper.py index 2de34b845..b9f927910 100644 --- a/vizro-ai/src/vizro_ai/utils/helper.py +++ b/vizro-ai/src/vizro_ai/utils/helper.py @@ -60,14 +60,13 @@ def _debug_helper( def _exec_code_and_retrieve_fig( - code: str, local_args: Optional[Dict] = None, show_fig: bool = False, is_notebook_env: bool = True + code: str, local_args: Optional[Dict] = None, is_notebook_env: bool = True ) -> go.Figure: """Execute code in notebook with correct namespace and return fig object. Args: code: code string to be executed local_args: additional local arguments - show_fig: boolean flag indicating if fig will be rendered automatically is_notebook_env: boolean flag indicating if code is run in Jupyter notebook Returns: @@ -76,11 +75,6 @@ def _exec_code_and_retrieve_fig( """ from IPython import get_ipython - if show_fig and "\nfig.show()" not in code: - code += "\nfig.show()" - elif not show_fig: - code = code.replace("fig.show()", "") - namespace = get_ipython().user_ns if is_notebook_env else globals() if local_args: From d3f409e774f1564235d1b7d8b77302261011006a Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Mon, 15 Jul 2024 22:21:24 +0200 Subject: [PATCH 4/4] [Tidy] Update folder names in `examples` and remove `demo` (#581) --- .vale/styles/Microsoft/ignore.txt | 1 + ...712_095053_huong_li_nguyen_update_demos.md | 46 + vizro-core/docs/pages/examples/examples.md | 4 +- vizro-core/examples/demo/app.py | 547 ----------- .../examples/demo/assets/css/custom.css | 10 - .../demo/assets/images/continents/africa.svg | 2 - .../demo/assets/images/continents/america.svg | 1 - .../demo/assets/images/continents/asia.svg | 2 - .../demo/assets/images/continents/europe.svg | 2 - .../demo/assets/images/continents/oceania.svg | 2 - .../demo/assets/images/icons/collections.svg | 3 - .../demo/assets/images/icons/features.svg | 3 - .../demo/assets/images/icons/hypotheses.svg | 3 - .../examples/demo/jupyter_version/app.ipynb | 603 ------------ vizro-core/examples/{features => dev}/app.py | 16 +- .../{features => dev}/assets/css/custom.css | 0 .../examples/{_dev => dev}/assets/favicon.ico | Bin .../{_dev => dev}/assets/images/app.svg | 0 .../assets/images/icons/download.svg | 0 .../assets/images/icons/filters.svg | 0 .../assets/images/icons/line-chart.svg | 0 .../assets/images/icons/use-case.svg | 0 .../{demo => dev}/assets/images/logo.svg | 0 .../examples/dev/jupyter_version/app.ipynb | 860 ++++++++++++++++++ .../{features => dev}/yaml_version/app.py | 0 .../yaml_version/dashboard.yaml | 0 .../examples/features/assets/favicon.ico | Bin 1535 -> 0 bytes .../examples/features/assets/images/app.svg | 9 - .../examples/features/assets/images/logo.svg | 3 - .../examples/{_dev => scratch_dev}/app.py | 0 .../assets/css/custom.css | 0 .../{demo => scratch_dev}/assets/favicon.ico | Bin .../assets/images/app.svg | 0 .../assets/images/icons/hypotheses.svg | 0 .../{_dev => scratch_dev}/yaml_version/app.py | 0 .../yaml_version/dashboard.yaml | 0 vizro-core/hatch.toml | 2 +- vizro-core/tests/integration/test_examples.py | 9 +- 38 files changed, 923 insertions(+), 1205 deletions(-) create mode 100644 vizro-core/changelog.d/20240712_095053_huong_li_nguyen_update_demos.md delete mode 100644 vizro-core/examples/demo/app.py delete mode 100644 vizro-core/examples/demo/assets/css/custom.css delete mode 100644 vizro-core/examples/demo/assets/images/continents/africa.svg delete mode 100644 vizro-core/examples/demo/assets/images/continents/america.svg delete mode 100644 vizro-core/examples/demo/assets/images/continents/asia.svg delete mode 100644 vizro-core/examples/demo/assets/images/continents/europe.svg delete mode 100644 vizro-core/examples/demo/assets/images/continents/oceania.svg delete mode 100644 vizro-core/examples/demo/assets/images/icons/collections.svg delete mode 100644 vizro-core/examples/demo/assets/images/icons/features.svg delete mode 100644 vizro-core/examples/demo/assets/images/icons/hypotheses.svg delete mode 100644 vizro-core/examples/demo/jupyter_version/app.ipynb rename vizro-core/examples/{features => dev}/app.py (99%) rename vizro-core/examples/{features => dev}/assets/css/custom.css (100%) rename vizro-core/examples/{_dev => dev}/assets/favicon.ico (100%) rename vizro-core/examples/{_dev => dev}/assets/images/app.svg (100%) rename vizro-core/examples/{features => dev}/assets/images/icons/download.svg (100%) rename vizro-core/examples/{features => dev}/assets/images/icons/filters.svg (100%) rename vizro-core/examples/{features => dev}/assets/images/icons/line-chart.svg (100%) rename vizro-core/examples/{features => dev}/assets/images/icons/use-case.svg (100%) rename vizro-core/examples/{demo => dev}/assets/images/logo.svg (100%) create mode 100644 vizro-core/examples/dev/jupyter_version/app.ipynb rename vizro-core/examples/{features => dev}/yaml_version/app.py (100%) rename vizro-core/examples/{features => dev}/yaml_version/dashboard.yaml (100%) delete mode 100644 vizro-core/examples/features/assets/favicon.ico delete mode 100644 vizro-core/examples/features/assets/images/app.svg delete mode 100644 vizro-core/examples/features/assets/images/logo.svg rename vizro-core/examples/{_dev => scratch_dev}/app.py (100%) rename vizro-core/examples/{_dev => scratch_dev}/assets/css/custom.css (100%) rename vizro-core/examples/{demo => scratch_dev}/assets/favicon.ico (100%) rename vizro-core/examples/{demo => scratch_dev}/assets/images/app.svg (100%) rename vizro-core/examples/{_dev => scratch_dev}/assets/images/icons/hypotheses.svg (100%) rename vizro-core/examples/{_dev => scratch_dev}/yaml_version/app.py (100%) rename vizro-core/examples/{_dev => scratch_dev}/yaml_version/dashboard.yaml (100%) 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 240c9f541de1e47599bb047e63b008ccb268a4c3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1535 zcmb7^|4-Cr9LJ0H*!7UCcjXESCb#1RycT7CV-hhtcH9^4043OU&ShQAA|Bbo1PvqV zpg}l#DB!-hFqGSwOmclf`fM>V%7{< zykAd$dGhpatMg}DR#-3$%MJ#-4H%Ze8q1uilMfFa+poWfmcSdW7?wpDD+3!I$DI)wVamU8PB3AY1=7qs{AzwDgzZFsi5}rRLAWYoYBcPNPDL_(I-!w0oa;?fD zp0&oowVLS>7x%Y5^-RzOde*0dYc|t=y103L>Y1P?0$_$>+q?LbgTL3!r(WXkb@C}E z-_pyc3i*2`C6mN7bQyJlwWNMf_*mj zhESQ%6UB2pd~k<#4?zy zS4%vggJiE!%2qt~vzE+7&Qdt%R|7%NVPmgZl}S9-s3pshGaFW^0T1}aO#j|ze`;l` zDCTf6-@S@E=;FIw+`($q><8!ks<|4pdsXvmpxvjMJ)r%F07v*mHxgGv@kJyqhvHf! z5-@E>Vg*c>Akhue%aFJNrdcFfVA>+3TEx^2Jocp~GX(uz)c!if_K=K^WY-jP{Z4*Y z4af_s=lc1VhlLLaC}yJc1}M@fodd-plrDqfCX^eS;T zLxLR5a+n0O`m}|_Fs$nuBd%W5%1AwF`p5&Pxw@tV%kp% zr7lh#5K5h#Ix3VpxR!pQwuoyP5o%pr%Q2zW$+eskYIUBCR)oQ9g|u;yM`!V75=!&L z3?`a(n`cs*<$Ej0>a+K+;&ZJ`UcIWH{IXu*q>C#X5Kij(gs@W2qryrDr}hX7`Y(?O z3wr)c_%;B9O4QNCdzMM}yLnH6bib4Lu+sis-m^uzZ-Ub2`212Rox|tLMH3`u>P6Ec zF;fd1u?NV;Tt2;D)hzq==Ce>bxHB^Z9A^#~SlMCVW=hA8cj6%s@A*r|W2f7699eC& zJ8JZH{HuKiRvHb=8108OM!WYP9p5Q5_U;H8?ZXX5`%IgG8DsC~y)*Ux*sZr0<2Nfm RKGGx`cCfn6J6 - - - - - - - - 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):