Add app configuration

.gitignore

@@ -0,0 +1,144 @@
+# npm node_modules
+node_modules/
+
+# Ipynb
+ipynb_checkpoints
+*/.ipynb_checkpoints/*
+
+# IPython
+profile_default/
+ipython_config.py
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# macOS
+*.DS_Store
+.DS_Store
+.AppleDouble
+.LSOverride
+.Trashes
+
+# PyInstaller
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask
+instance/
+.webassets-cache
+
+# Scrapy
+.scrapy
+
+# PyBuilder
+.pybuilder/
+target/
+
+# IntelliJ
+.idea/
+*.iml
+out/
+.idea_modules/
+
+# Vscode
+.vscode/
+
+# PEP 582
+__pypackages__/
+
+# Celery
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder
+.spyderproject
+.spyproject
+
+# Rope
+.ropeproject
+
+# Mkdocs
+/site
+
+# Mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre
+.pyre/
+
+# Pytype
+.pytype/
+
+# Cython
+cython_debug/
+
+# Ruff
+.ruff_cache/

Dockerfile

@@ -0,0 +1,18 @@
+# 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 --chown=user ./requirements.txt requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:server"]

README.md

@@ -1,12 +1,31 @@
 ---
-title: Figure Friday Week 5
-emoji: 📚
-colorFrom: indigo
+title: Games Dashboard
+emoji: 📊
+colorFrom: blue
 colorTo: blue
 sdk: docker
 pinned: false
 license: apache-2.0
-short_description: My app for Figure Friday - Week 5 2025
+short_description: Figure Friday Week 5 - Games
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Games Dashboard
+
+This dashboard is a part of the Figure Friday series.
+This week's Figure Friday: https://community.plotly.com/t/figure-friday-2025-week-5/90285
+
+**Created by:** [Huong Li Nguyen](https://github.com/huong-li-nguyen)
+
+---
+
+### 🚀 Vizro features applied
+
+- [Vizro tutorial on pages, layouts and dashboards](https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components/)
+- [Custom charts](https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-charts/)
+- [Custom CSS](https://vizro.readthedocs.io/en/stable/pages/user-guides/assets/)
+
+### 🖥️ App demo
+
+<img src="./images/nguyen-figure-friday-5.gif" alt="Gif to KPI dashboard" width="600">
+
+---

app.py

@@ -0,0 +1,231 @@
+"""Example to show dashboard configuration."""
+
+"""Dev app to try things out."""
+
+import pandas as pd
+import vizro.models as vm
+from vizro import Vizro
+import vizro.plotly.express as px
+from dash import get_asset_url, html
+import dash_bootstrap_components as dbc
+
+from vizro.models.types import capture
+from vizro.tables import dash_ag_grid
+from utils.helper import categorize_price, convert_price_to_numeric, columnDefs
+from vizro.figures import kpi_card
+
+
+# Custom charts are required because of the post-update calls
+@capture("graph")
+def bar(data_frame, top_n=20, **kwargs):
+    data_top = data_frame.head(top_n)
+    fig = px.bar(data_top, **kwargs)
+    fig.update_layout(title=f"Top {top_n} Games by {kwargs['x']}", yaxis_title="", yaxis_autorange="reversed")
+    return fig
+
+
+@capture("graph")
+def scatter(data_frame, top_n=20, **kwargs):
+    data_top = data_frame.head(top_n)
+    fig = px.scatter(data_top, **kwargs)
+    fig.update_layout(
+        title=f"Top {top_n} games by {kwargs['y']}. Each bubble represents a single game. The bigger the bubble, the more players."
+    )
+
+    return fig
+
+
+@capture("graph")
+def treemap(data_frame, top_n=20, **kwargs):
+    data_top = data_frame.head(top_n)
+    fig = px.treemap(data_top, **kwargs)
+    fig.update_traces(root_color="lightgrey")
+    fig.update_layout(title=f"Top {top_n} games by {kwargs['values']}. The bigger the square, the more players.")
+    return fig
+
+
+# Tidy data set
+players = pd.read_csv(
+    "https://raw.githubusercontent.com/plotly/Figure-Friday/refs/heads/main/2025/week-5/Steam%20Top%20100%20Played%20Games%20-%20List.csv"
+)
+players["Price Category"] = players["Price"].apply(categorize_price)
+players["Price Numeric"] = players["Price"].apply(convert_price_to_numeric)
+players["Current Players"] = pd.to_numeric(players["Current Players"].str.replace(",", ""))
+players["Peak Today"] = pd.to_numeric(players["Peak Today"].str.replace(",", ""))
+
+
+tabs = vm.Tabs(
+    tabs=[
+        vm.Container(
+            title="Bar",
+            components=[
+                vm.Graph(
+                    id="bar",
+                    figure=bar(
+                        players,
+                        y="Name",
+                        x="Current Players",
+                        title="Current Players by Game",
+                        orientation="h",
+                        color="Price Numeric",
+                    ),
+                )
+            ],
+        ),
+        vm.Container(
+            title="Treemap",
+            components=[
+                vm.Graph(
+                    id="treemap",
+                    figure=treemap(
+                        players, path=[px.Constant("All"), "Name"], values="Current Players", color="Price Numeric"
+                    ),
+                )
+            ],
+        ),
+        vm.Container(
+            title="Bubble",
+            components=[
+                vm.Graph(
+                    id="bubble",
+                    figure=scatter(
+                        players,
+                        x="Price Numeric",
+                        y="Current Players",
+                        size="Current Players",
+                        size_max=50,
+                        opacity=0.5,
+                        color="Price Numeric",
+                    ),
+                )
+            ],
+        ),
+    ],
+)
+
+
+players_page = vm.Page(
+    title="Total Players 🎮",
+    layout=vm.Layout(grid=[[0, 1, 2, 3, 4]] + [[5, 5, 5, 5, 5]] * 5),
+    components=[
+        vm.Figure(
+            id="kpi-1",
+            figure=kpi_card(
+                data_frame=players[players["Price Category"] == "Free To Play"],
+                value_column="Current Players",
+                value_format="{value:,}",
+                icon="groups",
+                title="Free to play",
+            ),
+        ),
+        vm.Figure(
+            id="kpi-2",
+            figure=kpi_card(
+                data_frame=players[players["Price Category"] == "Less than £15"],
+                value_column="Current Players",
+                value_format="{value:,}",
+                icon="group",
+                title="Less than £15",
+            ),
+        ),
+        vm.Figure(
+            id="kpi-3",
+            figure=kpi_card(
+                data_frame=players[players["Price Category"] == "£15-£30"],
+                value_column="Current Players",
+                value_format="{value:,}",
+                icon="person",
+                title="£15-£30",
+            ),
+        ),
+        vm.Figure(
+            id="kpi-4",
+            figure=kpi_card(
+                data_frame=players[players["Price Category"] == "£30-£45"],
+                value_column="Current Players",
+                value_format="{value:,}",
+                icon="people",
+                title="£30-£45",
+            ),
+        ),
+        vm.Figure(
+            id="kpi-5",
+            figure=kpi_card(
+                data_frame=players[players["Price Category"] == "More than 45£"],
+                value_column="Current Players",
+                value_format="{value:,}",
+                icon="groups",
+                title="More than 45£",
+            ),
+        ),
+        tabs,
+    ],
+    controls=[
+        vm.Parameter(
+            targets=[
+                "bar.x",
+                "treemap.values",
+                "bubble.y",
+                "kpi-1.value_column",
+                "kpi-2.value_column",
+                "kpi-3.value_column",
+                "kpi-4.value_column",
+                "kpi-5.value_column",
+            ],
+            selector=vm.RadioItems(
+                options=["Current Players", "Peak Today"],
+                title="Select metric in all charts",
+            ),
+        ),
+        vm.Parameter(
+            targets=["bar.top_n", "bubble.top_n", "treemap.top_n"],
+            selector=vm.Slider(min=10, max=50, step=5, value=20, title="Select top N:"),
+        ),
+        vm.Filter(
+            column="Price Category",
+            selector=vm.Checklist(
+                options=["Free To Play", "Less than £15", "£15-£30", "£30-£45", "More than 45£"],
+                title="Select price category:",
+            ),
+        ),
+        vm.Filter(column="Name", selector=vm.Dropdown(title="Select game:")),
+    ],
+)
+
+games_page = vm.Page(
+    title="Most played games 👾",
+    components=[
+        vm.AgGrid(
+            figure=dash_ag_grid(players, columnDefs=columnDefs, dashGridOptions={"rowHeight": 56, "pagination": True})
+        )
+    ],
+)
+
+dashboard = vm.Dashboard(
+    title="Figure Friday - Week 5",
+    pages=[players_page, games_page],
+    navigation=vm.Navigation(
+        nav_selector=vm.NavBar(
+            items=[
+                vm.NavLink(label="Players", pages=["Total Players 🎮"], icon="Person Play"),
+                vm.NavLink(label="Games", pages=["Most played games 👾"], icon="Stadia Controller"),
+            ]
+        )
+    ),
+)
+
+app = Vizro().build(dashboard)
+app.dash.layout.children.append(
+    dbc.NavLink(
+        ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+        href="https://github.com/mckinsey/vizro",
+        target="_blank",
+        className="anchor-container",
+    )
+)
+
+
+server = app.dash.server
+
+if __name__ == "__main__":
+    app.run()

assets/css/custom.css

@@ -0,0 +1,64 @@
+#page-header {
+  padding-left: 8px;
+}
+
+.form-label {
+  font-weight: 600;
+}
+
+
+#kpi-1 .card-kpi {
+  border-left: 4px solid #afe7f9;
+}
+
+#kpi-2 .card-kpi {
+  border-left: 4px solid #3bbef1;
+}
+
+
+#kpi-3 .card-kpi {
+  border-left: 4px solid #0d8ed1;
+}
+
+#kpi-4 .card-kpi {
+  border-left: 4px solid #0061a4;
+}
+
+#kpi-5 .card-kpi {
+  border-left: 4px solid #003875;
+}
+
+.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;
+}
+
+.ag-cell {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.badge {
+  font-size: 12px;
+}

assets/js/dashAgGridComponentFunctions.js

@@ -0,0 +1,68 @@
+var dagcomponentfuncs = (window.dashAgGridComponentFunctions =
+  window.dashAgGridComponentFunctions || {});
+
+dagcomponentfuncs.ImgThumbnail = function (props) {
+  const { setData, data } = props;
+
+  function onClick() {
+    setData(props.value);
+  }
+
+  return React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+      },
+    },
+    React.createElement("img", {
+      onClick: onClick,
+      style: { width: "100%", height: "auto" },
+      src: props.value,
+    }),
+  );
+};
+
+// use for making dbc.Button without icons
+dagcomponentfuncs.DBC_Button = function (props) {
+  const { setData } = props;
+
+  function onClick() {
+    setData();
+  }
+
+  return React.createElement(
+    window.dash_bootstrap_components.Button,
+    {
+      onClick,
+      href: props.value,
+      external_link: true,
+      target: "_blank",
+    },
+    "Visit Store →",
+  );
+};
+
+// BADGE INSIDE AG GRID
+dagcomponentfuncs.DBC_Badge = function (props) {
+  const { value, colorMap } = props;
+
+  const parsedColorMap =
+    typeof colorMap === "string" ? JSON.parse(colorMap) : colorMap;
+  const bgColor = parsedColorMap?.[value] || "#000000";
+
+  console.log("Badge props:", props); // Debugging step
+
+  return React.createElement(
+    window.dash_bootstrap_components.Badge,
+    {
+      style: {
+        cssText: `background-color: ${bgColor} !important; color: #00000;`,
+      },
+    },
+    value,
+  );
+};

requirements.in

@@ -0,0 +1,4 @@
+# This file is only used if you don't have hatch installed.
+gunicorn
+openpyxl
+vizro==0.1.28

requirements.txt

@@ -0,0 +1,130 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile requirements.in -o requirements.txt
+annotated-types==0.7.0
+    # via pydantic
+autoflake==2.3.1
+    # via vizro
+black==24.4.2
+    # via vizro
+blinker==1.8.2
+    # via flask
+cachelib==0.9.0
+    # via flask-caching
+certifi==2024.8.30
+    # via requests
+charset-normalizer==3.4.0
+    # via requests
+click==8.1.7
+    # via
+    #   black
+    #   flask
+dash==2.18.1
+    # via
+    #   dash-ag-grid
+    #   dash-bootstrap-components
+    #   vizro
+dash-ag-grid==31.2.0
+    # via vizro
+dash-bootstrap-components==1.6.0
+    # via vizro
+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
+et-xmlfile==2.0.0
+    # via openpyxl
+flask==3.0.3
+    # via
+    #   dash
+    #   flask-caching
+flask-caching==2.3.0
+    # via vizro
+gunicorn==23.0.0
+    # via -r requirements.in
+idna==3.10
+    # via requests
+importlib-metadata==8.5.0
+    # via
+    #   dash
+    #   flask
+itsdangerous==2.2.0
+    # via flask
+jinja2==3.1.4
+    # via flask
+markupsafe==3.0.2
+    # via
+    #   jinja2
+    #   werkzeug
+mypy-extensions==1.0.0
+    # via black
+nest-asyncio==1.6.0
+    # via dash
+numpy==2.0.2
+    # via pandas
+openpyxl==3.1.5
+    # via -r requirements.in
+packaging==24.1
+    # via
+    #   black
+    #   gunicorn
+    #   plotly
+pandas==2.2.3
+    # via vizro
+pathspec==0.12.1
+    # via black
+platformdirs==4.2.2
+    # via black
+plotly==5.24.1
+    # via
+    #   dash
+    #   vizro
+pydantic==2.9.2
+    # via vizro
+pydantic-core==2.23.4
+    # via pydantic
+pyflakes==3.2.0
+    # via autoflake
+python-dateutil==2.9.0.post0
+    # via pandas
+pytz==2024.2
+    # via pandas
+requests==2.32.3
+    # via dash
+retrying==1.3.4
+    # via dash
+setuptools==75.3.0
+    # via dash
+six==1.16.0
+    # via
+    #   python-dateutil
+    #   retrying
+tenacity==9.0.0
+    # via plotly
+tomli==2.1.0
+    # via
+    #   autoflake
+    #   black
+typing-extensions==4.12.2
+    # via
+    #   black
+    #   dash
+    #   pydantic
+    #   pydantic-core
+tzdata==2024.2
+    # via pandas
+urllib3==2.2.3
+    # via requests
+vizro==0.1.28
+    # via -r requirements.in
+werkzeug==3.0.6
+    # via
+    #   dash
+    #   flask
+wrapt==1.16.0
+    # via vizro
+zipp==3.20.2
+    # via importlib-metadata

utils/__init__.py

@@ -0,0 +1 @@
+"""Utils folder to contain helper functions and custom charts/components."""

utils/_helper.py

@@ -0,0 +1,69 @@
+"""Contains helper functions and configuration for AgGrid."""
+
+import json
+
+
+def convert_price_to_numeric(price):
+    if price == "Free To Play":
+        return 0.0
+    try:
+        return float(price.replace("£", ""))
+    except ValueError:
+        return None
+
+
+def categorize_price(price):
+    if price == "Free To Play":
+        return price
+
+    try:
+        price_value = float(price.replace("£", ""))
+    except ValueError:
+        return "Unknown"
+
+    if price_value < 15:
+        return "Less than £15"
+    elif 15 <= price_value <= 30:
+        return "£15-£30"
+    elif 30 < price_value <= 45:
+        return "£30-£45"
+    else:
+        return "More than 45£"
+
+
+COLOR_MAP = {
+    "Free To Play": "#afe7f9",
+    "Less than £15": "#3bbef1",
+    "£15-£30": "#0d8ed1",
+    "£30-£45": "#0061a4",
+    "More than 45£": "#003875",
+}
+
+
+columnDefs = [
+    {"field": "Rank", "cellDataType": "text", "flex": 1},
+    {"headerName": "Thumbnail", "field": "Thumbnail URL", "cellRenderer": "ImgThumbnail", "width": 150, "flex": 3},
+    {"field": "Name", "headerName": "Game", "cellDataType": "text", "flex": 3},
+    {
+        "field": "Current Players",
+        "cellDataType": "number",
+        "valueFormatter": {
+            "function": "d3.format(',.2r')(params.value)",
+        },
+        "flex": 3,
+    },
+    {
+        "field": "Peak Today",
+        "cellDataType": "number",
+        "valueFormatter": {"function": "d3.format(',.2r')(params.value)"},
+        "flex": 3,
+    },
+    {
+        "field": "Price Category",
+        "cellDataType": "text",
+        "cellRenderer": "DBC_Badge",
+        "cellRendererParams": {"colorMap": json.dumps(COLOR_MAP)},
+        "flex": 2,
+    },
+    {"field": "Store Link", "cellRenderer": "DBC_Button", "width": 200, "flex": 2},
+]