Package: dash-template-rendering
dash-template-renderingDevelop Dash layout with ease, using html template files.dash_template_rendering is a simpleDashPython extension for rendering html content
for the dashboard withJinja2. The rendered content can be used for thedash.layoutand the return of callbacks.Installation$ pip install dash-template-renderingExamplesMinimal Dash AppTheminimal Dash Appimplemented with the dash-template-rendering package.fromdashimportDash,dcc,callback,Output,Inputfromdash_template_renderingimportTemplateRenderer,render_dash_template_stringimportplotly.expressaspximportpandasaspddf=pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv")app=Dash(__name__)TemplateRenderer(dash=app)app.layout=render_dash_template_string("""<div><h1 style="text-align:center;">Title of Dash App</h1>{{ dropdown | plotly }}{{ graph | plotly }}</div>""",dropdown=dcc.Dropdown(df.country.unique(),"Canada",id="dropdown-selection"),graph=dcc.Graph(id="graph-content"),)@callback(Output("graph-content","figure"),Input("dropdown-selection","value"))defupdate_graph(value):dff=df[df.country==value]returnpx.line(dff,x="year",y="pop")if__name__=="__main__":app.run_server(debug=True)Advanced ExampleThe full potential of this extension is applied, when combined with an CSS framework (e.g.Bootstrap).TheIris k-means clustering Dash Appimplemented with the dash-template-rendering package.importdashimportdash_bootstrap_componentsasdbcimportpandasaspdimportplotly.graph_objsasgofromdashimportInput,Output,dccfromdash_template_renderingimportTemplateRenderer,render_dash_template_stringfromsklearnimportdatasetsfromsklearn.clusterimportKMeansiris_raw=datasets.load_iris()iris=pd.DataFrame(iris_raw["data"],columns=iris_raw["feature_names"])app=dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])TemplateRenderer(dash=app)dropdown_x_variable=dcc.Dropdown(id="x-variable",options=[{"label":col,"value":col}forcoliniris.columns],value="sepal length (cm)",)dropdown_y_variable=dcc.Dropdown(id="y-variable",options=[{"label":col,"value":col}forcoliniris.columns],value="sepal width (cm)",)input_cluster_count=dbc.Input(id="cluster-count",type="number",value=3)graph_cluster=dcc.Graph(id="cluster-graph")app.layout=render_dash_template_string("""<div class="container d-fluid"><h1>Iris k-means clustering</h1><hr><div class="align-items-center row"><div class="col-md-4"><div class="card"><div class="card-body"><label class="form-label">X variable</label>{{ dropdown_x_variable | plotly }}<label class="form-label">Y variable</label>{{ dropdown_y_variable | plotly }}<label class="form-label">Cluster count</label>{{ input_cluster_count | plotly }}</div></div></div><div class="col-md-8">{{ graph_cluster | plotly }}</div></div></div>""",dropdown_x_variable=dropdown_x_variable,dropdown_y_variable=dropdown_y_variable,input_cluster_count=input_cluster_count,graph_cluster=graph_cluster,)@app.callback(Output("cluster-graph","figure"),[Input("x-variable","value"),Input("y-variable","value"),Input("cluster-count","value"),],)defmake_graph(x,y,n_clusters):# minimal input validation, make sure there's at least one clusterkm=KMeans(n_clusters=max(n_clusters,1),n_init=10)df=iris.loc[:,[x,y]]km.fit(df.values)df["cluster"]=km.labels_centers=km.cluster_centers_data=[go.Scatter(x=df.loc[df.cluster==c,x],y=df.loc[df.cluster==c,y],mode="markers",marker={"size":8},name="Cluster{}".format(c),)forcinrange(n_clusters)]data.append(go.Scatter(x=centers[:,0],y=centers[:,1],mode="markers",marker={"color":"#000","size":12,"symbol":"diamond"},name="Cluster centers",))layout={"xaxis":{"title":x},"yaxis":{"title":y}}returngo.Figure(data=data,layout=layout)# make sure that x and y values can't be the same variabledeffilter_options(v):"""Disable option v"""return[{"label":col,"value":col,"disabled":col==v}forcoliniris.columns]# functionality is the same for both dropdowns, so we reuse filter_optionsapp.callback(Output("x-variable","options"),[Input("y-variable","value")])(filter_options)app.callback(Output("y-variable","options"),[Input("x-variable","value")])(filter_options)if__name__=="__main__":app.run_server(debug=True,port=8888)LicenseThis project is licensed under the MIT License (see theLICENSEfile for
details).