async def serve(q: Q): q.page['example'] = ui.form_card(box='1 1 4 10', items=[ ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True), ui.label('Pig Latin'), ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'), ]) await q.page.save()
async def render(self, q: Q): """ Render card in Wave. Args: q: Wave server """ card = ui.form_card( box=self.box, items=[ ui.label(label='Token Similarity'), self.get_token_similarity_visualization(), ui.label(label='Sentence Similarity'), self.get_sentence_similarity_visualization() ], title=self.title, commands=self.commands ) q.page[self.name] = card
def get_form_items(choice: str): return [ ui.combobox(name='combobox', trigger=True, label='Enter or choose a color', placeholder='Color...', value='Blue', choices=combobox_choices), ui.label('Sent to server'), ui.text(choice), ]
async def show_grey_dashboard(q: Q): q.page['meta'] = ui.meta_card(box='', layouts=[ ui.layout( breakpoint='xl', min_width='800px', zones=[ ui.zone('header', size='0'), ui.zone('body', size='1000px', zones=[ ui.zone('title', size='0'), ui.zone('top', direction=ui.ZoneDirection.ROW, size='25%'), ui.zone('middle', direction=ui.ZoneDirection.ROW, size='25%'), ui.zone('middle2', direction=ui.ZoneDirection.ROW, size='25%'), ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='20%'), ]), ui.zone('footer', size='0'), ] ) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Grey Dashboard', nav=global_nav) q.page['section'] = ui.section_card( box='title', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.label(label='Start:'), ui.date_picker(name='target_date', label='', value='2020-12-20'), ui.label(label='End:'), ui.date_picker(name='target_date', label='', value='2020-12-25'), ], ) stock_dates = generate_time_series(10000) stock_prices = generate_random_walk() q.page['small'] = ui.small_stat_card( box=ui.box('top', order=1), title=next(sample_term), value=next(sample_dollars), ) q.page['small_series'] = ui.small_series_stat_card( box=ui.box('top', order=2), title=next(sample_term), value=next(sample_dollars), plot_category='date', plot_value='price', plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['small_series_interval'] = ui.small_series_stat_card( box=ui.box('top', order=3), title=next(sample_term), value=next(sample_dollars), plot_category='date', plot_value='price', plot_type=ui.SmallSeriesStatCardPlotType.INTERVAL, plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['wide_series'] = ui.wide_series_stat_card( box=ui.box('middle', order=1), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_percent), plot_category='date', plot_value='price', plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['wide_bar'] = ui.wide_bar_stat_card( box=ui.box('middle', order=2), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_percent), progress=random.random(), ) q.page['wide_gauge'] = ui.wide_gauge_stat_card( box=ui.box('middle', order=3), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_percent), progress=random.random(), ) q.page['tall_series'] = ui.tall_series_stat_card( box=ui.box('middle2', order=1), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_percent), plot_category='date', plot_value='price', plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['tall_gauge'] = ui.tall_gauge_stat_card( box=ui.box('middle2', order=2), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_percent), progress=random.random(), ) q.page['large'] = ui.large_stat_card( box=ui.box('bottom', order=1), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_percent), caption=next(sample_caption), ) q.page['large_bar'] = ui.large_bar_stat_card( box=ui.box('bottom', order=2), title=next(sample_term), value=next(sample_dollars), value_caption=next(sample_term), aux_value=next(sample_dollars), aux_value_caption=next(sample_term), progress=random.random(), caption=next(sample_caption), ) q.page['footer'] = ui.footer_card(box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
def form_default(q: Q): # display when app is initialized return [ ui.label(label='List of Driverless AI instances'), dai_instances_table(dai_instances=q.client.dai_instances) ]
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()
async def show_red_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout( breakpoint='xl', width='1200px', zones=[ ui.zone('header'), ui.zone('title'), ui.zone('top', direction=ui.ZoneDirection.ROW, size='385px', zones=[ ui.zone('top_left'), ui.zone('top_right', zones=[ ui.zone( 'top_right_top', direction=ui.ZoneDirection.ROW, size='1'), ui.zone('top_right_bottom', size='1'), ]), ]), ui.zone('middle', direction=ui.ZoneDirection.ROW, size='385px'), ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='385px', zones=[ ui.zone('bottom_left'), ui.zone('bottom_right', size='66%'), ]), ui.zone('footer'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Red Dashboard', nav=global_nav) q.page['title'] = ui.section_card( box='title', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.label(label='Start:'), ui.date_picker(name='target_date1', label='', value='2020-12-20'), ui.label(label='End:'), ui.date_picker(name='target_date2', label='', value='2020-12-25'), ], ) audience_days1 = generate_time_series(60) audience_days2 = generate_time_series(60) audience_hits1 = generate_random_walk(10000, 20000, 0.2) audience_hits2 = generate_random_walk(8000, 15000) q.page['audience_metrics'] = ui.form_card( box='top_left', title=next(sample_title), items=[ ui.text(next(sample_caption)), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_amount)), ]), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$red $tangerine'), ui.mark(type='line', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$red $tangerine'), ]), data=data( fields=['site', 'date', 'visitors'], rows=[('A', next(audience_days1), next(audience_hits1)) for i in range(60)] + [('B', next(audience_days2), next(audience_hits2)) for i in range(60)], pack=True), height='210px', ) ], ) bounce_days = generate_time_series(30) bounce_rates = generate_random_walk() q.page['bounce_rate'] = ui.tall_series_stat_card( box='top_right_top', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_term), plot_type='area', plot_color='$red', plot_category='date', plot_value='bounce_rate', plot_zero_value=0, plot_data=data( fields=['date', 'bounce_rate'], rows=[(next(bounce_days), next(bounce_rates)) for i in range(30)], pack=True, ), ) user_days = generate_time_series(30) user_counts = generate_random_walk() q.page['total_users'] = ui.tall_series_stat_card( box='top_right_top', title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_term), plot_type='interval', plot_color='$tangerine', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(20)], pack=True, ), ) session_days = generate_time_series(60) session_counts = generate_random_walk() q.page['all_sessions'] = ui.tall_series_stat_card( box='top_right_bottom', title=next(sample_title), value='18,976 Unique', aux_value=next(sample_caption), plot_type='interval', plot_color='$red', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(session_days), next(session_counts)) for i in range(60)], pack=True, ), ) q.page['page_views'] = ui.stat_list_card( box='middle', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.stat_list_item(label=next(sample_title), caption=next(sample_caption), value=next(sample_dollars), aux_value=next(sample_term), value_color=next(sample_color)) for i in range(5) ], ) session_count = generate_random_walk(1000, 8000) session_source = generate_sequence( ['Search', 'Email', 'Referral', 'Social', 'Other']) q.page['dist_by_channel'] = ui.plot_card( box='middle', title=next(sample_title), data=data( fields=['site', 'channel', 'sessions'], rows=[('A', next(session_source), next(session_count)) for i in range(5)] + [('B', next(session_source), next(session_count)) for i in range(5)], pack=True, ), plot=ui.plot([ ui.mark(coord='theta', type='interval', x='=site', y='=sessions', color='=channel', stack='auto', y_min=0, color_range='$amber $orange $tangerine $red $pink') ])) q.page['sessions_by_channel'] = ui.plot_card( box='middle', title=next(sample_title), data=data( fields=['channel', 'sessions'], rows=[(next(sample_term), next(session_count)) for i in range(10)], pack=True, ), plot=ui.plot([ ui.mark(type='interval', x='=sessions', y='=channel', y_min=0, color='$red') ])) q.page['acquisitions'] = ui.form_card( box='bottom_left', title=next(sample_title), items=[ ui.text(next(sample_caption)), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ]), ], ) q.page['sessions'] = ui.form_card( box='bottom_left', title=next(sample_title), items=[ ui.text(next(sample_caption)), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ]), ], ) q.page['pages'] = ui.stat_table_card( box='bottom_right', title=next(sample_title), subtitle=next(sample_caption), columns=[ next(sample_term), next(sample_term), next(sample_term), next(sample_term) ], items=[ ui.stat_table_item(label=next(sample_term), caption=next(sample_title), values=[ next(sample_dollars), next(sample_percent), next(sample_percent) ], icon=next(sample_icon), icon_color=next(sample_color)) for i in range(5) ]) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
async def show_private_leaderboard(q: Q): columns = [ ui.table_column( name='game_id', label='Game #', sortable=False, searchable=False, max_width='150', data_type='string', link=False, ), ui.table_column( name='number', label='Number', sortable=True, max_width='90', data_type='number', ), ui.table_column( name='num_of_guesses', label='# of Guesses', sortable=True, max_width='120', data_type='number', ), ui.table_column( name='status', label='Status', sortable=False, filterable=True, max_width='90', data_type='string', cell_type=ui.icon_table_cell_type(), ), ui.table_column( name='game_time', label='Time (s)', sortable=True, max_width='150', data_type='number', ), ] scores = [ ui.table_row( name=game.game_id, cells=[ str(idx), str(game.number), str(len(game.guesses)), 'MedalSolid' if game.status == 'done' else 'Running', str(game.time_seconds()), ], ) for idx, game in enumerate(q.user.player.games.values(), 1) ] leaderboard = ui.table( name='leaderboard', columns=columns, rows=scores, groupable=False, downloadable=False, resettable=False, height='600px', ) del q.page['starting_game'] q.page['leaderboard'] = ui.form_card( box='3 2 5 9', items=[ ui.label('Scores from your games'), leaderboard, ui.text_xs('Рађ'), ui.buttons( items=[ ui.button(name='start_game', label='Play', primary=True), ui.button(name='leaderboard', label='Show all games', primary=True), ], justify='center', ), ], ) await q.page.save()
async def show_leaderboard(q: Q): columns = [ ui.table_column( name='name', label='Name', sortable=True, searchable=False, max_width='230', data_type='string', link=False, ), ui.table_column( name='number', label='Number', sortable=True, max_width='100', data_type='number', ), ui.table_column( name='num_of_guesses', label='# of Guesses', sortable=True, max_width='120', data_type='number', ), ui.table_column( name='game_time', label='Time (s)', sortable=True, max_width='160', data_type='number', ), ] scores = [ ui.table_row( name=game.game_id, cells=[ q.app.players[game.player_id].name, str(game.number), str(len(game.guesses)), str(game.time_seconds()), ], ) for game in q.app.games.values() ] leaderboard = ui.table( name='leaderboard', columns=columns, rows=scores, groupable=False, downloadable=False, resettable=False, height='600px', ) del q.page['starting_game'] q.page['leaderboard'] = ui.form_card( box='3 2 5 9', items=[ ui.label('Scores'), leaderboard, ui.text_xs('Рађ'), ui.buttons( items=[ ui.button(name='start_game', label='Play', primary=True), ui.button(name='leaderboard', label='Refresh', primary=True), ui.button( name='private_leaderboard', label='Show my games only', primary=True, ), ], justify='center', ), ], ) await q.page.save()
# Form / Label # Use labels to give a name to a component or a group of components in a #form. # #label # --- from h2o_wave import site, ui page = site['/demo'] page['example'] = ui.form_card(box='1 1 4 -1', items=[ ui.label(label='Standard Label'), ui.label(label='Required Label', required=True), ui.label(label='Disabled Label', disabled=True), ]) page.save()
def get_form_items(txt: Optional[str]): return [ ui.textbox(name='text', label='English', multiline=True, trigger=True), ui.label('Pig Latin'), ui.text(to_pig_latin(txt)), ]