%load_ext autoreload
%autoreload 2
import os
import json
import ezdashboard as ed
from ezdashboard.elements import Div, ListDiv, Title, Row, Tab, ListJs, Misc, Header, Dashboard
Please read the notebook demo_ezdashboard_1 before to understand how the package works.
Here is an example with several types of content, produced with the following libraries:
Each content is produced with a notebook - for reproducibility - and stored on disk:
dic_content = {}
li_data = [('ezhc_graph_1.html', 'ezhc'),
('ezvis3d_graph_1.html', 'ezvis3d'),
('markdown_sample_2.md', 'markdown'),
('ipyaggrid_grid_div_1.html', 'ipyaggrid_div_1'),
('ipyaggrid_grid_div_2.html', 'ipyaggrid_div_2'),
('ipyaggrid_manager_state_1.json', 'ipyaggrid_manager_state_1'),
('ipyaggrid_manager_state_2.json', 'ipyaggrid_manager_state_2'),
]
for i in range(5):
filename = 'toyplot_table_{}.html'.format(i)
name = 'toyplot_table_{}'.format(i)
li_data.append((filename, name))
for filename, name in li_data:
print(filename)
with open(os.path.join('data', filename)) as f:
dic_content[name] = f.read()
if filename.endswith('.json'):
dic_content[name] = json.loads(dic_content[name])
ezhc_graph_1.html ezvis3d_graph_1.html markdown_sample_2.md ipyaggrid_grid_div_1.html ipyaggrid_grid_div_2.html ipyaggrid_manager_state_1.json ipyaggrid_manager_state_2.json toyplot_table_0.html toyplot_table_1.html toyplot_table_2.html toyplot_table_3.html toyplot_table_4.html
div = {}
for name, content in dic_content.items():
if 'manager_state' not in name:
data = {
'id_name': name,
'class_name': 'style-'+name,
'content': content,
'width': 12,
'with_borders': False,
'is_markdown': True if name.startswith('markdown') else False
}
div[name] = Div(**data)
div['nothing'] = Div(**{
'id_name': 'nothing',
'class_name': 'style-nothing',
'content': 'There is nothing to be see here.. Move on',
'width': 12,
'with_borders': False,
'is_markdown': False
})
css = """
/* IMPORTANT: tile is a KEYWORD */
/* It is the class of all display divs in the dashboard tabs */
.tile {
// padding: 15px;
// font-size: 1.6rem;
}
.nav-tab {
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #333333;
}
.style-ezhc {
background-color: white;
}
.style-ezvis3d {
background-color: white;
}
.style-markdown {
height: 4900px; /////////////// IMPORTANT
background-color: white;
}
.style-toyplot-table-0 {
background-color: white;
}
.style-toyplot-table-1 {
background-color: white;
}
.style-toyplot-table-2 {
background-color: white;
}
.style-toyplot-table-3 {
background-color: white;
}
.style-toyplot-table-4 {
background-color: white;
}
.style-nothing, .style-ipyaggrid_div_1, .style-ipyaggrid_div_2 {
height: 400px;
}
.wrapper {
width: 1000px;
margin-top: 15px;
}
"""
li_d1 = ListDiv(**{'elmts': [div['ezhc']]})
row1 = Row(**{'elmts': li_d1})
title1 = Title(**{'size': 2, 'text': 'A Nice 2D Graph'})
tab1 = Tab(**{'name': 'Graph 2D', 'elmts': [title1, row1], 'active': True})
li_d2 = ListDiv(**{'elmts': [div['ezvis3d']]})
row2 = Row(**{'elmts': li_d2})
title2 = Title(**{'size': 2, 'text': 'An Impressive 3D Graph'})
tab2 = Tab(**{'name': 'Graph 3D', 'elmts': [title2, row2]})
li_d3 = ListDiv(**{'elmts': [div['markdown']]})
row3 = Row(**{'elmts': li_d3})
title3 = Title(**{'size': 2, 'text': 'Content Written in Markdown'})
tab3 = Tab(**{'name': 'Rich Text & More', 'elmts': [title3, row3]})
li_d41 = ListDiv(**{'elmts': [div['toyplot_table_0']]})
row41 = Row(**{'elmts': li_d41})
title41 = Title(**{'size': 2, 'text': 'Table formatted with Toyplot'})
tab41 = Tab(**{'name': 'Table 1', 'elmts': [title41, row41], 'level': 2, 'active': True})
li_d42 = ListDiv(**{'elmts': [div['toyplot_table_1']]})
row42 = Row(**{'elmts': li_d42})
title42 = Title(**{'size': 2, 'text': 'Table formatted with Toyplot'})
tab42 = Tab(**{'name': 'Table 1', 'elmts': [title42, row42], 'level': 2})
li_d43 = ListDiv(**{'elmts': [div['toyplot_table_2']]})
row43 = Row(**{'elmts': li_d43})
title43 = Title(**{'size': 2, 'text': 'Table formatted with Toyplot'})
tab43 = Tab(**{'name': 'Table 1', 'elmts': [title43, row43], 'level': 2})
li_d44 = ListDiv(**{'elmts': [div['toyplot_table_3']]})
row44 = Row(**{'elmts': li_d44})
title44 = Title(**{'size': 2, 'text': 'Table formatted with Toyplot'})
tab44 = Tab(**{'name': 'Table 1', 'elmts': [title44, row44], 'level': 2})
li_d45 = ListDiv(**{'elmts': [div['toyplot_table_4']]})
row45 = Row(**{'elmts': li_d45})
title45 = Title(**{'size': 2, 'text': 'Table formatted with Toyplot'})
tab45 = Tab(**{'name': 'Table 1', 'elmts': [title45, row45], 'level': 2})
tab4 = Tab(**{'name': 'Tables', 'elmts': [tab41, tab42, tab43, tab44]}, verbose=True)
li_d5 = ListDiv(**{'elmts': [div['ipyaggrid_div_1']]})
row5 = Row(**{'elmts': li_d5})
title5 = Title(**{'size': 2, 'text': 'An ipyaggrid'})
tab5 = Tab(**{'name': 'Grid 1', 'elmts': [title5, row5], 'keyboard': False})
li_d61 = ListDiv(**{'elmts': [div['nothing']]})
row61 = Row(**{'elmts': li_d61})
title61 = Title(**{'size': 2, 'text': 'To be or not to be'})
tab61 = Tab(**{'name': 'Tab 1', 'elmts': [title61, row61], 'level': 2, 'active': True})
li_d62 = ListDiv(**{'elmts': [div['ipyaggrid_div_2']]})
row62 = Row(**{'elmts': li_d62})
title62 = Title(**{'size': 2, 'text': 'Another ipyaggrid'})
tab62 = Tab(**{'name': 'Table 1', 'elmts': [title62, row62], 'level': 2, 'keyboard': False})
tab6 = Tab(**{'name': 'Grid & co', 'elmts': [tab61, tab62]}, verbose=True)
titleD = Title(**{'size': 2, 'text': 'Several Content Types'})
manager_state = [dic_content['ipyaggrid_manager_state_1'],
dic_content['ipyaggrid_manager_state_2']]
misc= Misc(**{'main_type': 'container-fluid',
'main_class_name': 'wrapper',
'main_nav_width': '17%',
'main_nav_min_height': '15%',
'main_content_width': '82%',
'no_margins': False,
})
header = Header(**{'left_logo': os.path.join('img', 'sg-logo.png'),
'left_title': 'HF-Hub',
'right_logo': os.path.join('img', 'jupyter-logo.png'),
'toggle': True
})
js = ListJs(['https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'])
dashboard = Dashboard(**{'title': titleD,
'tabs': [tab1, tab2, tab3, tab4, tab5, tab6],
'css': css,
'js': js,
'misc': misc,
'header': header,
'widgets': True,
'widgets_state': manager_state,
'markdown': True,
'latex': True,
}, verbose=True)
Tab: isLevel= True Tab: isCandListTab= True Tab: isCandListTitleRow= False Tab: nbActiveTab= 1 Tab: isKeyboard= True Tab: isNbActiveTabCorrect= True Tab: isTab= True Tab: isLevel= True Tab: isCandListTab= True Tab: isCandListTitleRow= False Tab: nbActiveTab= 1 Tab: isKeyboard= True Tab: isNbActiveTabCorrect= True Tab: isTab= True Dashboard: isTitle= True Dashboard: isTabs= True Dashboard: isJs= True Dashboard: isMisc= True Dashboard: isExactlyOneActiveTab= True Dashboard: isHeader= True Dashboard: isMarkdown= True Dashboard: isWidgets= True Dashboard: isWidgetsState= True Dashboard: isLatex= True Dashboard: isDashboard= True
build()
has the following arguments:
save=True
, optionally save_name
(default='index.html'), optionally save_path
(default='saved')save=False
will return the HTML content as a stringIt will save the dashboard as a file under save_path
after creating this folder it if necessary.
data = dashboard.to_dict()
content = ed.build(data, save=False)
ed.build(data, save=True, save_path='sample')
file sample/index.html created on disk file sample/server.sh created on disk: python -m http.server 8081 Run it to launch web server and test dashboard
minified_content = ed.minify(content)
print(minified_content[:1000])
print('\n...{} more characters...\n'.format(len(minified_content)-2000))
print(minified_content[-1000:])
<!DOCTYPE html> <html lang="en"> <head> <title>Dashboard</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Libs --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <!-- Libs --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.min.css"> <!-- Load RequireJS, used by the IPywidgets for dependency management --> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0 ...581549 more characters... ht key is pressed'); if (activeTab in activeTabL2) { activeTabL2[activeTab] = modulo(activeTabL2[activeTab] + 1, nbTabL2[activeTab]); var tabName = 'tab' + activeTab + '-' + activeTabL2[activeTab] + 'Link'; } break; } if (tabName) { console.log('tabName clicked = '+tabName); document.getElementById(tabName).click(); } }; $('.theme-toggle').on('click', function() { $('body').toggleClass('dark-theme'); }); </script> <script type="text/x-mathjax-config"> MathJax.Hub.Config( {TeX: { Macros: { sp: "^", sb: "_" } }, tex2jax: { inlineMath: [ ['$','$'], ['\\(','\\)'] ], displayMath: [ ["$$","$$"], ["\\[","\\]"] ] } }); </script> <script type='text/javascript'> setTimeout(function () { var headID = document.getElementsByTagName('head')[0]; var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML'; headID.appendChild(newScript); }, 1000); </script> </body> </html>
# with open(os.path.join('sample', 'index.html'), 'w') as f:
# f.write(minified_content)