Get dynamic Card working quickly

vizro-core/examples/_dev/app.py

@@ -10,7 +10,7 @@
 from dash import html
 from vizro import Vizro
 from vizro.models.types import capture
-
+from vizro.cards import kpi_card
 iris_df = px.data.iris()
 
 # Open questions -------
@@ -74,7 +74,7 @@ def build(self):
 
 page = vm.Page(
     title="Table Page",
-    layout=vm.Layout(grid=[[0, 1]] + [[-1, -1]] * 3),
+    layout=vm.Layout(grid=[[0, 1, 2]] + [[-1, -1, -1]] * 3),
     components=[
         vm.Graph(
             id="kpi-total",
@@ -85,12 +85,9 @@ def build(self):
             ),
         ),
         CustomKPI(
-            title="Total Complaints",
-            value="75.513",
-            icon="arrow_circle_up",
-            sign="up",
-            ref_value="5.5% vs. Last Year"
+            title="Total Complaints", value="75.513", icon="arrow_circle_up", sign="up", ref_value="5.5% vs. Last Year"
         ),
+        vm.Card(figure=kpi_card(iris_df, value="sepal_width", title="Sepal Width AVG")),
     ],
     controls=[vm.Filter(column="species")],
 )

vizro-core/examples/_dev/assets/css/custom.css

@@ -17,8 +17,8 @@
 }
 
 .card .card-title {
-  height: 100%;
   font-size: 1.4rem;
+  height: 100%;
 }
 
 .card .card-value {

vizro-core/src/vizro/cards/__init__.py

@@ -0,0 +1,4 @@
+from vizro.cards._cards import kpi_card, nav_card, text_card
+
+# Please keep alphabetically ordered
+__all__ = ["text_card", "nav_card", "kpi_card"]

vizro-core/src/vizro/cards/_cards.py

@@ -0,0 +1,42 @@
+"""Module containing the standard implementation of `dash_table.DataTable`."""
+
+import dash_bootstrap_components as dbc
+import pandas as pd
+from dash import dash_table, dcc, get_relative_path, html
+
+from vizro.models.types import capture
+
+# A few issues:
+# The data frame is not used in the function, but needs to be provided here
+# id is usually attached to Card.text
+
+
+@capture("card")
+def text_card(data_frame: pd.DataFrame, text: str) -> dash_table.DataTable:
+    """Static text card."""
+    return dbc.Card(dcc.Markdown(text, dangerously_allow_html=False))  # id should be given to text component
+
+
+@capture("card")
+def nav_card(data_frame: pd.DataFrame, text: str, href: str) -> dash_table.DataTable:
+    """Static text card."""
+    return dbc.Card(
+        dbc.NavLink(
+            dcc.Markdown(text, dangerously_allow_html=False),
+            href=get_relative_path(href) if href.startswith("/") else href,
+        ),
+        className="card-nav",
+    )
+
+
+@capture("card")
+def kpi_card(data_frame: pd.DataFrame, title: str, value: str) -> dash_table.DataTable:
+    """Static text card."""
+    value = data_frame[value].sum()
+
+    return dbc.Card(
+        [
+            html.H4(title, className="card-title"),
+            html.P(value, className="card-value"),
+        ],
+    )

vizro-core/src/vizro/models/_components/card.py

@@ -1,15 +1,18 @@
 from typing import Literal
 
-import dash_bootstrap_components as dbc
-from dash import dcc, get_relative_path
+from dash import dcc, html
 
 try:
-    from pydantic.v1 import Field
+    from pydantic.v1 import Field, PrivateAttr, validator
 except ImportError:  # pragma: no cov
-    from pydantic import Field
+    from pydantic import Field, PrivateAttr, validator
 
+import vizro.cards as vc
+from vizro.managers import data_manager
 from vizro.models import VizroBaseModel
+from vizro.models._components._components_utils import _callable_mode_validator_factory, _process_callable_data_frame
 from vizro.models._models_utils import _log_call
+from vizro.models.types import CapturedCallable
 
 
 class Card(VizroBaseModel):
@@ -24,25 +27,34 @@ class Card(VizroBaseModel):
     """
 
     type: Literal["card"] = "card"
+    figure: CapturedCallable = Field(..., import_path=vc, description="Dynamic Card to be visualized on dashboard")
     text: str = Field(
-        ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec."
+        "", description="Markdown string to create card title/text that should adhere to the CommonMark Spec."
     )
     href: str = Field(
         "",
         description="URL (relative or absolute) to navigate to. If not provided the Card serves as a text card only.",
     )
 
+    # Component properties for actions and interactions
+    _output_component_property: str = PrivateAttr("children")
+
+    # Validators
+    _validate_callable_mode = _callable_mode_validator_factory("card")
+    _validate_callable = validator("figure", allow_reuse=True, always=True)(_process_callable_data_frame)
+
+    def __call__(self, **kwargs):
+        kwargs.setdefault("data_frame", data_manager[self["data_frame"]].load())
+        figure = self.figure(**kwargs)
+        return figure
+
+    def __getitem__(self, arg_name: str):
+        # pydantic discriminated union validation seems to try Graph["type"], which throws an error unless we
+        # explicitly redirect it to the correct attribute.
+        if arg_name == "type":
+            return self.type
+        return self.figure[arg_name]
+
     @_log_call
     def build(self):
-        text = dcc.Markdown(self.text, dangerously_allow_html=False, id=self.id)
-        card_content = (
-            dbc.NavLink(
-                text,
-                href=get_relative_path(self.href) if self.href.startswith("/") else self.href,
-            )
-            if self.href
-            else text
-        )
-
-        card_class = "card-nav" if self.href else ""
-        return dbc.Card(card_content, className=card_class)
+        return dcc.Loading(html.Div(self.__call__(), id=self.id), color="grey", parent_className="loading-container")

vizro-core/src/vizro/models/types.py

@@ -248,7 +248,7 @@ class capture:
 
     """
 
-    def __init__(self, mode: Literal["graph", "action", "table", "ag_grid"]):
+    def __init__(self, mode: Literal["graph", "action", "table", "ag_grid", "card"]):
         """Decorator to capture a function call. Valid modes are "graph", "table", "action" and "ag_grid"."""
         self._mode = mode
 
@@ -304,7 +304,7 @@ def wrapped(*args, **kwargs):
                 return captured_callable
 
             return wrapped
-        elif self._mode in ["table", "ag_grid"]:
+        elif self._mode in ["table", "ag_grid", "card"]:
 
             @functools.wraps(func)
             def wrapped(*args, **kwargs):