Refine and leave some comments

vizro-core/examples/_dev/app.py

@@ -1,20 +1,23 @@
 """Dev app to try things out."""
 
-import numpy as np
+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 html
 from vizro import Vizro
-from vizro.tables import dash_data_table
 from vizro.models.types import capture
-import pandas as pd
-import plotly.graph_objects as go
-
-from typing import Optional, Literal
-from dash import html, dcc
-import dash_bootstrap_components as dbc
 
 iris_df = px.data.iris()
 
+# Open questions -------
+# Shall we allow for automatic data aggregations? Or shall this be the user's responsibility? (data transformation to live inside / outside component)
+# Shall we actually just extend vm.Card and allow a figure attribute there? or shall the KPI Card be its own component?
+
+
 # Method 1: Using go.Indicator inside vm.Graph
 @capture("graph")
 def plt_kpi_card(
@@ -66,10 +69,12 @@ def build(self):
             className=f"card-border-{self.sign}",
         )
 
+
 vm.Page.add_type("components", CustomKPI)
 
 page = vm.Page(
     title="Table Page",
+    layout=vm.Layout(grid=[[0, 1]] + [[-1, -1]] * 3),
     components=[
         vm.Graph(
             id="kpi-total",
@@ -79,7 +84,13 @@ def build(self):
                 title="Sepal Width AVG",
             ),
         ),
-        CustomKPI(title="Total Complaints", value="75.513", icon="arrow_circle_up", sign="up", ref_value="5.5% vs. Last Year"),
+        CustomKPI(
+            title="Total Complaints",
+            value="75.513",
+            icon="arrow_circle_up",
+            sign="up",
+            ref_value="5.5% vs. Last Year"
+        ),
     ],
     controls=[vm.Filter(column="species")],
 )

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

@@ -8,7 +8,6 @@
   padding-left: 12px;
 }
 
-
 .card {
   background: var(--bs-card-cap-bg);
   display: flex;
@@ -19,10 +18,11 @@
 
 .card .card-title {
   height: 100%;
+  font-size: 1.4rem;
 }
 
 .card .card-value {
-  font-size: 1.2rem;
+  font-size: 2rem;
   font-weight: 600;
   height: 100%;
   margin: 0;