added table functionality

src/components/data_table.py

@@ -1,7 +1,7 @@
 import pandas as pd
-import plotly.express as px
+from dash import Dash, html
-from dash import Dash, dcc, html
 from dash.dependencies import Input, Output
+from dash_table import DataTable
 
 from ..data.loader import DataSchema
 from . import ids
@@ -9,22 +9,22 @@ from . import ids
 
 def render(app: Dash, data: pd.DataFrame) -> html.Div:
     @app.callback(
-        Output(ids.BAR_CHART, "children"),
+        Output(ids.DATA_TABLE, "data"),
         [
             Input(ids.YEAR_DROPDOWN, "value"),
             Input(ids.MONTH_DROPDOWN, "value"),
             Input(ids.CATEGORY_DROPDOWN, "value"),
         ],
     )
-    def update_bar_chart(
+    def update_data_table(
         years: list[str], months: list[str], categories: list[str]
-    ) -> html.Div:
+    ) -> list[dict]:
         filtered_data = data.query(
             "year in @years and month in @months and category in @categories"
         )
 
         if filtered_data.shape[0] == 0:
-            return html.Div("No data selected.", id=ids.BAR_CHART)
+            return []
 
         def create_pivot_table() -> pd.DataFrame:
             pt = filtered_data.pivot_table(
@@ -36,13 +36,16 @@ def render(app: Dash, data: pd.DataFrame) -> html.Div:
             )
             return pt.reset_index().sort_values(DataSchema.AMOUNT, ascending=False)
 
-        fig = px.bar(
+        return create_pivot_table().to_dict("records")
-            create_pivot_table(),
+
-            x=DataSchema.CATEGORY,
+    return html.Div(
-            y=DataSchema.AMOUNT,
+        DataTable(
-            color=DataSchema.CATEGORY,
+            id=ids.DATA_TABLE,
+            columns=[
+                {"name": col, "id": col}
+                for col in [DataSchema.CATEGORY, DataSchema.AMOUNT]
+            ],
+            data=[],
+            sort_action="native",
+        )
     )
-
-        return html.Div(dcc.Graph(figure=fig), id=ids.BAR_CHART)
-
-    return html.Div(id=ids.BAR_CHART)

src/components/layout.py

@@ -4,7 +4,7 @@ from src.components import (
     bar_chart,
     category_dropdown,
     month_dropdown,
-    pie_chart,
+    data_table,
     year_dropdown,
 )
 
@@ -24,6 +24,6 @@ def create_layout(app: Dash, data: pd.DataFrame) -> html.Div:
                 ],
             ),
             bar_chart.render(app, data),
-            pie_chart.render(app, data),
+            data_table.render(app, data),
         ],
     )