async def setup_page(q: Q):
q.page['meta'] = ui.meta_card(
box='',
title=app_title,
layouts=[
ui.layout(breakpoint='xs',
zones=[
ui.zone('header'),
ui.zone('blurb'),
ui.zone('main',
size='calc(100vh - 140px)',
direction=ui.ZoneDirection.ROW,
zones=[ui.zone('code'),
ui.zone('preview')])
])
])
q.page['header'] = ui.header_card(
box='header',
title=app_title,
subtitle=f'{len(catalog)} Interactive Examples',
image=
'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg',
items=[
ui.link(label='Wave docs',
path='https://wave.h2o.ai/docs/getting-started',
target='_blank'),
ui.link(label='Discussions',
path='https://github.com/h2oai/wave/discussions',
target='_blank'),
ui.link(label='Blog',
path='https://wave.h2o.ai/blog',
target='_blank'),
ui.link(label='Hybrid Cloud',
path='https://www.h2o.ai/hybrid-cloud/',
target='_blank'),
ui.link(label='H2O', path='https://www.h2o.ai/', target='_blank'),
])
q.page['blurb'] = ui.section_card(box='blurb',
title='',
subtitle='',
items=[])
q.page['code'] = ui.frame_card(box='code', title='', content='')
q.page['preview'] = ui.frame_card(box='preview',
title='Preview',
path=f'{_base_url}demo')
await q.page.save()
async def serve(q: Q):
if not q.client.initialized: # First visit
q.client.initialized = True
q.client.points = 25
q.client.plotly_controls = False
q.page['controls'] = ui.form_card(box='1 1 4 2',
items=[
ui.slider(name='points',
label='Points',
min=5,
max=50,
step=1,
value=q.client.points,
trigger=True),
ui.toggle(
name='plotly_controls',
label='Plotly Controls',
trigger=True),
])
q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')
if q.args.points:
q.client.points = q.args.points
if q.args.plotly_controls is not None:
q.client.plotly_controls = q.args.plotly_controls
n = q.client.points
# Create plot with plotly
fig = go.Figure(data=go.Scatter(
x=np.random.rand(n),
y=np.random.rand(n),
mode='markers',
marker=dict(size=(8 * np.random.rand(n))**2, color=np.random.rand(n)),
opacity=0.8,
))
_ = fig.update_layout(
margin=dict(l=10, r=10, t=10, b=10),
paper_bgcolor='rgb(255, 255, 255)',
plot_bgcolor='rgb(255, 255, 255)',
)
config = {
'scrollZoom': q.client.plotly_controls,
'showLink': q.client.plotly_controls,
'displayModeBar': q.client.plotly_controls
}
html = pio.to_html(fig,
validate=False,
include_plotlyjs='cdn',
config=config)
q.page['plot'].content = html
# Save page
await q.page.save()
def render_code(q: Q):
local_dir = os.path.dirname(os.path.realpath(__file__))
with open(os.path.join(local_dir, 'app.py')) as f:
contents = f.read()
py_lexer = get_lexer_by_name("python")
html_formatter = HtmlFormatter(full=True, style="xcode")
q.page['code'] = ui.frame_card(box=ui.box('code',
height='calc(100vh - 155px)'),
title='',
content=highlight(contents, py_lexer,
html_formatter))
async def setup_page(q: Q):
q.page['meta'] = ui.meta_card(
box='',
title=app_title,
layouts=[
ui.layout(breakpoint='xs',
zones=[
ui.zone('header'),
ui.zone('blurb'),
ui.zone('main',
size='calc(100vh - 130px)',
direction=ui.ZoneDirection.ROW,
zones=[ui.zone('code'),
ui.zone('preview')])
])
])
q.page['header'] = ui.header_card(
box='header',
title=app_title,
subtitle=f'{len(catalog)} Interactive Examples',
nav=[
ui.nav_group(label='Examples',
items=[
ui.nav_item(name=f'#{e.name}', label=e.title)
for e in catalog.values()
])
],
)
q.page['blurb'] = ui.section_card(box='blurb',
title='',
subtitle='',
items=[])
q.page['code'] = ui.frame_card(box='code', title='', content='')
q.page['preview'] = ui.frame_card(box='preview',
title='Preview',
path='/demo')
await q.page.save()
async def setup_page(q: Q):
q.page['meta'] = ui.meta_card(
box='',
title=app_title
)
q.page['header'] = ui.header_card(
box='1 1 2 1',
title=app_title,
subtitle=f'{len(catalog)} Interactive Examples',
)
q.page['examples'] = ui.nav_card(
box='1 2 2 -1',
items=[
ui.nav_group(
label='Examples',
items=[ui.nav_item(name=f'#{e.name}', label=e.title) for e in catalog.values()]
),
],
)
q.page['blurb'] = ui.form_card(
box='3 1 5 3',
items=[],
)
q.page['code'] = ui.frame_card(
box='3 4 5 -1',
title='',
content='',
)
q.page['preview'] = ui.frame_card(
box='8 1 5 -1',
title='Preview',
path='/demo',
)
await q.page.save()
# Frame / Path
# Use a #frame card to display external web pages.
# ---
from h2o_wave import site, ui
page = site['/demo']
page['example'] = ui.frame_card(
box='1 1 6 5',
title='Example',
path='https://example.com',
)
page.save()
def populate_customer_churn_stats(cust_phone_no, df, q):
df["Total Charges"] = (df.Total_Day_charge + df.Total_Eve_Charge +
df.Total_Night_Charge + df.Total_Intl_Charge)
df = df[[
"Total_Day_charge",
"Total_Eve_Charge",
"Total_Night_Charge",
"Total_Intl_Charge",
config.id_column,
"Total Charges",
]]
df.columns = [
"Day Charges", "Evening Charges", "Night Charges", "Int'l Charges",
config.id_column, "Total Charges"
]
q.page["day_stat"] = wide_stat_card_dollars(df, cust_phone_no,
"Day Charges",
config.boxes["day_stat"],
config.color)
q.page["eve_stat"] = wide_stat_card_dollars(df, cust_phone_no,
"Evening Charges",
config.boxes["eve_stat"],
config.color)
q.page["night_stat"] = wide_stat_card_dollars(df, cust_phone_no,
"Night Charges",
config.boxes["night_stat"],
config.color)
q.page["intl_stat"] = wide_stat_card_dollars(df, cust_phone_no,
"Int'l Charges",
config.boxes["intl_stat"],
config.color)
q.page["total_stat"] = tall_stat_card_dollars(
df,
cust_phone_no,
"Total Charges",
config.boxes["total_stat"],
config.total_gauge_color,
)
q.page["customer"] = ui.small_stat_card(box=config.boxes["customer"],
title="Customer",
value=str(cust_phone_no))
q.page["churn_rate"] = ui.small_stat_card(
box=config.boxes["churn_rate"],
title="Churn Rate",
value=
f"{churn_predictor.get_churn_rate_of_customer(q.client.selected_customer_index)}%",
)
labels = [
"Day Charges", "Evening Charges", "Night Charges", "Int'l Charges"
]
values = [
df[df[config.id_column] == cust_phone_no][labels[0]].values[0],
df[df[config.id_column] == cust_phone_no][labels[1]].values[0],
df[df[config.id_column] == cust_phone_no][labels[2]].values[0],
df[df[config.id_column] == cust_phone_no][labels[3]].values[0],
]
html_plot = generate_figure_pie_of_target_percent("", labels, values,
get_figure_layout())
q.page["stat_pie"] = ui.frame_card(
box=config.boxes["stat_pie"],
title="Total call charges breakdown",
content=convert_plot_to_html(config.figure_config, html_plot, "cdn",
False),
)
# Frame
# Use a #frame card to display #HTML content.
# #form
# ---
from h2o_wave import site, ui
html = '''
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
'''
page = site['/demo']
page['example'] = ui.frame_card(
box='1 1 2 2',
title='Example',
content=html,
)
page.save()
<body>
<h2>Hello World!</h2>
<p>And now for something completely different...</p>
</body>
</html>
'''
# Create a random filename for our HTML file
# e.g. 6ad24c6f-54ed-41e0-8458-a2efd5e05952.html
html_filename = f'{str(uuid.uuid4())}.html'
# Save HTML content to file
with open(html_filename, 'w', encoding='utf-8') as f:
f.write(html_content)
# Upload HTML file
html_path, = site.upload([html_filename])
# Clean up
os.remove(html_filename)
# Add a frame card to the page and point it to the HTML file we just uploaded.
# The path will look something like /_f/adb747ae-999f-460b-8050-3d636594d0cf/6ad24c6f-54ed-41e0-8458-a2efd5e05952.html
page = site['/demo']
page['example'] = ui.frame_card(
box='1 1 2 3',
title='An uploaded frame',
path=html_path,
)
page.save()
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body style="margin:0; padding:0">
<script src="{script_path}"></script>
<script>render({data})</script>
</body>
</html>
'''
# This data is hard-coded here for simplicity.
# During production use, this data would be the output of some compute routine.
data = [
[11975, 5871, 8916, 2868],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907],
]
# Plug JSON-serialized data into our html template
html = html_template.format(script_path=d3_js_script_path, data=json.dumps(data))
page = site['/demo']
page['example'] = ui.frame_card(
box='1 1 5 8',
title='D3 Chord Diagram',
content=html,
)
page.save()
n = 500
x = 2 + 2 * np.random.standard_normal(n)
y = 2 + 2 * np.random.standard_normal(n)
p = figure(
match_aspect=True,
tools="wheel_zoom,reset",
background_fill_color='#440154',
sizing_mode='stretch_both'
)
p.grid.visible = False
r, bins = p.hexbin(x, y, size=0.5, hover_color="pink", hover_alpha=0.8)
p.circle(x, y, color="white", size=1)
p.add_tools(HoverTool(
tooltips=[("count", "@c"), ("(q,r)", "(@q, @r)")],
mode="mouse",
point_policy="follow_mouse",
renderers=[r]
))
# Export html for our frame card
html = file_html(p, CDN, "plot")
page = site['/demo']
page['example'] = ui.frame_card(
box='1 1 5 8',
title='Hexbin for 500 points',
content=html,
)
page.save()
