dash-api/src/components/data_table.py

import pandas as pd
import plotly.express as px
from dash import Dash, dcc, html
from dash.dependencies import Input, Output

from ..data.loader import DataSchema
from . import ids


def render(app: Dash, data: pd.DataFrame) -> html.Div:
    @app.callback(
        Output(ids.BAR_CHART, "children"),
        [
            Input(ids.YEAR_DROPDOWN, "value"),
            Input(ids.MONTH_DROPDOWN, "value"),
            Input(ids.CATEGORY_DROPDOWN, "value"),
        ],
    )
    def update_data_table(
        years: list[str], months: list[str], categories: list[str]
    ) -> list[dict]:
        filtered_data = data.query(
            "year in @years and month in @months and category in @categories"
        )

        if filtered_data.shape[0] == 0:
            return []

        def create_pivot_table() -> pd.DataFrame:
            pt = filtered_data.pivot_table(
                values=DataSchema.AMOUNT,
                index=[DataSchema.CATEGORY],
                aggfunc="sum",
                fill_value=0,
                dropna=False,
            )
            return pt.reset_index().sort_values(DataSchema.AMOUNT, ascending=False)

        return create_pivot_table().to_dict("records")

    return html.Div(
        DataTable(
            id=ids.DATA_TABLE,
            columns=[
                {"name": col, "id": col}
                for col in [DataSchema.CATEGORY, DataSchema.AMOUNT]
            ],
            data=[],
            sort_action="native",
        )
    )