Add last changes

README.md

@@ -9,7 +9,7 @@ license: apache-2.0
 short_description: Example of a Key Performance Indicator (KPI) dashboard
 ---
 
-# KPI dashboard
+# KPI Dashboard
 
 This dashboard provides an example of a Key Performance Indicator (KPI) dashboard, designed to help users get started
 and extend further. It uses fictional budget data to demonstrate the capabilities of Vizro using real world applications.
@@ -41,7 +41,7 @@ provides high-quality fake data for creating realistic dashboard examples for re
 
 ### 🖥️ App demo
 
-<img src="./kpi-dashboard.gif" alt="Gif to KPI dashboard" width="600">
+<img src="./images/kpi-dashboard.gif" alt="Gif to KPI dashboard" width="600">
 
 ---
 

app.py

@@ -28,6 +28,7 @@ kpi_banner = FlexContainer(
                 title="Total Complaints",
                 value_format="{value:.0f}",
                 reference_format="{delta_relative:+.1%} vs. 2018 ({reference:.0f})",
+                icon="person",
             ),
         ),
         vm.Figure(
@@ -38,6 +39,7 @@ kpi_banner = FlexContainer(
                 title="Closed Complaints",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
+                icon="inventory",
             )
         ),
         vm.Figure(
@@ -48,6 +50,7 @@ kpi_banner = FlexContainer(
                 title="Timely Response",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
+                icon="timer",
             )
         ),
         vm.Figure(
@@ -58,6 +61,7 @@ kpi_banner = FlexContainer(
                 title="Closed w/o cost",
                 value_format="{value:.1f}%",
                 reference_format="{delta:.1f}pp vs. 2018 ({reference:.1f}%)",
+                icon="payments",
             )
         ),
         vm.Figure(
@@ -68,6 +72,7 @@ kpi_banner = FlexContainer(
                 title="Consumer disputed",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp vs. 2018 ({reference:.1f}%)",
+                icon="sentiment_dissatisfied",
             )
         ),
     ],

utils/_charts.py

@@ -25,9 +25,6 @@ class FlexContainer(vm.Container):
         )
 
 
-vm.Container.add_type("components", FlexContainer)
-
-
 # CUSTOM CHARTS ----------------------------------------------------------------
 @capture("graph")
 def bar(