Merge branch 'main' into docs/vizro-ai/update-various-docs-pages

vizro-core/changelog.d/20241118_113651_huong_li_nguyen_button_alignment.md

@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Added
+
+- Enable `href` inside `vm.Button`. ([#881](https://github.com/mckinsey/vizro/pull/881))
+
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/changelog.d/20241119_155853_huong_li_nguyen_add_bs_tooltip_styling.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/docs/pages/explanation/authors.md

@@ -47,6 +47,7 @@ Natalia Kurakina,
 [Hilary Ivy](https://github.com/hxe00570),
 [Jasmine Wu](https://github.com/jazwu),
 [njmcgrat](https://github.com/njmcgrat),
+[Jenelle Yonkman](https://github.com/yonkmanjl),
 [ataraexia](https://github.com/ataraexia)
 
 with thanks to Sam Bourton and Kevin Staight for sponsorship, inspiration and guidance,

vizro-core/docs/pages/user-guides/card-button.md

@@ -482,9 +482,12 @@ img[src*="#my-image"] {
 
 ### Create a navigation card
 
-This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation card. To configure the navigation panel on the left hand side of the screen, refer to the [guide on navigation](navigation.md).
+This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation card,
+enabling users to navigate to another page by clicking on the card area.
 
-A navigation card enables you to navigate to a different page via a click on the card area.
+For a button-style link navigation component, see the [separate guide on creating a link button](#create-a-link-button).
+To configure the navigation panel on the left hand side of the screen, refer to the
+[separate guide on navigation](navigation.md).
 
 To create a navigation card:
 
@@ -587,21 +590,70 @@ For detailed examples on how to create a KPI card, refer to the [figure user gui
 
 ## Buttons
 
-To enhance dashboard interactions, you can use the [`Button`][vizro.models.Button] component to trigger any pre-defined
-action functions such as exporting chart data. To use the currently available options for the [`Actions`][vizro.models.Action]
-component, check out the [API reference][vizro.actions].
+The Button component is commonly used for interactive dashboard interactions
+such as form submissions, navigation links, and other action triggers.
 
 To add a [`Button`][vizro.models.Button], insert it into the `components` argument of the
 [`Page`][vizro.models.Page].
 
-You can configure the `text` argument to alter the display text of the [`Button`][vizro.models.Button] and the
-`actions` argument to define which action function should be executed on button click.
 
-In the below example we show how to configure a button to export the filtered data of a target chart using
-[export_data][vizro.actions.export_data], a pre-defined action function.
+### Customize button text
 
+You can configure the `text` argument to alter the display text of the [`Button`][vizro.models.Button].
 
-!!! example "Button"
+!!! example "Customize text"
+
+    === "app.py"
+        ```{.python pycafe-link}
+        import vizro.models as vm
+        from vizro import Vizro
+
+        page = vm.Page(
+            title="Button with text",
+            components=[vm.Button(text="I'm a button!")],
+        )
+
+        dashboard = vm.Dashboard(pages=[page])
+        Vizro().build(dashboard).run()
+        ```
+    === "app.yaml"
+        ```yaml
+        # Still requires a .py to add data to the data manager and parse YAML configuration
+        # See from_yaml example
+        pages:
+          - components:
+            - type: button
+              text: I'm a button!
+            title: Button with text
+        ```
+    === "Result"
+        [![ButtonText]][ButtonText]
+
+    [ButtonText]: ../../assets/user_guides/components/button_text.png
+
+
+### Create a link button
+
+To navigate to a different page using a button with an anchor tag, assign an absolute or relative URL to the
+`Button.href`.
+
+```python
+import vizro.models as vm
+
+vm.Button(text="Leave us a star! ⭐", href="https://github.com/mckinsey/vizro")
+```
+
+### Attach an action
+
+You can use the [`Button`][vizro.models.Button] to trigger predefined action functions, such as exporting data.
+To explore the available options for [`Actions`][vizro.models.Action], refer to our [API reference][vizro.actions].
+Use the `Button.actions` argument to specify which action function executes when the button is clicked.
+
+The example below demonstrates how to configure a button to export the filtered data of a target chart using the
+[export_data][vizro.actions.export_data] action function.
+
+
+!!! example "Button with action"
 
     === "app.py"
         ```{.python pycafe-link}
@@ -681,6 +733,7 @@ In the below example we show how to configure a button to export the filtered da
 
     [Button]: ../../assets/user_guides/components/button.png
 
+### Use as a control
 The [`Button`][vizro.models.Button] component is currently reserved to be used inside the main panel (right-side) of the dashboard.
 However, there might be use cases where one would like to place the `Button` inside the control panel (left-side) with the other controls.
 

vizro-core/examples/scratch_dev/app.py

@@ -5,40 +5,42 @@
 import vizro.plotly.express as px
 from vizro import Vizro
 from vizro._themes._color_values import COLORS
+import dash_bootstrap_components as dbc
+from dash import html
+
+from typing import Literal
+
+from dash import html
+
+import vizro.models as vm
+from vizro import Vizro
+
+
+class Tooltip(vm.VizroBaseModel):
+    type: Literal["tooltip"] = "tooltip"
+    text: str = "This is a tooltip"
+
+    def build(self):
+        return html.Div(
+            [
+                dbc.Button("Button", id=f"{self.id}-tooltip-target"),
+                dbc.Tooltip(
+                    self.text,
+                    target=f"{self.id}-tooltip-target",
+                    is_open=True,
+                ),
+            ]
+        )
 
-pastry = pd.DataFrame(
-    {
-        "pastry": [
-            "Scones",
-            "Bagels",
-            "Muffins",
-            "Cakes",
-            "Donuts",
-            "Cookies",
-            "Croissants",
-            "Eclairs",
-            "Brownies",
-            "Tarts",
-            "Macarons",
-            "Pies",
-        ],
-        "Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07],
-    }
-)
 
+vm.Page.add_type("components", Tooltip)
 
 page = vm.Page(
-    title="Charts UI",
+    title="Custom Component",
     components=[
-        vm.Graph(
-            figure=px.bar(
-                pastry.sort_values("Profit Ratio"),
-                orientation="h",
-                x="Profit Ratio",
-                y="pastry",
-                color="Profit Ratio",
-                color_continuous_scale=COLORS["DIVERGING_RED_CYAN"],
-            ),
+        Tooltip(text="Tooltip label"),
+        Tooltip(
+            text="Max. width of tooltip should not exceed 180px - this instance should be used for multiple lines of text for increased legibility."
         ),
     ],
 )

vizro-core/examples/visual-vocabulary/README.md

@@ -70,7 +70,7 @@ The dashboard is still in development. Below is an overview of the chart types f
 | Correlation matrix    | ❌   | Correlation              |                                                                                                                                 |                                                                                                                                                                                                 |
 | Histogram             | ✅   | Distribution             | [Histograms with px](https://plotly.com/python/histograms/)                                                                     | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram)                                                                                                      |
 | Line                  | ✅   | Time                     | [Line plot with px](https://plotly.com/python/line-charts/)                                                                     | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line)                                                                                                                |
-| Lollipop              | ❌   | Ranking, Magnitude       |                                                                                                                                 |                                                                                                                                                                                                 |
+| Lollipop              | ✅   | Ranking, Magnitude       | [Lollipop & Dumbbell Charts with Plotly](https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85)       | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter)                                                                                                          |
 | Marimekko             | ❌   | Magnitude, Part-to-whole |                                                                                                                                 |                                                                                                                                                                                                 |
 | Network               | ❌   | Flow                     |                                                                                                                                 |                                                                                                                                                                                                 |
 | Ordered bar           | ✅   | Ranking                  | [Bar chart with px](https://plotly.com/python/bar-charts/)                                                                      | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html)                                                                                                             |

vizro-core/examples/visual-vocabulary/assets/css/custom.css

@@ -34,9 +34,7 @@ img[src*="#chart-icon"] {
   position: relative;
 }
 
-.code-clipboard-container .pycafe-link,
-.code-clipboard-container .pycafe-link:focus {
-  line-height: unset;
+.code-clipboard-container .pycafe-link {
   margin-bottom: 12px;
 }
 

vizro-core/examples/visual-vocabulary/chart_groups.py

@@ -81,7 +81,6 @@ class ChartGroup:
     incomplete_pages=[
         IncompletePage("Ordered bubble"),
         IncompletePage("Slope"),
-        IncompletePage("Lollipop"),
         IncompletePage("Bump"),
     ],
     icon="Stacked Bar Chart",
@@ -117,7 +116,6 @@ class ChartGroup:
     pages=pages.magnitude.pages,
     incomplete_pages=[
         IncompletePage("Marimekko"),
-        IncompletePage("Lollipop"),
         IncompletePage("Pictogram"),
         IncompletePage("Bullet"),
         IncompletePage("Radial"),

vizro-core/examples/visual-vocabulary/custom_charts.py

@@ -310,3 +310,51 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure:
         fig.add_hline(y=0, line_width=2, line_color="grey")
 
     return fig
+
+
+@capture("graph")
+def lollipop(data_frame: pd.DataFrame, **kwargs):
+    """Creates a lollipop based on px.scatter.
+
+    A lollipop chart is a variation of a bar chart where each data point is represented by a line and a dot at the end
+    to mark the value.
+
+    Inspired by: https://towardsdatascience.com/lollipop-dumbbell-charts-with-plotly-696039d5f85
+
+    Args:
+        data_frame: DataFrame for the chart. Can be long form or wide form.
+            See https://plotly.com/python/wide-form/.
+        **kwargs: Keyword arguments to pass into px.scatter (e.g. x, y, labels).
+            See https://plotly.com/python-api-reference/generated/plotly.scatter.html.
+
+    Returns:
+        go.Figure: Lollipop chart.
+    """
+    # Plots the dots of the lollipop chart
+    fig = px.scatter(data_frame, **kwargs)
+
+    # Enables the orientation of the chart to be either horizontal or vertical
+    orientation = fig.data[0].orientation
+    x_or_y = "x" if orientation == "h" else "y"
+    y_or_x = "y" if orientation == "h" else "x"
+
+    # Plots the lines of the lollipop chart
+    for x_or_y_value, y_or_x_value in zip(fig.data[0][x_or_y], fig.data[0][y_or_x]):
+        fig.add_trace(go.Scatter({x_or_y: [0, x_or_y_value], y_or_x: [y_or_x_value, y_or_x_value], "mode": "lines"}))
+
+    # Styles the lollipop chart and makes it uni-colored
+    fig.update_traces(
+        marker_size=12,
+        line_width=3,
+        line_color=fig.layout.template.layout.colorway[0],
+    )
+
+    fig.update_layout(
+        {
+            "showlegend": False,
+            f"{x_or_y}axis_showgrid": True,
+            f"{y_or_x}axis_showgrid": False,
+            f"{x_or_y}axis_rangemode": "tozero",
+        },
+    )
+    return fig