Testing PRs

.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

.gitignore

@@ -1,144 +0,0 @@
-# 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/

README.md

@@ -1,5 +1,5 @@
 ---
-title: KPI Dashboard
+title: KPI Demo
 emoji: 📊
 colorFrom: blue
 colorTo: blue
@@ -9,43 +9,28 @@ 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.
+This demo 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.
 
-**Created by:** [Huong Li Nguyen](https://github.com/huong-li-nguyen)
-
----
-
-### 🗓️ Data
-
-Special thanks to the [#RWFD Real World Fake Data initiative](https://data.world/markbradbourne/rwfd-real-world-fake-data), a community project that
+Special thanks to the [#RWFD Real World Fake Data initiative](https://opendatainitiative.io/), a community project that
 provides high-quality fake data for creating realistic dashboard examples for real-world applications.
 
-**Note:** The data has been additionally edited for the purpose of this example.
-
-### 📊 Plotly resources
-
-- [Bar charts](https://plotly.com/python/bar-charts/)
-- [Pie charts](https://plotly.com/python/pie-charts/)
-- [Choropleth maps](https://plotly.com/python/choropleth-maps/)
-- [Unstacked area charts](https://plotly.com/python/filled-area-plots/)
+Note: The data has been additionally edited for the purpose of this example.
 
-### 🚀 Vizro features applied
-
-- [Vizro tutorial on pages, layouts and dashboards](https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components/)
-- [Custom components](https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-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/kpi-dashboard.gif" alt="Gif to KPI dashboard" width="600">
-
----
+<img src="./assets/images/kpi_dashboard.gif" alt="Gif to KPI dashboard">
 
-## How to run the example locally
+## Possible future iterations
 
-1. Run the `app.py` file with your environment activated where `vizro` is installed.
-2. You should now be able to access the app locally via http://127.0.0.1:8050/.
+- Enable selection of year filter
+- Enable current year vs. past year comparison
+- Enable dynamic KPI Cards
+- Bar - Enable drill-downs from Issue to Sub-issue and Product to Sub-product
+- Bar - Reformat numbers with commas in bar chart
+- Bar - Left-align y-axis labels
+- Bar - Shorten labels
+- Line - Customize function to always show selected year vs. past year
+- Table-view - Check why date format does not work on `Date Received`
+- Table-view - Add icons to `On time?` column
+- Table-view - Improve speed by applying cache or overcome limitation that entire data set is loaded in

app.py

@@ -1,131 +1,114 @@
 """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, FlexContainer, area, bar, choropleth, pie
-from utils._helper import clean_data_and_add_columns, create_data_for_kpi_cards
+from utils._charts import COLUMN_DEFS, KPI, bar, choropleth, line, pie
+from utils._helper import clean_data_and_add_columns
 from vizro import Vizro
 from vizro.actions import filter_interaction
-from vizro.figures import kpi_card_reference
 from vizro.tables import dash_ag_grid
 
 # DATA --------------------------------------------------------------------------------------------
 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)
-
+vm.Container.add_type("components", KPI)
 
 # SUB-SECTIONS ------------------------------------------------------------------------------------
-kpi_banner = FlexContainer(
+kpi_banner = vm.Container(
+    id="kpi-banner",
+    title="",
     components=[
-        vm.Figure(
-            id="kpi-reverse-coloring",
-            figure=kpi_card_reference(
-                df_kpi_cards,
-                value_column="Total Complaints_2019",
-                reference_column="Total Complaints_2018",
-                title="Total Complaints",
-                value_format="{value:.0f}",
-                reference_format="{delta_relative:+.1%} vs. 2018 ({reference:.0f})",
-                icon="person",
-            ),
+        # Note: For some KPIs the icon/sign go in opposite directions as an increase e.g. in complaints is negative
+        KPI(
+            title="Total Complaints",
+            value="75.513",
+            icon="arrow_circle_up",
+            sign="delta-neg",
+            ref_value="6.8% vs. LY",
         ),
-        vm.Figure(
-            figure=kpi_card_reference(
-                df_kpi_cards,
-                value_column="Closed Complaints_2019",
-                reference_column="Closed Complaints_2018",
-                title="Closed Complaints",
-                value_format="{value:.1f}%",
-                reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
-                icon="inventory",
-            )
+        KPI(
+            title="Closed Complaints",
+            value="99.6%",
+            icon="arrow_circle_up",
+            sign="delta-pos",
+            ref_value="+0.2% vs. LY",
         ),
-        vm.Figure(
-            figure=kpi_card_reference(
-                df_kpi_cards,
-                value_column="Timely response_2019",
-                reference_column="Timely response_2018",
-                title="Timely Response",
-                value_format="{value:.1f}%",
-                reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
-                icon="timer",
-            )
+        KPI(
+            title="Open Complaints",
+            value="0.4%",
+            icon="arrow_circle_down",
+            sign="delta-pos",
+            ref_value="-0.2% vs. LY",
         ),
-        vm.Figure(
-            figure=kpi_card_reference(
-                df_kpi_cards,
-                value_column="Closed w/o cost_2019",
-                reference_column="Closed w/o cost_2018",
-                title="Closed w/o cost",
-                value_format="{value:.1f}%",
-                reference_format="{delta:.1f}pp vs. 2018 ({reference:.1f}%)",
-                icon="payments",
-            )
+        KPI(
+            title="Timely Response",
+            value="98.1%",
+            icon="arrow_circle_up",
+            sign="delta-pos",
+            ref_value="+10.5% vs. LY",
         ),
-        vm.Figure(
-            figure=kpi_card_reference(
-                df_kpi_cards,
-                value_column="Consumer disputed_2019",
-                reference_column="Consumer disputed_2018",
-                title="Consumer disputed",
-                value_format="{value:.1f}%",
-                reference_format="{delta:+.1f}pp vs. 2018 ({reference:.1f}%)",
-                icon="sentiment_dissatisfied",
-            )
+        KPI(
+            title="Closed w/o cost",
+            value="84.5%",
+            icon="arrow_circle_down",
+            sign="delta-neg",
+            ref_value="-8.5% vs. LY",
+        ),
+        KPI(
+            title="Consumer disputed",
+            value="9.5%",
+            icon="arrow_circle_up",
+            sign="delta-neg",
+            ref_value="+2.3% vs. LY",
         ),
     ],
-    classname="kpi-banner",
 )
 
 bar_charts_tabbed = vm.Tabs(
     tabs=[
         vm.Container(
-            title="By Product",
+            title="By Issue",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Product",
+                        y="Issue",
                         x="Complaint ID",
                     ),
                 )
             ],
         ),
         vm.Container(
-            title="By Channel",
+            title="By Product",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Channel",
+                        y="Product",
                         x="Complaint ID",
                     ),
                 )
             ],
         ),
         vm.Container(
-            title="By Region",
+            title="By Channel",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Region",
+                        y="Channel",
                         x="Complaint ID",
                     ),
                 )
             ],
         ),
         vm.Container(
-            title="By Issue",
+            title="By Region",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Issue",
+                        y="Region",
                         x="Complaint ID",
                     ),
                 )
@@ -139,12 +122,9 @@ page_exec = vm.Page(
     title="Executive View",
     layout=vm.Layout(
         grid=[
-            [0, 0],
             [0, 0],
             [1, 2],
             [1, 2],
-            [1, 2],
-            [1, 3],
             [1, 3],
             [1, 3],
         ],
@@ -152,10 +132,17 @@ page_exec = vm.Page(
     components=[
         kpi_banner,
         bar_charts_tabbed,
-        vm.Graph(figure=area(data_frame=df_complaints, y="Complaint ID", x="Month")),
+        vm.Graph(figure=line(data_frame=df_complaints, y="Complaint ID", x="Year-Month Received")),
         vm.Graph(
             figure=pie(
                 data_frame=df_complaints[df_complaints["Company response - Closed"] != "Not closed"],
+                custom_order=[
+                    "Closed with explanation",
+                    "Closed without relief",
+                    "Closed with non-monetary relief",
+                    "Closed with relief",
+                    "Closed with monetary relief",
+                ],
                 values="Complaint ID",
                 names="Company response - Closed",
                 title="Closed company responses",
@@ -166,15 +153,23 @@ page_exec = vm.Page(
 
 page_region = vm.Page(
     title="Regional View",
-    layout=vm.Layout(grid=[[0, 1]]),
+    layout=vm.Layout(grid=[[0, 0]] + [[1, 2]] * 4),
     components=[
+        vm.Card(
+            text="""
+        ##### Click on a state inside the map to filter the bar charts on the right.
+
+        - Which state has the most complaints?
+        - What are the three biggest issues in California?
+        - What is the product with the most complaints in Texas?
+        """
+        ),
         vm.Graph(
             figure=choropleth(
                 data_frame=df_complaints,
                 locations="State",
                 color="Complaint ID",
-                title="Complaints by State <br><sup> ⤵ Click on a state to filter the "
-                "charts on the right. Refresh the page to deselect.</sup>",
+                title="Complaints by State",
                 custom_data=["State"],
             ),
             actions=[
@@ -186,26 +181,26 @@ page_region = vm.Page(
         vm.Tabs(
             tabs=[
                 vm.Container(
-                    title="By Product",
+                    title="By Issue",
                     components=[
                         vm.Graph(
-                            id="regional-product",
+                            id="regional-issue",
                             figure=bar(
                                 data_frame=df_complaints,
-                                y="Product",
+                                y="Issue",
                                 x="Complaint ID",
                             ),
                         )
                     ],
                 ),
                 vm.Container(
-                    title="By Issue",
+                    title="By Product",
                     components=[
                         vm.Graph(
-                            id="regional-issue",
+                            id="regional-product",
                             figure=bar(
                                 data_frame=df_complaints,
-                                y="Issue",
+                                y="Product",
                                 x="Complaint ID",
                             ),
                         )
@@ -237,7 +232,7 @@ page_table = vm.Page(
 
 dashboard = vm.Dashboard(
     pages=[page_exec, page_region, page_table],
-    title="Cumulus Financial Corp. - Fiscal Year 2019",
+    title="Cumulus Financial Corporation",
     navigation=vm.Navigation(
         nav_selector=vm.NavBar(
             items=[
@@ -250,16 +245,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()
+if __name__ == "__main__":  
+    app.run()

assets/css/custom.css

@@ -2,64 +2,78 @@
   padding-left: 4px;
 }
 
-.card-kpi {
-  min-width: 220px;
-  padding: 0.75rem;
+.card {
+  padding: 8px;
 }
 
-.kpi-banner {
-  display: flex;
-  gap: 1rem;
-  height: 100%;
-  overflow: scroll;
+.kpi-card-ref {
+  min-width: 168px;
 }
 
-.kpi-banner .figure-container {
-  height: unset;
+.kpi-card-ref h4 {
+  margin: 0;
 }
 
-.kpi-banner::-webkit-scrollbar-thumb {
-  border: 5px solid var(--main-container-bg-color);
+.kpi-card-ref > span {
+  display: flex;
+  font-weight: 600;
+  gap: 4px;
 }
 
-/* Apply reverse color coding for one KPI card */
-#kpi-reverse-coloring .card-kpi .color-pos.card-footer {
-  color: var(--bs-pink);
+.kpi-card-ref .delta-pos {
+  color: #1a85ff;
 }
 
-#kpi-reverse-coloring .card-kpi .color-neg.card-footer {
-  color: var(--bs-blue);
+.kpi-card-ref .delta-neg {
+  color: #d41159;
 }
 
-#kpi-reverse-coloring .card-kpi:has(.color-pos) {
-  border-left: 4px solid var(--bs-pink);
+.kpi-card-ref .material-symbols-outlined {
+  font-size: 16px;
+  line-height: 20px;
 }
 
-#kpi-reverse-coloring .card-kpi:has(.color-neg) {
-  border-left: 4px solid var(--bs-blue);
+.kpi-card-ref > div {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin: 0;
 }
 
-.anchor-container {
+.kpi-card-ref > p {
   align-items: center;
-  background: var(--text-primary);
-  border-top-left-radius: 8px;
-  bottom: 0;
-  color: var(--text-contrast-primary);
+  color: var(--text-secondary);
   display: flex;
-  font-size: 0.8rem;
-  font-weight: 500;
-  height: 24px;
-  padding: 0 12px;
-  position: fixed;
-  right: 0;
+  flex-grow: 1;
+  font-size: 1rem;
+  font-size: 3.6vh;
+  font-weight: 600;
+  line-height: unset;
+}
+
+.kpi-card-ref:has(.delta-pos) {
+  border-left: 4px solid #1a85ff;
+}
+
+.kpi-card-ref:has(.delta-neg) {
+  border-left: 4px solid #d41159;
+}
+
+.card ul {
+  margin-bottom: 0;
 }
 
-.anchor-container:focus,
-.anchor-container:hover {
-  background: var(--text-secondary);
-  color: var(--text-contrast-primary);
+#kpi-banner .container__title {
+  display: none;
+}
+
+#kpi-banner .grid-layout {
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
 }
 
-img#banner {
-  height: 16px;
+#kpi-banner > ::-webkit-scrollbar-thumb {
+  border: 6px solid;
+  border-color: var(--main-container-bg-color);
 }

requirements.txt

@@ -6,7 +6,7 @@ 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
@@ -37,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
@@ -52,14 +52,16 @@ markupsafe==2.1.5
 nest-asyncio==1.6.0
     # via dash
 numpy==2.1.0
-    # via pandas
+    # via
+    #   pandas
+    #   vizro
 packaging==24.1
     # via
     #   gunicorn
     #   plotly
 pandas==2.2.2
     # via vizro
-plotly==5.24.0
+plotly==5.23.0
     # via dash
 pydantic==2.8.2
     # via vizro
@@ -73,10 +75,12 @@ requests==2.32.3
     # via dash
 retrying==1.3.4
     # via dash
-ruff==0.6.3
+ruff==0.6.1
     # via vizro
-setuptools==74.0.0
-    # via dash
+setuptools==73.0.1
+    # via
+    #   dash
+    #   vizro
 six==1.16.0
     # via
     #   python-dateutil
@@ -92,13 +96,14 @@ tzdata==2024.1
     # via pandas
 urllib3==2.2.2
     # via requests
-vizro==0.1.21
+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/__init__.py

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

utils/_charts.py

@@ -2,8 +2,8 @@
 
 from typing import List, 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
@@ -11,17 +11,32 @@ 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"
+# Note: This is a static KPI Card only (it will not be reactive to controls). A new dynamic KPI Card component
+# is currently in development.
+class KPI(vm.VizroBaseModel):
+    """Static custom `KPI` Card."""
+
+    type: Literal["kpi"] = "kpi"
+    title: str
+    value: str
+    icon: str
+    sign: Literal["delta-pos", "delta-neg"]
+    ref_value: str
 
     def build(self):
-        """Returns a flex container."""
-        return html.Div(
-            id=self.id, children=[component.build() for component in self.components], className=self.classname
+        return dbc.Card(
+            [
+                html.H4(self.title),
+                html.P(self.value),
+                html.Span(
+                    [
+                        html.Span(self.icon, className="material-symbols-outlined"),
+                        html.Span(self.ref_value),
+                    ],
+                    className=self.sign,
+                ),
+            ],
+            className="kpi-card-ref",
         )
 
 
@@ -34,11 +49,8 @@ def bar(
     top_n: int = 15,
     custom_data: Optional[List[str]] = None,
 ):
-    """Custom bar chart implementation.
-
-    Based on [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar).
-    """
     df_agg = data_frame.groupby(y).agg({x: "count"}).sort_values(by=x, ascending=False).reset_index()
+
     fig = px.bar(
         data_frame=df_agg.head(top_n),
         x=x,
@@ -48,38 +60,21 @@ def bar(
         color_discrete_sequence=["#1A85FF"],
         custom_data=custom_data,
     )
-    fig.update_layout(xaxis_title="# of Complaints", yaxis={"title": "", "autorange": "reversed"})
+    fig.update_layout(xaxis_title="# of Complaints", yaxis=dict(title="", autorange="reversed"))  # noqa: C408
     return fig
 
 
 @capture("graph")
-def area(x: str, y: str, data_frame: pd.DataFrame):
-    """Custom chart to create unstacked area chart.
-
-    Based on [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html).
-
-    """
-    df_agg = data_frame.groupby(["Year", "Month"]).agg({y: "count"}).reset_index()
-    df_agg_2019 = df_agg[df_agg["Year"] == "2018"]
-    df_agg_2020 = df_agg[df_agg["Year"] == "2019"]
-
-    fig = go.Figure()
-    fig.add_trace(
-        go.Scatter(x=df_agg_2020[x], y=df_agg_2020[y], fill="tozeroy", name="2019", marker={"color": "#1a85ff"})
-    )
-    fig.add_trace(go.Scatter(x=df_agg_2019[x], y=df_agg_2019[y], fill="tonexty", name="2018", marker={"color": "grey"}))
-    fig.update_layout(
+def line(x: str, y: str, data_frame: pd.DataFrame):
+    df_agg = data_frame.groupby(x).agg({y: "count"}).reset_index()
+    fig = px.area(
+        data_frame=df_agg,
+        x=x,
+        y=y,
+        color_discrete_sequence=["#1A85FF"],
         title="Complaints over time",
-        xaxis_title="Date Received",
-        yaxis_title="# of Complaints",
-        title_pad_t=4,
-        xaxis={
-            "showgrid": False,
-            "tickmode": "array",
-            "tickvals": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-            "ticktext": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-        },
     )
+    fig.update_layout(xaxis_title="Date Received", yaxis_title="# of Complaints", title_pad_t=4)
     return fig
 
 
@@ -89,29 +84,25 @@ def pie(
     values: str,
     data_frame: pd.DataFrame = None,
     title: Optional[str] = None,
+    custom_order: Optional[List[str]] = None,
 ):
-    """Custom pie chart implementation.
-
-    Based on [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie).
-    """
     df_agg = data_frame.groupby(names).agg({values: "count"}).reset_index()
+
+    # Apply custom order so colors are applied correctly to the pie chart
+    order_mapping = {category: index for index, category in enumerate(custom_order)}
+    df_sorted = df_agg.sort_values(by=names, key=lambda names: names.map(order_mapping))
+
     fig = px.pie(
-        data_frame=df_agg,
+        data_frame=df_sorted,
         names=names,
         values=values,
-        color=names,
-        color_discrete_map={
-            "Closed with explanation": "#1a85ff",
-            "Closed with monetary relief": "#d41159",
-            "Closed with non-monetary relief": "#adbedc",
-            "Closed without relief": "#7ea1ee",
-            "Closed with relief": "#df658c",
-            "Closed": "#1a85ff",
-        },
+        color_discrete_sequence=["#1a85ff", "#7ea1ee", "#adbedc", "#df658c", "#d41159"],
         title=title,
         hole=0.4,
     )
-    fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin={"l": 0, "r": 0, "t": 60, "b": 0})
+
+    fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin=dict(l=0, r=0, t=60, b=0))  # noqa: C408
+    fig.update_traces(sort=False)
     return fig
 
 
@@ -123,11 +114,8 @@ def choropleth(
     title: Optional[str] = None,
     custom_data: Optional[List[str]] = None,
 ):
-    """Custom choropleth implementation.
-
-    Based on [px.choropleth](https://plotly.com/python-api-reference/generated/plotly.express.choropleth).
-    """
     df_agg = data_frame.groupby(locations).agg({color: "count"}).reset_index()
+
     fig = px.choropleth(
         data_frame=df_agg,
         locations=locations,
@@ -151,7 +139,8 @@ def choropleth(
         title=title,
         custom_data=custom_data,
     )
-    fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "bottom"}, "orientation": "h", "x": 0.5, "y": 0})
+
+    fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "right"}})
     return fig
 
 
@@ -201,4 +190,4 @@ COLUMN_DEFS = [
         "flex": 6,
     },
     {"field": "Timely response?", "cellRenderer": "markdown", "headerName": "On time?", "flex": 3},
-]
+]

utils/_helper.py

@@ -1,7 +1,5 @@
 """Contains helper functions and variables."""
 
-from functools import reduce
-
 import numpy as np
 import pandas as pd
 
@@ -40,14 +38,13 @@ def clean_data_and_add_columns(data: pd.DataFrame):
     data["Company response - detailed"] = data["Company response - detailed"].replace("Closed", "Closed without relief")
     data["State"] = data["State"].replace("UNITED STATES MINOR OUTLYING ISLANDS", "UM")
     data["State"] = fill_na_with_random(data, "State")
-    data["Consumer disputed?"] = data["Consumer disputed?"].fillna("No")
 
     # Convert to correct data type
     data["Date Received"] = pd.to_datetime(data["Date Received"], format="%m/%d/%y").dt.strftime("%Y-%m-%d")
+    data["Date Submitted"] = pd.to_datetime(data["Date Submitted"], format="%m/%d/%y").dt.strftime("%Y-%m-%d")
 
     # Create additional columns
-    data["Month"] = pd.to_datetime(data["Date Received"], format="%Y-%m-%d").dt.strftime("%m")
-    data["Year"] = pd.to_datetime(data["Date Received"], format="%Y-%m-%d").dt.strftime("%Y")
+    data["Year-Month Received"] = pd.to_datetime(data["Date Received"], format="%Y-%m-%d").dt.strftime("%Y-%m")
     data["Region"] = data["State"].map(REGION_MAPPING)
     data["Company response"] = np.where(
         data["Company response - detailed"].str.contains("Closed"), "Closed", data["Company response - detailed"]
@@ -55,74 +52,4 @@ def clean_data_and_add_columns(data: pd.DataFrame):
     data["Company response - Closed"] = np.where(
         data["Company response - detailed"].str.contains("Closed"), data["Company response - detailed"], "Not closed"
     )
-
-    # Filter 2018 and 2019 only
-    data = data[(data["Year"].isin(["2018", "2019"]))]
-    return data
-
-
-def create_data_for_kpi_cards(data):
-    """Formats and aggregates the data for the KPI cards."""
-    total_complaints = (
-        data.groupby("Year")
-        .agg({"Complaint ID": "count"})
-        .rename(columns={"Complaint ID": "Total Complaints"})
-        .reset_index()
-    )
-    closed_complaints = (
-        data[data["Company response"] == "Closed"]
-        .groupby("Year")
-        .agg({"Complaint ID": "count"})
-        .rename(columns={"Complaint ID": "Closed Complaints"})
-        .reset_index()
-    )
-    timely_response = (
-        data[data["Timely response?"] == "Yes"]
-        .groupby("Year")
-        .agg({"Complaint ID": "count"})
-        .rename(columns={"Complaint ID": "Timely response"})
-        .reset_index()
-    )
-    closed_without_cost = (
-        data[data["Company response - Closed"] != "Closed with monetary relief"]
-        .groupby("Year")
-        .agg({"Complaint ID": "count"})
-        .rename(columns={"Complaint ID": "Closed w/o cost"})
-        .reset_index()
-    )
-    consumer_disputed = (
-        data[data["Consumer disputed?"] == "Yes"]
-        .groupby("Year")
-        .agg({"Complaint ID": "count"})
-        .rename(columns={"Complaint ID": "Consumer disputed"})
-        .reset_index()
-    )
-
-    # Merge all data frames into one
-    dfs_to_merge = [total_complaints, closed_complaints, timely_response, closed_without_cost, consumer_disputed]
-    df_kpi = reduce(lambda left, right: pd.merge(left, right, on="Year", how="outer"), dfs_to_merge)
-
-    # Calculate percentages
-    df_kpi.fillna(0, inplace=True)
-    df_kpi["Closed Complaints"] = df_kpi["Closed Complaints"] / df_kpi["Total Complaints"] * 100
-    df_kpi["Open Complaints"] = 100 - df_kpi["Closed Complaints"]
-    df_kpi["Timely response"] = df_kpi["Timely response"] / df_kpi["Total Complaints"] * 100
-    df_kpi["Closed w/o cost"] = df_kpi["Closed w/o cost"] / df_kpi["Total Complaints"] * 100
-    df_kpi["Consumer disputed"] = df_kpi["Consumer disputed"] / df_kpi["Total Complaints"] * 100
-
-    # Pivot the dataframe and flatten
-    df_kpi["index"] = 0
-    df_kpi = df_kpi.pivot(
-        index="index",
-        columns="Year",
-        values=[
-            "Total Complaints",
-            "Closed Complaints",
-            "Open Complaints",
-            "Timely response",
-            "Closed w/o cost",
-            "Consumer disputed",
-        ],
-    )
-    df_kpi.columns = [f"{kpi}_{year}" for kpi, year in df_kpi.columns]
-    return df_kpi
+    return data