# Initialization of package
from dash import dash, html, dcc
import pandas as pd
import connectorx as cx
import numpy as np
from dash.dependencies import Output, Input
import plotly.express as px
from app import app
# Reading data from database
program_tab = cx.read_sql(postgresql_credentials, sql_query)
# Inialization of styling parameters
external_stylesheets = [
{
"href": "https://fonts.googleapis.com/css2?"
"family=Lato:wght@400;700&display=swap",
"rel": "stylesheet",
},
]
# Layout of application
layout = html.Div(
children=[
html.Div(
children=[
html.P(children="", className="header-emoji"),
html.H1(
children="Test Analytics", className="header-title"
),
html.P(
children="",
className="header-description",
),
],
className="header",
),
html.Div(
children=[
html.Div(
children=[
html.Div(children="Organization Name", className="menu-title"),
dcc.Dropdown(
id="org-filter",
options=[
{"label": organization, "value": organization}
for organization in np.sort(program_tab.organization_name.unique())
],
value="",
clearable=True,
searchable=True,
className="dropdown",
),
]
),
html.Div(
children=[
html.Div(children="Application Name", className="menu-title"),
dcc.Dropdown(
id="app-filter",
options=[],
clearable=True,
searchable=True,
className="dropdown",
),
],
),
html.Div(
children=[
html.Div(children="Program Title", className="menu-title"),
dcc.Dropdown(
id="program-filter",
options=[],
clearable=True,
searchable=True,
className="dropdown",
),
],
),
html.Div(
children=[
html.Div(children="Interval", className="menu-title"),
dcc.Dropdown(
id="interval-filter",
options=[
{"label": interval_type, "value": interval_type}
for interval_type in np.sort(program_tab.interval.unique())
],
value='month',
clearable=True,
searchable=True,
className="dropdown",
),
],
),
html.Div(
children=[
html.Div(
children="Date Range",
className="menu-title"
),
dcc.DatePickerRange(
id="date-range",
min_date_allowed=program_tab.statistics_at.min().date(),
max_date_allowed=program_tab.statistics_at.max().date(),
start_date=program_tab.statistics_at.min().date(),
end_date=program_tab.statistics_at.max().date(),
),
]
),
],
className="menu",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="uimp-chart", config={"displayModeBar": False},
),
className="six columns",
),
html.Div(
children=dcc.Graph(
id="timp-chart", config={"displayModeBar": False},
),
className="six columns",
),
],
className="row",
),
]
)
@app.callback(
Output('program-filter', 'options'),
Input('app-filter', 'value')
)
def set_program_options(chosen_application):
dff = program_tab[program_tab.application_name == chosen_application]
return [{'label': program, 'value': program} for program in sorted(dff.program_title.unique())]
# populate initial values of counties dropdown
@app.callback(
Output('program-filter', 'value'),
Input('app-filter', 'options')
)
def set_program_value(available_options):
return [x['value'] for x in available_options]
@app.callback(
[Output("uimp-chart", "figure"), Output("timp-chart", "figure")],
[
Input('org-filter', 'value'),
Input('app-filter', 'value'),
Input('program-filter', 'value'),
Input('interval-filter', 'value'),
Input('date-range', 'start_date'),
Input('date-range', 'end_date'),
]
)
def display_value_program(organization, application, program_list, interval_type, start_date, end_date):
mask = (
(program_tab.organization_name == organization)
& (program_tab.application_name == application)
& (program_tab.program_title == program_list)
& (program_tab.interval == interval_type)
& (program_tab.statistics_at >= start_date)
& (program_tab.statistics_at <= end_date)
)
filtered_data = program_tab.loc[mask, :]
unique_impressions_fig = {
"data": [
{
"x": filtered_data["statistics_at"],
"y": filtered_data["unique_impressions_count"],
"type": "lines",
},
],
"layout": {
"title": {
"text": "Unique Impressions",
"x": 0.05,
"xanchor": "left",
},
"colorway": ["#17B897"],
},
}
total_impressions_fig = {
"data": [
{
"x": filtered_data["statistics_at"],
"y": filtered_data["total_impressions_count"],
"type": "lines",
},
],
"layout": {
"title": {"text": "Total Impressions", "x": 0.05, "xanchor": "left"},
"colorway": ["#E12D39"],
},
}
return unique_impressions_fig, total_impressions_fig
While running the application I see an error @ (program_tab.program_title == program_list). Can anyone help me to debug this issue.
Additional Information -
- The above code runs absolutely fine in single application mode, only issue occur when I try to run it in multi page application
- Even if it’s showing the above error I am able to run the application and plot the two charts/figures without any issue (Below is the screenshot of the error - Please disregard the Errors (2) line in the screenshot)
