diff --git a/vizro-core/changelog.d/20240123_131012_nadija_ratkusic_graca_logo.md b/vizro-core/changelog.d/20240123_131012_nadija_ratkusic_graca_logo.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240123_131012_nadija_ratkusic_graca_logo.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/assets/user_guides/components/button.png b/vizro-core/docs/assets/user_guides/components/button.png index c1d86710b..d5f634e5d 100644 Binary files a/vizro-core/docs/assets/user_guides/components/button.png and b/vizro-core/docs/assets/user_guides/components/button.png differ diff --git a/vizro-core/docs/assets/user_guides/components/graph.png b/vizro-core/docs/assets/user_guides/components/graph.png new file mode 100644 index 000000000..4d5630991 Binary files /dev/null and b/vizro-core/docs/assets/user_guides/components/graph.png differ diff --git a/vizro-core/docs/assets/user_guides/components/graph1.png b/vizro-core/docs/assets/user_guides/components/graph1.png deleted file mode 100644 index b18920cff..000000000 Binary files a/vizro-core/docs/assets/user_guides/components/graph1.png and /dev/null differ diff --git a/vizro-core/docs/assets/user_guides/dashboard/dashboard_with_logo.png b/vizro-core/docs/assets/user_guides/dashboard/dashboard_with_logo.png new file mode 100644 index 000000000..4f6eb9392 Binary files /dev/null and b/vizro-core/docs/assets/user_guides/dashboard/dashboard_with_logo.png differ diff --git a/vizro-core/docs/assets/user_guides/table/styled_table.png b/vizro-core/docs/assets/user_guides/table/styled_table.png index 8074f59b1..102043e56 100644 Binary files a/vizro-core/docs/assets/user_guides/table/styled_table.png and b/vizro-core/docs/assets/user_guides/table/styled_table.png differ diff --git a/vizro-core/docs/assets/user_guides/table/table.png b/vizro-core/docs/assets/user_guides/table/table.png index 88d2a4094..ddf2a61ea 100644 Binary files a/vizro-core/docs/assets/user_guides/table/table.png and b/vizro-core/docs/assets/user_guides/table/table.png differ diff --git a/vizro-core/docs/pages/user_guides/assets.md b/vizro-core/docs/pages/user_guides/assets.md index 8a7eebf17..1559f54f3 100644 --- a/vizro-core/docs/pages/user_guides/assets.md +++ b/vizro-core/docs/pages/user_guides/assets.md @@ -16,6 +16,7 @@ The user-provided `assets` folder thus always takes precedence. │  ├── icons │  ├── collections.svg │  ├── app.svg +│  ├── logo.svg │  ├── favicon.ico ``` @@ -185,3 +186,9 @@ clients. To include an image in the preview, place an image file in the assets f `logo.`. Vizro searches the assets folder and uses the first one it finds. Image types of `apng`, `avif`, `gif`, `jpeg`, `jpg`, `png`, `svg`, and `webp` are supported. + +## Logo image + +Vizro will automatically incorporate the dashboard logo in the top-left corner of each page if an image named `logo.` is present within the assets folder. + +Image types of `apng`, `avif`, `gif`, `jpeg`, `jpg`, `png`, `svg`, and `webp` are supported. diff --git a/vizro-core/docs/pages/user_guides/components.md b/vizro-core/docs/pages/user_guides/components.md index cd35d02f4..48be24ecd 100755 --- a/vizro-core/docs/pages/user_guides/components.md +++ b/vizro-core/docs/pages/user_guides/components.md @@ -37,5 +37,3 @@ listed below to fill your dashboard with visuals. Use containers to group your page components into sections and subsections. [:octicons-arrow-right-24: View User Guide](container.md) - - diff --git a/vizro-core/docs/pages/user_guides/dashboard.md b/vizro-core/docs/pages/user_guides/dashboard.md index 847c53558..69936f26f 100644 --- a/vizro-core/docs/pages/user_guides/dashboard.md +++ b/vizro-core/docs/pages/user_guides/dashboard.md @@ -188,6 +188,12 @@ After running the dashboard, you can access the dashboard via `localhost:8050`. If supplied, the `title` of the [`Dashboard`][vizro.models.Dashboard] displays a heading at the top of every page. +## Adding a dashboard logo + +Vizro will automatically incorporate the dashboard [logo](assets.md/#logo-image) in the top-left corner of each page if an image named `logo.` is present within the assets folder. + +![Dashboard with logo](../../assets/user_guides/dashboard/dashboard_with_logo.png) + ## Browser title The [website icon](assets.md/#changing-the-favicon), Dashboard `title` (if supplied) and [Page `title`][vizro.models.Page] are displayed in the browser's diff --git a/vizro-core/docs/pages/user_guides/graph.md b/vizro-core/docs/pages/user_guides/graph.md index 8a019e248..5cdf9130c 100755 --- a/vizro-core/docs/pages/user_guides/graph.md +++ b/vizro-core/docs/pages/user_guides/graph.md @@ -65,7 +65,7 @@ To add a [`Graph`][vizro.models.Graph] to your page, do the following: === "Result" [![Graph]][Graph] - [Graph]: ../../assets/user_guides/components/graph1.png + [Graph]: ../../assets/user_guides/components/graph.png Note that in the above example we directly inserted the chart into the `figure` argument for the `.py` version. This is also the simplest way to connect your chart to a Pandas `DataFrame` - for other connections, please refer to [this guide on data connections](data.md). For the `yaml` version, we simply referred to the [`plotly.express`](https://plotly.com/python/plotly-express/) name by string. diff --git a/vizro-core/docs/pages/user_guides/table.md b/vizro-core/docs/pages/user_guides/table.md index bcbad5b55..3a41ffa70 100755 --- a/vizro-core/docs/pages/user_guides/table.md +++ b/vizro-core/docs/pages/user_guides/table.md @@ -40,7 +40,6 @@ setting some defaults for some of the arguments to help with styling. components=[ vm.Table(title="Dash DataTable", figure=dash_data_table(data_frame=df)), ], - controls=[vm.Filter(column="continent")], ) dashboard = vm.Dashboard(pages=[page]) @@ -57,9 +56,6 @@ setting some defaults for some of the arguments to help with styling. data_frame: gapminder_2007 title: Dash DataTable type: table - controls: - - column: continent - type: filter title: Example of a Dash DataTable ``` === "Result" @@ -130,7 +126,6 @@ an example of a styled table where some conditional formatting is applied. There ), ), ], - controls=[vm.Filter(column="continent")], ) dashboard = vm.Dashboard(pages=[page]) @@ -190,9 +185,6 @@ an example of a styled table where some conditional formatting is applied. There backgroundColor: rgba(0, 116, 217, 0.3) border: 1px solid rgb(0, 116, 217) type: table - controls: - - column: continent - type: filter title: Dash DataTable ``` diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml index 8a5417b62..b6e8bf369 100644 --- a/vizro-core/mkdocs.yml +++ b/vizro-core/mkdocs.yml @@ -6,39 +6,39 @@ nav: - Quickstart: pages/tutorials/first_dashboard.md - Explore Vizro: pages/tutorials/explore_components.md - User Guides: - - Fundamentals: + - FUNDAMENTALS: - Install: pages/user_guides/install.md - Dashboards: pages/user_guides/dashboard.md - Pages: pages/user_guides/pages.md - Run Methods: pages/user_guides/run.md - - Components: + - COMPONENTS: - Overview: pages/user_guides/components.md - Graphs: pages/user_guides/graph.md - Tables: pages/user_guides/table.md - Cards & Buttons: pages/user_guides/card_button.md - Containers: pages/user_guides/container.md - - Controls: + - CONTROLS: - Filters: pages/user_guides/filters.md - Parameters: pages/user_guides/parameters.md - Selectors: pages/user_guides/selectors.md - - Navigation: + - NAVIGATION: - Navigation: pages/user_guides/navigation.md - - Visual Formatting: + - VISUAL FORMATTING: - Layouts: pages/user_guides/layouts.md - Themes: pages/user_guides/themes.md - Assets: pages/user_guides/assets.md - - Actions: + - ACTIONS: - Actions: pages/user_guides/actions.md - - Data Connections: + - DATA CONNECTIONS: - Data: pages/user_guides/data.md - Integrations: pages/user_guides/integration.md - - Extensions: + - EXTENSIONS: - Custom Charts: pages/user_guides/custom_charts.md - Custom Tables: pages/user_guides/custom_tables.md - Custom Components: pages/user_guides/custom_components.md - Custom Actions: pages/user_guides/custom_actions.md - - API reference: + - API Reference: - Vizro: pages/API_reference/vizro.md - Models: pages/API_reference/models.md - Data Manager: pages/API_reference/manager.md diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py index 03d48cfe1..aa1e3698a 100644 --- a/vizro-core/tests/unit/vizro/models/test_dashboard.py +++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py @@ -156,6 +156,31 @@ def test_page_registry_with_image(self, page_1, mocker, tmp_path, image_path): layout=mocker.ANY, # partial call is tricky to mock out so we ignore it. ) + # TODO: Move the test to `TestDashboardBuild` once asset_component_equal is implemented for dashboard build method + @pytest.mark.parametrize( + "image_path", + [ + "logo.svg", + "logo.png", + "logo.apng", + "logo.avif", + "logo.gif", + "logo.jpeg", + "logo.jpg", + "logo.webp", + "images/logo.svg", + ], + ) + def test_infer_image(self, page_1, tmp_path, image_path): + if Path(image_path).parent != Path("."): + Path(tmp_path / image_path).parent.mkdir() + + Path(tmp_path / image_path).touch() + Vizro(assets_folder=tmp_path) + vm.Dashboard(pages=[page_1]).pre_build() + + assert_component_equal(vm.Dashboard._infer_image("logo"), image_path) + def test_page_registry_with_images(self, page_1, mocker, tmp_path): Path(tmp_path / "app.svg").touch() Path(tmp_path / "logo.svg").touch()