async def serve(q: Q): if not q.client.initialized: # Set up up the page at /stats stats_page.drop() # Clear any existing page stats_page['example'] = ui.wide_gauge_stat_card( box='1 1 2 1', title='Stats', value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value='={{intl percent style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}', plot_color='$red', progress=0, data=dict(price=0, percent=0), ) await stats_page.save() # Set up this app's UI q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ ui.frame(path='/stats', height='110px'), ui.button(name='toggle', label='Start updates', primary=True), ]) await q.page.save() q.client.initialized = True if q.args.toggle: global update_stats update_stats = not update_stats q.page['form'].items[1].button.label = 'Stop updates' if update_stats else 'Start updates' await q.page.save() await update_stats_page(q, stats_page)
def python_code_content(file_to_display): """ Returns a list of UI objects that can be used in a Form_Card: header and python code of the provided file. Usage: q.page['code'] = ui.form_card(box='3 4 -1 -1', items=python_code_content("run.py")) :param file_to_display :return: wave UI items """ from pygments import highlight from pygments.formatters.html import HtmlFormatter from pygments.lexers import get_lexer_by_name local_dir = os.path.dirname(os.path.realpath(__file__)) with open(os.path.join(local_dir, file_to_display)) as f: contents = f.read() py_lexer = get_lexer_by_name("python") html_formatter = HtmlFormatter(full=True, style="xcode") code = highlight(contents, py_lexer, html_formatter) return [ ui.text_xl("Application Code"), ui.frame(content=code, height="90%") ]
def render_content_changes(q: Q): q.page['sidebar'] = ui.form_card( box='1 2 2 8', items=[ ui.separator('Button Counting'), ui.text( f'This button has been **clicked in this browser session {q.client.count}** times!' ), ui.text( f'This button has been **clicked by you {q.user.count}** times!' ), ui.text(f'This button has been **clicked {q.app.count}** times!'), ui.buttons([ui.button(name='button', label='Click Me!')], justify='center') ]) q.page['content'] = ui.form_card( box='3 2 9 8', items=[ ui.tabs(name='header_tabs', value=q.client.tab, items=[ ui.tab(name=t.lower(), label=t) for t in ['Home', 'Learn More', 'Contact Us'] ]), ui.frame( content= f'This is the {q.client.tab} section, it is still in development.' ) ])
async def list_tweets_for_hashtag(q): values, text = search_tweets(q) for tweet_count, tweet in enumerate(text): popularity_score = values[tweet] q.page[f'twitter_card_{tweet_count}'].items = [ ui.message_bar(type=f"{derive_sentiment_message_type(popularity_score['compound'])}", text=f"Sentiment - {derive_sentiment_status(popularity_score['compound'])}"), ui.text(content=tweet[:150].strip()), ui.frame(content=convert_plot_to_html( generate_figure_pie_of_target_percent(map_popularity_score_keys(popularity_score)), "cdn", False), width='300px', height='250px') ]
def get_user_input_items(sales_data, user_inputs, progress=False): return [ ui.text_l('**Select Area of Interest**'), ui.dropdown( name='stores', label='Store IDs', values=[str(x) for x in user_inputs.stores], choices=[ui.choice(name=str(x), label=str(x)) for x in sales_data.stores_unique], tooltip='Select the Stores to include in the prediction', trigger=True, ), ui.text_xs('⠀'), ui.dropdown( name='departments', label='Product IDs', values=[str(x) for x in user_inputs.departments], choices=[ui.choice(name=str(x), label=str(x)) for x in sales_data.departments_unique], tooltip='Select the Products to include in the prediction', trigger=True, ), ui.frame(content=' ', height="40px"), ui.text_l('**Generate Sales Forecast**'), ui.slider( name='n_forecast_weeks', label='Number of Weeks', min=0, max=len(sales_data.prediction_dates) - 1, step=1, value=user_inputs.n_forecast_weeks, trigger=True, tooltip='Select the number of weeks into the future to predict' ), ui.text_xs('⠀'), ui.button( name='reset', label='Reset', primary=True, tooltip='Click to reset all values to defaults' ), ui.text_xs('⠀'), ui.progress(label='', caption='', visible=progress), ]
async def serve(q: Q): q.page['example'] = ui.form_card(box='1 1 4 10', items=[ ui.text_xl(content='Extra-large text, for headings.'), ui.text_l(content='Large text, for sub-headings.'), ui.text_m(content='Body text, for paragraphs and other content.'), ui.text_s(content='Small text, for small print.'), ui.text_xs(content='Extra-small text, for really small print.'), ui.separator(label='A separator sections forms'), ui.progress(label='A progress bar'), ui.progress(label='A progress bar'), ui.message_bar(type='success', text='Message bar'), ui.textbox(name='textbox', label='Textbox'), ui.label(label='Checkboxes'), ui.checkbox(name='checkbox1', label='A checkbox'), ui.checkbox(name='checkbox1', label='Another checkbox'), ui.checkbox(name='checkbox1', label='Yet another checkbox'), ui.toggle(name='toggle', label='Toggle'), ui.choice_group(name='choice_group', label='Choice group', choices=[ ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam'] ]), ui.checklist(name='checklist', label='Checklist', choices=[ ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam'] ]), ui.dropdown(name='dropdown', label='Dropdown', choices=[ ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam'] ]), ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[ ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam'] ]), ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']), ui.slider(name='slider', label='Slider'), ui.range_slider(name='range_slider', label='Range slider', max=99), ui.spinbox(name='spinbox', label='Spinbox'), ui.date_picker(name='date_picker', label='Date picker'), ui.color_picker(name='color_picker', label='Color picker'), ui.buttons([ ui.button(name='primary_button', label='Primary', primary=True), ui.button(name='standard_button', label='Standard'), ui.button(name='standard_disabled_button', label='Standard', disabled=True), ]), ui.file_upload(name='file_upload', label='File upload'), ui.table(name='table', columns=[ ui.table_column(name='col1', label='Column 1'), ui.table_column(name='col2', label='Column 2'), ], rows=[ ui.table_row(name='row1', cells=['Text A', 'Text B']), ui.table_row(name='row2', cells=['Text C', 'Text D']), ui.table_row(name='row3', cells=['Text E', 'Text F']), ]), ui.link(label='Link'), ui.tabs(name='tabs', items=[ ui.tab(name='email', label='Mail', icon='Mail'), ui.tab(name='events', label='Events', icon='Calendar'), ui.tab(name='spam', label='Spam'), ]), ui.expander(name='expander', label='Expander'), ui.frame(path='https://example.com'), ui.markup(content=html), ui.template( content=menu, data=pack(dict(dishes=[ dict(name='Spam', price='$2.00'), dict(name='Ham', price='$3.45'), dict(name='Eggs', price='$1.75'), ])) ), ui.picker(name='picker', label='Picker', choices=[ ui.choice('choice1', label='Choice 1'), ui.choice('choice2', label='Choice 2'), ui.choice('choice3', label='Choice 3'), ]), ui.stepper(name='stepper', items=[ ui.step(label='Step 1', icon='MailLowImportance'), ui.step(label='Step 2', icon='TaskManagerMirrored'), ui.step(label='Step 3', icon='Cafe'), ]), ui.visualization( plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]), data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True), ), ui.vega_visualization( specification=spec, data=data(fields=["a", "b"], rows=[ ["A", rnd()], ["B", rnd()], ["C", rnd()], ["D", rnd()], ["E", rnd()], ["F", rnd()], ["G", rnd()], ["H", rnd()], ["I", rnd()] ], pack=True), ), ui.button(name='show_inputs', label='Submit', primary=True), ]) await q.page.save()
def show_another_website(q: Q): q.page['show_table'] = ui.form_card( box='1 1 -1 -1', items=[ui.frame(path='https://example.com', height='100%')])
# Form / Frame / Path # Use a frame component in a form card to display external web pages. # --- from h2o_wave import site, ui page = site['/demo'] page['example'] = ui.form_card( box='1 1 6 5', items=[ ui.frame(path='https://example.com', height='400px') ] ) page.save()
# Form / Frame # Use a #frame component in a #form card to display #HTML content inline. # --- from h2o_wave import site, ui html = ''' <!DOCTYPE html> <html> <body> <h1>Hello World!</h1> </body> </html> ''' page = site['/demo'] page['example'] = ui.form_card(box='1 1 2 2', items=[ui.frame(content=html, height='100px')]) page.save()
async def serve(q: Q): if not q.client.initialized: image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260' f = FakeCategoricalSeries() q.client.primary = '#000000' q.client.page = '#e2e2e2' q.client.card = '#ffffff' q.client.text = '#000000' q.page['meta'] = ui.meta_card( box='', theme='custom', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('header'), ui.zone('content', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('colors', size='340px'), ui.zone('preview') ]), ui.zone('footer') ]) ]) q.page['header'] = ui.header_card(box='header', title='Theme generator', subtitle='Color your app easily', icon='Color', icon_color='$card') q.page['form'] = ui.form_card(box='colors', items=[ ui.color_picker( name='primary', label='Primary', trigger=True, alpha=False, inline=True, value=q.client.primary), ui.color_picker(name='text', label='Text', trigger=True, alpha=False, inline=True, value=q.client.text), ui.color_picker(name='card', label='Card', trigger=True, alpha=False, inline=True, value=q.client.card), ui.color_picker(name='page', label='Page', trigger=True, alpha=False, inline=True, value=q.client.page), ui.text_xl('Check contrast'), get_contrast('text', 'card', q), get_contrast('card', 'primary', q), get_contrast('text', 'page', q), get_contrast('page', 'primary', q), ui.text_xl('Copy code'), ui.frame(content=get_theme_code(q), height='180px'), ]) q.page['sample'] = ui.form_card( box='preview', items=[ ui.text_xl(content='Sample App to show colors'), ui.progress(label='A progress bar'), ui.inline([ ui.checkbox(name='checkbox1', label='A checkbox', value=True), ui.checkbox(name='checkbox2', label='Another checkbox'), ui.checkbox(name='checkbox3', label='Yet another checkbox'), ui.toggle(name='toggle', label='Toggle', value=True), ]), ui.inline([ ui.date_picker(name='date_picker', label='Date picker'), ui.picker(name='picker', label='Picker', choices=[ ui.choice('choice1', label='Choice 1'), ui.choice('choice2', label='Choice 2'), ui.choice('choice3', label='Choice 3'), ]), ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']), ui.persona(title='John Doe', subtitle='Data Scientist', size='s', image=image), ]), ui.slider(name='slider', label='Slider', value=70), ui.link(label='Link'), ui.inline(justify='between', items=[ ui.stepper(name='stepper', width='500px', items=[ ui.step(label='Step 1', icon='MailLowImportance'), ui.step( label='Step 2', icon='TaskManagerMirrored'), ui.step(label='Step 3', icon='Cafe'), ]), ui.tabs(name='menu', value='email', items=[ ui.tab(name='email', label='Mail', icon='Mail'), ui.tab(name='events', label='Events', icon='Calendar'), ui.tab(name='spam', label='Spam'), ]), ]), ui.inline(items=[ ui.table( name='table', width='50%', columns=[ ui.table_column( name='name', label='Name', min_width='80px'), ui.table_column(name='surname', label='Surname', filterable=True), ui.table_column(name='age', label='Age', sortable=True), ui.table_column( name='progress', label='Progress', cell_type=ui.progress_table_cell_type( color='$themePrimary')), ], rows=[ ui.table_row(name='row1', cells=['John', 'Doe', '25', '0.90']), ui.table_row(name='row2', cells=['Ann', 'Doe', '35', '0.75']), ui.table_row( name='row3', cells=['Casey', 'Smith', '40', '0.33']), ], height='330px', ), ui.visualization( width='50%', plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', y_min=0) ]), data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(20)]], pack=True), ), ]), ui.buttons([ ui.button(name='primary_button', label='Primary', primary=True), ui.button(name='standard_button', label='Standard'), ui.button(name='standard_disabled_button', label='Disabled', disabled=True), ui.button(name='icon_button', icon='Heart', caption='Tooltip text'), ]), ]) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') q.client.themes = [ ui.theme(name='custom', text=q.client.text, card=q.client.card, page=q.client.page, primary=q.client.primary) ] q.client.initialized = True if q.args.primary: q.client.themes[0].primary = q.args.primary q.client.primary = q.args.primary if q.args.text: q.client.themes[0].text = q.args.text q.client.text = q.args.text if q.args.card: q.client.themes[0].card = q.args.card q.client.card = q.args.card if q.args.page: q.client.themes[0].page = q.args.page q.client.page = q.args.page q.page['meta'].themes = q.client.themes q.page['form'].items[5] = get_contrast('text', 'card', q) q.page['form'].items[6] = get_contrast('card', 'primary', q) q.page['form'].items[7] = get_contrast('text', 'page', q) q.page['form'].items[8] = get_contrast('page', 'primary', q) q.page['form'].items[10].frame.content = get_theme_code(q) await q.page.save()