Jake Pullen
115 lines
3.4 KiB
Python
115 lines
3.4 KiB
Python
from dash import html, dcc
|
|
from datetime import date
|
|
import dash_bootstrap_components as dbc
|
|
from datetime import timedelta
|
|
|
|
today = date.today()
|
|
one_year_ago = today - timedelta(days=365)
|
|
|
|
|
|
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(
|
|
html.Div(html.H1("Data Pipeline For YNAB, Preview Visualisations"),
|
|
className="text-center text-light",
|
|
),
|
|
width=12,
|
|
)
|
|
),
|
|
dbc.Row(
|
|
[
|
|
dbc.Col(
|
|
dcc.DatePickerRange(
|
|
first_day_of_week=1,
|
|
display_format="YYYY-MM-DD",
|
|
id="date-picker-range",
|
|
start_date=one_year_ago,
|
|
end_date=today,
|
|
),
|
|
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(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[html.H4(
|
|
"Spend Per Day", className="card-title"
|
|
),
|
|
dcc.Graph(figure=data['spend_per_day_line'],id='spend_per_day'),
|
|
]
|
|
),
|
|
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'],id='spend_per_category'),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=5,
|
|
),
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
dcc.Markdown('## Total Spend:'),
|
|
dcc.Markdown(data['total_spend'],id='total_spend'),
|
|
],
|
|
),
|
|
className="text-center text-light",
|
|
),
|
|
width=2,
|
|
),
|
|
dbc.Col(
|
|
dbc.Card(
|
|
dbc.CardBody(
|
|
[
|
|
html.H4(
|
|
"Spend Per Payee", className="card-title"
|
|
),
|
|
dcc.Graph(figure=data['spend_per_payee_bar'],id='spend_per_payee'),
|
|
]
|
|
),
|
|
className="mb-4",
|
|
),
|
|
width=5,
|
|
),
|
|
]
|
|
),
|
|
],
|
|
fluid=True,
|
|
),
|
|
]
|