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()