From 201f8eb2c9b95dfd34b82eb4547a277f16682bcf Mon Sep 17 00:00:00 2001
From: Jake Pullen <jake.pullen333@gmail.com>
Date: Sun, 11 Aug 2024 10:42:05 +0100
Subject: [PATCH] more dash workings

---
 dash_app.py      | 86 +++++++++++++++++++++++++++++++++++++++++-------
 requirements.txt |  6 +++-
 2 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/dash_app.py b/dash_app.py
index d08736d..64f2055 100644
--- a/dash_app.py
+++ b/dash_app.py
@@ -1,21 +1,85 @@
-# Import packages
-from dash import Dash, html, dash_table
-import polars as pd
+import polars as pl
+import plotly.express as px
+from dash import Dash, html, dcc
+import dash_bootstrap_components as dbc
+from dash.dash_table import DataTable
 
 # Incorporate data
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
+df = pl.read_parquet('data/warehouse/transactions.parquet')
+print("Data loaded from Parquet file:")
+print(df)
+
+relevant_data = df.sql('''
+    SELECT 
+        date,
+        sum(transaction_amount) as total
+    FROM self
+    GROUP BY date
+    ORDER BY date DESC
+    '''
+)
+print("Data after SQL query:")
+print(relevant_data)
 
 # Convert DataFrame to list of dictionaries
-data = df.to_pandas().to_dict('records')
+data = relevant_data.to_dicts()
+print("Data converted to list of dictionaries:")
+print(data)
 
-# Initialize the app
-app = Dash()
+# Initialize the app with a dark theme
+app = Dash(external_stylesheets=[dbc.themes.DARKLY])
+
+# Create the line graph with dark mode styling
+fig = px.line(relevant_data.to_pandas(), x="date", y="total", title='Spend Per Day')
+fig.update_layout(
+    plot_bgcolor='black',
+    paper_bgcolor='black',
+    font_color='white'
+)
 
 # App layout
-app.layout = [
-    html.Div(children='My First App with Data'),
-    dash_table.DataTable(data=data)
-]
+app.layout = dbc.Container(
+    [
+        dbc.Row(
+            dbc.Col(html.Div("My First App with My Data", className="text-center text-light"), width=12)
+        ),
+        dbc.Row(
+            [
+                dbc.Col(
+                    dbc.Card(
+                        dbc.CardBody(
+                            [
+                                html.H4("Data Table", className="card-title"),
+                                DataTable(
+                                    data=data, 
+                                    columns=[{"name": i, "id": i} for i in relevant_data.columns], 
+                                    page_size=5,
+                                    style_header={'backgroundColor': 'black', 'color': 'white'},
+                                    style_cell={'backgroundColor': 'black', 'color': 'white'}
+                                )
+                            ]
+                        ),
+                        className="mb-4"
+                    ),
+                    width=6
+                ),
+                dbc.Col(
+                    dbc.Card(
+                        dbc.CardBody(
+                            [
+                                html.H4("Spend Per Day", className="card-title"),
+                                dcc.Graph(figure=fig)
+                            ]
+                        ),
+                        className="mb-4"
+                    ),
+                    width=6
+                )
+            ]
+        )
+    ],
+    fluid=True
+)
 
 # Run the app
 if __name__ == '__main__':
diff --git a/requirements.txt b/requirements.txt
index d7b59fe..1642cd8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,4 +2,8 @@ python-dotenv
 polars
 requests
 pyyaml
-dash
\ No newline at end of file
+#visualisation requirements below
+dash
+pandas
+pyarrow 
+dash-bootstrap-components
\ No newline at end of file