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
