Bring over iterations

README.md

@@ -1,5 +1,5 @@
 ---
-title: KPI Demo
+title: KPI Dashboard
 emoji: 📊
 colorFrom: blue
 colorTo: blue
@@ -11,26 +11,41 @@ short_description: Example of a Key Performance Indicator (KPI) dashboard
 
 # KPI dashboard
 
-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.
+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.
 
-Special thanks to the [#RWFD Real World Fake Data initiative](https://opendatainitiative.io/), a community project that
+**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
 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.
+**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/)
 
-<img src="./assets/images/kpi_dashboard.gif" alt="Gif to KPI dashboard">
+### 🚀 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">
+
+---
 
-## Possible future iterations
+## How to run the example locally
 
-- 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
+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/.

app.py

@@ -2,113 +2,123 @@
 
 import pandas as pd
 import vizro.models as vm
-from utils._charts import COLUMN_DEFS, KPI, bar, choropleth, line, pie
-from utils._helper import clean_data_and_add_columns
+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
+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)
-vm.Container.add_type("components", KPI)
+df_kpi_cards = create_data_for_kpi_cards(df_complaints)
+vm.Page.add_type("components", FlexContainer)
+
 
 # SUB-SECTIONS ------------------------------------------------------------------------------------
-kpi_banner = vm.Container(
-    id="kpi-banner",
-    title="",
+kpi_banner = FlexContainer(
     components=[
-        # Note: For some KPIs the icon/sign goes 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",
-        ),
-        KPI(
-            title="Closed Complaints",
-            value="99.6%",
-            icon="arrow_circle_up",
-            sign="delta-pos",
-            ref_value="+0.2% vs. LY",
+        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})",
+            ),
         ),
-        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 Complaints_2019",
+                reference_column="Closed Complaints_2018",
+                title="Closed Complaints",
+                value_format="{value:.1f}%",
+                reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
+            )
         ),
-        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="Timely response_2019",
+                reference_column="Timely response_2018",
+                title="Timely Response",
+                value_format="{value:.1f}%",
+                reference_format="{delta:+.1f}pp  vs. 2018 ({reference:.1f}%)",
+            )
         ),
-        KPI(
-            title="Closed w/o cost",
-            value="84.5%",
-            icon="arrow_circle_down",
-            sign="delta-neg",
-            ref_value="-8.5% 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}%)",
+            )
         ),
-        KPI(
-            title="Consumer disputed",
-            value="9.5%",
-            icon="arrow_circle_up",
-            sign="delta-neg",
-            ref_value="+2.3% 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}%)",
+            )
         ),
     ],
+    classname="kpi-banner",
 )
 
 bar_charts_tabbed = vm.Tabs(
     tabs=[
         vm.Container(
-            title="By Issue",
+            title="By Product",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Issue",
+                        y="Product",
                         x="Complaint ID",
                     ),
                 )
             ],
         ),
         vm.Container(
-            title="By Product",
+            title="By Channel",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Product",
+                        y="Channel",
                         x="Complaint ID",
                     ),
                 )
             ],
         ),
         vm.Container(
-            title="By Channel",
+            title="By Region",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Channel",
+                        y="Region",
                         x="Complaint ID",
                     ),
                 )
             ],
         ),
         vm.Container(
-            title="By Region",
+            title="By Issue",
             components=[
                 vm.Graph(
                     figure=bar(
                         data_frame=df_complaints,
-                        y="Region",
+                        y="Issue",
                         x="Complaint ID",
                     ),
                 )
@@ -123,26 +133,22 @@ page_exec = vm.Page(
     layout=vm.Layout(
         grid=[
             [0, 0],
+            [0, 0],
+            [1, 2],
             [1, 2],
             [1, 2],
             [1, 3],
             [1, 3],
+            [1, 3],
         ],
     ),
     components=[
         kpi_banner,
         bar_charts_tabbed,
-        vm.Graph(figure=line(data_frame=df_complaints, y="Complaint ID", x="Year-Month Received")),
+        vm.Graph(figure=area(data_frame=df_complaints, y="Complaint ID", x="Month")),
         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",
@@ -153,23 +159,15 @@ page_exec = vm.Page(
 
 page_region = vm.Page(
     title="Regional View",
-    layout=vm.Layout(grid=[[0, 0]] + [[1, 2]] * 4),
+    layout=vm.Layout(grid=[[0, 1]]),
     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",
+                title="Complaints by State <br><sup> ⤵ Click on a state to filter the "
+                "charts on the right. Refresh the page to deselect.</sup>",
                 custom_data=["State"],
             ),
             actions=[
@@ -181,26 +179,26 @@ page_region = vm.Page(
         vm.Tabs(
             tabs=[
                 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",
                             ),
                         )
                     ],
                 ),
                 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",
                             ),
                         )
@@ -232,7 +230,7 @@ page_table = vm.Page(
 
 dashboard = vm.Dashboard(
     pages=[page_exec, page_region, page_table],
-    title="Cumulus Financial Corporation",
+    title="Cumulus Financial Corp. - Fiscal Year 2019",
     navigation=vm.Navigation(
         nav_selector=vm.NavBar(
             items=[
@@ -247,5 +245,5 @@ dashboard = vm.Dashboard(
 app = Vizro().build(dashboard)
 server = app.dash.server
 
-if __name__ == "__main__":  
-    app.run()
+if __name__ == "__main__":
+    app.run()

assets/css/custom.css

@@ -2,78 +2,39 @@
   padding-left: 4px;
 }
 
-.card {
-  padding: 8px;
+.card-kpi {
+  min-width: 220px;
+  padding: 0.75rem;
 }
 
-.kpi-card-ref {
-  min-width: 168px;
-}
-
-.kpi-card-ref h4 {
-  margin: 0;
-}
-
-.kpi-card-ref > span {
+.kpi-banner {
   display: flex;
-  font-weight: 600;
-  gap: 4px;
+  gap: 1rem;
+  height: 100%;
+  overflow: scroll;
 }
 
-.kpi-card-ref .delta-pos {
-  color: #1a85ff;
+.kpi-banner .figure-container {
+  height: unset;
 }
 
-.kpi-card-ref .delta-neg {
-  color: #d41159;
+.kpi-banner::-webkit-scrollbar-thumb {
+  border: 5px solid var(--main-container-bg-color);
 }
 
-.kpi-card-ref .material-symbols-outlined {
-  font-size: 16px;
-  line-height: 20px;
+/* Apply reverse color coding for one KPI card */
+#kpi-reverse-coloring .card-kpi .color-pos.card-footer {
+  color: var(--bs-pink);
 }
 
-.kpi-card-ref > div {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  margin: 0;
+#kpi-reverse-coloring .card-kpi .color-neg.card-footer {
+  color: var(--bs-blue);
 }
 
-.kpi-card-ref > p {
-  align-items: center;
-  color: var(--text-secondary);
-  display: flex;
-  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;
-}
-
-#kpi-banner .container__title {
-  display: none;
-}
-
-#kpi-banner .grid-layout {
-  display: flex;
-  flex-direction: row;
-  overflow: auto;
+#kpi-reverse-coloring .card-kpi:has(.color-pos) {
+  border-left: 4px solid var(--bs-pink);
 }
 
-#kpi-banner > ::-webkit-scrollbar-thumb {
-  border: 6px solid;
-  border-color: var(--main-container-bg-color);
+#kpi-reverse-coloring .card-kpi:has(.color-neg) {
+  border-left: 4px solid var(--bs-blue);
 }

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,35 +11,23 @@ from vizro.models.types import capture
 
 
 # CUSTOM COMPONENTS -------------------------------------------------------------
-# 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
+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):
-        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",
+        """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(
@@ -49,8 +37,11 @@ def bar(
     top_n: int = 15,
     custom_data: Optional[List[str]] = None,
 ):
-    df_agg = data_frame.groupby(y).agg({x: "count"}).sort_values(by=x, ascending=False).reset_index()
+    """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,
@@ -60,21 +51,38 @@ def bar(
         color_discrete_sequence=["#1A85FF"],
         custom_data=custom_data,
     )
-    fig.update_layout(xaxis_title="# of Complaints", yaxis=dict(title="", autorange="reversed"))  # noqa: C408
+    fig.update_layout(xaxis_title="# of Complaints", yaxis={"title": "", "autorange": "reversed"})
     return fig
 
 
 @capture("graph")
-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"],
+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(
         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
 
 
@@ -84,25 +92,29 @@ def pie(
     values: str,
     data_frame: pd.DataFrame = None,
     title: Optional[str] = None,
-    custom_order: Optional[List[str]] = None,
 ):
-    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))
+    """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()
     fig = px.pie(
-        data_frame=df_sorted,
+        data_frame=df_agg,
         names=names,
         values=values,
-        color_discrete_sequence=["#1a85ff", "#7ea1ee", "#adbedc", "#df658c", "#d41159"],
+        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",
+        },
         title=title,
         hole=0.4,
     )
-
-    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)
+    fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin={"l": 0, "r": 0, "t": 60, "b": 0})
     return fig
 
 
@@ -114,8 +126,11 @@ def choropleth(
     title: Optional[str] = None,
     custom_data: Optional[List[str]] = None,
 ):
-    df_agg = data_frame.groupby(locations).agg({color: "count"}).reset_index()
+    """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,
@@ -139,8 +154,7 @@ def choropleth(
         title=title,
         custom_data=custom_data,
     )
-
-    fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "right"}})
+    fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "bottom"}, "orientation": "h", "x": 0.5, "y": 0})
     return fig
 
 
@@ -190,4 +204,4 @@ COLUMN_DEFS = [
         "flex": 6,
     },
     {"field": "Timely response?", "cellRenderer": "markdown", "headerName": "On time?", "flex": 3},
-]
+]

utils/_helper.py

@@ -1,5 +1,7 @@
 """Contains helper functions and variables."""
 
+from functools import reduce
+
 import numpy as np
 import pandas as pd
 
@@ -38,13 +40,14 @@ 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["Year-Month Received"] = pd.to_datetime(data["Date Received"], format="%Y-%m-%d").dt.strftime("%Y-%m")
+    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["Region"] = data["State"].map(REGION_MAPPING)
     data["Company response"] = np.where(
         data["Company response - detailed"].str.contains("Closed"), "Closed", data["Company response - detailed"]
@@ -52,4 +55,74 @@ 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"
     )
-    return data
+
+    # 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