How to put .py in tab dcc.tab using dash-plotly

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

Posts: 1

Participants: 1

Read full topic

Latest Images

Trending Articles

Latest Images