def render_slider_card():
"""
:return: A Div containing controls for Pyrograph.
"""
return html.Div(
id="render-knob-card",
children=[
html.H5('Line Width'),
daq.Slider(
value=2.5,
color='#02A90E',
id='line-width',
max=10,
min=1,
step=0.5,
className='slider columns',
),
html.H5('Revolutions'),
daq.Slider(
value=1,
color='#F7B801',
id='revs',
max=10,
min=1,
step=1,
className='slider columns',
),
],
)
def slider_parameter():
slider = daq.Slider(min=0,
max=100,
value=25,
handleLabel={
"showCurrentValue": True,
"label": "VALUE"
},
marks={
0: {
'label': '0',
'style': {
'color': '#77b0b1'
}
},
25: {
'label': '25'
},
50: {
'label': '50'
},
75: {
'label': '75'
},
100: {
'label': '100'
}
},
className="sliderParameter")
return slider
def turn_dark(dark_theme):
if (dark_theme):
theme.update(dark=True)
else:
theme.update(dark=False)
return daq.DarkThemeProvider(theme=theme,
children=[
daq.Knob(id='servo-knob',
value=138,
max=250,
min=50),
daq.Knob(id='stepper-knob',
value=1,
max=200,
min=0),
daq.Slider('step-slider',
min=1,
max=100,
value=1,
handleLabel={
"showCurrentValue": True,
"label": "VALUE"
},
step=1),
daq.StopButton(buttonText='CW',
id='step_cw',
label='Default',
n_clicks=0),
daq.StopButton(buttonText='CCW',
id='step_ccw',
label='Default',
n_clicks=0),
])
def add_slider(self, slider_id, min_value, max_value, initial_value=None, step_size=None, label=None, mark_num=None): # noqa
"""
Creates new slider with label.
Parameters
----------
slider_id
Unique id to identify the slider.
min
Minimum value of the slider.
max
Maximum value of the slider.
initial_value (optional)
Starting value of the slider when the app is executed.
Default value is minimum value of slider.
step_size (optional)
Step size of possible values on the slider
Default value is 1/100th of range of slider
label (optional)
Label for the slider, to be shown to user
Default is slider id
mark_num (optional)
Indicators of value on slider
Default is 1/10th of range of slider
"""
if initial_value is None:
initial_value = min_value
if step_size is None:
step_size = (max_value - min_value) / 100
if label is None:
label = slider_id
if mark_num is None:
mark_num = 11
slider_id = str(slider_id)
new_slider = html.Div([
html.Label(label),
daq.Slider(
id=slider_id,
min=min_value,
max=max_value,
value=initial_value,
step=step_size,
handleLabel={"showCurrentValue": True,
"label": ' ',
"style": {"size": 0.05}},
marks={i: '{:.1f}'.format(i) for i in np.linspace( # noqa
start=min_value,
stop=max_value,
num=mark_num)},
updatemode='drag'
)
], style={'marginBottom': '2em'})
self._sliders[slider_id] = new_slider
return new_slider
def wheel_slider_card():
"""
:return: A Div containing controls for Pyrograph.
"""
return html.Div(
id="wheel-knob-card",
children=[
html.H5('Wheel Size'),
daq.Slider(
value=.66,
color='#4A9DFF',
id='size-input',
max=0.95,
min=0.05,
step=0.01,
className='slider columns',
),
html.H5('Hole Position'),
daq.Slider(
value=.66,
color='#FF4A4C',
id='hole-input',
max=0.95,
min=0.05,
step=0.01,
className='slider columns',
),
html.H5('Start Angle'),
daq.Slider(
value=0,
color='#C068FA',
id='start-ang',
max=90,
min=0,
step=0.5,
className='slider columns',
),
],
)
def get_range(label, value, min_, max_):
return daq.Slider(min=min_,
max=max_,
value=value,
disabled=True,
marks={
str(min_): f'{label}_Low_' + str(min_),
str(max_): f'{label}_High_' + str(max_)
},
color={
"gradient": True,
'ranges': {
'red': [min_, value],
'green': [value, max_]
}
})
def make_rotate_slider(name, slider_label, max_angle=BODY_MAX_ANGLE):
handle_style = {
"showCurrentValue": True,
"color": SLIDER_HANDLE_COLOR,
"label": slider_label,
}
return dash_daq.Slider( # pylint: disable=not-callable
id=name,
min=-max_angle,
max=max_angle,
value=1.5,
step=SLIDER_ANGLE_RESOLUTION,
vertical=True,
size=IK_SLIDER_SIZE,
updatemode=UPDATE_MODE,
handleLabel=handle_style,
color={"default": SLIDER_COLOR},
theme=SLIDER_THEME,
)
def fourth_layer(self):
timestamps = list(self.data_object.system_timeseries_dict['Base']['TimeStamps'])
return html.Div([
create_paragraph(METRIC_TEXTS['sixth_layer']['heading'],
METRIC_TEXTS['sixth_layer']['heading']),
html.Div([
html.Div([
html.H6("Select Asset Level Metric"),
dcc.Dropdown(
id="AssetMetric",
options=[{'label': key, 'value': key} \
for key in self.data_object.asset_metrics],
value='NVRI',
style={'color': '#000000'})
], className="col DropDown"),
html.Div([
html.H6("Select PV Penetration Scenario"), \
dcc.Dropdown(
id="PVScenario2",
options=[{'label': key, 'value': key} \
for key in self.data_object.pv_scenarios],
value='Base',
style={'color': '#000000'})
], className="col H6 DropDown"),
], className="row"),
html.Div([
html.H6("Slide for observing temporal change"), \
daq.Slider(
id="TimeIndex",
min=0,
max=len(timestamps),
value=3,
step=1,
marks={str(val): {'label': timestamps[val].strftime('%m-%d')} \
for val in range(0, len(timestamps), 6)},
size=1100,),
], style={"margin-left": "50px", "margin-right": "10px"}),
html.Div([
dcc.Graph(id="AssetLevelMetricHeatMap"+self.unique_tag)
], style={"margin-top": "30px"}),
])
def make_translate_slider(name, slider_label):
handle_style = {
"showCurrentValue": True,
"color": SLIDER_HANDLE_COLOR,
"label": slider_label,
}
return dash_daq.Slider( # pylint: disable=not-callable
id=name,
min=-1.0,
max=1.0,
value=0.05,
step=0.05,
vertical=True,
size=IK_SLIDER_SIZE,
updatemode=UPDATE_MODE,
handleLabel=handle_style,
color={"default": SLIDER_COLOR},
theme=SLIDER_THEME,
)
def make_joint_daq_slider_input(name, max_angle):
_, _, _, angle = name.split("-")
handle_style = {
"showCurrentValue": True,
"color": SLIDER_HANDLE_COLOR,
"label": angle,
}
return dash_daq.Slider( # pylint: disable=not-callable
id=name,
min=-max_angle,
max=max_angle,
value=1.5,
step=1.5,
size=80,
vertical=True,
updatemode=UPDATE_MODE,
handleLabel=handle_style,
color={"default": SLIDER_COLOR},
theme=SLIDER_THEME,
)
def make_slider(slider_id, name, max_angle):
handle_style = {
"showCurrentValue": True,
"color": SLIDER_HANDLE_COLOR,
"label": name,
}
daq_slider = dash_daq.Slider( # pylint: disable=not-callable
id=slider_id,
min=-max_angle,
max=max_angle,
value=1.5,
step=SLIDER_ANGLE_RESOLUTION,
size=300,
updatemode=UPDATE_MODE,
handleLabel=handle_style,
color={"default": SLIDER_COLOR},
theme=SLIDER_THEME,
)
return html.Div(daq_slider, style={"padding": "2em"})
def form_group_slider(self, feature, values, value=None):
marks = {}
for v in values:
marks[v] = str(v)
if value == None:
value = values[3]
fg = dbc.FormGroup(
[
html.Div(feature, style=slider_feature),
html.Div(daq.Slider(
id=feature + '-slider',
min=values[0],
max=values[-1],
handleLabel={
"showCurrentValue": True,
"label": 'Value'
},
),
style={
'width': "100px",
'display': 'inline-block',
"padding": "1px",
'margin-left': "20px",
'margin-top': '25px',
"height": '40px'
})
],
style={
"display": "flex",
"width": "400px",
"height": "40px",
'margin-bottom': '5px',
'margin-top': '5px'
})
return fg
def form_group_slider(self, feature, values, value=None):
marks = {}
for v in values:
marks[v] = str(v)
if value == None:
value = values[3]
fg = dbc.FormGroup([
html.Div(feature, className="form_feature"),
html.Div(
daq.Slider(className="form_group_slider",
id=feature + '-slider',
min=values[0],
max=values[-1],
handleLabel={
"showCurrentValue": True,
"label": 'Value'
}))
],
className="what_if_form_group")
return fg
dbc.Row([
dbc.Col([
html.Div((dcc.Graph(id='tfl_sentiment')),
className="offset-by-one column twelve columns"),
], ),
]),
dbc.Row([
dbc.Col([
html.Div(daq.Slider(
id='tweet-slider',
min=200,
max=2000,
size=600,
value=400,
handleLabel={
"showCurrentValue": True,
"label": "Tweets"
},
marks={
str(year): str(year)
for year in (200, 400, 600, 800, 1000, 1500, 2000)
},
step=None),
className="offset-by-three column six columns")
]),
])
], )
@app.callback(Output('tfl_sentiment', 'figure'),
[Input('tweet-slider', 'value')])
daq.Slider(
id="motor-current",
value=30,
color="default",
min=0,
max=100,
size=250,
step=None,
handleLabel={
"showCurrentValue": "True",
"label": "VALUE",
},
marks={
"0": "0",
"10": "",
"20": "",
"30": "",
"40": "",
"50": "50",
"60": "",
"70": "",
"80": "",
"90": "",
"100": "100",
},
targets={
"80": {
"showCurrentValue": "False",
"label": "WARNING",
"color": "#EA0606",
},
"100": "",
},
)
), html.Br(),
daq.PrecisionInput(
precision=4,
value=299792458,
id='darktheme-daq-precisioninput',
className='dark-theme-control'
), html.Br(),
daq.StopButton(
id='darktheme-daq-stopbutton',
className='dark-theme-control'
), html.Br(),
daq.Slider(
min=0,
max=100,
value=30,
targets = {"25": {"label": "TARGET"}},
color=theme['primary'],
id='darktheme-daq-slider',
className='dark-theme-control'
), html.Br(),
daq.Tank(
min=0,
max=10,
value=5,
id='darktheme-daq-tank',
className='dark-theme-control'
), html.Br(),
daq.Thermometer(
min=95,
max=105,
value=98.6,
],
style={
'width': '49%',
'display': 'inline-block',
'vertical-align': 'top'
})
slider = html.Div([
html.Label('Forecasted timestep of ocean parameter:'),
html.Div('', style={'padding': 20}),
html.Div([
daq.Slider(id='my-daq-slider-ex',
size=400,
min=1,
max=72,
value=4,
handleLabel={
"showCurrentValue": True,
"label": "HOUR"
}),
html.Div(id='slider-output')
])
],
style={
'width': '49%',
'display': 'inline-block',
'vertical-align': 'top'
})
# html.Label(id='message1',style={'marginLeft':80,'marginBottom':-2}),#, children='Please select ocean state variable and forecasted hour to view.'),
# image = html.Div([
daq.Slider(id='vo2max',
min=0,
max=100,
step=1,
value=55,
marks={
30: {
'label': 'Sedentary',
'style': {
'color': '#bdb477'
}
},
50: {
'label': 'Fit',
'style': {
'color': '#bdb477'
}
},
70: {
'label': 'Elite',
'style': {
'color': '#bdb477'
}
},
90: {
'label': 'Olympian',
'style': {
'color': '#bdb477'
}
}
},
updatemode='drag',
handleLabel={
"showCurrentValue": True,
"label": "ml/kg/min",
'color': '#bdb477'
},
size=200),
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.
P('Deaths Timeline of the Selected Diseases, from January 2014 to March 2021',
style={
'fontSize': 25,
'text-align': 'center',
'margin-top': 0,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
html.
P('Monthly and Yearly Data by Average and Total Number of Deaths for the Entire Country',
style={
'fontSize': 20,
'text-align': 'center',
'margin-top': 0,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
dcc.Dropdown(
id='line_option',
options=[{
'label': i,
'value': i
} for i in diseases1],
value=['All Cause'],
style={
'color': 'black',
'backgroundColor': '#dce6ef',
'height': '40px',
'font-size': '18px',
'font-family': "Calibri (Body)",
'margin-bottom': 10
},
multi=True,
),
dcc.RadioItems(id='timely',
options=[
dict(label='Yearly', value=1),
dict(label='Monthly', value=0)
],
value=0,
style={
'margin-top': 65,
'margin-bottom': 0,
'margin-left': '1.5%',
'font-size': '18px'
}),
dcc.RadioItems(id='aggregates',
options=[
dict(label='Mean', value=0),
dict(label='Sum', value=1)
],
value=0,
style={
'font-size': '18px',
'margin-top': 8,
'margin-bottom': 0,
'margin-left': '1.8%'
}),
dcc.Graph(id='lineplot',
figure=dict(layout=dict(autosize=True)),
style={
'margin-top': 5,
'height': '100%',
'width': '100%'
})
],
className='box')
elif tab == 'tab-2':
return html.Div(
[
html.
P('Top 10 States with the Highest Number of Deaths by Disease',
style={
'fontSize': 30,
'text-align': 'center',
'margin-top': 0,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
html.P('Total Number of Deaths Between Years or by Year',
style={
'fontSize': 20,
'text-align': 'center',
'margin-top': 0,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
dcc.Dropdown(
id='disease1',
options=[{
'label': i,
'value': i
} for i in diseases],
value='All Cause',
#className = 'box'
style={
'color': 'black',
'backgroundColor': '#dce6ef',
'height': '40px',
'font-size': '18px',
'font-family': "Calibri (Body)"
},
),
dcc.Graph(
id='top10',
figure=dict(layout=dict(autosize=True)),
style={
'height': '100%',
'width': '100%'
},
#className = 'box'
),
dcc.RangeSlider(
id='range',
min=2014,
max=2021,
value=[2015, 2017],
marks={
str(i): '{}'.format(str(i))
for i in
[2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021]
},
className='box',
),
],
#html.Br(),
className='box')
elif tab == 'tab-4':
return html.Div(
[
html.P('Geographic Distribution of each Disease',
style={
'fontSize': 30,
'text-align': 'center',
'margin-top': 0,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
html.P('The Total Number of Deaths by Year',
style={
'fontSize': 20,
'text-align': 'center',
'margin-top': 0,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
dcc.Dropdown(
id='disease',
options=[{
'label': i,
'value': i
} for i in diseases],
value='All Cause',
# className = 'box'
style={
'color': 'black',
'backgroundColor': '#dce6ef',
'height': '40px',
'font-size': '18px',
'font-family': "Calibri (Body)"
},
),
dcc.Graph(id='choropleth',
figure=dict(layout=dict(autosize=True)),
style={
'height': '100%',
'width': '100%'
}),
daq.Slider(
id='year',
min=2014,
max=2021,
value=2017,
marks={
str(i): '{}'.format(str(i))
for i in
[2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021]
},
handleLabel={
"showCurrentValue": True,
"label": " "
},
size=800,
color='cf9696',
className='box')
],
className='box')
elif tab == 'tab-5':
return html.Div(
[
dash_table.DataTable(
id='table',
columns=[{
"name": i,
"id": i
} for i in dataset.iloc[:, 1:].columns],
data=dataset.to_dict('records'),
style_table={
'overflowX': 'auto',
'max-height': '790px'
},
style_cell={
# all three widths are needed
'minWidth': '180px',
'width': '180px',
'maxWidth': '180px',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'fontSize': '10px',
'padding': '5px',
'font-family': "Calibri (Body)"
},
style_header={
'backgroundColor': '#F0AB9E',
'fontWeight': 'bold',
'fontSize': '15px',
'overflow': 'hidden',
'font-family': "Calibri (Body)"
},
style_cell_conditional=[{
'if': {
'column_id': c
},
'textAlign': 'left'
} for c in ['Jurisdiction of Occurrence']],
)
],
className='box')
elif tab == 'tab-6':
return html.Div(
[
html.P('Diseases Description:',
style={
'fontSize': 26,
'text-align': 'left',
'margin-top': 10,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
dcc.Markdown('''
* **All Cause:** deaths caused by all the diseases in this dataset
* **Natural Causes**
* **Septicemia:** (blood poisoning) invasion of the bloodstream by pathogenic agents and especially bacteria along with their toxins from a localized infection (as of the lungs or skin) that is accompanied by acute systemic illness
* **Malignant Neoplasm:** a cancerous tumor, an abnormal growth that can grow uncontrolled and spread to other parts of the body
* **Diabetes Mellitus:** (sugar diabetes) condition that occurs when the body can't use glucose (a type of sugar) normally
* **Alzheimer:** progressive neurologic disorder that causes the brain to shrink (atrophy) and brain cells to die.
* **Influenza & Pnemonia:** viral infection that attacks your respiratory system — your nose, throat and lungs
* **Chronic lower Respiratory Disease:** a group of pathologies that obstruct the lungs, which mainly includes chronic obstructive pulmonary disease (COPD) and asthma.
* **Other Diseases of Respiratory System:** diseases that affect the air passages, including the nasal passages, the bronchi and the lungs.
* **Nephritis, Nephrotic Syndrome and Nephrosis:** A condition in which the tissues in the kidney become inflamed and have problems filtering waste from the blood
* **Symptoms, Signs and Abnormal Clinical and Laboratory Findings Not Elsewhere Found**
* **Diseases of Heart:** a range of conditions that affect your heart
* **Multiple Cause of Death + COVID-19**
* **COVID-19 as Underlying Cause of Death**
''',
style={
"margin-left": '30px',
"margin-bottom": '30px'
}),
html.P('Data Sources:',
style={
'fontSize': 26,
'text-align': 'left',
'margin-top': 10,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
dcc.Markdown('''
**Weekly Counts of Deaths by State and Select Causes**
**Data Time Span:** January 1, 2014 - March 13, 2021
**Data Published By:** National Center for Health Statistics
**For More Details Visit:** ['https://data.cdc.gov/NCHS/Weekly-Counts-of-Deaths-by-State-and-Select-Causes/3yf8-kanr']
''',
style={"margin-left": '30px'}),
html.P('Downloads:',
style={
'fontSize': 26,
'text-align': 'left',
'margin-top': 10,
'margin-bottom': 10,
'font-family': "Calibri (Body)"
}),
dcc.Markdown('''
**Download Data From the Source:** [https://data.cdc.gov/NCHS/Weekly-Counts-of-Deaths-by-State-and-Select-Causes/3yf8-kanr']
''',
style={"margin-left": '30px'}),
],
style={
'textAlign': 'left',
'background-color': '#dce6ef',
'border-radius': '5px',
'padding': '15px',
'margin': '20px',
'box-shadow': '2px'
'2px'
'2px'
'#dce6ef',
'height': '100%'
})
def create_layout(app, params):
labels = params["data"][params["target_name"]].values
colors = ['#2148bf', '#97151c', '#ffd6d6', '#faebeb', '#ffffff']
return html.Div(
[
html.Div([Header(app)]),
# page 1
html.Div(
[
# Row 1
html.Div(
[
html.Div(
[
html.H5("Explainable Contexts"),
html.Br([]),
html.P(
'This step discovers the contexts in which data from the "{}" data set is generated.'
''.format(params["datasetdict"][
params["dataname"]]),
style={"color": "#ffffff"},
className="row",
),
],
className="productnew",
),
html.Div([
html.Div(
[
html.H6("Mapping mode",
className="subtitle padded"),
dcc.RadioItems(
id='mapping-mode-dropdown',
options=[
{
'label': i,
'value': i
} for i in
["Unsupervised", "Supervised"]
],
value="Unsupervised",
labelStyle={
'display': 'inline-block'
}),
],
style={
'width': '30%',
'display': 'inline-block'
},
),
html.Div(
[
html.Div([
html.H6(
'Representations',
className="subtitle padded")
], ),
# html.Br([]),
dcc.RadioItems(
id='representation-dropdown',
options=[{
'label': i,
'value': i
} for i in [
"Context", "Clustered Map",
"Labelled Map", "Network"
]],
value="Context",
labelStyle={
'display': 'inline-block'
}),
],
style={
'width': '50%',
'display': 'inline-block'
},
),
html.Div(
[
dcc.Dropdown(
id='context-dropdown',
options=[{
'label': "No Context",
'value': 0
}],
value=0,
# labelStyle={'display': 'inline-block'}
),
],
id="context-select",
style={
'width': '20%',
'display': 'inline-block'
},
),
]),
html.Br([]),
html.Div([
dcc.Graph(
id="explain-map",
selectedData={
'points': [],
'range': None
},
style={
'width': '60%',
'display': 'inline-block'
},
className="seven columns",
),
html.Div(
id="context-notes",
style={
'width': '35%',
'display': 'inline-block'
},
className="six columns",
)
],
className="row")
], ),
# Row 5
html.Br(),
html.Div(
[
html.Div(
[
daq.Slider(
id="size-slider-network",
min=1,
max=20,
value=10,
# handleLabel={"showCurrentValue": True,"label": "Size"},
handleLabel='Size',
step=1,
color='#97151c',
marks={
'1': 'Min',
'20': 'Max'
},
size=320)
],
style={
'width': '50%',
'display': 'inline-block'
},
),
html.Div(
[
daq.Slider(
id="opacity-slider-network",
min=0,
max=1,
value=0.5,
# handleLabel={"showCurrentValue": True,"label": "Size"},
handleLabel='Opacity',
step=0.1,
color='#97151c',
marks={
'0': 'Min',
'1': 'Max'
},
size=320)
],
style={
'width': '50%',
'float': 'right',
'display': 'inline-block'
},
)
], ),
html.Br(),
html.Br(),
html.Div(id="selected-explain-notes",
className="subtitle padded"),
html.Br(),
dash_table.DataTable(id="data-explain-table",
style_table={
'maxHeight': '300px',
'overflowX': 'scroll'
},
page_current=0,
page_size=5,
page_action='custom'),
],
className="sub_page",
),
],
className="page",
)
className="row channel")
]),
html.Div([
html.Div([
html.Div([html.H3("Settings")], className='Title'),
html.Div([
html.Div(id="channel-name"),
html.Div([
html.Div(["Change Interval"],
className="three columns",
style={'marginTop': '10px'}),
html.Div([
daq.Slider(id="change-slider",
value=1,
min=1,
max=16,
step=0.01,
marks={i: str(i)
for i in range(1, 17)},
className="eleven columns")
],
className="seven columns",
style={'marginTop': '15px'}),
html.Div([
daq.LEDDisplay(id="change-display",
value=1.00,
size=10,
style={'textAlign': 'center'})
],
className="two columns",
style={'marginTop': '6px'})
],
style={
'textAlign': 'right',
'fontSize': 20,
'fontWeight': 'bold',
'position': 'relative',
'padding-top': 3
})
],
className='three columns'),
html.Div([
daq.Slider(
id='pedal_input',
min=0,
max=100,
step=1,
value=0,
size=900,
updatemode='drag',
marks={i: '{}'.format(i)
for i in range(0, 101, 10)},
)
],
className='nine columns'),
],
className='row',
style={'padding': 20}),
html.Div([
dcc.Graph(id='live_update_graph'),
],
className='row',
style={'padding': 20})
daq.Slider(id='numrecommendations',
min=10,
max=50,
value=10,
handleLabel={
"showCurrentValue": True,
"label": "Recommendations:"
},
step=10,
size=200,
marks={
10: {
'label': '10',
'style': {
'color': 'ffffff'
}
},
20: {
'label': '20',
'style': {
'color': 'ffffff'
}
},
30: {
'label': '30',
'style': {
'color': 'ffffff'
}
},
40: {
'label': '40',
'style': {
'color': 'ffffff'
}
},
50: {
'label': '50',
'style': {
'color': 'ffffff'
}
}
})
def render_page_content(pathname):
if pathname == "/":
return [
html.H1('Introduction', style={'textAlign':'center'}),
html.Br(),
dcc.Tabs(id = "tabs-i", value = "tab-v", children=[
dcc.Tab(label = "Vehicles data set", value="tab-v"),
dcc.Tab(label = "Bank Churners data set", value="tab-b")
]
),
html.Div(id = "tabs-intro"),
]
return html.Div(
[
html.H1('Introduction', style={'textAlign':'center'}),
html.Br(),
html.P('Craigslist is the world’s largest collection of used vehicles for sale.'
'This data set includes every used vehicle entry within the United States on'
'Craiglist, from the year 1900 until today. This data set has been taken'
'from the website'),
html.Br(),
html.P('A bank manager is interested in predicting the annual income of his or her clients account holder.'
'For the new year, the bank has decided to create a new service depending on this income,'
'so that it will be able to know which customers have good income in order to give'
'them a better service and make them commit to stay with the bank.')
])
elif pathname == "/page-1":
return [
html.H1('Data description: Craiglist vehicles', style={'textAlign':'center'}),
html.Br(),
html.P('For a start, we will do a descriptive analysis to see the behavior of our variables and how to work with them, '
'as well as cleaning our data set. Then, we will apply different statistical tools on our data set to get the best '
'possible information about it in order to make the best conclusions.'),
html.P(
"In the following table, you will be able to see 10 rows of the complete "
"data set. Moreover, you can sort the data in every column, eliminate some "
"of them and search for some value in each column."
),
html.Br(),
dt.DataTable(
id='datatable-interactivity1',
columns=[
{"name": i, "id": i, "deletable": True, "selectable": True} for i in df1.columns
],
data=df1.to_dict('records'),
filter_action="native",
sort_action="native",
page_size= 10,
style_header=s_header,
style_cell=s_cell,
),
html.Div(id='datatable-interactivity-container1')
]
elif pathname == "/page-2":
return [
html.H1('Descriptive analysis', style={'textAlign':'center'}),
html.Br(),
html.P(
"In this panel, we observe some plots for the continuous and categorical variables: "
),
dcc.Tabs(id = "tabs", value = "tab-cont", children=[
dcc.Tab(label = "Continuous variables", value="tab-cont"),
dcc.Tab(label = "Categorical variables", value="tab-cat")
]),
html.Div(id = "tabs-content")
]
elif pathname == "/page-3":
return [
html.H1('Statistical models', style={'textAlign':'center'}),
html.Br(),
html.P(
"In this page we can apply some statistical models to classify the price. "
"Firstly, we will select the proportion that is employed to train the model, "
"then we will choose all the predictors that will be in the model and finally "
"we can select between Random Forest, KNN or Logistic Regression. Below, "
"we can see the results (precision, recall and accuracy) for each method."
),
html.Hr(),
html.Br(),
html.Div([
daq.Slider(
id = 'slider',
min=50,
max=90,
value=70,
handleLabel={"showCurrentValue": True,"label": "SPLIT"},
step=10
),
], className="row flex-display", style={'padding-left':'35%'}
),
html.Br(),
dcc.Dropdown(
id="predictors",
options = [{'label':x, 'value':x} for x in df1_pred],
multi=True,
placeholder="Select the variables that will be in the model: ",
clearable=False,
className="dcc_control",
),
html.Br(),
dcc.Dropdown(
id="select_models",
placeholder="Select the model: ",
options = [{'label':x, 'value':x} for x in models],
clearable=False,
className="dcc_control",
),
html.Br(),
html.P(
"When you are ready, just press the button!"
),
html.Button(id='submit-button-state', n_clicks=0, children='Go!'),
html.Br(),
html.Div([
html.Div([
daq.LEDDisplay(
id='precision',
label="PRECISION",
value=0.00,
size=FONTSIZE,
color = FONTCOLOR,
backgroundColor=BGCOLOR
),
daq.LEDDisplay(
id='recall',
value=0.00,
label = "RECALL",
size=FONTSIZE,
color = FONTCOLOR,
backgroundColor=BGCOLOR
),
daq.LEDDisplay(
id='accuracy',
value=0.00,
label = "ACCURACY",
size=FONTSIZE,
color = FONTCOLOR,
backgroundColor=BGCOLOR
),
],
className="row flex-display", style={'textAlign':'center','margin': 'auto','width': '50%','border':'3px solid green','padding': '10px'}
),
]
),
# html.Table([
# html.Tr([html.Td(['Precision: ']), html.Td(id='precision')]),
# html.Tr([html.Td(['Recall: ']), html.Td(id='recall')]),
# html.Tr([html.Td(['Accuracy: ']), html.Td(id='accuracy')]),
# ]),
]
elif pathname == "/page-4":
return [
html.H1('Data Description: Bank Churners',
style={'textAlign':'center'}),
html.Br(),
html.P('For this data set, I have decided to make the graphs of both numerical and categorical variables,'
'so you can make the boxplot of the numerical variables and the pie chat of the categorical variables.'
'Finally, you will be able to perform a regression analysis of the total number of customer transactions'
'for both Ct and Amt.'),
html.Br(),
html.Div(
[dt.DataTable(
id='datatable-interactivity',
columns=[
{"name": i, "id": i, "deletable": True, "selectable": True} for i in df2.columns
],
data=df2.to_dict('records'),
page_size= 10,
filter_action="native",
sort_action="native",
style_header=s_header,
style_cell=s_cell,
)
])
]
elif pathname == "/page-5":
return [
html.H1('Plot numerical vs categorical',
style={'textAlign':'center'}),
html.Br(),
dcc.Tabs([
dcc.Tab(label="Numerical Variables",children=[
html.P('In the following graph, you can select the numerical variable according to'
'the most relevant categorical variables. Moreover, as the response variable in this case'
'is income, it is important to have this reference as well:'
),
html.P("Categorical Variable:"),
dcc.Dropdown(
id='x-axis',
options=[{'value': x, 'label': x}
for x in ['Attrition_Flag', 'Education_Level', 'Card_Category']],
value=['Education_Level'],
multi=True
#labelStyle={'display': 'inline-block'}
),
html.P("Numerical Variable:"),
dcc.RadioItems(
id='y-axis',
options=[{'value': x, 'label': x}
for x in ['Customer_Age', 'Total_Revolving_Bal', 'Total_Trans_Amt', 'Total_Trans_Ct']],
value='Total_Trans_Ct',
labelStyle={'display': 'inline-block'}),
dcc.Graph(id="box-plot")
]), #children #tab
dcc.Tab(label="Categorical Variables",children=[
html.P('In the following graph, you can select the categorical variable'
'to display the proportion of the sample in this class:'),
dcc.Dropdown(
id='categorical',
options=[{'value': x, 'label': x}
for x in ['Attrition_Flag', 'Education_Level', 'Card_Category','Income_Category_final']],
value=['Education_Level']
#labelStyle={'display': 'inline-block'}
),
dcc.Graph(id="piechart")
])
])#tabs
]
elif pathname == "/page-6":
return [
html.P('It is very important to take into account the number of transactions'
'in the account in relation to the amount, so in the following graph,'
'you can see the customers and label them by card type'
),
html.Div(id='my-div', style={'display': 'none'}),
dcc.Dropdown(
id='my-multi-dropdown',
options=opt_card,
value=df2_card[0],
multi=True
),
html.P("Filter by total transactions in the account:",style={'textAlign':'center'}),
dcc.RangeSlider(
id='my-slider',
step=0.1,
min=min(df2['Total_Trans_Ct']),
max=df2['Total_Trans_Amt'].max(),
),
html.P('Click the button to upload the Transiction Acount:'),
html.Button('Update filter', id='my-button'),
dcc.Graph(id="my-graph"),
html.P('Click on the graph and check the customer information:'),
dt.DataTable(
id='my-table',
columns=[{"name": i, "id": i} for i in df2.columns],
style_header=s_header,
style_cell=s_cell,
),
]
elif pathname == "/page-7":
return [
html.Div([
dcc.Markdown(markdown_text)
], style={'textAlign':'center'})
]
# If the user tries to reach a different page, return a 404 message
return dbc.Jumbotron(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
]
)
def graph_tab(self):
return dbc.Card(
dbc.CardBody([
generic_card(
'layout',
title='Graph layout',
markdown="",
children=[
dbc.Button("Zoom reset",
color="secondary",
outline=True,
size='sm',
id='zoom-reset'),
dcc.Markdown(
"*To reset to full range display, one can also double click on the "
"graph area (It will be faster!)* "),
# data type selection
dcc.Markdown("###### Data to display"),
dcc.Checklist(id='graph-selector',
options=[
{
'label': 'Processed',
'value': 'Processed'
},
{
'label': 'Transposed',
'value': 'Transposed'
},
],
value=['Processed'],
labelStyle={
'display': 'inline-block',
'margin-right': '10px'
}),
# optimisation
dcc.Markdown("###### Graph display optimisation"),
html.Div(daq.Slider(
min=0,
max=4,
value=3,
step=1,
marks={
'0': 'None',
'1': 'Low',
'2': 'Moderate',
'3': 'High',
'4': 'Severe'
},
id='graph-optimisation',
),
style={
'margin-left': '30px',
'margin-bottom': '30px'
}),
# Colormap
dcc.Markdown("###### Colormap"),
dcc.Dropdown(id='cmap-select',
options=[
{
'label': 'jet',
'value': 'jet'
},
{
'label': 'jetr',
'value': 'jet_r'
},
{
'label': 'viridis',
'value': 'viridis'
},
{
'label': 'viridis_r',
'value': 'viridis_r'
},
{
'label': 'magma',
'value': 'magma'
},
{
'label': 'magma_r',
'value': 'magma_r'
},
],
value='jet',
style={'width': '150px'})
],
),
generic_card(
'xaxis', 'Horizontal axis layout', """
xaxis description
"""),
generic_card(
'zaxis', 'vertical axis layout', """
zaxis description
"""),
]),
className='control-tab')
html.Div(
[
html.Div(
[
daq.Slider(
id="led-slide",
color="",
handleLabel={
"showCurrentValue": "True",
"label": "LED"
},
size=638,
min=0,
max=8,
marks={
"0": "OFF",
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
},
value=0,
disabled=False,
)
],
className="row",
style={"width": "75%"},
)
import dash
import dash_daq as daq
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
daq.Slider(id='my-daq-slider-ex', value=17),
html.Div(id='slider-output')
])
@app.callback(dash.dependencies.Output('slider-output', 'children'),
[dash.dependencies.Input('my-daq-slider-ex', 'value')])
def update_output(value):
return 'The slider is currently at {}.'.format(value)
if __name__ == '__main__':
app.run_server(debug=True)
'position': 'left',
'padding-top': 0,
'padding-right': 0
},
),
html.H3("Simulation (Queue Theory)"),
# html.Br(),
html.Div([
# html.Br(),
html.Label('Select number of arrivals per hour'),
daq.Slider( # Slider to select the number of arrivals
id="arrivalSlider",
# count=100,
min=np.min(arrivals_per_hour_slider),
max=np.max(arrivals_per_hour_slider),
step=100,
# value=[np.min(arrivals_per_hour_slider), np.max(arrivals_per_hour_slider)],
marks={i: str(i) for i in arrivals_per_hour_slider},
size=700,
included=False),
]),
html.Br(),
html.Div([
html.Br(),
html.Label('Select average time of service (mins)'),
daq.Slider( # Slider to select service_mins_per_server
id="serviceSlider",
# count=100,
min=np.min(service_mins_per_server_slider),
max=np.max(service_mins_per_server_slider),
step=5,
label="Select Your Favorite Genres",
children=[dbc.DropdownMenuItem(g, id=g) for g in genres]
),
dbc.CardBody(id='genre-recom-movies')
])
# for system 2
rate_movie_div = html.Div([
dbc.Row([
dbc.Col(
dbc.Card([
dbc.CardImg(src=f"https://liangfgithub.github.io/MovieImages/{rated_movie_df.loc[(i+j*nmovies_per_row), 'movieid']}.jpg", top=True, style={'width':'100%'}),
dbc.CardBody([
html.Div(children=rated_movie_df.loc[(i+j*nmovies_per_row), 'title'], style={'fontSize': '14px', 'marginBottom':'10px'}),
daq.Slider(id=f'slider_{i+j*nmovies_per_row}', min=0, max=5, value=0, marks={'0':'0', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5'}, size=130),
])
], outline=True, style={'marginTop':10, 'marginBottom':10})
) for i in range(nmovies_per_row)
]) for j in range(nmovies_sample//nmovies_per_row)
], style={'overflowY':'scroll','height':500})
# rate_book_collapse = html.Div(id='content', children=[
# dbc.Button(
# "Please rate your favorite movies",
# id="collapse-button",
# # className="mb-3",
# color="primary",
# ),
# dbc.Collapse(
},
),
html.Div(
[
daq.Slider(
id="flow-meter-setpoint-slider",
value=2000,
disabled=True,
color="#EA0606",
min=0,
max=5000,
size=350,
handleLabel={
"showCurrentValue": "True",
"label": "Now (mV)",
'style': {
'color': '#EA0606'
}
},
marks={
"0": "0",
"1000": "",
"2000": "",
"3000": "",
"4000": "",
"5000": "5 Volt",
},
),
],
className="row",
style={
"display": "flex",
