Links in Dash
Verfasst: Mittwoch 16. Dezember 2020, 16:37
Moinsen,
ich bin gerade dabei eine Web App mit Dash aufzubauen. Ganz oben soll eine Liste mit Verlinkungen sein, mit denen ich zu den entsprechenden Punkten im Dokument springe.
Meine Idee für das Menü war folgendes:
Beim Klicken auf einen der Listeneinträge sollte das Sichtfeld des Browsers dann auf eine der Überschriften springen, wie z.B. diese...
Hier der gesamte Code:
Schon im Voraus vielen Dank für eure Hilfe.
Gruß MacGruber
ich bin gerade dabei eine Web App mit Dash aufzubauen. Ganz oben soll eine Liste mit Verlinkungen sein, mit denen ich zu den entsprechenden Punkten im Dokument springe.
Meine Idee für das Menü war folgendes:
Code: Alles auswählen
html.Ul(id="Menue", children=[
html.Li(dcc.Link('Number of Idents', href='#headerIdents')),
html.Li(dcc.Link('Number of TC', href='#headerTC')),
html.Li(dcc.Link('Parts Increase', href='#headerIncrease')),
html.Li(dcc.Link('Number of State and TC-Type', href='#headerPies'))
])Code: Alles auswählen
html.Center(html.H2(id='headerIdents', children='Number of Idents'))Code: Alles auswählen
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
from pandas import DataFrame, Series
import json
#Test DF
df = DataFrame({"Fahrzeuge":["RX70 16-20","RX70 20-35","RX70 35-50","RX70 60-80"],
"Status S":[1200,1250,1500,1700],
"Status U":[400,250,300,100],
"S-TC":[190,80,130,40],
"U-TC":[85,60,35,10]})
df_increase = DataFrame({"Parts":[4000,4500,4650,4710],
"Unique Parts":[1800,2400,2800,2720]},
index=["Q1-20","Q2-20","Q3-20","Q4-20"])
#Leere App
app = dash.Dash()
#App befüllen
app.layout = html.Div(children=[
#Menü
html.Ul(id="Menue", children=[
html.Li(dcc.Link('Number of Idents', href='#headerIdents')),
html.Li(dcc.Link('Number of TC', href='#headerTC')),
html.Li(dcc.Link('Parts Increase', href='#headerIncrease')),
html.Li(dcc.Link('Number of State and TC-Type', href='#headerPies'))
]),
#Überschrift
html.Center(html.H1('Series Report')),
#Überschriften für Dropdown
html.Div([html.P("Plant")],style={'width':'31%','display':'inline-block'}),
html.Div([html.P("Brand")],style={'width':'31%','display':'inline-block'}),
html.Div([html.P("Type")],style={'width':'31%','display':'inline-block'}),
#Drop-Down
html.Div([
dcc.Dropdown(id='dropdown_Werk',
options=[{"value":i, "label":i} for i in ["All","Aschaffenburg","Chatellerault","Hamburg","Luzzara","Reutlingen"]],
value='All')
], style={'width':'31%','display':'inline-block'}
),
html.Div([
dcc.Dropdown(id='dropdown_Brand',
options=[{"value":i, "label":i} for i in ["All","Linde","Still"]],
value='All')
], style={'width':'31%','display':'inline-block'}
),
html.Div([
dcc.Dropdown(id='dropdown_Type',
options=[{"value":i, "label":i} for i in ["All","E-Truck","IC-Truck"]],
value='All')
], style={'width':'31%','display':'inline-block'}),
html.Hr(),
#Header für Number of Idents
html.Center(html.H2(id='headerIdents', children='Number of Idents')),
#Number of Idents (S & U)
html.Div(
dcc.Graph(id='Idents',
figure={'data':[{'x':df['Fahrzeuge'],'y':df['Status S'],'type':'bar','name':'S'},
{'x':df['Fahrzeuge'],'y':df['Status U'],'type':'bar','name':'U'}],
'layout':{'barmode':'stack'}})
),
html.Hr(),
#Header für Number of TC
html.Center(html.H2(id='headerTC', children='Number of TC')),
#Number of TC
html.Div(
dcc.Graph(id='TC',
figure={'data':[{'x':df['Fahrzeuge'],'y':df['S-TC'],'type':'bar','name':'S-TC'},
{'x':df['Fahrzeuge'],'y':df['U-TC'],'type':'bar','name':'U-TC'}],
'layout':{'barmode':'stack'}})
),
html.Hr(),
#Header für Number of Idents
html.Center(html.H2(id='headerIncrease', children='Parts Increase')),
#Line Chart
html.Div(
dcc.Graph(id='Parts Increase',
figure={'data':[{'x':df_increase.index,'y':df_increase["Parts"],'type':'line','name':'Parts'},
{'x':df_increase.index,'y':df_increase["Unique Parts"],'type':'line','name':'Unique Parts'}],
'layout':{'title':'Parts Increase'}})
),
html.Hr(),
#Header für Pie Charts
html.Center(html.H2(id='headerPies', children='State and TC-Type')),
#Pie Charts
html.Div([
dcc.Graph(id='Status Pie',
figure={'data':[{'values':[2000,400,30,80,150], 'labels':['S','U','C','A','P'], 'type':'pie'}],
'layout':{'title':'Material Status'}})
], style={'width':'48%','display':'inline-block'}),
html.Div([
dcc.Graph(id='TC Pie',
figure={'data':[{'values':[2300,1400], 'labels':['S-TC','U-TC'], 'type':'pie'}],
'layout':{'title':'Material Status'}})
], style={'width':'48%','display':'inline-block'})
])
if __name__ == '__main__':
app.run_server(debug=True)Gruß MacGruber