Add example charting dashboard with symbol and date selection

assets/dashboard.css

@@ -0,0 +1,27 @@
+body {
+    background-color: #0f0f0f;
+    color: #7a7c7d;
+    font-family: sans-serif;
+}
+
+h1 {
+    color: #7a7c7d;
+}
+
+input {
+    background-color: #0f0f0f !important;
+    color: #7a7c7d !important;
+    border: 2px solid #7a7c7d !important;
+    border-radius: 4px !important;
+    font-size: 14px !important;
+    line-height: 20px !important;
+    padding: 5px !important;
+}
+
+.DateInput {
+    background: #0f0f0f !important;
+}
+
+.SingleDatePickerInput__withBorder {
+    border: 0px !important;
+}

chart.py

@@ -0,0 +1,75 @@
+from iqfeed import get_historical_data, minutes
+from dash import Dash, dcc, html, Input, Output
+from datetime import date, datetime
+from dotenv import load_dotenv
+from pandas import Series
+from plotting import CandlestickChart, figure_with_subplots
+
+load_dotenv()
+
+app = Dash(__name__)
+app.title = 'Chart'
+
+today = date.today()
+
+app.layout = html.Div([
+    dcc.Graph(
+        id = 'candlestick-chart',
+        config = {'displayModeBar': False},
+        # Initializing with an empty chart for default styling.
+        figure = figure_with_subplots([[CandlestickChart(
+            x = Series(today),
+            opens = Series(),
+            highs = Series(),
+            lows = Series(),
+            closes = Series(),
+            title = ''
+        )]])
+    ),
+    # TODO: Move styling information to external file.
+    html.Div([
+        html.Div([
+            dcc.Input(id = 'symbol', type = 'text', value = 'SPY', debounce = True)
+        ], style={'display': 'inline-block', 'padding': '0 10px'}),
+        html.Div([
+            dcc.DatePickerSingle(
+                id = 'date-picker',
+                date = today,
+                min_date_allowed = date(2016, 1, 1),
+                max_date_allowed = today,
+                display_format = 'YYYY-MM-DD'
+            )
+        ], style={'display': 'inline-block', 'padding': '0 10px'}),
+    ], style={'margin': '0px 100px'})
+])
+
+@app.callback(
+    Output('candlestick-chart', 'figure'),
+    [
+        Input('symbol', 'value'),
+        Input('date-picker', 'date')
+    ]
+)
+def update_graph(symbol, selected_date):
+    selected_datetime = datetime.strptime(selected_date, '%Y-%m-%d')
+
+    data = get_historical_data(
+        symbol = symbol,
+        interval = minutes(5),
+        start_date = datetime(selected_datetime.year, selected_datetime.month, selected_datetime.day, 7, 50),
+        end_date = datetime(selected_datetime.year, selected_datetime.month, selected_datetime.day, 16, 0)
+    )
+
+    candlestick_chart = CandlestickChart(
+        x = data['Date'],
+        opens = data['Open'],
+        highs = data['High'],
+        lows = data['Low'],
+        closes = data['Close'],
+        title = symbol
+    )
+
+    return figure_with_subplots([[candlestick_chart]])
+
+if __name__ == '__main__':
+    app.run_server(debug = False)