Add examples to feature dashboard

mckinsey · Jun 20, 2024 · 6d75afb · 6d75afb
1 parent a6e58f4
commit 6d75afb
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 31 deletions.
diff --git a/vizro-core/examples/features/app.py b/vizro-core/examples/features/app.py
@@ -11,7 +11,7 @@
 from dash import dash_table, dcc, html
 from vizro import Vizro
 from vizro.actions import export_data, filter_interaction
-from vizro.figures import kpi_card
+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
 
@@ -41,6 +41,63 @@
     }
 )
 
+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",
+    ),
+]
+
+page = 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")],
+)
+
 
 # HOME ------------------------------------------------------------------------
 home = vm.Page(
@@ -198,21 +255,12 @@
 
 figure = vm.Page(
     title="Figure",
-    layout=vm.Layout(grid=[[0, -1, -1, -1]] + [[-1, -1, -1, -1]] * 4),
-    components=[
-        vm.Figure(
-            figure=kpi_card(
-                data_frame=tips,
-                value_column="tip",
-                value_format="${value:.2f}",
-                icon="shopping_cart",
-                title="KPI Card I",
-            )
-        )
-    ],
-    controls=[vm.Filter(column="day", selector=vm.RadioItems())],
+    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]]),

diff --git a/vizro-core/examples/features/assets/css/custom.css b/vizro-core/examples/features/assets/css/custom.css
@@ -2,18 +2,18 @@
   padding-left: 8px;
 }
 
-.multiple-cards-container {
+#my-figure .multiple-cards-container {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
 }
 
-.figure-container {
+#my-figure.figure-container {
   height: unset;
   width: unset;
 }
 
-.figure-container .card {
+#my-figure.figure-container .card {
   height: 210px;
   width: 240px;
 }
diff --git a/vizro-core/examples/features/yaml_version/app.py b/vizro-core/examples/features/yaml_version/app.py
@@ -2,6 +2,7 @@
 
 from pathlib import Path
 
+import pandas as pd
 import vizro.plotly.express as px
 import yaml
 from vizro import Vizro
@@ -12,6 +13,9 @@
 data_manager["tips"] = px.data.tips()
 data_manager["stocks"] = px.data.stocks(datetimes=True)
 data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
+data_manager["df_kpi"] = pd.DataFrame(
+    {"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]}
+)
 
 dashboard = yaml.safe_load(Path("dashboard.yaml").read_text(encoding="utf-8"))
 dashboard = Dashboard(**dashboard)

diff --git a/vizro-core/examples/features/yaml_version/dashboard.yaml b/vizro-core/examples/features/yaml_version/dashboard.yaml
@@ -133,26 +133,68 @@ pages:
   - components:
       - figure:
           _target_: kpi_card
-          data_frame: tips
-          value_column: tip
+          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
-          title: KPI Card I
         type: figure
     controls:
-      - column: day
+      - column: Category
         type: filter
-        selector:
-          type: radio_items
     layout:
-      grid:
-        [
-          [0, -1, -1, -1],
-          [-1, -1, -1, -1],
-          [-1, -1, -1, -1],
-          [-1, -1, -1, -1],
-          [-1, -1, -1, -1],
-        ]
+      grid: [[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]
     title: Figure
   - components:
       - figure: