I have a code like the below one:
import dash
import dash_html_components as html
import dash_core_components as dcc
import main_app as ma
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Tabs(id="tabs-styled-with-props", value='tab-1', children=[
dcc.Tab(label='1', value='tab-1'),
dcc.Tab(label='2', value='tab-2'),
], colors={
"border": "white",
"primary": "gold",
"background": "cornsilk"
}),
html.Div(id='tabs-content-props')
])
@app.callback(Output('tabs-content-props', 'children'),
[Input('tabs-styled-with-props', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2')
])
if __name__ == '__main__':
app.run_server(debug=True, use_debugger=True)
This simple code contains 2 tabs.
So now all I need when click on tab one just show this python file as the below one:
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from sqlalchemy import create_engine
import datetime
from datetime import datetime as dt
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import plotly.express as px
import hypothesis
import pytest
import base64
# 'LRRCConnReqAtt',
SHOW_COLUMNS1 = [
'lrrc_re_est_succ',
'cell_dl_max_throughput'
]
SHOW_COLUMNS2 = [
'interfreq_success_rate_4g',
'intrarat_ho_success_rate'
]
SHOW_COLUMNS3 = [
'rcc_setup_success_rate',
'interfreq_success_rate_4g'
]
SHOW_COLUMNS4 = [
'cell_downlink_average_throughput'
]
"""SHOW_COLUMNS5 = [
'cell_downlink_average_throughput'
]"""
# connect db
engine = create_engine('mssql+pyodbc://xxxxxxxxx\zzzzzzzz/myDB?driver=SQL+Server+Native+Client+11.0')
cursor = engine.raw_connection().cursor()
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
lte_kpis = pd.read_sql('SELECT * FROM [myDB].[dbo].[lte_details]', engine)
pd.set_option('display.max_columns', 10000)
print(lte_kpis)
lte_kpis.set_index('date', inplace=True)
pd.set_option('display.max_columns', 350)
pd.set_option('display.width', 1000)
availble_cell = lte_kpis['cell_name'].unique()
# availble_cell = lte_kpis.unique(lte_kpis[['date', 'Site Name', 'Cell CI', 'Cell LAC']].values.ravel('K'))
plots = []
app.layout = html.Div([
html.Div([
html.Div([
html.H5(
' Huawei Rotterdam_5 Dashbord',
style={
'marginBottom': 30,
'padding': '6px 0px 0px 8px'
}
),
], className="six columns"),
], className="row",
style={
'padding-right': 200
},
),
html.Div([
html.Div([
html.Div([
html.Label('Choose the "Cell-Name"'),
dcc.Dropdown(
id='cell-name-xaxis-column',
options=[{'label': i, 'value': i} for i in availble_cell],
value=availble_cell[0]
),
], className="six columns"),
html.Div([
html.Label('Choose Date Destination'),
dcc.DatePickerRange(
id='date-picker-range',
min_date_allowed=dt(1995, 8, 5),
max_date_allowed=dt(2030, 9, 19),
initial_visible_month=dt(2019, 10, 5),
start_date=dt(2019, 10, 1),
end_date=dt(2020, 1, 1)
),
], className="six columns"),
], className="row"),
html.Div(id='output-container-date-picker-range-%s'),
html.Div([
html.Div([
dcc.Dropdown(
id='yaxis-columns',
options=[{'label': col, 'value': col} for col in SHOW_COLUMNS1],
multi=True,
disabled=True,
value=[SHOW_COLUMNS1[0], SHOW_COLUMNS1[1]]
),
dcc.Graph(
style={'height': 350},
id='my-graph',
),
], className="six columns"),
html.Div([
dcc.Dropdown(
id='yaxis-columns2',
options=[{'label': col, 'value': col} for col in SHOW_COLUMNS2],
multi=True,
disabled=True,
value=[SHOW_COLUMNS2[0], SHOW_COLUMNS2[1]]
),
dcc.Graph(
style={'height': 350},
id='my-graph2'
),
], className="six columns"),
], className="row"),
html.Div([
html.Div([
dcc.Dropdown(
id='yaxis-columns3',
options=[{'label': col, 'value': col} for col in SHOW_COLUMNS3],
multi=True,
disabled=True,
value=[SHOW_COLUMNS3[0], SHOW_COLUMNS3[1]]
),
dcc.Graph(
style={'height': 350},
id='my-graph3'
),
], className="six columns"),
html.Div([
dcc.Dropdown(
id='yaxis-columns4',
options=[{'label': col, 'value': col} for col in SHOW_COLUMNS4],
multi=True,
disabled=True,
value=[SHOW_COLUMNS4[0]]
),
dcc.Graph(
style={'height': 350},
id='my-graph4'
),
], className="six columns"),
], className="row"),
]),
])
@app.callback(
Output(component_id='my-graph', component_property='figure'),
[Input(component_id='cell-name-xaxis-column', component_property='value'),
Input(component_id='yaxis-columns', component_property='value'),
Input(component_id='date-picker-range', component_property='start_date'),
Input(component_id='date-picker-range', component_property='end_date')])
def update_graph(cell_name, yaxis_cols, start_date, end_date):
if not isinstance(yaxis_cols, list):
yaxis_cols = [yaxis_cols]
print(yaxis_cols)
print((start_date, end_date))
sql_statement = "SELECT date, %s, %s FROM [myDB].[dbo].[lte_details] WHERE ([cell_name]='%s' AND [date]>='%s' AND [date]<='%s')" \
% (SHOW_COLUMNS1[0], SHOW_COLUMNS1[1], cell_name, start_date, end_date)
df = pd.read_sql(sql_statement, engine)
scatters = []
for col in yaxis_cols:
if col == 'lrrc_conn_req_att':
scatters.append(go.Bar(
x=df['date'],
y=df[col],
mode='lines',
name=col
))
else:
scatters.append(go.Scatter(
x=df['date'],
y=df[col],
name=col
))
figure = {
'data': scatters,
}
return figure
.........
.........
@app.callback(
Output(component_id='my-graph4', component_property='figure'),
[Input(component_id='cell-name-xaxis-column', component_property='value'),
Input(component_id='yaxis-columns4', component_property='value'),
Input(component_id='date-picker-range', component_property='start_date'),
Input(component_id='date-picker-range', component_property='end_date')])
def update_graph(cell_name, yaxis_cols, start_date, end_date):
if not isinstance(yaxis_cols, list):
yaxis_cols = [yaxis_cols]
print(yaxis_cols)
print((start_date, end_date))
sql_statement = "SELECT date, %s FROM [myDB].[dbo].[lte_details] WHERE ([cell_name]='%s' AND [date]>='%s' AND [date]<='%s')" \
% (SHOW_COLUMNS4[0], cell_name, start_date, end_date)
df = pd.read_sql(sql_statement, engine)
scatters = []
for col in yaxis_cols:
if col == 'lrrc_conn_req_att':
scatters.append(go.Bar(
x=df['date'],
y=df[col],
mode='lines',
name=col
))
else:
scatters.append(go.Scatter(
x=df['date'],
y=df[col],
name=col
))
figure = {
'data': scatters,
}
return figure
So All I need I want to put Button in Tab2 and In Tab1 just put a simple Dash-Board as the above code. as the other tab I want to put another .py file contains one button thats do some process