Remove redundant custom components

app.py

@@ -4,7 +4,7 @@ from dash import html, get_asset_url
 import dash_bootstrap_components as dbc
 import pandas as pd
 import vizro.models as vm
-from utils._charts import COLUMN_DEFS, FlexContainer, area, bar, choropleth, pie
+from utils._charts import COLUMN_DEFS, area, bar, choropleth, pie
 from utils._helper import clean_data_and_add_columns, create_data_for_kpi_cards
 from vizro import Vizro
 from vizro.actions import filter_interaction
@@ -15,11 +15,11 @@ from vizro.tables import dash_ag_grid
 df_complaints = pd.read_csv("https://query.data.world/s/glbdstahsuw3hjgunz3zssggk7dsfu?dws=00000")
 df_complaints = clean_data_and_add_columns(df_complaints)
 df_kpi_cards = create_data_for_kpi_cards(df_complaints)
-vm.Page.add_type("components", FlexContainer)
 
 
 # SUB-SECTIONS ------------------------------------------------------------------------------------
-kpi_banner = FlexContainer(
+kpi_banner = vm.Container(
+    layout=vm.Flex(direction="row"),
     components=[
         vm.Figure(
             id="kpi-reverse-coloring",
@@ -78,7 +78,6 @@ kpi_banner = FlexContainer(
             )
         ),
     ],
-    classname="kpi-banner",
 )
 
 bar_charts_tabbed = vm.Tabs(

assets/css/custom.css

@@ -3,23 +3,9 @@
 }
 
 .card-kpi {
-  min-width: 220px;
+  min-width: 240px;
   padding: 0.75rem;
-}
-
-.kpi-banner {
-  display: flex;
-  gap: 1rem;
-  height: 100%;
-  overflow: scroll;
-}
-
-.kpi-banner .figure-container {
-  height: unset;
-}
-
-.kpi-banner::-webkit-scrollbar-thumb {
-  border: 5px solid var(--main-container-bg-color);
+  height: 150px;
 }
 
 /* Apply reverse color coding for one KPI card */

utils/_charts.py

@@ -1,30 +1,13 @@
 """Contains custom components and charts used inside the dashboard."""
 
-from typing import List, Literal, Optional
+from typing import List, Optional
 
 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.models.types import capture
 
 
-# CUSTOM COMPONENTS -------------------------------------------------------------
-class FlexContainer(vm.Container):
-    """Custom flex `Container`."""
-
-    type: Literal["flex_container"] = "flex_container"
-    title: str = None  # Title exists in vm.Container but we don't want to use it here.
-    classname: str = "d-flex"
-
-    def build(self):
-        """Returns a flex container."""
-        return html.Div(
-            id=self.id, children=[component.build() for component in self.components], className=self.classname
-        )
-
-
 # CUSTOM CHARTS ----------------------------------------------------------------
 @capture("graph")
 def bar(