Hi,
I am tring to make some dash cards that shows live metrics coming from a mongoDB collection that gets updated with new values, frequently either every 1 sec or 5 secs. This is my callback function for the dash app.py
## Load Libraries
from dash import Dash, html, dcc, dash_table
import dash_bootstrap_components as dbc
import dash.dash_table.FormatTemplate as FormatTemplate
from dash.dependencies import Input, Output
from dash_iconify import DashIconify
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
from datetime import datetime, date
######
from MongoWorks import MongoDB_Collection_Read
## GLOBAL VARIABLES
account_start_date = date(2022, 5, 1)
account_info = {"AccountStartDate" : "30.05.2022" ,"OpeningBalance": 100000, "currency" : "USD"} # MongoDB_Collection_Read(collection = "AccountInfo").to_dict("records")[0] # AccountInfo
STARTING_DATETIME = account_info["AccountStartDate"]
STARTING_BALANCE = account_info["OpeningBalance"]
account_currency_symbols = {'USD': '$','GBP': '£','EUR': '€'}
CURRENCY_PREFIX = account_currency_symbols[account_info['currency']]
## Google Web fonts
orbitron = 'https://fonts.googleapis.com/css2?family=Orbitron&display=swap'
rajdhani = 'https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap'
## Card Style Parameters
common_card_style = {
"width": "20.5rem",
"height": "15rem",
"border-radius": "5%",
"backgroundColor": "#1e2130",
"color": "primary"
}
card_info_hover_text = {
'Open Positions':"Nr. of Open Positions",
'P&L':"The total floating Profit or Loss from all open positions",
'Equity': dcc.Markdown("Floating Equity = `sum(Balance, floating P&L)`"),
'Balance':"Total Capital available in the account factoring PnL from all closed positions"
}
live_cards = ["Equity","P&L","Open Positions"]
### Create Card function
def create_card(card_name: str, card_style: dict = common_card_style, card_body_style: dict = {"width": "20rem"},value: float = 2244151, caption_class_name: str = None, card_id: str = None, caption: str = None):
"""Creates Card body and card contents with style options"""
card = dbc.Card(
dbc.CardBody([
html.Div([html.H4(children = card_name, className="card_title", style = {'width': '20rem'}),
html.Hr(style = {'width': '17em','size' : '50'}), #
html.P(children = caption, id=f'card_caption_{card_name}', className="card_caption", style = {'width': '20rem'}),
html.Br(),
html.H1(children=value, id=f'card_value_{card_name}', className="card_value", style = {'color': 'cornflowerblue','width': '20rem'}),
html.Span(DashIconify(id = f'tooltip-target_{card_name}',icon="bi:info-circle-fill",width=20,height=20),
style={"color": "white"}, className="information_tool_tip"),
html.A(html.I(className="fa fa-circle blink",id = f'live_dot_{card_name}', style = {"color" : "yellow"}) if card_name in live_cards else "", title = "LIVE Updates"),
dbc.Tooltip(card_info_hover_text[card_name],id = f'cards_info_tooltip_{card_name}',target = f'tooltip-target_{card_name}',placement = "bottom-start")]),
],style = card_body_style),
style = card_style,className="card_body")
return card
##--------------------------------------------------------------------------------------------------------------------
## DASH APP
# Instantiate our App and incorporate BOOTSTRAP theme stylesheet
external_stylesheets = [orbitron, rajdhani, dbc.themes.CYBORG, dbc.icons.FONT_AWESOME]
app = Dash(__name__, external_stylesheets = external_stylesheets)
app.css.config.serve_locally = True
###-----------------------------------------------------------------------------------------------------------##
# Build the layout to define what will be displayed on the page
content = dbc.Container(
[ html.Hr(style={"width": "100%", 'borderTop': '3px solid deepskyblue','borderBottom': '2px solid aqua',"opacity": "unset"}),
dbc.Label("Live Performance Metrics", style = {"color": "white","font-weight":"light",'display' : 'flex','justifyContent': 'center'}),
## Cards
dbc.Row(
[dbc.Col(create_card('Open Positions', caption='Number Of Active Trades', caption_class_name='op_card_caption'),width="auto"),
dbc.Col(create_card('P&L', caption = 'Floating Profit & Loss', caption_class_name='pnl_card_caption'), width="auto"),
dbc.Col(create_card('Equity', caption = 'Floating Equity', caption_class_name='floating_equity_caption'), width="auto"),
dbc.Col(create_card('Balance', caption = 'Closed Balance', caption_class_name='balance_card_caption'), width="auto")],
justify="center",align="center",style={"margin-top": "15%","margin-bottom": "3%"}), # , "height": "100vh"
html.Hr(style = {"borderWidth": "9.5vh","width": "100%","borderColor": "#F3DE8A","opacity": "unset",}),
dcc.Interval(id='live_updates_1s',interval=1 * 1000, n_intervals=0), # interval in 1s = 1000 milliseconds
],id="page-content", className="content",fluid=True
)
app.layout = html.Div([content])
##----------------------------------------------------------------------------------------------------##
## Callback for updating fast cards every 1 sec
@app.callback([Output('card_value_P&L', 'children'), Output('card_value_P&L', 'style'),
Output('card_value_Balance', 'children'), Output('card_value_Balance', 'style'),
Output('card_value_Equity', 'children'), Output('card_value_Equity', 'style'),
Output('card_value_Open Positions', 'children'), Output('live_dot_P&L', 'style'),
Output('live_dot_Equity', 'style'), Output('live_dot_Open Positions', 'style')],
[Input('live_updates_1s', 'n_intervals'), Input('card_value_P&L', 'id'),
Input('card_value_Balance', 'id'), Input('card_value_Equity', 'id'),
Input('card_value_Open Positions', 'id')])
def update_live_metrics(n_intervals,c1,c2,c3,c4):
df_live_trade = MongoDB_Collection_Read(collection = "FloatingEquity").tail(1)
balance, equity, pnl = list(df_live_trade["balance"])[-1], list(df_live_trade["equity"])[-1], list(df_live_trade["PnL"])[-1]
# print(df_live_trade)
print(f"Time: {datetime.now().replace(microsecond = 0)} | Balance: {balance} | Equity: {equity} | PnL: {pnl}")
if (equity < STARTING_BALANCE) or (balance < STARTING_BALANCE):
style_balance = {'color': 'tomato','width': '31rem'}
style_equity = {'color': 'tomato','width': '31rem'}
else:
style_balance = {'color': 'limegreen','width': '31rem'}
style_equity = {'color': 'limegreen','width': '31rem'}
if pnl < 0:
style_profit = {'color': 'tomato','width': '31rem'}
elif pnl == 0:
style_profit = {'color': 'yellow','width': '31rem'}
else:
style_profit = {'color': 'limegreen','width': '31rem'}
open_positions = list(df_live_trade["OpenPositions"])[-1]
if (open_positions > 0) and (pnl != 0.0):
style_pnl_live_update_dot = style_equity_live_update_dot = style_open_positions_live_update_dot = {"color" : "tomato"}
else:
style_pnl_live_update_dot = style_equity_live_update_dot = style_open_positions_live_update_dot = {"display" : "none"}
pnl = CURRENCY_PREFIX + " " + str(pnl)
balance = CURRENCY_PREFIX + " " + str(balance)
equity = CURRENCY_PREFIX + " " + str(equity)
return [pnl], style_profit, [balance], style_balance , [equity] , style_equity, str(open_positions),style_pnl_live_update_dot,style_equity_live_update_dot,style_open_positions_live_update_dot
# Run the App
if __name__ == '__main__':
app.run_server(port=8001,debug=True)
This is the video of the slow performance of the dash cards.
As you can see in the print statements print(f"Time: {datetime.now().replace(microsecond = 0)} | Balance: {balance} | Equity: {equity} | PnL: {pnl}") in the command prompt window, the most recent documents from the MongoDB collection are read at a decent speed every 1 sec, but these same values are not getting updated in the dash cards, at the same speed as the print statements. The update in the dash cards is very slow compared to the values read and printed from the MongoDB collection.
Any ideas why? Would be grateful if someone offers any plausible solution.
Best Regards,
Dilip