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)),
]
