import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Input(id='input'),
dcc.Dropdown(id='dropdown',
options=[{
'label': str(x),
'value': str(x)
} for x in range(1, 10)]),
dcc.RadioItems(id='radio-items',
options=[{
'label': str(x),
'value': str(x)
} for x in range(1, 10)]),
html.Div(id='input-output'),
html.Div(id='dropdown-output'),
html.Div(id='radio-items-output'),
html.Button('change-style', id='change-style'),
html.Div('Style changer',
id='style-output',
style={'backgroundColor': 'rgba(255, 0, 0, 1)'}),
html.Div(id='multi-elements-click',
children=[
html.Button('btn-1', id='btn-1'),
html.Button('btn-2', id='btn-2'),
html.Button('btn-3', id='btn-3'),
]),
available_indicators = df['Indicator Name'].unique()
app.layout = html.Div([
html.Div(
[
html.Div([
dcc.Dropdown(id='crossfilter-xaxis-column',
options=[{
'label': i,
'value': i
} for i in available_indicators],
value='Total employed (in persons X 1000)'),
dcc.RadioItems(id='crossfilter-xaxis-type',
options=[{
'label': i,
'value': i
} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'})
],
style={
'width': '49%',
'display': 'inline-block'
}),
html.Div([
dcc.Dropdown(id='crossfilter-yaxis-column',
options=[{
'label': i,
'value': i
} for i in available_indicators],
value='Average hourly wage rate in C$'),
html.Br(),
html.P('Select the most important subject for this bill:'),
dcc.Dropdown(id='submitted-bill-subject',
options=[{
'label': i,
'value': i
} for i in available_subjects]),
html.Br(),
html.P('Which chamber are you in?'),
dcc.RadioItems(id='chamber-radio',
options=[{
'label': 'House of Representatives',
'value': 'house'
}, {
'label': 'Senate',
'value': 'senate'
}],
value='senate',
labelStyle={
'display': 'inline-block',
'margin-right': '2%'
}),
html.Br(),
html.P('Which party are you in?'),
dcc.RadioItems(id='sponsor-party-radio',
options=[{
'label': 'Democrat',
'value': 'Democrat'
}, {
'label': 'Republican',
'value': 'Republican'
available_countries = df['GEO'].unique()
available_units = df["UNIT"].unique()
app.layout = html.Div([
html.H2('Final Assignment Rico Dähler',style={'textAlign': 'center', 'color': 'purple'}),
html.H4('Figure 1',style={'textAlign': 'center'}),
html.Div([
html.Div([
html.Label('Select Indicator'),
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Gross domestic product at market prices'
),
dcc.RadioItems(
id='Select_Unit',
options=[{'label': i, 'value': i} for i in available_units],
value='Current prices, million euro')
],
style={'width': '48%', 'display': 'inline-block'}),
html.Div([
html.Label('Select Indicator'),
dcc.Dropdown(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Final consumption expenditure'
)
],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
]),
dcc.Graph(id='indicator-graphic'), #this is the graph figure
dcc.Slider(
html.Div(id='body')
])
@app.callback(Output('body', 'children'), [Input('navigation-links', 'value')])
def display_children(chapter):
if chapter == 'Chapter 1':
return Div('Welcome to Chapter 1')
elif chapter == 'Chapter 2':
return Div('Welcome to Chapter 2')
''',
language='python',
customStyle=styles.code_container),
html.Div([
dcc.RadioItems(options=[{
'label': i,
'value': i
} for i in ['Chapter 1', 'Chapter 2']],
value='Chapter 1',
id='navigation-links-urls'),
html.Div(id='body-urls')
],
id='urls-example',
className="example-container"),
dcc.Markdown('''
Hiding and showing children like this gives the effect of
navigating to new pages.
The second part of navigation is updating the browser's navigation bar
with a new URL and loading the correct children when the user navigates
to a particular URL pathname.
Dash supports URLs like this by mapping values in the application's state
html.Br(),
html.Br(),
daq.Slider(
id="input-qsec",
min=np.floor(mtcars["qsec"].min()),
max=np.ceil(mtcars["qsec"].max()),
dots=False,
handleLabel={"showCurrentValue": True, "label": "Value"},
step=0.25,
value=np.floor(mtcars["qsec"].mean()),
),
html.H5("Number of cylinders:"),
html.Br(),
dcc.RadioItems(
id="input-cyl",
options=opts_cyl,
value=opts_cyl[0].get("value"),
labelStyle={"display": "inline-block"},
),
html.Br(),
daq.BooleanSwitch(
id="input-am",
label="Has manual transmission",
on=True,
style={"display": "inline-block"},
),
html.H2(id="output-prediction"),
html.Br(),
dcc.Dropdown(
id="my-dropdown",
options=[
{"label": "Linear", "value": "LINEAR"},
marks={
i: ' ' if i % 50 else '{}'.format(i)
for i in range(0, 251)
},
value=currdata['num_facilities'][0],
id='num_facilities_slider')
]),
# has_us_facility
html.Div(children=[
html.Label('Will you have facilities in the US?'),
dcc.RadioItems(options=[{
'label': 'Yes',
'value': True
}, {
'label': 'No',
'value': False
}],
value=currdata['has_us_facility'][0],
id='has_us_facility_radio')
],
id='has_us_facility',
style={
'margin-top': 30,
'margin-bottom': 10
}),
# is_cancer
html.Div(children=[
html.Label(
'Does your study deal with any form of cancer?'),
'label': 'Краснодарский край',
'value': 'MTL'
}, {
'label': 'Республика Татарстан',
'value': 'SF'
}],
value=['MTL', 'SF'],
style={"width": 310},
),
html.Label('Сумма уплаченного налога:'),
dcc.RadioItems(options=[
{
'label': 'Рассчитать сумму уплаченного налога',
'value': 'NYC'
},
{
'label': 'Укажете самостоятельно сумму налога',
'value': 'MTL'
},
],
value='MTL'),
dcc.Input(type='text',
placeholder='Укажите свой доход',
style={"width": 310}),
dcc.Graph(id='2', figure=fig1)
] #, style={'columnCount': 2}
)
if __name__ == '__main__':
app.run_server(debug=True)
], className="page")
#Page 2
granting = html.Div([ # page 3
print_button(),
html.Div([
get_menu(),
# Row ``
html.Div([
get_graph1(name='vintage-global',height=250,jump='All segments'),
get_graph_with_dropdown(name='vintage-segment',height=250,dropdown=['Auto','Retail']),
], className="row "),
html.Div([
dcc.RadioItems(id='id-prod-or-fpd',
options=[{'label': i, 'value': i} for i in ['Production','FPD']],
value='Production',
labelStyle={'display': 'inline-block'}
)
], className="row "),
html.Div([
get_graph1('prod-fpd-global',250),
get_graph1('prod-fpd-segment',250)
], className="row "),
html.Div([
get_graph1('id-prod-country',250),
get_graph1('id-prod-segment',250)
], className="row "),
], className="subpage")
], className="page")
vintages = html.Div([ # page 3
value=5,
),
html.Div(
id="shrinking-container",
children=[
html.P(children="Shrinking"),
dcc.RadioItems(
id=
"radio-svm-parameter-shrinking",
labelStyle={
"margin-right": "7px",
"display": "inline-block",
},
options=[
{
"label": " Enabled",
"value": "True",
},
{
"label": " Disabled",
"value": "False",
},
],
value="True",
),
],
),
],
),
],
),
def start_dash_app(logfile):
app = dash.Dash(__name__)
app.title = "ctffindplot"
app.layout = html.Div(children=[
html.H1(children="ctffindplot"),
html.Div(children=logfile),
dcc.RadioItems(
id="set-refresh",
value=10 * 1000,
options=[
{
"label": "Auto-refresh every 10 seconds",
"value": 10 * 1000
},
{
"label": "Off",
"value": 2**30
},
],
),
html.Div(
id="graphs",
children=[],
),
dcc.Interval(
id="interval-component",
interval=10 * 1000,
n_intervals=0, # in milliseconds
),
])
@app.callback(
dash.dependencies.Output("interval-component", "interval"),
[dash.dependencies.Input("set-refresh", "value")],
)
def update_interval(value):
return value
@app.callback(
Output("graphs", "children"),
[Input("interval-component", "n_intervals")],
)
def update_graphs(_):
ctfdata = read_csv(logfile)
xaxis_view_width = 500
n = len(ctfdata["index"])
if n > xaxis_view_width:
xaxis = dict(range=[n - xaxis_view_width, n])
else:
xaxis = dict(range=[0, n])
updated_graphs = [
dcc.Graph(
style={"height": 300},
id="defocus",
figure=dict(
data=[
dict(name="defocus1",
x=ctfdata["index"],
y=ctfdata["defocus1"]),
dict(
name="defocus2",
x=ctfdata["index"],
y=ctfdata["defocus2"],
),
],
layout=dict(
title="Defocus 1 and 2, um",
showlegend=True,
legend=dict(x=0, y=1.0),
margin=dict(l=40, r=10, t=60, b=30),
yaxis=dict(range=[0, 4]),
xaxis=xaxis,
),
),
),
dcc.Graph(
style={"height": 300},
id="astig",
figure=dict(
data=[
dict(
x=ctfdata["index"],
y=ctfdata["astig"],
),
],
layout=dict(
title=
"Amount of Astigmatism = abs(defocus1 - defocus2), nm",
margin=dict(l=40, r=10, t=60, b=30),
yaxis=dict(range=[0, 200]),
xaxis=xaxis,
),
),
),
dcc.Graph(
style={"height": 300},
id="azimuth_astig",
figure=dict(
data=[
dict(
x=ctfdata["index"],
y=ctfdata["azimuth_astig"],
),
],
layout=dict(
title="Azimuth of Astigmatism",
margin=dict(l=40, r=10, t=60, b=30),
xaxis=xaxis,
),
),
),
dcc.Graph(
style={"height": 300},
id="phase_shift",
figure=dict(
data=[
dict(
x=ctfdata["index"],
y=ctfdata["phase_shift"],
),
],
layout=dict(
title="Phase Shift, Degrees",
margin=dict(l=40, r=10, t=60, b=30),
yaxis=dict(range=[-20, 100]),
xaxis=xaxis,
),
),
),
dcc.Graph(
style={"height": 300},
id="xcorr",
figure=dict(
data=[
dict(
x=ctfdata["index"],
y=ctfdata["xcorr"],
),
],
layout=dict(
title="Cross Correlation",
margin=dict(l=40, r=10, t=60, b=30),
xaxis=xaxis,
),
),
),
dcc.Graph(
style={"height": 300},
id="res_fit",
figure=dict(
data=[
dict(
x=ctfdata["index"],
y=ctfdata["res_fit"],
),
],
layout=dict(
title="Resolution of Fit, A",
margin=dict(l=40, r=10, t=60, b=30),
yaxis=dict(range=[0, 10]),
xaxis=xaxis,
),
),
),
]
return updated_graphs
app.run_server(debug=False)
html.Div([
html.Label(f'{s}-{v}: ',
style={
'display': 'inline',
'fontSize': 15
}),
dcc.RadioItems(id=f'radiolist-{s}',
options=[
{
"label": "Dem",
"value": "democrat"
},
{
"label": "Rep",
"value": "republican"
},
{
"label": "NA",
"value": "unsure"
},
],
value='unsure',
inputStyle={'margin-left': '10px'},
labelStyle={'display': 'inline-block'},
style={'display': 'inline'}),
],
style={'textAlign': 'end'}))
print(radio_list)
# Input list for the callback (long_code.py lines 48-52)
input_list = []
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.RadioItems(
id='radio-1',
options=[
{'label': 'Polska', 'value':'Polska'},
{'label': 'Stany Zjednoczone', 'value':'Stany Zjednoczone'}
],
value='Polska'
),
html.Hr(),
dcc.RadioItems(
id='radio-2'
),
html.Hr(),
html.Div(id='div-1')
])
@app.callback(
Output(component_id='radio-2', component_property='options'),
[Input(component_id='radio-1', component_property='value')]
html.Label('Range Slider'),
dcc.RangeSlider(id='rangeslider',
marks={i: 'Label {}'.format(i)
for i in range(0, 9)},
min=0,
max=9,
value=[0, 1],
step=1),
html.Br(),
html.Hr(),
html.Label('Text Area'),
dcc.Textarea(id='textarea',
placeholder='Enter a value...',
value='This is a TextArea component'),
html.Br(),
html.Hr(),
html.Label('Date Picker Single'),
dcc.DatePickerSingle(id='date-picker-single', date=dt(2019, 6, 12)),
html.Br(),
html.Hr(),
html.Label('Radio Items'),
dcc.RadioItems(id='radio', options=options, value='PT'),
html.Br(),
html.Hr(),
html.Label('Checkboxes'),
dcc.Checklist(id='checkbox', options=options, value=['PT', 'FR'])
])
if __name__ == '__main__':
app.run_server(debug=True)
id='year_slider',
min=1960,
max=2017,
value=[1990, 2010],
className="dcc_control"
),
html.P(
'Filter by well status:',
className="control_label"
),
dcc.RadioItems(
id='well_status_selector',
options=[
{'label': 'All ', 'value': 'all'},
{'label': 'Active only ', 'value': 'active'},
{'label': 'Customize ', 'value': 'custom'}
],
value='active',
labelStyle={'display': 'inline-block'},
className="dcc_control"
),
dcc.Dropdown(
id='well_statuses',
options=well_status_options,
multi=True,
value=list(WELL_STATUSES.keys()),
className="dcc_control"
),
dcc.Checklist(
id='lock_selector',
options=[
html.H1(children='COVID-19',
style={
'textAlign': 'center',
'color': colors['text']
}),
html.Div(children='Select focus for the dashboard',
style={
'textAlign': 'center',
'color': colors['text']
}),
html.Div(dcc.RadioItems(
id='global_format',
options=[{
'label': i,
'value': i
} for i in ['Worldwide', 'United States', 'Europe']],
value='Worldwide',
labelStyle={
'float': 'center',
'display': 'inline-block'
}),
style={
'textAlign': 'center',
'color': colors['text'],
'width': '100%',
'float': 'center',
'display': 'inline-block'
}),
html.Div(dcc.Graph(id='confirmed_ind'),
style={
'textAlign': 'center',
}, {
'label': u'Montréal',
'value': 'MTL'
}, {
'label': 'San Francisco',
'value': 'SF'
}],
value=['MTL', 'SF'],
multi=True),
html.Label('Radio Items'),
dcc.RadioItems(options=[{
'label': 'New York City',
'value': 'NYC'
}, {
'label': u'Montréal',
'value': 'MTL'
}, {
'label': 'San Francisco',
'value': 'SF'
}],
value='MTL'),
html.Label('Checkboxes'),
dcc.Checklist(options=[{
'label': 'New York City',
'value': 'NYC'
}, {
'label': u'Montréal',
'value': 'MTL'
}, {
'label': 'San Francisco',
'value': 'SF'
app.layout = html.Div([
html.Div([
dbc.Jumbotron([
html.H1("Unsupervised Clustering of Vowels",
className="display-3"),
html.H2(
"Insert your vowel's dataset and perform clustering",
className="lead",
)
])
]),
html.H5("Choose two different columns:"),
html.Div([
dcc.RadioItems(id="column1",
options=columns,
value='F1',
labelStyle={'display': 'inline-block'})
]),
html.Div([
dcc.RadioItems(id="column2",
options=columns,
value='F2',
labelStyle={'display': 'inline-block'})
]),
html.H5("Choose a model:", style={"margin-top": 50}),
html.Div([
dcc.RadioItems(id="model-type",
options=models,
value='DBSCAN',
labelStyle={'display': 'inline-block'}),
html.Div(id='output-params')
],
className="mt-1 mb-2"),
dbc.Col([
dbc.Row([
dbc.Card([
dbc.CardBody([
html.H3(id='recomend one'),
html.H3(id='recomend estimation'),
html.H3(id='recomend real'),
html.P(id='recomend bid'),
dcc.RadioItems(options=[{
'label': 'Similaridad mixto (reseña + ctas)',
'value': 1
}, {
'label': 'Similaridad basado en reseña',
'value': 2
}, {
'label': 'Similaridad basado en características',
'value': 3
}],
value=1,
id='recomend similar model')
])
])
])
],
className="mt-1 mb-2"),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardBody([
dash_table.DataTable(
href='https://github.com/pcm-dpc/COVID-19'), '.',
html.Br(),
'Il codice è open source sotto licenza MIT e disponibile su ',
html.A(
'github',
href='https://github.com/doppioandante/covid_andamento_regionale'),
'.'
]),
html.Div(f'''
Ultimo aggiornamento: {last_update}
'''),
dcc.RadioItems(id='plot-type',
options=[{
'label': i,
'value': i
} for i in [
'Confronto Regioni', 'Dettaglio Regione',
'Dettaglio Province per Regione'
]],
value='Confronto Regioni',
labelStyle={'display': 'inline-block'}),
dcc.Dropdown(id='plot-variable'),
dcc.Graph(id='trend-plot', config=dict(locale='it'))
])
@app.callback(Output('plot-variable', 'options'),
[Input('plot-type', 'value')])
def set_dropdown_options(plot_type):
if plot_type == 'Confronto Regioni':
return [{
'label': label,
'label': 'Life Expectancy',
'value': 'lifeExp'
}, {
'label': 'GDP per Capita',
'value': 'gdpPercap'
}],
value='pop'), 'Country',
dcc.Dropdown(id='clientside-graph-country-px',
options=[{
'label': country,
'value': country
} for country in available_countries],
value='Canada'), 'Graph scale',
dcc.RadioItems(id='clientside-graph-scale-px',
options=[{
'label': x,
'value': x
} for x in ['linear', 'log']],
value='linear'),
html.Hr(),
html.Details([
html.Summary('Contents of figure storage'),
dcc.Markdown(id='clientside-figure-json-px')
])
])
@app.callback(Output('clientside-figure-store-px', 'data'), [
Input('clientside-graph-indicator-px', 'value'),
Input('clientside-graph-country-px', 'value')
])
def update_store_data(indicator, country):
max=2017,
value=[1990, 2010],
className="dcc_control",
),
html.P("Filter by well status:",
className="control_label"),
dcc.RadioItems(
id="well_status_selector",
options=[
{
"label": "All ",
"value": "all"
},
{
"label": "Active only ",
"value": "active"
},
{
"label": "Customize ",
"value": "custom"
},
],
value="active",
labelStyle={"display": "inline-block"},
className="dcc_control",
),
dcc.Dropdown(
id="well_statuses",
options=well_status_options,
multi=True,
value=list(WELL_STATUSES.keys()),
className="dcc_control",
def __init__(self, data_acquisitor):
self.app = web_gui.APP
self.data_acquisitor = data_acquisitor
self.title = html.H3('NetFlow Preprocessor',
style={'margin-bottom': '0px'})
self.info = html.Div(id=uuid4().hex,
className=cnf.GUI.CLASS_SMALL_TEXT)
self.pause = html.Hr(className=cnf.GUI.CLASS_PAUSE)
self.t1 = html.Div('Here you can select features to be extracted:',
className=cnf.GUI.CLASS_TEXT)
self.selector_variables = dcc.Checklist(
id=uuid4().hex,
options=[{
'label': ' '.join(k.lower().split('_')),
'value': k
} for k in list(self.data_acquisitor.variables.keys())],
values=[
'FIRST SEEN', 'SOURCE ADDRESS', 'DESTINATION ADDRESS',
'SOURCE PORT', 'DESTINATION PORT', 'PACKETS'
],
labelStyle={'display': 'block'},
inputStyle={'margin': '5px'},
style={'color': cnf.GUI.COLORMAP['font-secondary']})
self.t8 = html.Div(
'Here you can select statistics that you want to include in data:',
className=cnf.GUI.CLASS_TEXT)
self.selector_statistics = dcc.Checklist(
id=uuid4().hex,
options=[{
'label': ' '.join(k.lower().split('_')),
'value': k
} for k in list(self.data_acquisitor.statistics.keys())],
values=['MIN', 'MAX'],
labelStyle={'display': 'block'},
inputStyle={'margin': '5px'},
style={'color': cnf.GUI.COLORMAP['font-secondary']})
self.t2 = html.Div('Here you can choose flows aggregators:',
className=cnf.GUI.CLASS_TEXT)
self.selector_aggregators = dcc.Checklist(
id=uuid4().hex,
options=[{
'label': ' '.join(k.lower().split('_')),
'value': k
} for k in list(self.data_acquisitor.aggregators.keys())],
values=['DESTINATION ADDRESS'],
labelStyle={'display': 'block'},
inputStyle={'margin': '5px'},
style={
'color': cnf.GUI.COLORMAP['font-secondary'],
'margin-bottom': '20px'
})
self.t3 = html.Div('And traffic volume unit:',
className=cnf.GUI.CLASS_TEXT)
self.selector_unit = dcc.RadioItems(
id=uuid4().hex,
options=[{
'label': k.lower(),
'value': k
} for k in list(self.data_acquisitor.unit.keys())],
value='FLOWS',
labelStyle={'display': 'block'},
inputStyle={'margin': '5px'},
style={'color': cnf.GUI.COLORMAP['font-secondary']})
self.t4 = html.Div('Here you are able to define filters:')
self.filter_protocol = dcc.Input(id='PROTOCOL', type='text', value='')
self.filter_ip_version = dcc.Input(id='IP VERSION',
type='text',
value='')
self.filter_source_address = dcc.Input(id='SOURCE ADDRESS',
type='text',
value='')
self.filter_destination_address = dcc.Input(id='DESTINATION ADDRESS',
type='text',
value='')
self.filter_source_port = dcc.Input(id='SOURCE PORT',
type='text',
value='')
self.filter_destination_port = dcc.Input(id='DESTINATION PORT',
type='text',
value='')
self.filter_tcp_flags = dcc.Input(id='TCP FLAGS',
type='text',
value='')
self.filter_packets = dcc.Input(id='PACKETS', type='text', value='')
self.filter_bytes = dcc.Input(id='BYTES', type='text', value='')
self.filter_flows = dcc.Input(id='FLOWS', type='text', value='')
self.filter_duration = dcc.Input(id='DURATION', type='text', value='')
self.filters = [
self.filter_protocol, self.filter_ip_version,
self.filter_source_address, self.filter_destination_address,
self.filter_source_port, self.filter_destination_port,
self.filter_tcp_flags, self.filter_packets, self.filter_bytes,
self.filter_flows, self.filter_duration
]
self.selector_filters = html.Div(
id=uuid4().hex,
children=[
html.Div(
[
html.Div(' '.join(k.lower().split('_')) + ':',
style={'text-align': 'right'}),
self.filters[i]
],
style={
'display': 'grid',
'grid-template-columns': '30% 50%',
'align-items': 'center',
'grid-gap': '20px',
'color': cnf.GUI.COLORMAP['font-secondary']
}) for i, k in enumerate(
list(self.data_acquisitor.filters.keys()))
],
style={'margin': '10px'})
self.selector = html.Div([
html.Div(
[
html.Div([self.t1, self.selector_variables]),
html.Div([self.t8, self.selector_statistics]),
html.Div([
self.t2, self.selector_aggregators, self.t3,
self.selector_unit
])
],
style={
'display': 'grid',
'grid-template-columns': '33% 33% 33%',
'align-items': 'top',
'grid-gap': '20px'
}), self.pause,
html.Div([self.t4, self.selector_filters])
])
self.my_query = html.Div(id=uuid4().hex,
className=cnf.GUI.CLASS_SMALL_TEXT)
self.data_filename = dcc.Input(
id=uuid4().hex,
placeholder=
'Podaj nazwę, pod którą chcesz zapisać strukturę danych...',
type='text',
value='')
self.button_build_query = html.Button(id=uuid4().hex,
children='Generate query',
className=cnf.GUI.CLASS_BUTTON)
self.button_get_data = html.Button(id=uuid4().hex,
children='Get data',
className=cnf.GUI.CLASS_BUTTON)
self.da_timer = html.Div(id=uuid4().hex,
children='',
className=cnf.GUI.CLASS_TEXT)
self.section_query = html.Div(
[self.button_build_query, self.button_get_data],
style={
'display': 'grid',
'grid-template-columns': '50% 50%',
'align-items': 'top',
'justify-items': 'center'
})
self.t5 = html.Div(
'Here you are able to select the time window size for sampling nfdump binary...',
className=cnf.GUI.CLASS_TEXT)
self.time_window_selector = dcc.Slider(
id=uuid4().hex,
min=cnf.NFDUMP.TIME_WINDOW_MIN,
max=cnf.NFDUMP.TIME_WINDOW_MAX,
step=cnf.NFDUMP.TIME_WINDOW_STEP,
marks={
i: {
'label': str(i) + ' min',
'style': {
'color': cnf.GUI.COLORMAP['font-main'],
'font-size': '10',
'transform': 'rotate(-45deg)',
'transform-origin': '50% 170%'
}
}
for i in cnf.NFDUMP.TIME_WINDOW_MARKS
},
value=cnf.NFDUMP.TIME_WINDOW)
self.time_window_selector_packed = html.Div(
self.time_window_selector, className=cnf.GUI.CLASS_SLIDER)
self.t6 = html.Div(
'... and here the time delta size for sampling nfdump binary.',
className=cnf.GUI.CLASS_TEXT)
self.time_window_delta_selector = dcc.Slider(
id=uuid4().hex,
min=cnf.NFDUMP.TIME_WINDOW_DELTA_MIN,
max=cnf.NFDUMP.TIME_WINDOW_DELTA_MAX,
step=cnf.NFDUMP.TIME_WINDOW_DELTA_STEP,
marks={
i: {
'label': str(i) + ' s',
'style': {
'color': cnf.GUI.COLORMAP['font-main'],
'font-size': '10',
'transform': 'rotate(-45deg)',
'transform-origin': '50% 170%'
}
}
for i in cnf.NFDUMP.TIME_WINDOW_DELTA_MARKS
},
value=cnf.NFDUMP.TIME_WINDOW_DELTA)
self.time_window_delta_selector_packed = html.Div(
self.time_window_delta_selector, className=cnf.GUI.CLASS_SLIDER)
self.t7 = html.Div(id=uuid4().hex, className=cnf.GUI.CLASS_SMALL_TEXT)
self.section_time_window = html.Div([
self.t5, self.time_window_selector_packed, self.t6,
self.time_window_delta_selector_packed, self.t7
])
self.dropdown_anomaly = dcc.Dropdown(
id=uuid4().hex,
options=[{
'label': anomaly,
'value': anomaly
} for anomaly in cnf.DETECTOR.ANOMALIES],
placeholder='No anomaly type was chosen...')
self.dropdown_anomaly_packed = html.Div(
self.dropdown_anomaly, className=cnf.GUI.CLASS_DROPDOWN)
self.section_anomaly = html.Div(
[self.dropdown_anomaly_packed, self.button_get_data],
className=cnf.GUI.CLASS_GRID_20)
self.layout = html.Div([
self.title, self.info, self.pause, self.selector, self.my_query,
self.data_filename, self.section_query, self.da_timer, self.pause,
self.section_time_window, self.pause
],
id='data-acquisitor',
className=cnf.GUI.CLASS_MODULE,
style={'hidden': True})
size=12,
),
Col(
[
html.Label('Number of Players',
style={'margin': '5px'}),
dcc.Input(
id='nrows-input', type='number', value=20),
dcc.RadioItems(
id='count-method-radioitems',
options=[
{
'label': 'Total',
'value': 'total'
},
{
'label': 'Per Position',
'value': 'per-position'
},
],
value='per-position',
labelStyle={'margin': '5px'},
),
html.Label('Drafted/Unavailable Players:',
style={'margin': '5px'}),
dcc.Dropdown(
id='drafted-players-dropdown',
options=[{
'label': p,
'value': p
} for p in FULL_DF['player']],
app = dash.Dash()
df = pd.read_csv('../dataset/wheels.csv')
def encode_image(image_file):
encoded = base64.b64encode(open(image_file, 'rb').read())
return 'data:image/png;base64,{}'.format(encoded.decode())
app.layout = html.Div(
[
dcc.RadioItems(id='wheels',
options=[{
'label': i,
'value': i
} for i in df['wheels'].unique()],
value=1),
html.Div(id='wheels-output'),
html.Hr(), # add a horizontal rule
dcc.RadioItems(id='colors',
options=[{
'label': i,
'value': i
} for i in df['color'].unique()],
value='blue'),
html.Div(id='colors-output'),
html.Img(id='display-image', src='children', height=300)
],
style={
'fontFamily': 'helvetica',
clearable=False,
),
style={
'width': '15%',
'display': 'inline-block',
'vertical-align': 'middle'
},
),
]),
html.Div([
dcc.RadioItems(
id='tile-values',
options=[
dict(label='Democratic percentage',
value='DEMOCRATIC PERCENTAGE'),
dict(label='Republican percentage',
value='REPUBLICAN PERCENTAGE'),
],
value='DEMOCRATIC PERCENTAGE',
labelStyle={'display': 'inline'},
),
]),
dcc.Graph(
id='choropleth',
style={'height': '80vh'},
),
html.Table(
html.Tr([
html.
Td('* voting districts may not be accurate for years prior to 2019',
style={'text-align': 'left'}),
children=[
html.Label("History (min)", htmlFor="ctrl_time"),
dcc.Input(id="ctrl_time",
type="number",
className="form-control",
value=5,
min=1,
max=120,
debounce=True),
dcc.RadioItems(id="ctrl_category",
options=[
{
'label': 'Currents ',
'value': 'Currents'
},
{
'label': 'Pressures',
'value': 'Pressures'
},
],
value='Currents',
labelStyle={'display': 'inline-block'}),
dcc.Graph(id='plot', style={"height": 700}),
dcc.Interval(
id='interval_update',
interval=1000, # in milliseconds
n_intervals=0)
])
app.layout = html.Div(className="container-fluid",
children=[_HEADER, _BODY, _FOOTER])
value='CO',
className="dcc_control",
),
#html.P("Choose Related City:", className="control_label"),
#dcc.Dropdown(
# id="whichCity",
#options=[{'label':opt, 'value':opt} for opt in stat_nestedOptions],
#value = stat_nestedOptions[0],
#options=well_type_options,
#multi=True,
#value=list(WELL_TYPES.keys()),
# className="dcc_control",
#),
dcc.RadioItems(id="whichavgstate",
options=whichAvgOPTS,
value="sevenday",
labelStyle={"display": "inline-block"},
className="dcc_control"),
dcc.RadioItems(
id="popratiostate",
options=popOPTS,
value="nonrelpop",
labelStyle={"display": "inline-block"},
className="dcc_control",
),
],
className="pretty_container four columns",
id="cross-filter-options-state",
),
html.Div(
[
"font-size": 12,
"display": "grid",
"padding" : "1% 1% 1% 1%",
"box-sizing": "border-box",
#"height" : "20vh"
}
)
#Radio Buttons
radios_div = \
html.Div([
dcc.RadioItems(
id='cumulative-radio',
options=[{'label': i, 'value': i} for i in ['Cumulative', 'New Cases']],
value='Cumulative',
labelStyle={'display': 'block'},
style={"color" : "white",
"background-color":palette["block"],
"font-size" : 16,
"padding-top":"13%"}
),
dcc.RadioItems(
id='absolute-radio',
options=[{'label': i, 'value': i} for i in ['Absolute', 'Per 100k Inhabitants']],
value='Absolute',
labelStyle={'display': 'block'},
style={"color" : "white",
"background-color":palette["block"],
"font-size" : 16,
"margin-left" : "2%",
"padding-top" : "10%"}
)
# Multiple outputs
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
dcc.RadioItems(id='dropdown-a',
options=[{
'label': i,
'value': i
} for i in ['Canada', 'USA', 'Mexico']],
value='Canada'),
html.Div(id='output-a'),
dcc.RadioItems(id='dropdown-b',
options=[{
'label': i,
'value': i
} for i in ['MTL', 'NYC', 'SF']],
value='MTL'),
html.Div(id='output-b')
])
@app.callback(dash.dependencies.Output('output-a', 'children'),
[dash.dependencies.Input('dropdown-a', 'value')])
def callback_a(dropdown_value):
return 'You\'ve selected "{}"'.format(dropdown_value)
