Jake/data_pipeline_for_YNAB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

starting to implement callbacks

Browse Source
This commit is contained in:
Jake
2025-04-05 11:49:15 +01:00
parent b573b3b9bc
commit c9c287aa8a
4 changed files with 190 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
visuals/layout.py
+91 -81
View File
@@ -2,104 +2,114 @@ from dash import html, dcc
from datetime import date
import dash_bootstrap_components as dbc
import visuals.components as charts
def create_layout():
main_body = create_main_body()
sidebar = create_sidebar()
return [html.Div(main_body + sidebar)]
def create_layout(data):
main_body = create_main_body(data)
topbar = create_topbar()
def create_sidebar():
return [html.Div(topbar + main_body)]
def create_topbar():
return [
html.Div(id='off-canvas-section', style={'display': 'none'}),
dbc.Row(
dbc.Col(
dcc.DatePickerRange(
id='date-picker-range',
start_date=date(2024, 1, 1),
end_date=date(2026, 1, 1)
),
width=4
),
align='center'
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():
return [html.Button('Toggle Off-Canvas', id='toggle-button'),
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.Row(
dbc.Col(
dbc.Card(
dbc.CardBody(
[
html.H4("Spend Per Day", className="card-title"),
dcc.Graph(figure=charts.spend_per_day_line),
]
),
className="mb-4",
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 Category", className="card-title"
),
dcc.Graph(figure=charts.spend_per_category_bar),
]
),
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",
),
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,
),
width=5,
),
dbc.Col(
dbc.Card(
dbc.CardBody(
[
dcc.Markdown(f"""
dbc.Col(
dbc.Card(
dbc.CardBody(
[
dcc.Markdown(f"""
## Total Spend:
### £{charts.total_spend:,}
### £{data.total_spend:,}
"""),
]
]
),
className="mb-4",
),
className="mb-4",
width=2,
),
width=2,
),
dbc.Col(
dbc.Card(
dbc.CardBody(
[
html.H4("Spend Per Payee", className="card-title"),
dcc.Graph(figure=charts.spend_per_payee_bar),
]
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",
),
className="mb-4",
width=5,
),
width=5,
),
]
),
],
fluid=True,
)
]
),
],
fluid=True,
),
]