Update version

- Update vizro version
- Update app configuration to sync with repo
- Update CSS variable names

app.py

@@ -1,16 +1,17 @@
 """Example app to show all features of Vizro."""
 
 from time import sleep
-from typing import List, Literal, Optional
+from typing import Literal, Optional
 
+import dash_bootstrap_components as dbc
 import pandas as pd
 import plotly.graph_objects as go
 import vizro.models as vm
 import vizro.plotly.express as px
-from dash import dash_table, html, get_asset_url
-import dash_bootstrap_components as dbc
+from dash import dash_table, dcc, get_asset_url, html
 from vizro import Vizro
 from vizro.actions import export_data, filter_interaction
+from vizro.figures import kpi_card, kpi_card_reference
 from vizro.models.types import capture
 from vizro.tables import dash_ag_grid, dash_data_table
 
@@ -26,6 +27,70 @@ waterfall_df = pd.DataFrame(
         "y": [60, 80, 0, -40, -20, 0],
     }
 )
+custom_fig_df = pd.DataFrame(
+    {
+        "text": [
+            "Lorem ipsum dolor sit amet, consetetur sadipscing no sea elitr sed diam nonumy.",
+            "Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.",
+            "Sed diam voluptua. At vero eos et accusam et justo no duo dolores et ea rebum.",
+            "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+            "Lorem ipsum dolor sit amet, consetetur sadipscing no sea est elitr dolor sit amet.",
+            "Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.",
+        ]
+        * 2
+    }
+)
+
+df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
+
+example_cards = [
+    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
+    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with aggregation", agg_func="median"),
+    kpi_card(
+        data_frame=df_kpi,
+        value_column="Actual",
+        title="KPI with formatting",
+        value_format="${value:.2f}",
+    ),
+    kpi_card(
+        data_frame=df_kpi,
+        value_column="Actual",
+        title="KPI with icon",
+        icon="shopping_cart",
+    ),
+]
+
+example_reference_cards = [
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        title="KPI reference (pos)",
+    ),
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        agg_func="median",
+        title="KPI reference (neg)",
+    ),
+    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}$)",
+    ),
+    kpi_card_reference(
+        data_frame=df_kpi,
+        value_column="Actual",
+        reference_column="Reference",
+        title="KPI reference with icon",
+        icon="shopping_cart",
+    ),
+]
+
 
 # HOME ------------------------------------------------------------------------
 home = vm.Page(
@@ -38,7 +103,7 @@ home = vm.Page(
 
                 ### Components
 
-                Main components of Vizro include **charts**, **tables**, **cards**, **containers**,
+                Main components of Vizro include **charts**, **tables**, **cards**, **figures**, **containers**,
                 **buttons** and **tabs**.
                 """,
             href="/graphs",
@@ -91,35 +156,42 @@ graphs = vm.Page(
     title="Graphs",
     components=[
         vm.Graph(
-            figure=px.scatter_matrix(
-                iris,
-                dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"],
-                color="species",
-            )
-        )
+            figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"),
+            title="Relationships between Sepal Width and Sepal Length",
+            header="""
+                Each point in the scatter plot represents one of the 150 iris flowers, with colors indicating their
+                types. The Setosa type is easily identifiable by its short and wide sepals.
+
+                However, there is still overlap between the Versicolor and Virginica types when considering only sepal
+                width and length.
+                """,
+            footer="""SOURCE: **Plotly iris data set, 2024**""",
+        ),
     ],
-    controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
 )
 
 ag_grid = vm.Page(
     title="AG Grid",
     components=[
         vm.AgGrid(
-            title="Dash AG Grid", figure=dash_ag_grid(data_frame=gapminder_2007, dashGridOptions={"pagination": True})
+            figure=dash_ag_grid(data_frame=gapminder_2007, dashGridOptions={"pagination": True}),
+            title="Gapminder Data Insights",
+            header="""#### An Interactive Exploration of Global Health, Wealth, and Population""",
+            footer="""SOURCE: **Plotly gapminder data set, 2024**""",
         )
     ],
-    controls=[vm.Filter(column="continent")],
 )
 
 table = vm.Page(
     title="Table",
     components=[
         vm.Table(
-            title="Dash DataTable",
             figure=dash_data_table(data_frame=gapminder_2007),
+            title="Gapminder Data Insights",
+            header="""#### An Interactive Exploration of Global Health, Wealth, and Population""",
+            footer="""SOURCE: **Plotly gapminder data set, 2024**""",
         )
     ],
-    controls=[vm.Filter(column="continent")],
 )
 
 cards = vm.Page(
@@ -181,6 +253,14 @@ cards = vm.Page(
     ],
 )
 
+figure = vm.Page(
+    title="Figure",
+    layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
+    components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
+    controls=[vm.Filter(column="Category")],
+)
+
+
 button = vm.Page(
     title="Button",
     layout=vm.Layout(grid=[[0], [0], [0], [0], [1]]),
@@ -465,7 +545,7 @@ def scatter_with_line(data_frame, x, y, hline=None, title=None):
 
 
 @capture("graph")
-def waterfall(data_frame, measure, x, y, text, title=None):  # noqa: PLR0913
+def waterfall(data_frame, measure, x, y, text, title=None):
     """Custom waterfall chart based on go."""
     fig = go.Figure()
     fig.add_traces(
@@ -521,15 +601,15 @@ custom_charts = vm.Page(
 
 # CUSTOM TABLE ------------------------------------------------------------------
 @capture("table")
-def my_custom_table(data_frame=None, chosen_columns: Optional[List[str]] = None):
+def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None):
     """Custom table with added logic to filter on chosen columns."""
     columns = [{"name": i, "id": i} for i in chosen_columns]
     defaults = {
         "style_as_list_view": True,
-        "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+        "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
         "style_header": {
-            "border_bottom": "1px solid var(--state-overlays-selected-hover)",
-            "border_top": "1px solid var(--main-container-bg-color)",
+            "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
+            "border_top": "1px solid var(--right-side-bg)",
             "height": "32px",
         },
     }
@@ -654,11 +734,51 @@ custom_actions = vm.Page(
     controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
 )
 
+
+# CUSTOM FIGURE ----------------------------------------------------------------
+@capture("figure")  # (1)!
+def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.Div:
+    """Creates a list with a variable number of `vm.Card` components from the provided data_frame.
+
+    Args:
+        data_frame: Data frame containing the data.
+        n_rows: Number of rows to use from the data_frame. Defaults to 1.
+
+    Returns:
+        html.Div with a list of dbc.Card objects generated from the data.
+
+    """
+    texts = data_frame.head(n_rows)["text"]
+    return html.Div(
+        [dbc.Card(dcc.Markdown(f"### Card #{i}\n{text}")) for i, text in enumerate(texts, 1)],
+        className="multiple-cards-container",
+    )
+
+
+custom_figures = vm.Page(
+    title="Custom Figures",
+    components=[vm.Figure(id="my-figure", figure=multiple_cards(data_frame=custom_fig_df))],
+    controls=[
+        vm.Parameter(
+            targets=["my-figure.n_rows"],
+            selector=vm.Slider(min=2, max=12, step=2, value=8, title="Number of cards to display"),
+        ),
+    ],
+)
+
+kpi_indicators = vm.Page(
+    title="KPI Indicators",
+    layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
+    components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
+    controls=[vm.Filter(column="Category")],
+)
+
+
 # DASHBOARD -------------------------------------------------------------------
-components = [graphs, ag_grid, table, cards, button, containers, tabs]
+components = [graphs, ag_grid, table, cards, figure, button, containers, tabs]
 controls = [filters, parameters, selectors]
 actions = [export_data_action, chart_interaction]
-extensions = [custom_charts, custom_tables, custom_components, custom_actions]
+extensions = [custom_charts, custom_tables, custom_components, custom_actions, custom_figures]
 
 dashboard = vm.Dashboard(
     title="Vizro Features",
@@ -670,10 +790,25 @@ dashboard = vm.Dashboard(
                 vm.NavLink(
                     label="Features",
                     pages={
-                        "Components": ["Graphs", "AG Grid", "Table", "Cards", "Button", "Containers", "Tabs"],
+                        "Components": [
+                            "Graphs",
+                            "AG Grid",
+                            "Table",
+                            "Cards",
+                            "Figure",
+                            "Button",
+                            "Containers",
+                            "Tabs",
+                        ],
                         "Controls": ["Filters", "Parameters", "Selectors"],
                         "Actions": ["Export data", "Chart interaction"],
-                        "Extensions": ["Custom Charts", "Custom Tables", "Custom Components", "Custom Actions"],
+                        "Extensions": [
+                            "Custom Charts",
+                            "Custom Tables",
+                            "Custom Components",
+                            "Custom Actions",
+                            "Custom Figures",
+                        ],
                     },
                     icon="Library Add",
                 ),
@@ -682,17 +817,16 @@ dashboard = vm.Dashboard(
     ),
 )
 
-app = Vizro().build(dashboard)
-app.dash.layout.children.append(
-    dbc.NavLink(
-        ["Made with ", html.Img(src=get_asset_url("images/logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
-        href="https://github.com/mckinsey/vizro",
-        target="_blank",
-        external_link=True,
-        className="anchor-container",
-    )
-)
-server = app.dash.server
 
-if __name__ == "__main__":  
+if __name__ == "__main__":
+    app = Vizro().build(dashboard)
+    app.dash.layout.children.append(
+        dbc.NavLink(
+            ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+            href="https://github.com/mckinsey/vizro",
+            target="_blank",
+            className="anchor-container",
+        )
+    )
+    server = app.dash.server
     app.run()

assets/css/custom.css

@@ -2,12 +2,28 @@
   padding-left: 8px;
 }
 
+#my-figure .multiple-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+#my-figure.figure-container {
+  height: unset;
+  width: unset;
+}
+
+#my-figure.figure-container .card {
+  height: 210px;
+  width: 240px;
+}
+
 .anchor-container {
   align-items: center;
   background: var(--text-primary);
   border-top-left-radius: 8px;
   bottom: 0;
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
   display: flex;
   font-size: 0.8rem;
   font-weight: 500;
@@ -20,7 +36,7 @@
 .anchor-container:focus,
 .anchor-container:hover {
   background: var(--text-secondary);
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
 }
 
 img#banner {

requirements.in

@@ -1,3 +1,4 @@
+# This file is only used if you don't have hatch installed.
 gunicorn
 openpyxl
-vizro
+vizro==0.1.28

requirements.txt

@@ -2,17 +2,23 @@
 #    uv pip compile requirements.in -o requirements.txt
 annotated-types==0.7.0
     # via pydantic
+autoflake==2.3.1
+    # via vizro
+black==24.4.2
+    # via vizro
 blinker==1.8.2
     # via flask
 cachelib==0.9.0
     # via flask-caching
-certifi==2024.7.4
+certifi==2024.8.30
     # via requests
-charset-normalizer==3.3.2
+charset-normalizer==3.4.0
     # via requests
 click==8.1.7
-    # via flask
-dash==2.17.1
+    # via
+    #   black
+    #   flask
+dash==2.18.1
     # via
     #   dash-ag-grid
     #   dash-bootstrap-components
@@ -29,7 +35,7 @@ dash-mantine-components==0.12.1
     # via vizro
 dash-table==5.0.0
     # via dash
-et-xmlfile==1.1.0
+et-xmlfile==2.0.0
     # via openpyxl
 flask==3.0.3
     # via
@@ -39,75 +45,86 @@ flask-caching==2.3.0
     # via vizro
 gunicorn==23.0.0
     # via -r requirements.in
-idna==3.7
+idna==3.10
     # via requests
-importlib-metadata==8.4.0
-    # via dash
+importlib-metadata==8.5.0
+    # via
+    #   dash
+    #   flask
 itsdangerous==2.2.0
     # via flask
 jinja2==3.1.4
     # via flask
-markupsafe==2.1.5
+markupsafe==3.0.2
     # via
     #   jinja2
     #   werkzeug
+mypy-extensions==1.0.0
+    # via black
 nest-asyncio==1.6.0
     # via dash
-numpy==2.1.0
-    # via
-    #   pandas
-    #   vizro
+numpy==2.0.2
+    # via pandas
 openpyxl==3.1.5
     # via -r requirements.in
 packaging==24.1
     # via
+    #   black
     #   gunicorn
     #   plotly
-pandas==2.2.2
+pandas==2.2.3
     # via vizro
-plotly==5.23.0
-    # via dash
-pydantic==2.8.2
+pathspec==0.12.1
+    # via black
+platformdirs==4.2.2
+    # via black
+plotly==5.24.1
+    # via
+    #   dash
+    #   vizro
+pydantic==2.9.2
     # via vizro
-pydantic-core==2.20.1
+pydantic-core==2.23.4
     # via pydantic
+pyflakes==3.2.0
+    # via autoflake
 python-dateutil==2.9.0.post0
     # via pandas
-pytz==2024.1
+pytz==2024.2
     # via pandas
 requests==2.32.3
     # via dash
 retrying==1.3.4
     # via dash
-ruff==0.6.1
-    # via vizro
-setuptools==73.0.1
-    # via
-    #   dash
-    #   vizro
+setuptools==75.3.0
+    # via dash
 six==1.16.0
     # via
     #   python-dateutil
     #   retrying
 tenacity==9.0.0
     # via plotly
+tomli==2.1.0
+    # via
+    #   autoflake
+    #   black
 typing-extensions==4.12.2
     # via
+    #   black
     #   dash
     #   pydantic
     #   pydantic-core
-tzdata==2024.1
+tzdata==2024.2
     # via pandas
-urllib3==2.2.2
+urllib3==2.2.3
     # via requests
-vizro==0.1.20
+vizro==0.1.28
     # via -r requirements.in
-werkzeug==3.0.4
+werkzeug==3.0.6
     # via
     #   dash
     #   flask
-    #   vizro
 wrapt==1.16.0
     # via vizro
-zipp==3.20.0
+zipp==3.20.2
     # via importlib-metadata