Jake Pullen
136 lines
4.8 KiB
Python
136 lines
4.8 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,
|
|
),
|
|
]
|