Jake
116 lines
3.8 KiB
Python
116 lines
3.8 KiB
Python
from dash import html, dcc
|
|
from datetime import date
|
|
import dash_bootstrap_components as dbc
|
|
|
|
|
|
def create_layout(data):
|
|
main_body = create_main_body(data)
|
|
topbar = create_topbar()
|
|
|
|
return [html.Div(topbar + main_body)]
|
|
|
|
|
|
def create_topbar():
|
|
return [
|
|
dbc.Container(
|
|
dbc.Row(
|
|
[
|
|
dbc.Col(
|
|
dcc.DatePickerRange(
|
|
id="date-picker-range",
|
|
start_date=date(2024, 1, 1),
|
|
end_date=date(2026, 1, 1),
|
|
),
|
|
width=4,
|
|
),
|
|
dbc.Col(
|
|
html.Button("Change Date Range", id="date-range-confirm-button"),
|
|
width=2,
|
|
),
|
|
]
|
|
)
|
|
)
|
|
]
|
|
|
|
def create_main_body(data):
|
|
return [
|
|
dbc.Container(
|
|
[
|
|
dbc.Row(
|
|
dbc.Col(
|
|
html.Div(
|
|
"Data Pipeline For YNAB, Preview Visualisations",
|
|
className="text-center text-light",
|
|
),
|
|
width=12,
|
|
)
|
|
),
|
|
dbc.Row(
|
|
[
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
html.H4(
|
|
"Spend Per Day", className="card-title"
|
|
),
|
|
dcc.Graph(figure=data.spend_per_day_line),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=12,
|
|
)
|
|
]
|
|
),
|
|
dbc.Row(
|
|
[
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
html.H4(
|
|
"Spend Per Category", className="card-title"
|
|
),
|
|
dcc.Graph(figure=data.spend_per_category_bar),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=5,
|
|
),
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
dcc.Markdown(f"""
|
|
## Total Spend:
|
|
### £{data.total_spend:,}
|
|
"""),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=2,
|
|
),
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
html.H4(
|
|
"Spend Per Payee", className="card-title"
|
|
),
|
|
dcc.Graph(figure=data.spend_per_payee_bar),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=5,
|
|
),
|
|
]
|
|
),
|
|
],
|
|
fluid=True,
|
|
),
|
|
]
|