add-gif

.gitattributes

@@ -34,4 +34,3 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 assets/images/kpi_dashboard.gif filter=lfs diff=lfs merge=lfs -text
-kpi-dashboard.gif filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -1,9 +1,18 @@
-FROM ghcr.io/astral-sh/uv:python3.12-bookworm-slim
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.12
+
+RUN useradd -m -u 1000 user
 
 WORKDIR /app
 
-COPY requirements.txt .
-RUN uv pip sync --system requirements.txt
-COPY . .
+COPY --chown=user ./requirements.txt requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+
+EXPOSE 7860
 
-ENTRYPOINT ["gunicorn", "app:app", "--workers", "4", "--bind", "0.0.0.0:7860"]
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:server"]

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.

app.py

@@ -1,10 +1,8 @@
 """Example to show dashboard configuration."""
 
-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, area, bar, choropleth, pie
+from utils._charts import COLUMN_DEFS, FlexContainer, 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 +13,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 = vm.Container(
-    layout=vm.Flex(direction="row"),
+kpi_banner = FlexContainer(
     components=[
         vm.Figure(
             id="kpi-reverse-coloring",
@@ -30,7 +28,6 @@ kpi_banner = vm.Container(
                 title="Total Complaints",
                 value_format="{value:.0f}",
                 reference_format="{delta_relative:+.1%} vs. 2018 ({reference:.0f})",
-                icon="person",
             ),
         ),
         vm.Figure(
@@ -41,7 +38,6 @@ kpi_banner = vm.Container(
                 title="Closed Complaints",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
-                icon="inventory",
             )
         ),
         vm.Figure(
@@ -52,7 +48,6 @@ kpi_banner = vm.Container(
                 title="Timely Response",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
-                icon="timer",
             )
         ),
         vm.Figure(
@@ -63,7 +58,6 @@ kpi_banner = vm.Container(
                 title="Closed w/o cost",
                 value_format="{value:.1f}%",
                 reference_format="{delta:.1f}pp vs. 2018 ({reference:.1f}%)",
-                icon="payments",
             )
         ),
         vm.Figure(
@@ -74,10 +68,10 @@ kpi_banner = vm.Container(
                 title="Consumer disputed",
                 value_format="{value:.1f}%",
                 reference_format="{delta:+.1f}pp vs. 2018 ({reference:.1f}%)",
-                icon="sentiment_dissatisfied",
             )
         ),
     ],
+    classname="kpi-banner",
 )
 
 bar_charts_tabbed = vm.Tabs(
@@ -136,7 +130,7 @@ bar_charts_tabbed = vm.Tabs(
 # PAGES --------------------------------------------------------------------------------------
 page_exec = vm.Page(
     title="Executive View",
-    layout=vm.Grid(
+    layout=vm.Layout(
         grid=[
             [0, 0],
             [0, 0],
@@ -165,7 +159,7 @@ page_exec = vm.Page(
 
 page_region = vm.Page(
     title="Regional View",
-    layout=vm.Grid(grid=[[0, 1]]),
+    layout=vm.Layout(grid=[[0, 1]]),
     components=[
         vm.Graph(
             figure=choropleth(
@@ -249,15 +243,7 @@ dashboard = vm.Dashboard(
 )
 
 app = Vizro().build(dashboard)
-app.dash.layout.children.append(
-    dbc.NavLink(
-        ["Made with ", html.Img(src=get_asset_url("images/logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
-        href="https://github.com/mckinsey/vizro",
-        target="_blank",
-        external_link=True,
-        className="anchor-container",
-    )
-)
+server = app.dash.server
 
 if __name__ == "__main__":
     app.run()

assets/css/custom.css

@@ -1,11 +1,25 @@
-#header {
-  padding-left: 0;
+#page-header {
+  padding-left: 4px;
 }
 
 .card-kpi {
-  min-width: 240px;
+  min-width: 220px;
   padding: 0.75rem;
-  height: 150px;
+}
+
+.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);
 }
 
 /* Apply reverse color coding for one KPI card */
@@ -24,28 +38,3 @@
 #kpi-reverse-coloring .card-kpi:has(.color-neg) {
   border-left: 4px solid var(--bs-blue);
 }
-
-.anchor-container {
-  align-items: center;
-  background: var(--text-primary);
-  border-top-left-radius: 8px;
-  bottom: 0;
-  color: var(--text-primary-inverted) !important;
-  display: flex;
-  font-size: 0.8rem;
-  font-weight: 500;
-  height: 24px;
-  padding: 0 12px;
-  position: fixed;
-  right: 0;
-}
-
-.anchor-container:focus,
-.anchor-container:hover {
-  background: var(--text-secondary);
-  color: var(--text-primary-inverted);
-}
-
-img#banner {
-  height: 16px;
-}

requirements.in

@@ -1,3 +1,3 @@
+
 gunicorn
-vizro==0.1.44
-numpy!=2.0.2  # there is an issue with this specific version that the whl can't be built
+vizro

requirements.txt

@@ -2,34 +2,33 @@
 #    uv pip compile requirements.in -o requirements.txt
 annotated-types==0.7.0
     # via pydantic
-autoflake==2.3.1
-    # via vizro
-black==24.10.0
-    # via vizro
 blinker==1.8.2
     # via flask
 cachelib==0.9.0
     # via flask-caching
-certifi==2024.8.30
+certifi==2024.7.4
     # via requests
 charset-normalizer==3.3.2
     # via requests
 click==8.1.7
-    # via
-    #   black
-    #   flask
-dash==3.1.1
+    # via flask
+dash==2.17.1
     # via
     #   dash-ag-grid
     #   dash-bootstrap-components
-    #   dash-mantine-components
     #   vizro
-dash-ag-grid==32.3.0
+dash-ag-grid==31.2.0
     # via vizro
-dash-bootstrap-components==2.0.3
+dash-bootstrap-components==1.6.0
     # via vizro
-dash-mantine-components==2.1.0
+dash-core-components==2.0.0
+    # via dash
+dash-html-components==2.0.0
+    # via dash
+dash-mantine-components==0.12.1
     # via vizro
+dash-table==5.0.0
+    # via dash
 flask==3.0.3
     # via
     #   dash
@@ -38,7 +37,7 @@ flask-caching==2.3.0
     # via vizro
 gunicorn==23.0.0
     # via -r requirements.in
-idna==3.8
+idna==3.7
     # via requests
 importlib-metadata==8.4.0
     # via dash
@@ -50,36 +49,24 @@ markupsafe==2.1.5
     # via
     #   jinja2
     #   werkzeug
-mypy-extensions==1.0.0
-    # via black
 nest-asyncio==1.6.0
     # via dash
-numpy==2.3.2
+numpy==2.1.0
     # via
-    #   -r requirements.in
     #   pandas
+    #   vizro
 packaging==24.1
     # via
-    #   black
     #   gunicorn
     #   plotly
-    #   vizro
 pandas==2.2.2
     # via vizro
-pathspec==0.12.1
-    # via black
-platformdirs==4.3.6
-    # via black
-plotly==5.24.0
-    # via
-    #   dash
-    #   vizro
+plotly==5.23.0
+    # via dash
 pydantic==2.8.2
     # via vizro
 pydantic-core==2.20.1
     # via pydantic
-pyflakes==3.2.0
-    # via autoflake
 python-dateutil==2.9.0.post0
     # via pandas
 pytz==2024.1
@@ -88,8 +75,12 @@ requests==2.32.3
     # via dash
 retrying==1.3.4
     # via dash
-setuptools==74.0.0
-    # via dash
+ruff==0.6.1
+    # via vizro
+setuptools==73.0.1
+    # via
+    #   dash
+    #   vizro
 six==1.16.0
     # via
     #   python-dateutil
@@ -105,13 +96,14 @@ tzdata==2024.1
     # via pandas
 urllib3==2.2.2
     # via requests
-vizro==0.1.44
+vizro==0.1.20
     # via -r requirements.in
 werkzeug==3.0.4
     # via
     #   dash
     #   flask
+    #   vizro
 wrapt==1.16.0
     # via vizro
-zipp==3.20.1
+zipp==3.20.0
     # via importlib-metadata

utils/_charts.py

@@ -1,13 +1,33 @@
 """Contains custom components and charts used inside the dashboard."""
 
-from typing import List, Optional
+from typing import List, Literal, 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
+        )
+
+
+vm.Container.add_type("components", FlexContainer)
+
+
 # CUSTOM CHARTS ----------------------------------------------------------------
 @capture("graph")
 def bar(