expanding dash

2025-04-05 11:04:40 +01:00
parent 5af82e5753
commit b573b3b9bc
6 changed files with 206 additions and 77 deletions
@@ -0,0 +1,105 @@
+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,
+    )
+    ]