Hi,
i am trying to call multiple layouts(report1, report1, dashboard) from one single file(index) using different pathnames. while trying to call dashboard file some callbacks are getting ignored and am unable to update screen.
Index.py
import sys
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_renderer
import logging
from logging.handlers import RotatingFileHandler
from application import app
from reports import inwardReport, outwardReport, safaiiSathiReport, recyclersReport
import dashBoard
sys.path.append('/home/ec2-user/projects/dashboard/')
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/reports/inwardReport':
print("given path: " + pathname)
return inwardReport.layout
elif pathname == '/reports/outwardReport':
print("given path: " + pathname)
return outwardReport.layout
elif pathname == '/reports/safaiiSathiReport':
print("given path: " + pathname)
return safaiiSathiReport.layout
elif pathname == '/reports/recyclersReport':
print("given path: " + pathname)
return recyclersReport.layout
elif pathname == '/charts/userDashboard':
print("given path " + pathname)
return dashBoard.layout
else:
return 'please give valid pathname'
if __name__ == '__main__':
app.run_server(debug=True)
dashboard.py
from datetime import timedelta as td, date
import dash
from urllib.parse import parse_qs
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
import sys
import logging
from logging.handlers import RotatingFileHandler
# importing other files
import sqlQuries
from application import app
import validateUser
sys.path.append('/home/ec2-user/projects/dashboard/')
layout = html.Div([
dcc.Location(id='urlPie', refresh=False),
html.Div(id='user', style={'display': 'none'}),
html.Div([
dcc.Dropdown(id='userLocations', style={'height': '10%'}, placeholder='All centers')
], className='weekly-schedule col-sm-4'),
html.Nav([
html.Div([
dcc.Tabs([
dcc.Tab(label='Today', value='today', className='custom-tab',
selected_className='custom-tab--selected'),
dcc.Tab(label='Yesterday', value='yesterday', className='custom-tab',
selected_className='custom-tab--selected'),
dcc.Tab(label='This Week', value='week', className='custom-tab',
selected_className='custom-tab--selected')
], id='tabs', colors={'background': 'transparent'}, value='today'),
], className=' col-lg-6', id='tabHolder', n_clicks_timestamp=0),
html.Div([
dcc.DatePickerRange(
id='calenderSelect',
start_date_placeholder_text="From Date",
end_date_placeholder_text="To Date",
calendar_orientation='horizontal',
),
], className="col-12 col-lg-4 ", id='dateHolder', n_clicks_timestamp=0)
], className='nav nav-pills mb-3 pt-4'),
html.Div([
html.Div([
# inward and outward cards
html.Div([
html.Div([
html.Div([
html.H5("Inward Value", className='value-hd-text'),
html.Div([
html.Div([
html.Div([
html.Div([
html.H5("Total Inward Value", className='mb-0'),
html.P([
html.Span(id='inwardValue'),
html.Span(className='triangle-up align-self-center ml-2')
], className='d-flex', )
], className='content-txt text-white')
], className='card-text-content blue-bg')
], className='col-md-6 col-sm-6 mb-4'),
html.Div([
html.Div([
html.Div([
html.H5("Total Inward Volume", className='mb-0'),
html.P([
html.Span(id='inwardVolume'),
html.Span(className='triangle-up align-self-center ml-2')
], className='d-flex', )
], className='content-txt text-white')
], className='card-text-content violet-bg')
], className='col-md-6 col-sm-6 mb-4')
], className='row')
], className='col-md-6'),
html.Div([
html.H5("Outward Value", className='value-hd-text'),
html.Div([
html.Div([
html.Div([
html.Div([
html.H5("Total Outward Value", className='mb-0'),
html.P([
html.Span(id='outwardValue'),
html.Span(className='triangle-up triangle-down align-self-center ml-2')
], className='d-flex', )
], className='content-txt text-white')
], className='card-text-content lite-blue-bg')
], className='col-md-6 col-sm-6 mb-4'),
html.Div([
html.Div([
html.Div([
html.H5("Total Outward Volume", className='mb-0'),
html.P([
html.Span(id='outwardVolume'),
html.Span(className='triangle-up triangle-down align-self-center ml-2')
], className='d-flex', )
], className='content-txt text-white')
], className='card-text-content dark-blue-bg')
], className='col-md-6 col-sm-6 mb-4')
], className='row')
], className='col-md-6'),
], className='row')
], className='py-5'),
# Graphs
html.Div([
html.Div([
html.Div([
html.Div([
dcc.Graph(id='itemPieChartInward')
], className='big-white-cards bg-white shadow-sm p-4')
], className='col-md-6 mb-4'),
html.Div([
html.Div([
dcc.Graph(id='itemPieChartOutward')
], className='big-white-cards bg-white shadow-sm p-4')
], className='col-md-6 mb-4')
], className='row')
], className='graph-cards')
], className='tab-pane fade show active', role='tabpanel')
], className='tab-content'),
dcc.Interval(id='interval1', interval=1000, n_intervals=1)
], className='container py-3')
# global methods
def getItemPieChart(dataFrame):
pieChartLayout = dict(
autosize=True,
# automargin=True,
margin=dict(
l=10,
r=10,
b=0,
t=40
),
hovermode="closest",
plot_bgcolor="#F9F9F9",
paper_bgcolor="#F9F9F9",
legend=dict(font=dict(color='black', size=10),
orientation='h',
bgcolor='rgba(0,0,0,0)'),
title='Top 5 Items',
)
fig = go.Figure({
"data": [go.Pie(labels=dataFrame["ItemName"].tolist(), values=dataFrame["Amount"].tolist(), hole=.60)],
"layout": go.Layout(pieChartLayout)
})
return fig
def convertVolume(totalVolume):
stringVolume = ""
if totalVolume >= 1000:
stringVolume = str(totalVolume / 1000) + " Tonnes"
else:
stringVolume = str(totalVolume) + " Kgs"
return stringVolume
# loading locations of the user
#this callback is not initiating
@app.callback(
dash.dependencies.Output('user', 'children'),
[dash.dependencies.Input('urlPie', 'pathname')])
def getuserId(value):
if value is None:
raise dash.exceptions.PreventUpdate("given a valid userId as parameter")
userToken = parse_qs(value).get('?token')[0]
user = validateUser.getUserIdFromToken(userToken)
return user
@app.callback(dash.dependencies.Output('userLocation', 'options'),
[
dash.dependencies.Input('user', 'children')
])
def loadUserLocations(user):
cities = sqlQuries.getCities(userId=str(user))
listCity = [{'label': city, 'value': city} for city in cities]
return listCity
# parsing data into html
@app.callback(
[
dash.dependencies.Output('inwardValue', 'children'),
dash.dependencies.Output('inwardVolume', 'children'),
dash.dependencies.Output('itemPieChartInward', 'figure'),
dash.dependencies.Output('outwardValue', 'children'),
dash.dependencies.Output('outwardVolume', 'children'),
dash.dependencies.Output('itemPieChartOutward', 'figure')
],
[
dash.dependencies.Input('tabs', 'value'),
dash.dependencies.Input('calenderSelect', 'start_date'),
dash.dependencies.Input('calenderSelect', 'end_date'),
dash.dependencies.Input('tabHolder', 'n_clicks_timestamp'),
dash.dependencies.Input('dateHolder', 'n_clicks_timestamp')
],
[
dash.dependencies.State('userLocations', 'value'),
]
)
def parseInwardDataFromDatabase(tab, start, end, tabTimestamp, dateTimestamp, location):
if location is None:
raise dash.exceptions.PreventUpdate
startDate = ''
endDate = ''
print(str(tabTimestamp) + " , " + str(dateTimestamp))
if tabTimestamp > dateTimestamp:
if tab == 'today':
print("today")
startDate = str(date.today())
endDate = str(date.today())
elif tab == 'yesterday':
print("yesterday")
startDate = str(date.today() - td(1))
endDate = str(date.today() - td(1))
elif tab == 'week':
print("week")
endDate = str(date.today())
startDate = str(date.today() - td(6))
elif dateTimestamp > tabTimestamp:
if start is None or end is None:
raise dash.exceptions.PreventUpdate
startDate = start
endDate = end
print(startDate)
print(endDate)
inwardValue, inwardVolume, inwardItems = sqlQuries.getInwardValue(user, location, startDate, endDate)
outwardValue, outwardVolume, outwardItems = sqlQuries.getOutwardValue(user, location, startDate, endDate)
if outwardValue == 0 and outwardVolume == 0 and inwardValue != 0 and inwardVolume != 0:
inwardVolume = convertVolume(inwardVolume)
pieChartInward = getItemPieChart(inwardItems)
return inwardValue, inwardVolume, pieChartInward, 0, 0, {'data': []}
elif inwardValue == 0 and inwardVolume == 0 and outwardValue != 0 and outwardVolume != 0:
outwardVolume = convertVolume(outwardVolume)
pieChartOutward = getItemPieChart(outwardItems)
return 0, 0, {'data': []}, outwardValue, outwardVolume, pieChartOutward
elif inwardValue != 0 and inwardVolume != 0 and outwardValue != 0 and outwardVolume != 0:
inwardVolume = convertVolume(inwardVolume)
pieChartInward = getItemPieChart(inwardItems)
outwardVolume = convertVolume(outwardVolume)
pieChartOutward = getItemPieChart(outwardItems)
return inwardValue, inwardVolume, pieChartInward, outwardValue, outwardVolume, pieChartOutward
else:
return 0, 0, {'data': []}, 0, 0, {'data': []}
this is happening only when i try to call dashboard file from index file. when i run dashboard file separately it is working fine. please review the codes and tell me if there are any mistakes