def makeRoot_RisksBar(hide=F): return Div(Container([ Col([ Label('operational region(s)'), Div(id='risks-area-div', children=Dropdown(id='risks-area', placeholder='Select Operating Area(s)', options=[{ 'label': v, 'value': v } for v in data['alist']], value=data['alist'][0:], multi=True)), Tooltip( children= 'Select Operating Area(s) to See Details on the Geographical Footprint Map', id='risks-area-tip', target='risks-area-div', placement='right') ], className='dis nop r1p', width=6, style={'display': 'none'}), Col( [ Label('operational footprint'), Div(id='risks-foot-div', children=Dropdown(id='risks-foot', placeholder='Select Corporate Footprint', options=[{ 'label': k, 'value': v } for k, v in data['fdict'].items()], value='subsidiaries')), Tooltip( children= 'Select Footprint Metric to See Details on the Geographical Footprint Map', id='risks-foot-tip', target='risks-foot-div', placement='left') ], className='dis nop', width=3, ) ], id='risks-tool', fluid=True, style={'padding': '0rem'}), id='risks-wrap', hidden=hide)
def _populate_search(dropdown: dcc.Dropdown): """Populate the search Dropdown component with the names of datasets that are plottable Arguments: dropdown {dcc.Dropdown} -- Dropdown object that will be populated """ countries = covid_data.get_countries() logger.info(f'Populating countries in search dropdown ({len(countries)})') for country in countries: logger.debug(f'Processing country {country}') dropdown.options.append({ 'label': f'{country} (Infected)', 'value': f'{country}:infected' }) dropdown.options.append({ 'label': f'{country} (Dead)', 'value': f'{country}:dead' }) dropdown.options.append({ 'label': f'{country} (Recovered)', 'value': f'{country}:recovered' }) dropdown.value = ['Canada:infected', 'Canada:recovered', 'Canada:dead']
def _symbol_selector_dropdown(symbols, default='GOOGL'): """Return symbol selector.""" return Dropdown(id='ticker-selector-dropdown', options=[{ 'label': sym, 'value': sym } for sym in symbols], value=default, multi=True)
def get_layout(): return Div([ html.H2("Confusion Matrix"), Dropdown(id='cm-dropdown', options=get_dropdown_list(models), clearable=True, value=-1), Div(id='cm-out') ])
def dags_dashtable(dags, html_id): dags_list = Dropdown( id=html_id, options=[ {'label': dag_id, 'value': dag_id} for dag_id in dags ], ) return dags_list
def get_layout(): return Div([ Dropdown( id='models-dropdown', options=get_dropdown_list(models), clearable=True, multi=True, value=[], ), Div(id='report'), Div(learning_history.generate_layout(graphs), ), Div(id='dummy') ])
def test_ddvi001_fixed_table(dash_duo): app = Dash(__name__) app.layout = Div([ Dropdown( id="dropdown", options=[ { "label": "New York City", "value": "NYC" }, { "label": "Montreal", "value": "MTL" }, { "label": "San Francisco", "value": "SF" }, ], value="NYC", ), DataTable( id="table", columns=[{ "name": x, "id": x, "selectable": True } for x in ["a", "b", "c"]], editable=True, row_deletable=True, fixed_rows=dict(headers=True), fixed_columns=dict(headers=True), data=[{ "a": "a" + str(x), "b": "b" + str(x), "c": "c" + str(x) } for x in range(0, 20)], ), ]) dash_duo.start_server(app) dash_duo.find_element("#dropdown").click() dash_duo.wait_for_element("#dropdown .Select-menu-outer") dash_duo.percy_snapshot( "dcc.Dropdown dropdown overlaps table fixed rows/columns")
def makeRoot_MandABar(hide=T): return Div(Container([ Col([ Label('activity window'), Div(id='manda-date-div', children=DatePickerRange(id='manda-date', )), Tooltip( children= 'Select Date Range to Filter Stock Market Performance and M & A History', id='manda-date-tip', target='manda-date-div', placement='right') ], className='dis nop r1p', width=6, style={'display': 'none'}), Col( [ Label('activity filter'), Div(id='manda-type-div', children=Dropdown(id='manda-type', placeholder='Select M & A Type', options=[{ 'label': v, 'value': v } for v in data['tlist']], value='Merger/Acquisition')), Tooltip(children='Select M & A Type to Filter M & A History', id='manda-type-tip', target='manda-type-div', placement='left') ], className='dis nop', width=3, ), ], id='manda-tool', fluid=True, style={'padding': '0rem'}), id='manda-wrap', hidden=hide)
def test_ddvi001_fixed_table(dash_duo): app = Dash(__name__) app.layout = Div([ Dropdown(id='dropdown', options=[{ 'label': 'New York City', 'value': 'NYC' }, { 'label': 'Montreal', 'value': 'MTL' }, { 'label': 'San Francisco', 'value': 'SF' }], value='NYC'), DataTable(id='table', columns=[{ 'name': x, 'id': x, 'selectable': True } for x in ['a', 'b', 'c']], editable=True, row_deletable=True, fixed_rows=dict(headers=True), fixed_columns=dict(headers=True), data=[{ 'a': 'a' + str(x), 'b': 'b' + str(x), 'c': 'c' + str(x), } for x in range(0, 20)]) ]) dash_duo.start_server(app) dash_duo.find_element("#dropdown").click() dash_duo.wait_for_element('#dropdown .Select-menu-outer') dash_duo.percy_snapshot( 'dcc.Dropdown dropdown overlaps table fixed rows/columns')
'color_prop': color_prop, **minmax } ), # *arrows, Colorbar( id='download--map--colorbar', colorscale=csc_map[default_csc], width=20, height=150, **minmax ) ], zoom=5, center=(-15.0, -55.0), style={'width': '100%', 'height': '80vh', 'margin': 'auto', 'display': 'block'}, ), Div( Dropdown( id='download--map--dropdown--color-scale', options=csc_options, value=dumps(csc_map[default_csc]), clearable=False ), style={'position': 'relative', 'bottom': '80px', 'left': '10px', 'zIndex': '1000', 'width': '200px'} ) ]) ] ) ])
database = { 'index': list(range(N)), 'maiores': [randint(1, 1000) for _ in range(N)], 'menores': [randint(1, 1000) for _ in range(N)], 'bebes': [randint(1, 1000) for _ in range(N)], } app.layout = Div(children=[ H1('Evento X'), H3('idade das pessoas que foram ao evento'), Dropdown(options=[{ 'label': 'Menores de Idade', 'value': 'menores' }, { 'label': 'Bebes', 'value': 'bebes' }, { 'label': 'Maiores de idade', 'value': 'maiores' }], value='menores'), Slider(min=0, max=10, step=1, value=5), Checklist(options=[{ 'label': 'Menores de Idade', 'value': 'menores' }, { 'label': 'Bebes', 'value': 'bebes' }, { 'label': 'Maiores de idade', 'value': 'maiores'
for c in wpg.Channel.unique(): scaler[c] = {} scaler[c] = StandardScaler() wpgs[c] = wpg.loc[wpg.Channel == c].copy() wps = wpgs[c][['Baht', 'Ton']] scaler[c].fit(wps) wpgs[c][['Baht', 'Ton']] = scaler[c].transform(wps) wpgs[c] = pd.melt(wpgs[c], var_name='Type', value_name='Value', id_vars=['Zone', 'Channel', 'Year', 'Month']) # Build App app.layout = \ html.Div([ Dropdown(id='SLOC', value=['N3NB', 'N3DT'], placeholder='Select Storage Locations', multi=True, clearable=True, options=[{'label': c1, 'value': c1} for c1 in wpg.Channel.unique()]), Tabs([ Tab(label='Price/Quantity', children=[ html.Div(id='PQ') ]), Tab(label='Sensitivity', children=[ html.Div(id='SE') ]), Tab(label='Data Quality', children=[ ]), ]) ])
'label': 'Menores de Idade', 'value': 'menores' }, { 'label': 'Bebes', 'value': 'bebes' }, { 'label': 'Maiores de idade', 'value': 'maiores' }], value=['bebes']), Dropdown(id='meu_dropdown', options=[ { 'label': 'Linha', 'value': 'line' }, { 'label': 'Barra', 'value': 'bar' }, ], value='line'), Graph( id='meu_grafico', config={'displayModeBar': False}, ) ]) @app.callback(Output('meu_grafico', 'figure'), [ Input('meu_check_list', 'value'), Input('meu_dropdown', 'value'),
def create_app(): app = Flask(__name__) dash_app = Dash(__name__, server=app, url_base_pathname='/dash/', external_stylesheets=[{ "href": "https://fonts.googleapis.com/css2?" "family=Lato:wght@400;700&display=swap", "rel": "stylesheet", }]) dash_app.layout = Div(children=[ Div(children=[ P(children='📈', className='header-emoji'), H1(children='Dash-PTS', className='header-title'), P( children=''' A Free and Open Source project-tracking systems tool: ''', className='header-description', ), P( children='https://github.com/dunossauro/dash-pts', className='header-description', ), ], className='header'), Div( children=[ Div(children=[ Div(children='Department', className='menu-title'), Dropdown(id='department-name', options=[{ 'label': i, 'value': i } for i in ['Sales', 'R&D', 'Support']], value='R&D', className='dropdown') ], ), Div(children=[ Div(children='Team', className='menu-title'), Dropdown( id='team-name', options=[{ 'label': i, 'value': i } for i in ['Data Science', 'Mobile', 'WEB', 'QA']], value='Mobile', className='dropdown') ], ), ], className='menu', ), Div( children=[ Graph( id='burn-down', className='card', config={'displayModeBar': False}, ), Graph( id='velocity', className='card', config={'displayModeBar': False}, ) ], className='wrapper', ) ], ) @app.route('/dash') def index(): return dash_app.index() @dash_app.callback([ Output(component_id='burn-down', component_property='figure'), Output(component_id='velocity', component_property='figure'), ], [ Input(component_id='team-name', component_property='value'), Input(component_id='department-name', component_property='value'), ]) def generate_graphs(team_name, department_name): return (burn_down( sprint='', initial_data=datetime(2021, 4, 5), final_data=datetime(2021, 4, 16), total_points=50, sprint_data=[50, 45, 41, 37, 39, 39, 39, 35, 27, 13], ), velocity({ 'names': ['Sprint ' + str(x) for x in range(1, 7)], 'commitment': [50, 47, 61, 53, 50, 51], 'completed': [52, 43, 58, 58, 49, 39], })) return app
def makeRoot_ToolsBar(): _ = \ [ Col([ NavbarBrand( [ Img( src = 'assets/logo.gif', height = '36px', width = '144px', className = 'nop nom' ), ], className = 'nop nom', ), ], className = 'dis nop', width = 2, ), Col([ Label('corporation'), Div(id = 'tools-corp-div', children = Dropdown( id = 'tools-corp', placeholder = 'Select Corporation', options = [{'label' : f'{k} ({v})', 'value' : k} for k, v in data['hdict'].items()], value = 'Apple', searchable = True) ), Tooltip( children = 'Select Corporation to See Stock Market Performance and M & A History', id = 'tools-corp-tip', target = 'tools-corp-div', placement = 'right') ], className = 'dis nop r1p', width = 2, ), Col([ makeRoot_MandABar(), makeRoot_RisksBar() ], className = 'nop r1p', width = 6, ), Col([ Label('current view'), DropdownMenu( [ DropdownMenuItem('Mergers & Acquisitions', id = 'manda-pick'), DropdownMenuItem('Corporate Global Risks', id = 'risks-pick'), ], id = 'views-pick', label = 'Corporate Global Risks', color = 'primary', style = {'lineHeight' : '22px'}, className = '' ), Tooltip( children = 'Select Activity View', id = 'views-pick-tip', target = 'views-pick', placement = 'left') ], className = 'dis nop', width = 2 ) ] return Navbar(id='extra-bar', className='rounded v1m', children=Container(_, className='nom nop', fluid=True))
# className="three columns"), # html.Div(html.H2(id='dashboard_title', style={'textAlign': 'center'}), # # className="four columns" # ), # html.Div(html.Img(id="dash_logo", # src=app.get_asset_url('dash-logo.bmp'), # style={'height':'70%', 'width':'70%', 'textAlign': 'right'}), # className="three columns"), # ], # className="row" # ), html.Div([ html.Div(id='level_selector_container', children=[ html.H4(id='text_data_resolution'), Dropdown(id='level_selector', value='city'), html.Br(), ], className="six columns"), html.Div(id='language_selector_container', children=[ Tabs(id="language_tab", value='heb', children=[ Tab(label='English', value='eng'), Tab(label='עברית', value='heb'), ]), html.Br(), ], className="six columns"), ],
def historic(app, tsa, routes_pathname_prefix='/tshistory/', request_pathname_prefix='/', cachedir=None): request_pathname_prefix_adv = request_pathname_prefix + routes_pathname_prefix external_stylesheets = [ 'https://codepen.io/chriddyp/pen/bWLwgP.css', 'https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css' ] if request_pathname_prefix != '/': dashboard = dash.Dash( 'tsview', server=app, routes_pathname_prefix=routes_pathname_prefix, requests_pathname_prefix=request_pathname_prefix_adv, external_stylesheets=external_stylesheets) else: dashboard = dash.Dash('tsview', server=app, url_base_pathname=routes_pathname_prefix, external_stylesheets=external_stylesheets) dashboard.config['suppress_callback_exceptions'] = True if request_pathname_prefix != '/': dashboard.config.requests_pathname_prefix = request_pathname_prefix_adv if cachedir: cacheconfig = {'CACHE_TYPE': 'filesystem', 'CACHE_DIR': cachedir} else: cacheconfig = {'CACHE_TYPE': 'simple'} cache = Cache(dashboard.server, config=cacheconfig) cache.init_app(dashboard.server) dashboard.layout = Div([ Location(id='url', refresh=False), #Placeholders Div(Dropdown(id='idate_slider', value=None), style={'display': 'none'}), Graph(id='ts_snapshot'), Button(id='submit-button', n_clicks=0, children='Show Republications', style={ 'width': '100%', 'background-color': '#F7F7F7', }), Graph(id='ts_by_appdate', hoverData={'points': [{ 'text': None }]}), html.P('Select an insertion date:', style={ 'font-family': 'Helvetica', "font-size": "100%", 'text-align': 'center', }), Div(id='slider-container'), Div([Br()]), Div([Br()]), html.P( 'Place the mouse on the graph above to see the versions ' 'of one application date:', style={ 'font-family': 'Helvetica', "font-size": "100%", 'text-align': 'center', }), Graph(id='ts_by_insertdate'), ]) @cache.memoize(timeout=300) def _history(id_serie, fromdate, todate): return { # canonicalize the keys immediately dt.strftime('%Y-%m-%d %H:%M:%S'): serie for dt, serie in tsa.history(id_serie, from_value_date=fromdate, to_value_date=todate).items() } def history(id_serie, fromdate=None, todate=None): return _history(id_serie, fromdate, todate) def insertion_dates(id_serie, fromdate=None, todate=None): return list(history(id_serie, fromdate, todate).keys()) def parse_url(url_string): if (url_string in (routes_pathname_prefix, request_pathname_prefix_adv) or url_string is None or len(url_string.strip('/')) == 0): id_serie = '' else: id_serie = url_string.split('/')[-1] return id_serie @dashboard.callback( dash.dependencies.Output('slider-container', 'children'), [ dash.dependencies.Input('url', 'pathname'), dash.dependencies.Input('submit-button', 'n_clicks') ], [dash.dependencies.State('ts_snapshot', 'relayoutData')]) def adaptable_slider(url_string, n_clicks, graphdata): if n_clicks == 0: return Slider(id='idate_slider', value=None) id_serie = parse_url(url_string) fromdate, todate = unpack_dates(graphdata) idates = insertion_dates(id_serie, fromdate, todate) showlabel = len(idates) < 25 slider = Slider(id='idate_slider', min=0, max=len(idates) - 1, value=len(idates) - 1, step=None, marks={ str(idx): elt if showlabel else '' for idx, elt in enumerate(idates) }) return slider @dashboard.callback(dash.dependencies.Output('ts_snapshot', 'figure'), [dash.dependencies.Input('url', 'pathname')]) def ts_snapshot(url_string): id_serie = parse_url(url_string) ts = tsa.get(id_serie) if id_serie is None or ts is None: return {'data': [], 'layout': {}} trace = [ go.Scatter(x=ts.index, y=ts.values, name=id_serie, mode='lines', line={'color': ('rgb(255, 127, 80)')}) ] layout = go.Layout({ 'yaxis': { 'fixedrange': True }, 'showlegend': True, 'title': 'Zoom to select the date interval:' }) return {'data': trace, 'layout': layout} @dashboard.callback(dash.dependencies.Output('ts_by_appdate', 'figure'), [ dash.dependencies.Input('idate_slider', 'value'), dash.dependencies.Input('submit-button', 'n_clicks') ], [ dash.dependencies.State('url', 'pathname'), dash.dependencies.State('ts_snapshot', 'relayoutData') ]) def ts_by_appdate(idx, n_clicks, url_string, graphdata): if n_clicks == 0: return {'data': [], 'layout': {}} fromdate, todate = unpack_dates(graphdata) idx = idx if idx else 0 id_serie = parse_url(url_string) ts_final = tsa.get(id_serie, from_value_date=fromdate, to_value_date=todate) versions = history(id_serie, fromdate, todate) idates = list(versions.keys()) if idx > len(idates): # may happen when the input div are not refreshed at the same time idx = len(idates) - 1 insert_date = idates[idx] ts_unti_now = versions[insert_date] traces = [] # all versions for idate in idates: ts = versions[idate].loc[fromdate:todate] # plolty does not plot a line with only one point mode = 'lines' if len(ts) > 1 else 'markers' color = COLOR_BEFORE if idate <= insert_date else COLOR_AFTER traces.append( go.Scatter(x=ts.index, y=ts.values, text=[str(elt) for elt in ts.index], name=idate, showlegend=False, mode=mode, line={'color': color}, opacity=0.2)) # final snapshot traces.append( go.Scatter(x=ts_final.index, y=ts_final.values, name='last', text=[str(elt) for elt in ts_final.index], mode='lines', line={'color': COLOR_LAST}, opacity=1)) # ts as of mode = 'lines' if len(ts_unti_now) > 1 else 'markers' traces.append( go.Scatter( x=ts_unti_now.index, y=ts_unti_now.values, text=[str(elt) for elt in ts_unti_now.index], name=str(pd.to_datetime(insert_date)), mode=mode, line={'color': COLOR_CURRENT}, )) tsminvalue = min(ts.values.min() for ts in versions.values() if len(ts)) tsmaxvalue = max(ts.values.max() for ts in versions.values() if len(ts)) return { 'data': traces, 'layout': go.Layout( hovermode='closest', xaxis={'range': [ts_final.index.min(), ts_final.index.max()]}, yaxis={'range': [tsminvalue, tsmaxvalue]}, title='{} <br>Insertion date : {}'.format( id_serie, insert_date), shapes=[{ 'type': 'line', 'x0': insert_date, 'y0': tsminvalue, 'x1': insert_date, 'y1': tsmaxvalue, 'line': { 'dash': 'dot', 'color': 'rgb(0, 0, 0)', 'width': 1 } }]) } @dashboard.callback( dash.dependencies.Output('ts_by_insertdate', 'figure'), [dash.dependencies.Input('ts_by_appdate', 'hoverData')], [ dash.dependencies.State('url', 'pathname'), dash.dependencies.State('ts_snapshot', 'relayoutData') ]) def ts_by_insertdate(hoverdata, url_string, graphdata): id_serie = parse_url(url_string) if id_serie is None: return {'data': [], 'layout': {}} date_str = hoverdata['points'][0]['text'] if date_str is None: return {'data': [go.Scatter()], 'layout': go.Layout()} fromdate, todate = unpack_dates(graphdata) versions = history(id_serie, fromdate, todate) index = [] values = [] lastvalue = None dt = pd.to_datetime(date_str) for idate, ts in sorted(versions.items()): if dt in ts.index: value = ts[dt] if value == lastvalue: continue index.append(idate) values.append(value) lastvalue = value traces = [ go.Scatter( x=index, y=values, name=date_str, mode='lines', line={'color': ('rgb(20, 180, 40)')}, ) ] return { 'data': traces, 'layout': go.Layout( hovermode='closest', title='Application date : {}'.format(date_str), ) }
APP_UID = hash(APP_NAME) """ App unique id. APP_UID : unicode """ LAYOUT = Div([ H3([Link(APP_NAME, href=APP_PATH)], className='text-center'), Div([ Markdown(APP_DESCRIPTION), H5(children='Colourspace'), Dropdown(id='colourspace-{0}'.format(APP_UID), options=RGB_COLOURSPACES_OPTIONS, value=RGB_COLOURSPACES_OPTIONS[0]['value'], clearable=False, className='app-widget'), H5(children='Illuminant'), Dropdown(id='illuminant-{0}'.format(APP_UID), options=ILLUMINANTS_OPTIONS, value=ILLUMINANTS_OPTIONS[0]['value'], clearable=False, className='app-widget'), H5(children='Chromatic Adaptation Transform'), Dropdown(id='chromatic-adaptation-transform-{0}'.format(APP_UID), options=CHROMATIC_ADAPTATION_TRANSFORM_OPTIONS, value=CHROMATIC_ADAPTATION_TRANSFORM_OPTIONS[0]['value'], clearable=False, className='app-widget'), H5(children='Formatter'),
[ Div(html.H2('COVID-19 Data Visualization and Modeling', style={'textAlign': 'center'}), className='app-header'), Row([ Col( Div( dcc.Markdown(explanatory_text, style={'textAlign': 'center'}))) ]), Row( [ Col(Div(Dropdown( id='dropdown', options=[{ 'label': i, 'value': i } for i in ['Recovered', 'Deaths', 'Confirmed', 'Active']], value=cases[0]), className='button'), width=3), Col(Div(Dropdown( id='dropdown2', options=[{ 'label': i, 'value': i } for i in ['Recovered', 'Deaths', 'Confirmed', 'Active']], value=cases[1]), className='button'), width=3), ],
def get_app(server, path): df = Model().df ldesc = Model().ldesc dash_example = Dash(__name__, server=server, url_base_pathname=path) label_map = loads(ldesc.to_json(orient="index")) dash_example.layout = Div(className="dash-div", children=[ Dropdown( id='label-dropdown', options=[{ 'label': label_map[i]["label_description"], 'value': i } for i in df['label'].unique()], value=df['label'].unique()[0]), Slider(id='filter-slider', min=0, max=20, step=1, value=10), Graph(id="bubble-chart") ]) @dash_example.callback( Output('bubble-chart', 'figure'), [Input('label-dropdown', 'value'), Input('filter-slider', 'value')]) def update_figure(label, value): df = Model().df ndf = getBubbleData(df, label, value) #print(ndf.head()) bar = px.bar(ndf, y="text", x="count", color="category", orientation='h', barmode='group') bar.update_layout(autosize=False, width=960, height=550, paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)', hovermode='closest', font=dict(family="Courier New, monospace", size=18, color="white")) #return fig return bar @dash_example.callback(Output('filter-slider', 'value'), [Input('label-dropdown', 'value')]) def update_slider_min(label): df = Model().df ndf = getBubbleData(df, label) #print(ndf.head()) return ndf["count"].min() @dash_example.callback(Output('filter-slider', 'min'), [Input('label-dropdown', 'value')]) def update_slider_min(label): df = Model().df ndf = getBubbleData(df, label) #print(ndf.head()) return ndf["count"].min() @dash_example.callback(Output('filter-slider', 'max'), [Input('label-dropdown', 'value')]) def update_slider_max(label): df = Model().df ndf = getBubbleData(df, label) #print(ndf.head()) return ndf["count"].max() return dash_example
"test_f1": "Test F1" } def get_dropdown_list(models): return [ {'label': str(model[1]), 'value': model[0]} for model in models ] layout = Div([ Dropdown( id='models-dropdown', options=get_dropdown_list(models), clearable=True, multi=True, value=[], ), Div( id='report' ), Div( learning_history.generate_layout(graphs), ), Div(id='dummy') ]) @app.callback( [Output('report', 'children')] + [Output(graph, 'figure') for graph, _ in graphs],
global logs_df logs_df = pd.read_csv('azparseddata.csv') logs_df.drop(logs_df.columns[len(logs_df.columns) - 1], axis=1, inplace=True) app = dash.Dash(__name__) server = app.server app.layout = html.Div(children=[ html.Div(children=[ html.H1('Parsed Azure Logs'), html.H2('Choose column to filter by'), Dropdown( id='col-select-dropdown', options=[{ 'label': val, 'value': val } for val in logs_df.columns.values], multi=False, ), html.H2('Select value in column'), Dropdown( id='val-select-dropdown', multi=False, ), ], style={ 'width': '30%', 'display': 'inline-block' }), html.Div([ html.H2('Logs information'),
'High-technology exports (% of manufactured exports)' ] } options = [] for k, v in indicators.iteritems(): options.append({'label': k, 'value': k, 'disabled': True}) for i in v: options.append({'label': i, 'value': i}) world_bank_layout = html.Div([ html.H2('Market Indicators'), html.H4('Dash Developer Preview App'), html.Hr(), Dropdown(id='indicator-dropdown-single', options=options, value='GDP growth (annual %)'), html.Div([ html.Div([ Graph(id='choropleth'), Graph(id='indicator-over-time'), ], className="eight columns"), html.Div([Slider(id='year-slider')], style={ 'marginTop': 25, 'marginBottom': 25 }), html.Div(id='table', style={ 'height': '850px',
def setup_dash_layout(app: Dash, sk: DivSkeleton) -> dash.Dash: def create_sliders( ) -> tuple[RangeSlider, RangeSlider, RangeSlider, RangeSlider]: slider_height = 460 year_slider = RangeSlider( INPID_YEAR, min=(mn := etl.ATTRS.index.get_level_values("year").min()), max=(mx := etl.ATTRS.index.get_level_values("year").max()), value=[2012, 2018], marks={y: str(y) for y in range(mn, mx + 1)}, vertical=True, verticalHeight=slider_height, updatemode="mouseup", **PERSIST_ARGS, ) mileage_slider = RangeSlider( INPID_MILEAGE, min=0, max=etl.MAX_MILEAGE, value=[10000, 70000], marks={ y: f"{y // 1000}k" for y in range(0, etl.MAX_MILEAGE, 25_000) }, step=1, vertical=True, updatemode="mouseup", verticalHeight=slider_height, **PERSIST_ARGS, ) price_slider = RangeSlider( INPID_PRICE, min=0, max=etl.MAX_PRICE, value=[10000, 35000], marks={ int(y): f"{y // 1000}k" for y in range(0, etl.MAX_PRICE, 10_000) }, step=1, vertical=True, updatemode="mouseup", verticalHeight=slider_height, **PERSIST_ARGS, ) mpg_slider = RangeSlider( INPID_MPG, min=etl.ATTRS["mpg"].min(), max=(mx := etl.ATTRS["mpg"].max()), value=[20, mx], marks={int(y): f"{y:.0f}" for y in range(10, int(mx) + 1, 10)}, step=1, vertical=True, updatemode="mouseup", verticalHeight=slider_height, **PERSIST_ARGS, ) return year_slider, mileage_slider, price_slider, mpg_slider for name, slider, div_id in zip( ["Year", "Mileage", "Price", "MPG"], create_sliders(), [SK_SLIDER_MILEAGE, SK_SLIDER_PRICE, SK_SLIDER_YEAR, SK_SLIDER_MPG], ): sk.fill( div_id, [dbc.Badge(name, color="primary", className="slider"), slider], ) top_selectors = [ dbc.Alert("Select your location.", id="alert-loc-picker", color="primary"), Dropdown( id=INPID_ZIPCODE, placeholder="Zipcode", clearable=False, options=opts_from_vals(etl.LATLONG_BY_ZIP.keys()), **PERSIST_ARGS, ), Slider( id=INPID_MAX_DIST, className="form-control", min=10, max=250, marks={ mark: dict(label=str(mark) + ("mi." if mark == 10 else "")) for mark in [10, 50, 100, 150, 200, 250] }, value=50, **PERSIST_ARGS, ), dbc.Alert("Limit dealership states.", id="alert-state-picker", color="primary"), Dropdown( id=INPID_STATE, # options by callback multi=True, **PERSIST_ARGS, ), Div( id="plot-info-flex", children=[ dbc.Button(children="Plot Cars Now!", id=PLOT_BUTTON, color="success"), Div( id=PLOT_ALERT_BOX, children=dbc.Alert(id=PLOT_ALERT, children="", color="danger"), hidden=True, ), dbc.Alert("Plot does not refresh automatically.", color="light"), ], style={ "display": "flex", "flex-direction": "column-reverse" }, ), ] ## car options pickers top_selectors.extend([]) ### ## # === BOTTOM ROW === ## ### sk.fill(SK_TOP_SELECTORS, top_selectors) mm_picker_menu = [ dbc.Alert( "Select makes and models you are interested in. " "Filtered by sliders.", id=ALERT_MM_PICKER, color="primary", ), Dropdown( id=INPID_MM_PICKER, # options by callback multi=True, placeholder="Select makes", clearable=False, **PERSIST_ARGS, ), ] sk.fill(SK_MM_PICKER, mm_picker_menu) sk.fill( SK_LL_INFO, dbc.Alert( id="alert-site-info", children=( "Used car picker by Evgeny Naumov.", html.Br(), "Built on top of Truecar data with Plotly + Dash.", ), color="light", ), ) # car type options button_layout = { ("Transmission", INPID_OPTS_TRANS): scr.TRANSMISSIONS, ("Fuel Type", INPID_OPTS_FUEL): scr.KNOWN_FUEL_TYPES, ("Drivetrain", INPID_OPTS_DRIVETRAIN): scr.KNOWN_DRIVETRAINS, ("Body", INPID_OPTS_BODY): scr.KNOWN_BODIES, } car_opt_picker = [ dbc.Alert("Select car attributes.", color="primary"), Div( id="car-opts-box", className=TOGGLE_BUTTON_BOX, children=[ button for (inp_name, inp_id), inp_opts in button_layout.items() for button in ToggleButtonGroup.make_buttons( label=inp_name, values=inp_opts, selectors=dict(input=inp_id), ) ], ), ] sk.fill(SK_CAR_OPTS_BOX, car_opt_picker) mmt_refine_menu = [ dbc.Alert("Select models to refine trims.", id="mmt-alert", color="secondary"), Div(id="mmt-card-group"), ] sk.fill(SK_MMT_MATRIX, mmt_refine_menu) sk.fill( SK_CACHE, [ Interval(IVAL_TRIGGER_LOAD, max_intervals=1, interval=1), Store( id=STORE_ALL_CARS, storage_type="memory", data=etl.RAW_CLIENT_DATA, ), Store(id=STORE_FILTERED_CARS, storage_type="session"), Div(id="devnull"), ], ) ## GRAPH scatter_graph = html.Div( id="scatter-box", children=Graph(id="scatter-price-mileage"), hidden=True, ) sk.fill(SK_SCATTER, scatter_graph) ### ALERTS alert_link = dbc.Alert( id="output-link", children="A plot of listings will appear above when executed.", color="secondary", ) sk.fill(SK_INFO_A, alert_link) app.layout = sk["root"] return app