-## Vizro visual vocabulary
+## Visual vocabulary
Our visual vocabulary dashboard helps you to select and create various types of charts. It helps you decide when to use
each chart type, and offers sample Python code to create these charts with [Plotly](https://plotly.com/python/) and
diff --git a/pyproject.toml b/pyproject.toml
index bf7f977bb..7d81efea6 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -95,4 +95,4 @@ select = [
"vizro-ai/examples/chart_by_vizro_ai.ipynb" = ["T201", "E501"]
"vizro-ai/examples/dashboard_by_vizro_ai.ipynb" = ["T201", "E402", "E501"]
# Ignore missing docstrings in visual-vocabulary examples to keep them succinct.
-"vizro-core/examples/_visual-vocabulary/pages/examples/**" = ["D100", "D103"]
+"vizro-core/examples/visual-vocabulary/pages/examples/**" = ["D100", "D103"]
diff --git a/vizro-ai/changelog.d/20240918_175213_huong_li_nguyen_add_visual_formatting_guide.md b/vizro-ai/changelog.d/20240918_175213_huong_li_nguyen_add_visual_formatting_guide.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/vizro-ai/changelog.d/20240918_175213_huong_li_nguyen_add_visual_formatting_guide.md
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
diff --git a/vizro-ai/changelog.d/20240923_113307_huong_li_nguyen.md b/vizro-ai/changelog.d/20240923_113307_huong_li_nguyen.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/vizro-ai/changelog.d/20240923_113307_huong_li_nguyen.md
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
diff --git a/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md b/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md
index 7ae1c7a61..b0edab548 100644
--- a/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md
+++ b/vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md
@@ -33,7 +33,7 @@ from vizro_ai import VizroAI
vizro_ai = VizroAI(model="gpt-4o-mini")
result = vizro_ai.dashboard([df], user_question, return_elements=True)
```
-This will trigger the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard.
+This triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard.
!!! example "Generated dashboard"
diff --git a/vizro-ai/hatch.toml b/vizro-ai/hatch.toml
index 1588b45ee..866731f22 100644
--- a/vizro-ai/hatch.toml
+++ b/vizro-ai/hatch.toml
@@ -61,7 +61,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker"
]
diff --git a/vizro-core/CHANGELOG.md b/vizro-core/CHANGELOG.md
index dfaf835c9..6d9fe8b61 100644
--- a/vizro-core/CHANGELOG.md
+++ b/vizro-core/CHANGELOG.md
@@ -149,7 +149,7 @@ See the fragment files in the [changelog.d directory](https://github.com/mckinse
## Removed
-- Remove all CSS classes with suffix `_outer` from components. Visit the user guide on [how to customize CSS in selected components](https://vizro.readthedocs.io/en/stable/pages/user-guides/assets/#overwrite-css-properties-in-selective-components) for more details. ([#456](https://github.com/mckinsey/vizro/pull/456))
+- Remove all CSS classes with suffix `_outer` from components. Visit the user guide on [how to customize CSS in selected components](https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-css/#overwrite-css-for-selected-components) for more details. ([#456](https://github.com/mckinsey/vizro/pull/456))
## Changed
diff --git a/vizro-core/README.md b/vizro-core/README.md
index 97d667ac6..859cb686b 100644
--- a/vizro-core/README.md
+++ b/vizro-core/README.md
@@ -98,7 +98,7 @@ You can see Vizro in action by clicking on the following image or by visiting [t
tag
-
- ## This is an tag
-
- ###### This is an tag
- """)
- ],
- )
-
- dashboard = vm.Dashboard(pages=[page])
-
-
- Vizro().build(dashboard).run()
- ```
-
- 
Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- # This is an tag
-
- ## This is an tag
-
- ###### This is an tag
- type: card
- title: Changing the header color
- ```
- === "Result"
- [![AssetsCSS]][AssetsCSS]
-
- [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
-
-
-## Overwrite CSS properties for specific pages
-To style components for a specific page, use the page's `id` in CSS selectors. By default, this is the [same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
-A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
-
-Suppose you want to hide the page title on one page only. Here's how you can achieve this:
-
-1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
-2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the container with the `id `right-header`.
-3. Use the `id` in combination with CSS selectors to change the relevant CSS properties.
-4. Add your custom css file to the `assets` folder as explained above.
-
-
-!!! example "Hide page title on selected pages"
- === "my_css_file.css"
- ```css
- #page-with-hidden-title #right-header {
- display: none;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page_one = vm.Page(
- id="page-with-hidden-title",
- title="Page with hidden title",
- components=[vm.Card(text="""# Placeholder""")]
- )
-
- page_two = vm.Page(
- title="Page with shown title",
- components=[vm.Card(text="""# Placeholder""")]
- )
-
- dashboard = vm.Dashboard(pages=[page_one, page_two])
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with hidden title
- id: page-with-hidden-title
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with shown title
- ```
- === "Result"
- [![PageTitle]][PageTitle]
-
- [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
-
-
-## Overwrite CSS properties in selective components
-To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all `Card`s,
-you need to use a CSS selector that targets the right CSS property.
-If you're unfamiliar with CSS selectors, you can refer to this [tutorial](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure) for guidance.
-
-Let's say we want to change the background and font-color of a specific `Card`.
-
-Here's how you can do it:
-
-1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
-2. Run your dashboard and open it in your browser
-3. View the HTML source to find the appropriate CSS class or element you need to target. For example, if you inspect a page with [Chrome DevTools](https://developer.chrome.com/docs/devtools/) then you can [directly copy the CSS selector](https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome).
-
-It's essential to understand the relationship between the targeted CSS class or element and the component assigned the `id`, for example:
-
-
-```html title="HTML structure of a `Card`"
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
-
-```
-
-
-* **Main element with `id`:** There is a `` with our `id="custom-card"`.
-* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
-* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
-
-
-!!! example "Customizing CSS properties in selective components"
- === "my_css_file.css"
- ```css
- /* Apply styling to parent */
- .card:has(#custom-card) {
- background-color: white;
- }
-
- /* Apply styling to child */
- #custom-card p {
- color: black;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page = vm.Page(
- title="Changing the card color",
- components=[
- vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
- vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
- ],
- )
-
- dashboard = vm.Dashboard(pages=[page])
-
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- id: custom-card
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- title: Changing the card color
- ```
- === "Result"
- [![CardCSS]][CardCSS]
-
- [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
-
## Order of serving CSS files
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
new file mode 100755
index 000000000..a34f0e0b7
--- /dev/null
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -0,0 +1,477 @@
+# Customizing Vizro dashboard CSS
+
+Vizro is opinionated about visual formatting, and some elements, such as the layout of the navigation and components,
+are fixed. You can customize some settings such as background colors, fonts, and other styles via CSS overrides.
+
+To make customizations, you need to:
+
+1. **Add a CSS file to your `assets` folder**. Refer to our user guide on [adding static assets](assets.md#how-to-add-static-assets).
+2. **Identify the correct CSS selector** for the component you want to style.
+3. **Change the relevant CSS properties** in your CSS file.
+
+
+
+## Introduction to Vizro CSS
+For a short introduction to CSS, we recommend reading this article: [Get Started with CSS in 5 Minutes](https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/).
+
+For a more comprehensive tutorial, refer to the [W3Schools CSS tutorial](https://www.w3schools.com/css/default.asp).
+The entire tutorial is beneficial, but the section on [CSS selectors](https://www.w3schools.com/css/css_selectors.asp)
+will be particularly useful.
+
+In Vizro, the CSS file is read in as an external stylesheet. The most common way of applying any styling to
+Vizro is therefore through the use of CSS selectors:
+
+- **Element Selector**: Applies the style to all elements inside the Vizro app.
+
+ ```
+ h1 {
+ font-size: 20px;
+ }
+
+ p {
+ color: green;
+ }
+ ```
+
+- **Class selector:** Targets all elements with the given class for styling. All CSS classes must be preceded with a
+`.` symbol.
+
+ ```
+ .card {
+ background: lightblue;
+ }
+ ```
+
+- **ID selector:** Targets the element with the given ID for styling. All CSS IDs must be preceded by a `#` symbol.
+
+ ```
+ #my-card {
+ background: lightblue;
+ }
+ ```
+
+
+## Identify the correct CSS selector
+
+Use Chrome DevTools or a similar tool (Web Inspector, Web Developer Tools, etc.) to inspect the HTML document in your browser.
+
+1. **Open DevTools:** In Google Chrome, right-click on the app and select "Inspect" from the context menu. This opens the
+HTML document of your Vizro app.
+
+ 
+
+
+2. **Select an element:** Suppose you want to change the background color of your cards. Click the
+"Select an element in the page to inspect it" icon in the top left corner of the inspect panel.
+
+ 
+
+3. **Find the HTML Block:** Hover over the component you want to style. The corresponding HTML block will be
+highlighted in the HTML document.
+
+ 
+
+ Notice that the selected HTML block corresponds to the container of the card and has a CSS class, here it is `card`.
+
+4. **Apply CSS:** Use this CSS class to style the card component. In your CSS file, you can write:
+
+ ```
+ .card {
+ background-color: blue;
+ }
+ ```
+
+ This changes the background color for any HTML element with the `card` class.
+
+**Tip:** You can also test your CSS live by editing the CSS attributes in the "Elements" panel.
+For example, temporarily add `background: blue;`. Note that this change will be lost upon reloading the page.
+
+
+
+
+## CSS overwrites
+
+### Overwrite CSS globally
+To overwrite any global CSS property, you need to target the element selector and place your CSS file with the
+overwrites in the `assets` folder.
+
+!!! example "Overwrite CSS globally"
+ === "my_css_file.css"
+ ```css
+ h1, h2 {
+ color: hotpink;
+ }
+ ```
+ === "app.py"
+ ```py
+ import os
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the header color",
+ components=[
+ vm.Card(
+ text="""
+
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ """)
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ type: card
+ title: Changing the header color
+ ```
+ === "Result"
+ [![AssetsCSS]][AssetsCSS]
+
+ [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
+
+
+### Overwrite CSS for selected pages
+To style components for a specific page, use the page's `id` in the CSS selectors. By default, this is the
+[same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
+
+A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric
+characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
+
+Suppose you want to hide the page title on one page only. Here's how you can achieve this:
+
+1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
+2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the parent container with the id `right-header`.
+3. Use the `id` to hide the content.
+4. Add your custom css file to the `assets` folder.
+
+
+!!! example "Hide page title on selected pages"
+ === "my_css_file.css"
+ ```css
+ #page-with-hidden-title #right-header {
+ display: none;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page_one = vm.Page(
+ id="page-with-hidden-title",
+ title="Page with hidden title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ page_two = vm.Page(
+ title="Page with shown title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ dashboard = vm.Dashboard(pages=[page_one, page_two])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+```
+
+
+* **Main element with `id`:** There is a `` with our `id="custom-card"`.
+* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
tag
- """)
- ],
- )
-
- dashboard = vm.Dashboard(pages=[page])
-
-
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- # This is an tag
-
- ## This is an tag
-
- ###### This is an tag
- type: card
- title: Changing the header color
- ```
- === "Result"
- [![AssetsCSS]][AssetsCSS]
-
- [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
-
-
-## Overwrite CSS properties for specific pages
-To style components for a specific page, use the page's `id` in CSS selectors. By default, this is the [same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
-A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
-
-Suppose you want to hide the page title on one page only. Here's how you can achieve this:
-
-1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
-2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the container with the `id `right-header`.
-3. Use the `id` in combination with CSS selectors to change the relevant CSS properties.
-4. Add your custom css file to the `assets` folder as explained above.
-
-
-!!! example "Hide page title on selected pages"
- === "my_css_file.css"
- ```css
- #page-with-hidden-title #right-header {
- display: none;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page_one = vm.Page(
- id="page-with-hidden-title",
- title="Page with hidden title",
- components=[vm.Card(text="""# Placeholder""")]
- )
-
- page_two = vm.Page(
- title="Page with shown title",
- components=[vm.Card(text="""# Placeholder""")]
- )
-
- dashboard = vm.Dashboard(pages=[page_one, page_two])
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with hidden title
- id: page-with-hidden-title
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with shown title
- ```
- === "Result"
- [![PageTitle]][PageTitle]
-
- [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
-
-
-## Overwrite CSS properties in selective components
-To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all `Card`s,
-you need to use a CSS selector that targets the right CSS property.
-If you're unfamiliar with CSS selectors, you can refer to this [tutorial](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure) for guidance.
-
-Let's say we want to change the background and font-color of a specific `Card`.
-
-Here's how you can do it:
-
-1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
-2. Run your dashboard and open it in your browser
-3. View the HTML source to find the appropriate CSS class or element you need to target. For example, if you inspect a page with [Chrome DevTools](https://developer.chrome.com/docs/devtools/) then you can [directly copy the CSS selector](https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome).
-
-It's essential to understand the relationship between the targeted CSS class or element and the component assigned the `id`, for example:
-
-
-```html title="HTML structure of a `Card`"
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
-
-```
-
-
-* **Main element with `id`:** There is a `` with our `id="custom-card"`.
-* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
-* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
-
-
-!!! example "Customizing CSS properties in selective components"
- === "my_css_file.css"
- ```css
- /* Apply styling to parent */
- .card:has(#custom-card) {
- background-color: white;
- }
-
- /* Apply styling to child */
- #custom-card p {
- color: black;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page = vm.Page(
- title="Changing the card color",
- components=[
- vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
- vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
- ],
- )
-
- dashboard = vm.Dashboard(pages=[page])
-
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- id: custom-card
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- title: Changing the card color
- ```
- === "Result"
- [![CardCSS]][CardCSS]
-
- [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
-
## Order of serving CSS files
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
new file mode 100755
index 000000000..a34f0e0b7
--- /dev/null
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -0,0 +1,477 @@
+# Customizing Vizro dashboard CSS
+
+Vizro is opinionated about visual formatting, and some elements, such as the layout of the navigation and components,
+are fixed. You can customize some settings such as background colors, fonts, and other styles via CSS overrides.
+
+To make customizations, you need to:
+
+1. **Add a CSS file to your `assets` folder**. Refer to our user guide on [adding static assets](assets.md#how-to-add-static-assets).
+2. **Identify the correct CSS selector** for the component you want to style.
+3. **Change the relevant CSS properties** in your CSS file.
+
+
+
+## Introduction to Vizro CSS
+For a short introduction to CSS, we recommend reading this article: [Get Started with CSS in 5 Minutes](https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/).
+
+For a more comprehensive tutorial, refer to the [W3Schools CSS tutorial](https://www.w3schools.com/css/default.asp).
+The entire tutorial is beneficial, but the section on [CSS selectors](https://www.w3schools.com/css/css_selectors.asp)
+will be particularly useful.
+
+In Vizro, the CSS file is read in as an external stylesheet. The most common way of applying any styling to
+Vizro is therefore through the use of CSS selectors:
+
+- **Element Selector**: Applies the style to all elements inside the Vizro app.
+
+ ```
+ h1 {
+ font-size: 20px;
+ }
+
+ p {
+ color: green;
+ }
+ ```
+
+- **Class selector:** Targets all elements with the given class for styling. All CSS classes must be preceded with a
+`.` symbol.
+
+ ```
+ .card {
+ background: lightblue;
+ }
+ ```
+
+- **ID selector:** Targets the element with the given ID for styling. All CSS IDs must be preceded by a `#` symbol.
+
+ ```
+ #my-card {
+ background: lightblue;
+ }
+ ```
+
+
+## Identify the correct CSS selector
+
+Use Chrome DevTools or a similar tool (Web Inspector, Web Developer Tools, etc.) to inspect the HTML document in your browser.
+
+1. **Open DevTools:** In Google Chrome, right-click on the app and select "Inspect" from the context menu. This opens the
+HTML document of your Vizro app.
+
+ 
+
+
+2. **Select an element:** Suppose you want to change the background color of your cards. Click the
+"Select an element in the page to inspect it" icon in the top left corner of the inspect panel.
+
+ 
+
+3. **Find the HTML Block:** Hover over the component you want to style. The corresponding HTML block will be
+highlighted in the HTML document.
+
+ 
+
+ Notice that the selected HTML block corresponds to the container of the card and has a CSS class, here it is `card`.
+
+4. **Apply CSS:** Use this CSS class to style the card component. In your CSS file, you can write:
+
+ ```
+ .card {
+ background-color: blue;
+ }
+ ```
+
+ This changes the background color for any HTML element with the `card` class.
+
+**Tip:** You can also test your CSS live by editing the CSS attributes in the "Elements" panel.
+For example, temporarily add `background: blue;`. Note that this change will be lost upon reloading the page.
+
+
+
+
+## CSS overwrites
+
+### Overwrite CSS globally
+To overwrite any global CSS property, you need to target the element selector and place your CSS file with the
+overwrites in the `assets` folder.
+
+!!! example "Overwrite CSS globally"
+ === "my_css_file.css"
+ ```css
+ h1, h2 {
+ color: hotpink;
+ }
+ ```
+ === "app.py"
+ ```py
+ import os
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the header color",
+ components=[
+ vm.Card(
+ text="""
+
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ """)
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ type: card
+ title: Changing the header color
+ ```
+ === "Result"
+ [![AssetsCSS]][AssetsCSS]
+
+ [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
+
+
+### Overwrite CSS for selected pages
+To style components for a specific page, use the page's `id` in the CSS selectors. By default, this is the
+[same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
+
+A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric
+characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
+
+Suppose you want to hide the page title on one page only. Here's how you can achieve this:
+
+1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
+2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the parent container with the id `right-header`.
+3. Use the `id` to hide the content.
+4. Add your custom css file to the `assets` folder.
+
+
+!!! example "Hide page title on selected pages"
+ === "my_css_file.css"
+ ```css
+ #page-with-hidden-title #right-header {
+ display: none;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page_one = vm.Page(
+ id="page-with-hidden-title",
+ title="Page with hidden title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ page_two = vm.Page(
+ title="Page with shown title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ dashboard = vm.Dashboard(pages=[page_one, page_two])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+```
+
+
+* **Main element with `id`:** There is a `` with our `id="custom-card"`.
+* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
tag
-
- ###### This is an tag
- type: card
- title: Changing the header color
- ```
- === "Result"
- [![AssetsCSS]][AssetsCSS]
-
- [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
-
-
-## Overwrite CSS properties for specific pages
-To style components for a specific page, use the page's `id` in CSS selectors. By default, this is the [same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
-A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
-
-Suppose you want to hide the page title on one page only. Here's how you can achieve this:
-
-1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
-2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the container with the `id `right-header`.
-3. Use the `id` in combination with CSS selectors to change the relevant CSS properties.
-4. Add your custom css file to the `assets` folder as explained above.
-
-
-!!! example "Hide page title on selected pages"
- === "my_css_file.css"
- ```css
- #page-with-hidden-title #right-header {
- display: none;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page_one = vm.Page(
- id="page-with-hidden-title",
- title="Page with hidden title",
- components=[vm.Card(text="""# Placeholder""")]
- )
-
- page_two = vm.Page(
- title="Page with shown title",
- components=[vm.Card(text="""# Placeholder""")]
- )
-
- dashboard = vm.Dashboard(pages=[page_one, page_two])
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with hidden title
- id: page-with-hidden-title
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with shown title
- ```
- === "Result"
- [![PageTitle]][PageTitle]
-
- [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
-
-
-## Overwrite CSS properties in selective components
-To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all `Card`s,
-you need to use a CSS selector that targets the right CSS property.
-If you're unfamiliar with CSS selectors, you can refer to this [tutorial](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure) for guidance.
-
-Let's say we want to change the background and font-color of a specific `Card`.
-
-Here's how you can do it:
-
-1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
-2. Run your dashboard and open it in your browser
-3. View the HTML source to find the appropriate CSS class or element you need to target. For example, if you inspect a page with [Chrome DevTools](https://developer.chrome.com/docs/devtools/) then you can [directly copy the CSS selector](https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome).
-
-It's essential to understand the relationship between the targeted CSS class or element and the component assigned the `id`, for example:
-
-
-```html title="HTML structure of a `Card`"
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
-
-```
-
-
-* **Main element with `id`:** There is a `` with our `id="custom-card"`.
-* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
-* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
-
-
-!!! example "Customizing CSS properties in selective components"
- === "my_css_file.css"
- ```css
- /* Apply styling to parent */
- .card:has(#custom-card) {
- background-color: white;
- }
-
- /* Apply styling to child */
- #custom-card p {
- color: black;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page = vm.Page(
- title="Changing the card color",
- components=[
- vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
- vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
- ],
- )
-
- dashboard = vm.Dashboard(pages=[page])
-
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- id: custom-card
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- title: Changing the card color
- ```
- === "Result"
- [![CardCSS]][CardCSS]
-
- [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
-
## Order of serving CSS files
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
new file mode 100755
index 000000000..a34f0e0b7
--- /dev/null
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -0,0 +1,477 @@
+# Customizing Vizro dashboard CSS
+
+Vizro is opinionated about visual formatting, and some elements, such as the layout of the navigation and components,
+are fixed. You can customize some settings such as background colors, fonts, and other styles via CSS overrides.
+
+To make customizations, you need to:
+
+1. **Add a CSS file to your `assets` folder**. Refer to our user guide on [adding static assets](assets.md#how-to-add-static-assets).
+2. **Identify the correct CSS selector** for the component you want to style.
+3. **Change the relevant CSS properties** in your CSS file.
+
+
+
+## Introduction to Vizro CSS
+For a short introduction to CSS, we recommend reading this article: [Get Started with CSS in 5 Minutes](https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/).
+
+For a more comprehensive tutorial, refer to the [W3Schools CSS tutorial](https://www.w3schools.com/css/default.asp).
+The entire tutorial is beneficial, but the section on [CSS selectors](https://www.w3schools.com/css/css_selectors.asp)
+will be particularly useful.
+
+In Vizro, the CSS file is read in as an external stylesheet. The most common way of applying any styling to
+Vizro is therefore through the use of CSS selectors:
+
+- **Element Selector**: Applies the style to all elements inside the Vizro app.
+
+ ```
+ h1 {
+ font-size: 20px;
+ }
+
+ p {
+ color: green;
+ }
+ ```
+
+- **Class selector:** Targets all elements with the given class for styling. All CSS classes must be preceded with a
+`.` symbol.
+
+ ```
+ .card {
+ background: lightblue;
+ }
+ ```
+
+- **ID selector:** Targets the element with the given ID for styling. All CSS IDs must be preceded by a `#` symbol.
+
+ ```
+ #my-card {
+ background: lightblue;
+ }
+ ```
+
+
+## Identify the correct CSS selector
+
+Use Chrome DevTools or a similar tool (Web Inspector, Web Developer Tools, etc.) to inspect the HTML document in your browser.
+
+1. **Open DevTools:** In Google Chrome, right-click on the app and select "Inspect" from the context menu. This opens the
+HTML document of your Vizro app.
+
+ 
+
+
+2. **Select an element:** Suppose you want to change the background color of your cards. Click the
+"Select an element in the page to inspect it" icon in the top left corner of the inspect panel.
+
+ 
+
+3. **Find the HTML Block:** Hover over the component you want to style. The corresponding HTML block will be
+highlighted in the HTML document.
+
+ 
+
+ Notice that the selected HTML block corresponds to the container of the card and has a CSS class, here it is `card`.
+
+4. **Apply CSS:** Use this CSS class to style the card component. In your CSS file, you can write:
+
+ ```
+ .card {
+ background-color: blue;
+ }
+ ```
+
+ This changes the background color for any HTML element with the `card` class.
+
+**Tip:** You can also test your CSS live by editing the CSS attributes in the "Elements" panel.
+For example, temporarily add `background: blue;`. Note that this change will be lost upon reloading the page.
+
+
+
+
+## CSS overwrites
+
+### Overwrite CSS globally
+To overwrite any global CSS property, you need to target the element selector and place your CSS file with the
+overwrites in the `assets` folder.
+
+!!! example "Overwrite CSS globally"
+ === "my_css_file.css"
+ ```css
+ h1, h2 {
+ color: hotpink;
+ }
+ ```
+ === "app.py"
+ ```py
+ import os
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the header color",
+ components=[
+ vm.Card(
+ text="""
+
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ """)
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ type: card
+ title: Changing the header color
+ ```
+ === "Result"
+ [![AssetsCSS]][AssetsCSS]
+
+ [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
+
+
+### Overwrite CSS for selected pages
+To style components for a specific page, use the page's `id` in the CSS selectors. By default, this is the
+[same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
+
+A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric
+characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
+
+Suppose you want to hide the page title on one page only. Here's how you can achieve this:
+
+1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
+2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the parent container with the id `right-header`.
+3. Use the `id` to hide the content.
+4. Add your custom css file to the `assets` folder.
+
+
+!!! example "Hide page title on selected pages"
+ === "my_css_file.css"
+ ```css
+ #page-with-hidden-title #right-header {
+ display: none;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page_one = vm.Page(
+ id="page-with-hidden-title",
+ title="Page with hidden title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ page_two = vm.Page(
+ title="Page with shown title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ dashboard = vm.Dashboard(pages=[page_one, page_two])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+```
+
+
+* **Main element with `id`:** There is a `` with our `id="custom-card"`.
+* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with hidden title
- id: page-with-hidden-title
- - components:
- - text: |
- # Placeholder
- type: card
- title: Page with shown title
- ```
- === "Result"
- [![PageTitle]][PageTitle]
-
- [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
-
-
-## Overwrite CSS properties in selective components
-To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all `Card`s,
-you need to use a CSS selector that targets the right CSS property.
-If you're unfamiliar with CSS selectors, you can refer to this [tutorial](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure) for guidance.
-
-Let's say we want to change the background and font-color of a specific `Card`.
-
-Here's how you can do it:
-
-1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
-2. Run your dashboard and open it in your browser
-3. View the HTML source to find the appropriate CSS class or element you need to target. For example, if you inspect a page with [Chrome DevTools](https://developer.chrome.com/docs/devtools/) then you can [directly copy the CSS selector](https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome).
-
-It's essential to understand the relationship between the targeted CSS class or element and the component assigned the `id`, for example:
-
-
-```html title="HTML structure of a `Card`"
-
-
-```
-
-
-* **Main element with `id`:** There is a `
-
-Lorem ipsum dolor sit amet consectetur adipisicing elit.
-` with our `id="custom-card"`.
-* **Parent element:** That `
` is wrapped inside a parent `
` with the class name `"card"`. This is the element we need to target to change the background color.
-* **Child element:** The card text is wrapped inside a `
` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
-
-
-!!! example "Customizing CSS properties in selective components"
- === "my_css_file.css"
- ```css
- /* Apply styling to parent */
- .card:has(#custom-card) {
- background-color: white;
- }
-
- /* Apply styling to child */
- #custom-card p {
- color: black;
- }
- ```
- === "app.py"
- ```py
- import vizro.models as vm
- from vizro import Vizro
-
- page = vm.Page(
- title="Changing the card color",
- components=[
- vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
- vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
- ],
- )
-
- dashboard = vm.Dashboard(pages=[page])
-
- Vizro().build(dashboard).run()
- ```
-
- Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- id: custom-card
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- title: Changing the card color
- ```
- === "Result"
- [![CardCSS]][CardCSS]
-
- [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
-
## Order of serving CSS files
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
new file mode 100755
index 000000000..a34f0e0b7
--- /dev/null
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -0,0 +1,477 @@
+# Customizing Vizro dashboard CSS
+
+Vizro is opinionated about visual formatting, and some elements, such as the layout of the navigation and components,
+are fixed. You can customize some settings such as background colors, fonts, and other styles via CSS overrides.
+
+To make customizations, you need to:
+
+1. **Add a CSS file to your `assets` folder**. Refer to our user guide on [adding static assets](assets.md#how-to-add-static-assets).
+2. **Identify the correct CSS selector** for the component you want to style.
+3. **Change the relevant CSS properties** in your CSS file.
+
+
+
+## Introduction to Vizro CSS
+For a short introduction to CSS, we recommend reading this article: [Get Started with CSS in 5 Minutes](https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/).
+
+For a more comprehensive tutorial, refer to the [W3Schools CSS tutorial](https://www.w3schools.com/css/default.asp).
+The entire tutorial is beneficial, but the section on [CSS selectors](https://www.w3schools.com/css/css_selectors.asp)
+will be particularly useful.
+
+In Vizro, the CSS file is read in as an external stylesheet. The most common way of applying any styling to
+Vizro is therefore through the use of CSS selectors:
+
+- **Element Selector**: Applies the style to all elements inside the Vizro app.
+
+ ```
+ h1 {
+ font-size: 20px;
+ }
+
+ p {
+ color: green;
+ }
+ ```
+
+- **Class selector:** Targets all elements with the given class for styling. All CSS classes must be preceded with a
+`.` symbol.
+
+ ```
+ .card {
+ background: lightblue;
+ }
+ ```
+
+- **ID selector:** Targets the element with the given ID for styling. All CSS IDs must be preceded by a `#` symbol.
+
+ ```
+ #my-card {
+ background: lightblue;
+ }
+ ```
+
+
+## Identify the correct CSS selector
+
+Use Chrome DevTools or a similar tool (Web Inspector, Web Developer Tools, etc.) to inspect the HTML document in your browser.
+
+1. **Open DevTools:** In Google Chrome, right-click on the app and select "Inspect" from the context menu. This opens the
+HTML document of your Vizro app.
+
+ 
+
+
+2. **Select an element:** Suppose you want to change the background color of your cards. Click the
+"Select an element in the page to inspect it" icon in the top left corner of the inspect panel.
+
+ 
+
+3. **Find the HTML Block:** Hover over the component you want to style. The corresponding HTML block will be
+highlighted in the HTML document.
+
+ 
+
+ Notice that the selected HTML block corresponds to the container of the card and has a CSS class, here it is `card`.
+
+4. **Apply CSS:** Use this CSS class to style the card component. In your CSS file, you can write:
+
+ ```
+ .card {
+ background-color: blue;
+ }
+ ```
+
+ This changes the background color for any HTML element with the `card` class.
+
+**Tip:** You can also test your CSS live by editing the CSS attributes in the "Elements" panel.
+For example, temporarily add `background: blue;`. Note that this change will be lost upon reloading the page.
+
+
+
+
+## CSS overwrites
+
+### Overwrite CSS globally
+To overwrite any global CSS property, you need to target the element selector and place your CSS file with the
+overwrites in the `assets` folder.
+
+!!! example "Overwrite CSS globally"
+ === "my_css_file.css"
+ ```css
+ h1, h2 {
+ color: hotpink;
+ }
+ ```
+ === "app.py"
+ ```py
+ import os
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the header color",
+ components=[
+ vm.Card(
+ text="""
+
+ # This is an tag
+
+ ## This is an
Run and edit this code in Py.Cafe
-
- === "app.yaml"
- ```yaml
- # Still requires a .py to add data to the data manager and parse YAML configuration
- # See yaml_version example
- pages:
- - components:
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- id: custom-card
- - text: |
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- type: card
- title: Changing the card color
- ```
- === "Result"
- [![CardCSS]][CardCSS]
-
- [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
-
## Order of serving CSS files
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
new file mode 100755
index 000000000..a34f0e0b7
--- /dev/null
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -0,0 +1,477 @@
+# Customizing Vizro dashboard CSS
+
+Vizro is opinionated about visual formatting, and some elements, such as the layout of the navigation and components,
+are fixed. You can customize some settings such as background colors, fonts, and other styles via CSS overrides.
+
+To make customizations, you need to:
+
+1. **Add a CSS file to your `assets` folder**. Refer to our user guide on [adding static assets](assets.md#how-to-add-static-assets).
+2. **Identify the correct CSS selector** for the component you want to style.
+3. **Change the relevant CSS properties** in your CSS file.
+
+
+
+## Introduction to Vizro CSS
+For a short introduction to CSS, we recommend reading this article: [Get Started with CSS in 5 Minutes](https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/).
+
+For a more comprehensive tutorial, refer to the [W3Schools CSS tutorial](https://www.w3schools.com/css/default.asp).
+The entire tutorial is beneficial, but the section on [CSS selectors](https://www.w3schools.com/css/css_selectors.asp)
+will be particularly useful.
+
+In Vizro, the CSS file is read in as an external stylesheet. The most common way of applying any styling to
+Vizro is therefore through the use of CSS selectors:
+
+- **Element Selector**: Applies the style to all elements inside the Vizro app.
+
+ ```
+ h1 {
+ font-size: 20px;
+ }
+
+ p {
+ color: green;
+ }
+ ```
+
+- **Class selector:** Targets all elements with the given class for styling. All CSS classes must be preceded with a
+`.` symbol.
+
+ ```
+ .card {
+ background: lightblue;
+ }
+ ```
+
+- **ID selector:** Targets the element with the given ID for styling. All CSS IDs must be preceded by a `#` symbol.
+
+ ```
+ #my-card {
+ background: lightblue;
+ }
+ ```
+
+
+## Identify the correct CSS selector
+
+Use Chrome DevTools or a similar tool (Web Inspector, Web Developer Tools, etc.) to inspect the HTML document in your browser.
+
+1. **Open DevTools:** In Google Chrome, right-click on the app and select "Inspect" from the context menu. This opens the
+HTML document of your Vizro app.
+
+ 
+
+
+2. **Select an element:** Suppose you want to change the background color of your cards. Click the
+"Select an element in the page to inspect it" icon in the top left corner of the inspect panel.
+
+ 
+
+3. **Find the HTML Block:** Hover over the component you want to style. The corresponding HTML block will be
+highlighted in the HTML document.
+
+ 
+
+ Notice that the selected HTML block corresponds to the container of the card and has a CSS class, here it is `card`.
+
+4. **Apply CSS:** Use this CSS class to style the card component. In your CSS file, you can write:
+
+ ```
+ .card {
+ background-color: blue;
+ }
+ ```
+
+ This changes the background color for any HTML element with the `card` class.
+
+**Tip:** You can also test your CSS live by editing the CSS attributes in the "Elements" panel.
+For example, temporarily add `background: blue;`. Note that this change will be lost upon reloading the page.
+
+
+
+
+## CSS overwrites
+
+### Overwrite CSS globally
+To overwrite any global CSS property, you need to target the element selector and place your CSS file with the
+overwrites in the `assets` folder.
+
+!!! example "Overwrite CSS globally"
+ === "my_css_file.css"
+ ```css
+ h1, h2 {
+ color: hotpink;
+ }
+ ```
+ === "app.py"
+ ```py
+ import os
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the header color",
+ components=[
+ vm.Card(
+ text="""
+
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ """)
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ type: card
+ title: Changing the header color
+ ```
+ === "Result"
+ [![AssetsCSS]][AssetsCSS]
+
+ [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
+
+
+### Overwrite CSS for selected pages
+To style components for a specific page, use the page's `id` in the CSS selectors. By default, this is the
+[same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
+
+A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric
+characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
+
+Suppose you want to hide the page title on one page only. Here's how you can achieve this:
+
+1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
+2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the parent container with the id `right-header`.
+3. Use the `id` to hide the content.
+4. Add your custom css file to the `assets` folder.
+
+
+!!! example "Hide page title on selected pages"
+ === "my_css_file.css"
+ ```css
+ #page-with-hidden-title #right-header {
+ display: none;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page_one = vm.Page(
+ id="page-with-hidden-title",
+ title="Page with hidden title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ page_two = vm.Page(
+ title="Page with shown title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ dashboard = vm.Dashboard(pages=[page_one, page_two])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+```
+
+
+* **Main element with `id`:** There is a `` with our `id="custom-card"`.
+* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
tag
+ """)
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # This is an tag
+
+ ## This is an tag
+
+ ###### This is an tag
+ type: card
+ title: Changing the header color
+ ```
+ === "Result"
+ [![AssetsCSS]][AssetsCSS]
+
+ [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
+
+
+### Overwrite CSS for selected pages
+To style components for a specific page, use the page's `id` in the CSS selectors. By default, this is the
+[same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
+
+A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric
+characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
+
+Suppose you want to hide the page title on one page only. Here's how you can achieve this:
+
+1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
+2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the parent container with the id `right-header`.
+3. Use the `id` to hide the content.
+4. Add your custom css file to the `assets` folder.
+
+
+!!! example "Hide page title on selected pages"
+ === "my_css_file.css"
+ ```css
+ #page-with-hidden-title #right-header {
+ display: none;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page_one = vm.Page(
+ id="page-with-hidden-title",
+ title="Page with hidden title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ page_two = vm.Page(
+ title="Page with shown title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ dashboard = vm.Dashboard(pages=[page_one, page_two])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+```
+
+
+* **Main element with `id`:** There is a `` with our `id="custom-card"`.
+* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
tag
+
+ ###### This is an tag
+ type: card
+ title: Changing the header color
+ ```
+ === "Result"
+ [![AssetsCSS]][AssetsCSS]
+
+ [AssetsCSS]: ../../assets/user_guides/assets/css_change.png
+
+
+### Overwrite CSS for selected pages
+To style components for a specific page, use the page's `id` in the CSS selectors. By default, this is the
+[same as the page `title`](pages.md), but such a value might not be a valid CSS identifier.
+
+A suitable `id` must be unique across all models in the dashboard and should contain only alphanumeric
+characters, hyphens (`-`) and underscores (`_`). In particular, note that spaces are _not_ allowed.
+
+Suppose you want to hide the page title on one page only. Here's how you can achieve this:
+
+1. Give a valid `id` to the `Page`, for example `Page(id="page-with-hidden-title", title="Page with hidden title", ...)`.
+2. Identify the CSS class or CSS `id` you need to target. To hide the page title, you need to hide the parent container with the id `right-header`.
+3. Use the `id` to hide the content.
+4. Add your custom css file to the `assets` folder.
+
+
+!!! example "Hide page title on selected pages"
+ === "my_css_file.css"
+ ```css
+ #page-with-hidden-title #right-header {
+ display: none;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page_one = vm.Page(
+ id="page-with-hidden-title",
+ title="Page with hidden title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ page_two = vm.Page(
+ title="Page with shown title",
+ components=[vm.Card(text="""# Placeholder""")]
+ )
+
+ dashboard = vm.Dashboard(pages=[page_one, page_two])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+```
+
+
+* **Main element with `id`:** There is a `` with our `id="custom-card"`.
+* **Parent element:** That `` is wrapped inside a parent `` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with hidden title
+ id: page-with-hidden-title
+ - components:
+ - text: |
+ # Placeholder
+ type: card
+ title: Page with shown title
+ ```
+ === "Result"
+ [![PageTitle]][PageTitle]
+
+ [PageTitle]: ../../assets/user_guides/assets/css_page_title.png
+
+
+### Overwrite CSS for selected components
+To adjust CSS properties for specific components, like altering the appearance of a selected [`Card`][vizro.models.Card] rather than all Cards,
+you need to provide an `id` to the component you want to style.
+
+Let's say we want to change the `background-color` and `color` of a specific `Card`.
+
+Here's how you can do it:
+
+1. Assign a unique `id` to the relevant `Card`, for example: `Card(id="custom-card", ...)`
+2. Run your dashboard and open it in your browser
+3. View the HTML document to find the appropriate CSS class or element you need to target, as explained in the section
+on [identifying the correct CSS selector](#identify-the-correct-css-selector).
+
+It's essential to understand the relationship between the targeted CSS class or element and the component assigned
+`id`, for example:
+
+
+```html title="HTML structure of a `Card`"
+
+
+```
+
+
+* **Main element with `id`:** There is a `
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit.
+` with our `id="custom-card"`.
+* **Parent element:** That `
` is wrapped inside a parent `
` with the class name `"card"`. This is the element we need to target to change the background color.
+* **Child element:** The card text is wrapped inside a `
` that is a child of the `
` with our `id`. This is the element we need to target to change the font color.
+
+
+!!! example "Customizing CSS properties in selective components"
+ === "my_css_file.css"
+ ```css
+ /* Apply styling to parent */
+ .card:has(#custom-card) {
+ background-color: white;
+ }
+
+ /* Apply styling to child */
+ #custom-card p {
+ color: black;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ from vizro import Vizro
+
+ page = vm.Page(
+ title="Changing the card color",
+ components=[
+ vm.Card(id="custom-card", text="""Lorem ipsum dolor sit amet consectetur adipisicing elit."""),
+ vm.Card(text="""Lorem ipsum dolor sit amet consectetur adipisicing elit.""")
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.
diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md
index 4f7217ccb..42b64737b 100755
--- a/vizro-core/docs/pages/user-guides/table.md
+++ b/vizro-core/docs/pages/user-guides/table.md
@@ -210,8 +210,10 @@ to format displayed strings automatically.
### Styling and changing the AG Grid
As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com/dash-ag-grid/reference) can be entered as keyword arguments. Below you can find
-an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable.
-There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components).
+an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but
+not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro
+component, can be customized using custom CSS. You can find information in
+the [guide to overwriting CSS properties](custom-css.md#overwrite-css-for-selected-components).
!!! example "Styled and modified Dash AG Grid"
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
index 36a708d3c..8e484adaf 100644
--- a/vizro-core/examples/scratch_dev/app.py
+++ b/vizro-core/examples/scratch_dev/app.py
@@ -1,45 +1,34 @@
"""Dev app to try things out."""
+import plotly.io as pio
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
-from vizro.models.types import capture
-df = px.data.iris()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-@capture("action")
-def my_custom_action(show_species: bool, points_data: dict):
- """Custom action."""
- clicked_point = points_data["points"][0]
- x, y = clicked_point["x"], clicked_point["y"]
- text = f"Clicked point has sepal length {x}, petal width {y}"
-
- if show_species:
- species = clicked_point["customdata"][0]
- text += f" and species {species}"
- return text
-
+iris = px.data.iris()
page = vm.Page(
- title="Action with clickData as input",
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", custom_data=["species"]),
- actions=[
- vm.Action(
- function=my_custom_action(show_species=True),
- inputs=["scatter_chart.clickData"],
- outputs=["my_card.children"],
- ),
- ],
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
- vm.Card(id="my_card", text="Click on a point on the above graph."),
],
)
dashboard = vm.Dashboard(pages=[page])
if __name__ == "__main__":
- Vizro().build(dashboard).run()
+ Vizro().build(dashboard).run(debug=False)
diff --git a/vizro-core/examples/scratch_dev/assets/css/custom.css b/vizro-core/examples/scratch_dev/assets/css/custom.css
index 9d7a156f3..b9153e86e 100644
--- a/vizro-core/examples/scratch_dev/assets/css/custom.css
+++ b/vizro-core/examples/scratch_dev/assets/css/custom.css
@@ -1,3 +1,8 @@
-* {
- font-family: "Times New Roman", Inter, sans-serif, Arial, serif;
+#page-header {
+ padding-left: 8px;
+}
+
+.page-component-container {
+ background: #1b1e2a;
+ padding: 12px;
}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/logo.svg b/vizro-core/examples/scratch_dev/assets/css/logo.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/logo.svg
rename to vizro-core/examples/scratch_dev/assets/css/logo.svg
diff --git a/vizro-core/examples/scratch_dev/yaml_version/app.py b/vizro-core/examples/scratch_dev/yaml_version/app.py
index 29258ab7a..6f84b7f59 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/app.py
+++ b/vizro-core/examples/scratch_dev/yaml_version/app.py
@@ -3,6 +3,7 @@
from pathlib import Path
import pandas as pd
+import plotly.io as pio
import vizro.plotly.express as px
import yaml
from vizro import Vizro
@@ -14,6 +15,11 @@
data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
data_manager["tips"] = px.data.tips()
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+
df_stocks_long = pd.melt(
px.data.stocks(datetimes=True),
id_vars="date",
diff --git a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
index cd2ea14b3..9fcbb602d 100644
--- a/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
+++ b/vizro-core/examples/scratch_dev/yaml_version/dashboard.yaml
@@ -1,69 +1,27 @@
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- - components:
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with value
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with aggregation
- agg_func: median
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with formatting
- value_format: ${value:.2f}
- type: figure
- - figure:
- _target_: kpi_card
- data_frame: df_kpi
- value_column: Actual
- title: KPI with icon
- icon: shopping_cart
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference (pos)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- agg_func: median
- title: KPI reference (neg)
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with formatting
- value_format: "{value:.2f}$"
- reference_format: "{delta:.2f}$ vs. last year ({reference:.2f}$)"
- type: figure
- - figure:
- _target_: kpi_card_reference
- data_frame: df_kpi
- value_column: Actual
- reference_column: Reference
- title: KPI reference with icon
- icon: shopping_cart
- type: figure
- controls:
- - column: Category
- type: filter
+ - title: "Page with subsections"
layout:
- grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
- title: KPI Indicators
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
diff --git a/vizro-core/examples/_visual-vocabulary/LICENSE.txt b/vizro-core/examples/visual-vocabulary/LICENSE.txt
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/LICENSE.txt
rename to vizro-core/examples/visual-vocabulary/LICENSE.txt
diff --git a/vizro-core/examples/_visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/README.md
rename to vizro-core/examples/visual-vocabulary/README.md
index c5f0f02c5..b56bc5430 100644
--- a/vizro-core/examples/_visual-vocabulary/README.md
+++ b/vizro-core/examples/visual-vocabulary/README.md
@@ -1,4 +1,4 @@
-# Vizro visual vocabulary
+# Visual vocabulary
### Welcome to our visual vocabulary dashboard! 🎨
@@ -101,7 +101,7 @@ The dashboard is still in development. Below is an overview of the chart types f
Contributions are welcome! To contribute a chart, follow the steps below:
-1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
+1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
@@ -111,6 +111,6 @@ Contributions are welcome! To contribute a chart, follow the steps below:
## How to run the example locally
-1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
+1. If you have `hatch` set up, run the example with the command `hatch run example visual-vocabulary`.
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
diff --git a/vizro-core/examples/_visual-vocabulary/app.py b/vizro-core/examples/visual-vocabulary/app.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/app.py
rename to vizro-core/examples/visual-vocabulary/app.py
index c63da965c..4ea56cd73 100644
--- a/vizro-core/examples/_visual-vocabulary/app.py
+++ b/vizro-core/examples/visual-vocabulary/app.py
@@ -95,7 +95,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
# work nicely with the hierarchical navigation.
dashboard = vm.Dashboard(
# ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
- title="Vizro visual vocabulary",
+ title="Visual vocabulary",
pages=[homepage, *ALL_CHART_GROUP.pages],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
diff --git a/vizro-core/examples/_visual-vocabulary/assets/app.svg b/vizro-core/examples/visual-vocabulary/assets/app.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/app.svg
rename to vizro-core/examples/visual-vocabulary/assets/app.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
similarity index 95%
rename from vizro-core/examples/_visual-vocabulary/assets/css/custom.css
rename to vizro-core/examples/visual-vocabulary/assets/css/custom.css
index 12a5d2db9..e96b472c3 100644
--- a/vizro-core/examples/_visual-vocabulary/assets/css/custom.css
+++ b/vizro-core/examples/visual-vocabulary/assets/css/custom.css
@@ -76,3 +76,7 @@ img[src*="#chart-icon"] {
.intro-text p a {
font-size: inherit;
}
+
+.intro-text ul:last-of-type {
+ margin-bottom: 0;
+}
diff --git a/vizro-core/examples/_visual-vocabulary/assets/favicon.ico b/vizro-core/examples/visual-vocabulary/assets/favicon.ico
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/favicon.ico
rename to vizro-core/examples/visual-vocabulary/assets/favicon.ico
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/arc.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/arc.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/area.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/area.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/barcode.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/barcode.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/beeswarm.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/beeswarm.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/boxplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/boxplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble-timeline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble-timeline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bullet.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bullet.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/bump.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/bump.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/butterfly.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/butterfly.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/chord.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/chord.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/choropleth.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/choropleth.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column-and-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column-and-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/connected-scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/connected-scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/correlation-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/correlation-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/cumulative-curve.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/cumulative-curve.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/diverging-stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/donut.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/donut.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/dot-plot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/dot-plot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/fan.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/fan.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/flow-map.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/flow-map.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/funnel.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/funnel.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gantt.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gantt.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/gridplot.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/gridplot.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/heatmap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/heatmap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/histogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/histogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/lollipop.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/lollipop.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/marimekko.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/marimekko.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/network.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/network.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-bubble.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-bubble.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/ordered-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/ordered-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/paired-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/paired-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/parallel-coordinates.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/parallel-coordinates.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pictogram.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pictogram.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/pie.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/pie.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/radial.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/radial.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sankey.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sankey.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter-matrix.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter-matrix.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/scatter.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/scatter.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/slope.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/slope.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/sparkline.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/sparkline.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-bar.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-bar.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stacked-column.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stacked-column.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/stepped-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/stepped-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/surplus-deficit-filled-line.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/treemap.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/treemap.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/venn.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/venn.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/violin.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/violin.svg
diff --git a/vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg b/vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/assets/images/charts/waterfall.svg
rename to vizro-core/examples/visual-vocabulary/assets/images/charts/waterfall.svg
diff --git a/vizro-core/examples/visual-vocabulary/assets/logo.svg b/vizro-core/examples/visual-vocabulary/assets/logo.svg
new file mode 100644
index 000000000..0904b87de
--- /dev/null
+++ b/vizro-core/examples/visual-vocabulary/assets/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/vizro-core/examples/_visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/chart_groups.py
rename to vizro-core/examples/visual-vocabulary/chart_groups.py
index c112fd18e..281821b78 100644
--- a/vizro-core/examples/_visual-vocabulary/chart_groups.py
+++ b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -224,6 +224,8 @@ class ChartGroup:
+
+
Created by:
- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)
diff --git a/vizro-core/examples/_visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_charts.py
rename to vizro-core/examples/visual-vocabulary/custom_charts.py
diff --git a/vizro-core/examples/_visual-vocabulary/custom_components.py b/vizro-core/examples/visual-vocabulary/custom_components.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/custom_components.py
rename to vizro-core/examples/visual-vocabulary/custom_components.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/__init__.py b/vizro-core/examples/visual-vocabulary/pages/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_factories.py b/vizro-core/examples/visual-vocabulary/pages/_factories.py
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/pages/_factories.py
rename to vizro-core/examples/visual-vocabulary/pages/_factories.py
index ea8cd76eb..06b306ff2 100644
--- a/vizro-core/examples/_visual-vocabulary/pages/_factories.py
+++ b/vizro-core/examples/visual-vocabulary/pages/_factories.py
@@ -33,7 +33,7 @@ def butterfly_factory(group: str):
Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same
parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
- within the same parameters. You can also **stack** two bars on each side To divide your
+ within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
diff --git a/vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/_pages_utils.py
rename to vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/correlation.py b/vizro-core/examples/visual-vocabulary/pages/correlation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/correlation.py
rename to vizro-core/examples/visual-vocabulary/pages/correlation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/deviation.py b/vizro-core/examples/visual-vocabulary/pages/deviation.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/deviation.py
rename to vizro-core/examples/visual-vocabulary/pages/deviation.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/distribution.py b/vizro-core/examples/visual-vocabulary/pages/distribution.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/distribution.py
rename to vizro-core/examples/visual-vocabulary/pages/distribution.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py b/vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/__init__.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/__init__.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/area.py b/vizro-core/examples/visual-vocabulary/pages/examples/area.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/area.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/area.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py b/vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/boxplot.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/boxplot.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/bubble_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/bubble_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py b/vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/butterfly.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/butterfly.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py b/vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/choropleth.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/choropleth.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/column_and_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/column_and_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/connected_scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/connected_scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/donut.py b/vizro-core/examples/visual-vocabulary/pages/examples/donut.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/donut.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/donut.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py b/vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/dot_map.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/dot_map.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py b/vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/funnel.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/funnel.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py b/vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/heatmap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/heatmap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py b/vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/histogram.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/histogram.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/line.py b/vizro-core/examples/visual-vocabulary/pages/examples/line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/magnitude_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/magnitude_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/ordered_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/ordered_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/paired_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/paired_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py b/vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/parallel_coordinates.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/parallel_coordinates.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/pie.py b/vizro-core/examples/visual-vocabulary/pages/examples/pie.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/pie.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/pie.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py b/vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/sankey.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/sankey.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py b/vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/scatter_matrix.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/scatter_matrix.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_bar.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_bar.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stacked_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stacked_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py b/vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/stepped_line.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/stepped_line.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py b/vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/time_column.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/time_column.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py b/vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/treemap.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/treemap.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/examples/violin.py b/vizro-core/examples/visual-vocabulary/pages/examples/violin.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/examples/violin.py
rename to vizro-core/examples/visual-vocabulary/pages/examples/violin.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/flow.py b/vizro-core/examples/visual-vocabulary/pages/flow.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/flow.py
rename to vizro-core/examples/visual-vocabulary/pages/flow.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/magnitude.py b/vizro-core/examples/visual-vocabulary/pages/magnitude.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/magnitude.py
rename to vizro-core/examples/visual-vocabulary/pages/magnitude.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py b/vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/part_to_whole.py
rename to vizro-core/examples/visual-vocabulary/pages/part_to_whole.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/ranking.py b/vizro-core/examples/visual-vocabulary/pages/ranking.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/ranking.py
rename to vizro-core/examples/visual-vocabulary/pages/ranking.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/spatial.py b/vizro-core/examples/visual-vocabulary/pages/spatial.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/spatial.py
rename to vizro-core/examples/visual-vocabulary/pages/spatial.py
diff --git a/vizro-core/examples/_visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
similarity index 100%
rename from vizro-core/examples/_visual-vocabulary/pages/time.py
rename to vizro-core/examples/visual-vocabulary/pages/time.py
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
similarity index 87%
rename from vizro-core/examples/_visual-vocabulary/requirements.in
rename to vizro-core/examples/visual-vocabulary/requirements.in
index f28902aea..6d95b1e4f 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.in
+++ b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -1,5 +1,5 @@
# This file is only used if you don't have hatch installed.
black==24.4.2
plotly>=5.24.0
-vizro==0.1.22
+vizro==0.1.23
gunicorn
diff --git a/vizro-core/examples/_visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
similarity index 99%
rename from vizro-core/examples/_visual-vocabulary/requirements.txt
rename to vizro-core/examples/visual-vocabulary/requirements.txt
index 6ccef1640..120aab559 100644
--- a/vizro-core/examples/_visual-vocabulary/requirements.txt
+++ b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -110,7 +110,7 @@ tzdata==2024.1
# via pandas
urllib3==2.2.2
# via requests
-vizro==0.1.22
+vizro==0.1.23
# via -r requirements.in
werkzeug==3.0.4
# via
diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
index b4a9dcb4e..019979b20 100644
--- a/vizro-core/hatch.toml
+++ b/vizro-core/hatch.toml
@@ -66,7 +66,7 @@ dependencies = [
"pip",
"mkdocs>=1.6",
"mkdocs-material",
- "mkdocs-git-revision-date-localized-plugin",
+ "mkdocs-git-revision-date-localized-plugin>=1.2.5",
"mkdocstrings[python]",
"linkchecker",
"mkdocs-pycafe"
@@ -85,10 +85,10 @@ serve = "mkdocs serve --open"
dependencies = [
"pip",
"pyyaml",
- # black is required to run the example _visual-vocabulary. This is completely independent of the black used in linting
+ # black is required to run the example visual-vocabulary. This is completely independent of the black used in linting
# our code. When this moves to HuggingFace we can remove the requirement from here.
"black==24.4.2",
- "plotly>=5.24.0" # to leverage new MapLibre features in _visual-vocabulary
+ "plotly>=5.24.0" # to leverage new MapLibre features in visual-vocabulary
]
installer = "uv"
scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
diff --git a/vizro-core/mkdocs.yml b/vizro-core/mkdocs.yml
index af1da91a8..9fcf2f01b 100644
--- a/vizro-core/mkdocs.yml
+++ b/vizro-core/mkdocs.yml
@@ -28,8 +28,9 @@ nav:
- VISUAL FORMATTING:
- Layouts: pages/user-guides/layouts.md
- Themes: pages/user-guides/themes.md
- - Assets: pages/user-guides/assets.md
- Title, header, footer: pages/user-guides/title-header-footer.md
+ - Assets: pages/user-guides/assets.md
+ - CSS: pages/user-guides/custom-css.md
- ACTIONS:
- Actions: pages/user-guides/actions.md
- DATA:
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
index e6ff674ad..93971e406 100644
--- a/vizro-core/tests/integration/test_examples.py
+++ b/vizro-core/tests/integration/test_examples.py
@@ -52,9 +52,7 @@ def dashboard(request, monkeypatch):
@pytest.mark.parametrize(
"example_path, version",
[
- # KPI example is not included as it will be moved to HuggingFace over time.
# Visual vocabulary is not included since it means installing black in the testing environment.
- # It will move to HuggingFace in due course anyway.
(examples_path / "scratch_dev", ""),
(examples_path / "scratch_dev", "yaml_version"),
(examples_path / "dev", ""),
Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - components:
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ id: custom-card
+ - text: |
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ type: card
+ title: Changing the card color
+ ```
+ === "Result"
+ [![CardCSS]][CardCSS]
+
+ [CardCSS]: ../../assets/user_guides/assets/css_change_card.png
+
+
+!!! note "Relationship between model ID and CSS ID"
+
+ Some Vizro components produce a single HTML element with an ID that matches the model ID, allowing you to target it
+ directly using the CSS #id selector. Other components generate multiple HTML elements. Within these, the "core"
+ element will have an ID matching the model ID, while non-core elements may have IDs that are variations of it,
+ such as `{model-id}-title`.
+
+ In all instances, you can determine the correct selector by using Chrome DevTools or a similar tool after setting the
+ appropriate model ID.
+
+
+## Common examples
+
+### Turn off page title
+See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
+
+### Change the background color of a card
+See the example above on [customizing CSS properties in selective components](#overwrite-css-for-selected-components).
+
+### Change the global font
+The default fonts for a Vizro app are `Inter, sans-serif, Arial, serif`.
+
+If you need to change the global font, perhaps to adhere to branding guidelines, follow these steps:
+
+1. Download the desired font from a font provider such as [Google Fonts](https://fonts.google.com/).
+2. Place the font file (`.ttf`, `woff2`, etc.) into your `assets` folder. Here’s an example of what the assets folder might look like:
+
+ 
+
+3. Add the font to your CSS file using the `@font-face` rule and apply the font globally to your Vizro app, making sure
+to specify fallback fonts. Add the following to your `custom.css` file:
+
+
+ ```css
+ @font-face {
+ font-family: PlayfairDisplay;
+ src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+ }
+
+ * {
+ font-family: PlayfairDisplay, Inter, sans-serif, Arial, serif;
+ }
+ ```
+
+
+4. Note that the modification above applies solely to the dashboard font. To also change the font within the
+Plotly charts, you must specify this at the beginning of your `app.py` file:
+
+ ```python
+ import plotly.io as pio
+
+ pio.templates["vizro_dark"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ pio.templates["vizro_light"]["layout"]["font_family"] = "PlayfairDisplay, Inter, sans-serif, Arial, serif"
+ ```
+
+### Reposition the logo
+By default, the logo appears in the top left corner of the dashboard. You can move it further to the left or right by
+adjusting the `padding` of the `#page-header` element. Here is an example of how to achieve this:
+
+```css
+#page-header {
+ padding-left: 8px;
+}
+```
+
+
+
+
+### Change the styling of a container
+If you want to make the subsections of your dashboard stand out more, you can do this by placing your components
+inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
+
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on
+[identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the
+`Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+
+!!! example "Style a container"
+ === "custom.css"
+ ```css
+ .page-component-container {
+ background: var(--surfaces-bg-card);
+ padding: 12px;
+ }
+ ```
+ === "app.py"
+ ```py
+ import vizro.models as vm
+ import vizro.plotly.express as px
+ from vizro import Vizro
+
+ iris = px.data.iris()
+
+ page = vm.Page(
+ title="Page with subsections",
+ layout=vm.Layout(grid=[[0, 1]]),
+ components=[
+ vm.Container(
+ title="Container I",
+ components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))]
+ ),
+ vm.Container(
+ title="Container II",
+ components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))]
+ )
+ ],
+ )
+
+ dashboard = vm.Dashboard(pages=[page])
+ Vizro().build(dashboard).run()
+ ```
+
+ Run and edit this code in Py.Cafe
+
+ === "app.yaml"
+ ```yaml
+ # Still requires a .py to add data to the data manager and parse YAML configuration
+ # See yaml_version example
+ pages:
+ - title: "Page with subsections"
+ layout:
+ grid: [[0, 1]]
+ components:
+ - type: container
+ title: "Container I"
+ components:
+ - type: graph
+ figure:
+ _target_: scatter
+ data_frame: iris
+ x: sepal_width
+ y: sepal_length
+ color: species
+ - type: container
+ title: "Container II"
+ components:
+ - type: graph
+ figure:
+ _target_: box
+ data_frame: iris
+ x: species
+ y: sepal_length
+ color: species
+ ```
+ === "Result"
+ [![StyleContainer]][StyleContainer]
+
+ [StyleContainer]: ../../assets/user_guides/custom_css/style-container.png
+
+You will notice that the background colors of the charts are different. To align it with the colors of the container,
+you can make the charts' background transparent.
+
+To make the background of all charts transparent:
+
+```py
+import plotly.io as pio
+
+pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
+```
+
+To make the background of selected charts transparent:
+
+```py
+@capture(graph)
+def custom_chart(data_frame):
+ ...
+ fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
+ return fig
+```
+
+
diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md
index 6280b735d..cea73d4d8 100644
--- a/vizro-core/docs/pages/user-guides/run.md
+++ b/vizro-core/docs/pages/user-guides/run.md
@@ -6,7 +6,7 @@ This guide shows you how to launch your dashboard in different ways. By default,
The easiest way to launch your dashboard is to edit the code live on [Py.Cafe](https://py.cafe/).
-Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This will lead you to an editor such as the one below, which displays the dashboard and the code side by side.
+Most of our examples have a link below the code, [Run and edit this code in Py.Cafe](https://py.cafe/vizro-official/vizro-iris-analysis), which you can follow to experiment with the code. This opens an editor such as the one below, which displays the dashboard and the code side by side.