Dear All,
I am creating a dash dashboard where one input controls 2 tabs and data gets filtered as per the input box.
below attached is code , output and error i am getting please help in resolving it.
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import urllib.parse
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output,State
import dash_table
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot,plot
import base64
import os
import flask as fk
from flask import Flask, flash, render_template, redirect, url_for, request, make_response, session
from flask_login import login_user, logout_user, current_user, login_required
import dash_auth
os.chdir(r"C:\Users\rbhom3044\Desktop\Dashlibraries")
df=pd.read_excel(“AAHM2_sample.xlsx”,converters={‘CLI_ID’: ‘{:X>10}’.format})
app.layout = html.Div([dashboard,
html.Div(
html.Div(“Sales Dashboard - Navneet”,
style={‘textAlign’:‘center’,‘font-family’:’“Georgia”, Times, “Times New Roman”, serif’,
‘color’:’#002258’,‘width’:‘100%’,
‘height’:‘100%’,‘font-size’:‘30px’,
‘font-weight’:‘bold’
}
)),
html.Div(
dcc.Input(id=‘AgentID’, type=‘text’)),
html.Button(‘Submit’, id=‘button’),
html.Div(id=‘output-tab’),
dcc.Tabs(id=“tabs-example”, value=‘tab-1-example’,
children=[
dcc.Tab(label=‘Summary’, value=‘tab-1-example’),
dcc.Tab(label=‘Triggers’, value=‘tab-2-example’)
],
style={‘font-size’:‘20px’,‘marginBottom’: ‘0.5em’,‘width’:‘98%’,‘marginLeft’:‘12px’}),
html.Div(id=‘tabs-content-example’,style={‘width’:‘100%’,‘height’:‘100%’}),
html.Div(id=‘tabs-content-example1’,style={‘marginTop’:’-210px’,‘backgroundColor’: ‘#E7E6E5’,‘width’:‘100%’,‘height’:‘50%’})
],style={‘backgroundColor’: ‘#E7E6E5’,‘position’:‘absolute’,‘width’:‘100%’,‘height’:‘120%’})
@app.callback(
[Output(‘tabs-content-example’, ‘children’)],
[Input(‘button’, ‘n_clicks’),Input(‘tabs-example’, ‘value’)],
[State(‘AgentID’, ‘value’)])
def update(n_clicks, value,df):
if n_clicks == None:
dfa = df.copy()
else:
dfa = df[df[‘AGENT_ID’] == value]
def render_content(tab):
if tab == ‘tab-1-example’:
#----1. Overall tab Div-------------------------------------------------------------------------------
return html.Div(
className=“row”,children=[html.Div(
children=[
html.Div([
dcc.Graph(
id=‘age1’,
figure={
‘data’: [go.Pie( labels = age.index,
values = age[‘Client Id’],
hoverinfo=‘label+value+percent’,
textinfo=‘percent’,
textfont=dict(size=9,color=‘black’),
sort=False,
marker=dict(colors=[’#FF7F0E’,’#00BBF2’,’#1F77B4’,’#EE1B22’,’#FED404’],line=dict(color=‘white’, width=1))
)], ‘layout’: go.Layout(
title = {“text”:‘Age Distribution’},
titlefont=dict(size =12 , color=‘black’, family=‘Arial, sans-serif’),
margin=go.layout.Margin(l=0,
r=0,
b=0,
t=30,
pad=0),showlegend=True,
legend=dict(font = {‘size’:8},
traceorder=‘grouped’)
)},style={‘width’:‘100%’,‘height’:‘100%’,“display”: “block”, “margin-left”: “auto”, “margin-right”: “auto”},
config={‘displayModeBar’: False}
)
],style={‘width’:‘24%’,‘height’:‘100%’,‘display’:‘inline-block’,‘marginRight’:‘1%’}
)])])
elif tab == ‘tab-3-example’:
return html.Div(className=“row”,
children= [
html.Div([dcc.Tabs(id=‘TriggersList’,className=‘four columns’, value=‘Accum_Bonus_GT25K’,vertical = True,parent_style={‘flex-direction’: ‘column’,
‘-webkit-flex-direction’: ‘column’,
‘-ms-flex-direction’: ‘column’,
‘display’: ‘flex’},
children=[
dcc.Tab(label=‘Positive Fund Value’, value=‘PFV’),
dcc.Tab(label=‘Birthday’, value=‘Birthday’),
dcc.Tab(label=‘Policy Maturity’, value=‘PT’),
dcc.Tab(label=‘Premium Paying Term’, value=‘PPT’),
dcc.Tab(label=‘Bonus Accumulation > 25K’, value=‘Accum_Bonus_GT25K’),
dcc.Tab(label=‘First 5 Customers’, value=‘First_5Cust’),
dcc.Tab(label=‘Customers with Kids, No Child Policy’, value=‘CHILD’),
dcc.Tab(label=‘Underinsured Customers’, value=‘Underinsured_Customer’),
dcc.Tab(label=‘High Propensity Ulip Customers’, value=‘High_Prop_Ulip_Cust’),
dcc.Tab(label=‘High Propensity Protection Customers’, value=‘High_Prop_Protection_Cust’),
dcc.Tab(label=‘Walk- in customers in Last 1 Month’, value=‘WALKIN’),
dcc.Tab(label=‘Customers who called in last 1 month’, value=‘CALLS’),
dcc.Tab(label=‘Stays within 5km’, value=‘DISTANCE’),
dcc.Tab(label=‘First 5 Active Customers’, value=‘First_5Cust_Active’),
]) ],style={‘width’:‘33.3%’,‘marginRight’:‘1rem’,‘padding-left’:‘1.25rem’,‘marginLeft’:‘5px’}),
html.Div([html.Div(id=‘table’),
html.A(
‘Download Data’,
id=‘download-link’,
download=“rawdata.csv”,
href="",
target="_blank"
)
],style={‘width’:‘65%’,‘height’:‘120%’})
],
style={‘width’:‘100%’})
@app.callback(
dash.dependencies.Output(‘table’, ‘children’),
[dash.dependencies.Input(‘TriggersList’, ‘value’)])
def update_table(filter_value):
dff = filter_data(filter_value)
dff1 = dff.filter(columns)
return generate_table(dff1)
@app.callback(
dash.dependencies.Output(‘download-link’, ‘href’),
[dash.dependencies.Input(‘TriggersList’, ‘value’)])
def update_download_link(filter_value):
dff = filter_data(filter_value)
dff1 = dff.filter(columns)
csv_string = dff1.to_csv(index=False, encoding=‘utf-8’)
csv_string = “data:text/csv;charset=utf-8,” + urllib.parse.quote(csv_string)
return csv_string
if name == ‘main’:
app1.secret_key = os.urandom(12)
app1.run(host= ‘0.0.0.0’, port= ‘1244’ , debug=False)