Jake
106 lines
3.2 KiB
Python
106 lines
3.2 KiB
Python
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_sidebar():
|
|
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'
|
|
)
|
|
]
|
|
|
|
def create_main_body():
|
|
return [html.Button('Toggle Off-Canvas', id='toggle-button'),
|
|
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=charts.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=charts.spend_per_category_bar),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=5,
|
|
),
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
dcc.Markdown(f"""
|
|
## Total Spend:
|
|
### £{charts.total_spend:,}
|
|
"""),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=2,
|
|
),
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
html.H4("Spend Per Payee", className="card-title"),
|
|
dcc.Graph(figure=charts.spend_per_payee_bar),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=5,
|
|
),
|
|
]
|
|
),
|
|
],
|
|
fluid=True,
|
|
)
|
|
]
|