Fe dashboard page

frontend/pages/breakdown/breakdown.py

@@ -7,9 +7,10 @@
 from app import app
 from pages.breakdown import breakdown_callbacks
 
-
 df = pd.read_csv('pages/breakdown/dummies.csv')
 
+# df = pd.read_csv('pages/breakdown/Transactions_2022Q1.csv')
+
 layout = dbc.Container([
     dbc.Row([
         dbc.Col(html.H1("Breakdown Dashboard",
@@ -30,13 +31,7 @@
             dcc.Graph(id = 'yearly_spending_graph', figure={})
         ], width = {'size':6}),
 
-        dbc.Col(html.P('Lorem ipsum dolor sit amet, consectetur adipiscing elit,\
-                       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
-                       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\
-                       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\
-                       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\
-                       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\
-                       deserunt mollit anim id est laborum.', className='text-right text-primary, mb-4'),
+        dbc.Col(html.P('Shows your spending over the selected year.', className='text-right text-primary, mb-4'),
                 width = {'size': 3,'offset' : 1})
 
     ]),
@@ -54,13 +49,7 @@
             dcc.Graph(id = 'yearly_saving_graph', figure={})
         ], width = {'size':6}),
 
-        dbc.Col(html.P('Lorem ipsum dolor sit amet, consectetur adipiscing elit,\
-                       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
-                       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\
-                       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\
-                       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\
-                       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\
-                       deserunt mollit anim id est laborum.', className='text-right text-primary, mb-4'),
+        dbc.Col(html.P('Shows your saving over the selected year.', className='text-right text-primary, mb-4'),
                 width = {'size': 3, 'offset': 1})
 
     ])

frontend/pages/dashboard/dashboard.py

@@ -1,6 +1,76 @@
-import dash_html_components as html
-import dash_core_components as dcc
+import dash
+from dash import dcc, html
 import dash_bootstrap_components as dbc
 from pages.dashboard import dashboard_callbacks
+import pandas as pd
+import dash_table
+from datetime import datetime as dt
 
-layout = dbc.Container()
+
+df = pd.read_csv('pages/dashboard/Transactions_2022Q1.csv')
+df.drop(['enrich', 'transactionDate', 'subClass', 'connection','links.self', 'links.account', 'links.institution', 'links.connection', 'subClass.code'],axis = 1, inplace=True)
+df['postDate'] = pd.to_datetime(df['postDate'],errors="coerce")
+df.set_index('postDate', inplace=True)
+
+layout = dbc.Container([
+
+    dbc.Row([
+        html.H1("YOUR SPENDING BREAKDOWN",
+            className='text-center text-primary mb-4'),  
+
+        html.H3("SPENDING CATEGORIZATION",
+            className='text-center text-primary mb-4')
+        ]),
+
+    dbc.Row([
+
+        dbc.Col(
+            html.P('Chart shows categories of spending over a period.', className='text-right text-primary, mb-4'),
+            width = {'size': 3,'offset' : 0}),
+
+        dbc.Col([
+            dcc.DatePickerRange(
+                id='transaction_range',
+                calendar_orientation='horizontal',
+                day_size=35,
+                end_date_placeholder_text="End",
+                with_portal=False,
+                first_day_of_week=0,
+                reopen_calendar_on_clear=True,
+                is_RTL=False, 
+                clearable=True,
+                number_of_months_shown=1, 
+                min_date_allowed=dt(2022, 1, 1),
+                max_date_allowed=dt(2022, 3, 31),
+                initial_visible_month=dt(2022, 1, 1),
+                start_date=dt(2022, 1, 1).date(),
+                end_date=dt(2022, 3, 31).date(),
+                display_format='MMM Do, YY',
+                month_format='MMMM, YYYY',
+                minimum_nights=1,
+                persistence=True,
+                persisted_props=['start_date'],
+                persistence_type='session',
+
+                updatemode='singledate'
+                )  
+            ],width = {'size': 5,'offset' : 1}),
+
+            dcc.Graph(id = 'piechart', figure={})
+
+        ]),
+
+    dbc.Row(
+        dash_table.DataTable(
+            id = 'transaction_table',
+            data = df.to_dict('records'), 
+            columns = [{"name": i, "id": i} for i in df.columns],
+            style_cell = {'textAlign':'left'},
+            style_header={
+            'backgroundColor': '#4f8fe3',
+            'fontWeight': 'bold'
+            },
+            page_size=20
+            )
+        )
+])

frontend/pages/dashboard/dashboard_callbacks.py

@@ -1,3 +1,54 @@
+import dash
 from classes.api import API
 from dash.dependencies import Input, Output, State
-from app import app
+from app import app
+import pandas as pd
+import plotly
+import plotly.express as px
+
+
+
+
+df = pd.read_csv('pages/dashboard/Transactions_2022Q1.csv')
+
+@app.callback(
+    Output("transaction_table", "data"),
+    [
+        Input("transaction_range", "start_date"),
+        Input("transaction_range", "end_date"),
+    ],
+)
+def update_table(start_date, end_date):
+
+    data = df.to_dict("records")
+    if start_date and end_date:
+        mask = (df['postDate'] >= start_date) & (df['postDate'] <= end_date)
+        data = df.loc[mask].to_dict("records")
+    return data
+
+
+@app.callback(
+    Output('piechart', 'figure'),
+    [
+    Input("transaction_range", "start_date"),
+    Input("transaction_range", "end_date"),
+    ],
+)
+def update_graph(start_date, end_date):
+
+    if start_date and end_date:
+        mask = (df['postDate'] >= start_date) & (df['postDate'] <= end_date)
+        data = df.loc[mask]
+
+    data = data[data['direction'] == 'debit']
+    data['amount'] = data['amount'].astype('float64')
+    data['amount'] = data['amount'].abs()
+
+    fig_pie = px.pie(
+        data_frame = data,
+        names = "subClass.title",
+        values = 'amount',
+        hole = .3,
+        labels = "subClass.title"
+    )
+    return fig_pie