async def serve(q: Q): if not q.client.initialized: q.page['example'] = ui.form_card( box='1 1 4 10', items=[ ui.text_xl(content='First text'), ui.text_l(content='Second text'), ui.text_m(content='Third text'), ui.text_s(content='Fourth text'), ui.inline([ ui.button(name='left1', label='Left1'), ui.button(name='left2', label='Left2'), ui.button(name='left3', label='Left3'), ]), ui.buttons(justify='end', items=[ ui.button(name='right1', label='Right1'), ui.button(name='right2', label='Right2'), ui.button(name='right3', label='Right3'), ]), ui.buttons(items=[ ui.button(name='show', label='Show'), ui.button(name='hide', label='Hide') ]) ]) q.client.initialized = True items = q.page['example'].items items_to_hide = [ items[0].text_xl, items[2].text_m, items[4].inline.items[0].button, items[5].buttons.items[2].button, ] if q.args.hide: for i in items_to_hide: i.visible = False if q.args.show: for i in items_to_hide: i.visible = True await q.page.save()
async def show_cyan_dashboard(q: Q): q.page['meta'] = ui.meta_card(box='', layouts=[ ui.layout( breakpoint='xl', width='1200px', zones=[ ui.zone('header', size='0'), ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('content', size='75%', zones=[ ui.zone('top', size='600px'), ui.zone('middle', size='300px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('middle_left'), ui.zone('middle_right'), ]), ui.zone('bottom', size='500px'), ]), ui.zone('sidebar', size='25%'), ]), ui.zone('footer', size='0'), ] ) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Cyan Dashboard', nav=global_nav) q.page['section'] = ui.section_card( box=ui.box('top', order=1, size=0), title=next(sample_title), subtitle=next(sample_caption), items=[ ui.toggle(name='when', label=next(sample_term), value=False), ui.toggle(name='what', label=next(sample_term), value=True), ] ) trend_date = generate_time_series(300) trend_price = generate_random_walk(2000, 8000, 0.2) q.page['sales_overview'] = ui.form_card( box=ui.box('top', order=2), title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent), caption=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_dollars), caption=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_amount), caption=next(sample_percent)), ui.stat(label=next(sample_term), caption=next(sample_caption)), ], inset=True), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', color='$cyan'), ]), data=data( fields=['date', 'price'], rows=[(next(trend_date), next(trend_price)) for i in range(120)], pack=True ), height='350px', ), ], ) q.page['ticket_sales'] = ui.form_card( box=ui.box('middle_left'), title=next(sample_title), items=[ ui.visualization( plot=ui.plot([ ui.mark(type='interval', x_scale='time', x='=date', y='=price', color='$cyan'), ]), data=data( fields=['date', 'price'], rows=[(next(trend_date), next(trend_price)) for i in range(120)], pack=True ), height='150px', ), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent)) for i in range(4) ], justify='between', inset=True), ], ) q.page['events_hosted'] = ui.wide_bar_stat_card( box=ui.box('middle_right', order=1), title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_percent), progress=random.random(), plot_color='$cyan', ) q.page['points_earned'] = ui.wide_bar_stat_card( box=ui.box('middle_right', order=2), title=next(sample_title), value=next(sample_amount), aux_value=next(sample_percent), progress=random.random(), plot_color='$cyan', ) q.page['points_given'] = ui.wide_bar_stat_card( box=ui.box('middle_right', order=3), title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_percent), progress=random.random(), plot_color='$cyan', ) session_count = generate_random_walk(1000, 8000) q.page['event_poll'] = ui.form_card( box='bottom', title=next(sample_title), items=[ ui.inline(items=[ ui.dropdown(name='region', label=next(sample_term), value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='age', label=next(sample_term), value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='response', label=next(sample_term), value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ]), ui.visualization( plot=ui.plot([ ui.mark(type='interval', x='=sessions', y='=channel', y_min=0, color='$cyan') ]), data=data( fields=['channel', 'sessions'], rows=[(next(sample_term), next(session_count)) for i in range(10)], pack=True, ), height='350px', ), ], ) q.page['sidebar_section'] = ui.section_card( box=ui.box('sidebar', order=1, size='0'), title=next(sample_title), subtitle=next(sample_caption), ) q.page['filter'] = ui.form_card( box=ui.box('sidebar', height='335px', order=2), title=next(sample_title), items=[ ui.dropdown(name='region', label=next(sample_term), value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='age', label=next(sample_term), value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='response', label=next(sample_term), value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.checkbox(name='plural', label=next(sample_title), value=True), ui.checkbox(name='annual', label=next(sample_title), value=True), ], ) event_icon = generate_random_choice(['MusicInCollection', 'Video', 'TVMonitor']) q.page['upcoming_events'] = ui.stat_list_card( box=ui.box('sidebar', order=3), title=next(sample_title), subtitle=next(sample_caption), items=[ui.stat_list_item(label=next(sample_title), caption=next(sample_caption), aux_value=f'{random.randint(1, 59)}m', icon=next(event_icon)) for i in range(10)], ) q.page['footer'] = ui.footer_card(box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
'example', ui.profile_card( box='1 1 3 5', image= 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260', # noqa persona=ui.persona(title='John Doe', subtitle='Data Scientist', image=image), items=[ ui.inline(justify='center', items=[ ui.mini_buttons([ ui.mini_button(name='upload', label='Upload', icon='Upload'), ui.mini_button(name='share', label='Share', icon='Share'), ui.mini_button(name='download', label='Download', icon='Download'), ]) ]), ui.inline(justify='center', items=[ ui.button(name='btn1', label='Button 1'), ui.button(name='btn2', label='Button 2'), ui.button(name='btn3', label='Button 3'), ]), ])) page.save()
async def serve(q: Q): if '#' in q.args and not q.args.show_nav: hash_ = q.args['#'] q.page.drop() q.page['redirect'] = ui.form_card(box='1 1 2 5', items=[ ui.text(f'#={hash_}'), ui.button(name='show_nav', label='Back', primary=True), ]) else: q.page['meta'] = ui.meta_card(box='', redirect='#') q.page['nav1'] = ui.nav_card( box='1 1 2 -1', value='#menu/spam', title='H2O Wave', subtitle='And now for something completely different!', image= 'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg', items=[ ui.nav_group('Menu', items=[ ui.nav_item(name='#menu/spam', label='Spam'), ui.nav_item(name='#menu/ham', label='Ham'), ui.nav_item(name='#menu/eggs', label='Eggs'), ui.nav_item(name='#menu/toast', label='Toast', disabled=True), ]), ui.nav_group('Help', items=[ ui.nav_item(name='#about', label='About', icon='Info'), ui.nav_item(name='#support', label='Support', icon='Help'), ]) ], secondary_items=[ ui.inline(items=[ ui.persona(title='John Doe', subtitle='Software developer', size='s', image=persona), ui.menu(items=[ ui.command( name='profile', label='Profile', icon='Contact'), ui.command(name='preferences', label='Preferences', icon='Settings'), ui.command( name='logout', label='Logout', icon='SignOut'), ]) ]), ], ) q.page['nav2'] = ui.nav_card( box='3 1 2 -1', value='#menu/ham', persona=ui.persona(title='John Doe', subtitle='Data Scientist', caption='Online', size='xl', image=persona), items=[ ui.nav_group('Menu', items=[ ui.nav_item(name='#menu/spam', label='Spam'), ui.nav_item(name='#menu/ham', label='Ham'), ui.nav_item(name='#menu/eggs', label='Eggs'), ui.nav_item(name='#menu/toast', label='Toast', disabled=True), ]), ui.nav_group('Help', items=[ ui.nav_item(name='#about', label='About', icon='Info'), ui.nav_item(name='#support', label='Support', icon='Help'), ]) ], secondary_items=[ ui.button(name='logout', label='Logout', width='100%') ], color='primary') await q.page.save()
async def show_mint_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xl', width='1200px', zones=[ ui.zone('header'), ui.zone('main_section'), ui.zone('overview', direction=ui.ZoneDirection.ROW, size='425px'), ui.zone('tickers', direction=ui.ZoneDirection.ROW, size='175px'), ui.zone('transactions_section'), ui.zone('transactions', direction=ui.ZoneDirection.ROW, size='400px'), ui.zone('footer'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Mint Dashboard', nav=global_nav) q.page['main_section'] = ui.section_card( box='main_section', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.tabs( name='currency', value='option0', items=[ ui.tab(name=f'option{i}', label=next(sample_term)) for i in range(4) ], ) ], ) trend_date = generate_time_series(60) trend_price = generate_random_walk(2000, 8000, 0.2) q.page['trends'] = ui.form_card( box=ui.box('overview', order=1, size=4), title=next(sample_title), items=[ ui.inline(inset=True, items=[ ui.checkbox(name='sent', label=next(sample_term), value=True), ui.checkbox(name='received', label=next(sample_term)), ui.dropdown(name='distribution', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ]), ui.visualization( plot=ui.plot([ ui.mark(type='line', x_scale='time', x='=date', y='=price', color='$mint', curve=ui.MarkCurve.STEP), ]), data=data(fields=['date', 'price'], rows=[(next(trend_date), next(trend_price)) for i in range(60)], pack=True), height='215px', ), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent)), 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_percent)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ], justify='between', inset=True), ]) stock_dates = generate_time_series(300) stock_prices = generate_random_walk() q.page['exchange_rate'] = ui.tall_series_stat_card( box=ui.box('overview', order=2), title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_amount), plot_type=ui.TallSeriesStatCardPlotType.AREA, plot_color='$mint', plot_category='date', plot_value='price', plot_curve=ui.TallSeriesStatCardPlotCurve.STEP, plot_zero_value=0, plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['symbol1'] = ui.tall_series_stat_card( box=ui.box('tickers', order=1), title=next(sample_title), value=next(sample_amount), aux_value=next(sample_percent), plot_type=ui.TallSeriesStatCardPlotType.AREA, plot_color='$mint', plot_category='date', plot_value='price', plot_curve=ui.TallSeriesStatCardPlotCurve.STEP, plot_zero_value=0, plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['symbol2'] = ui.tall_series_stat_card( box=ui.box('tickers', order=2), title=next(sample_title), value=next(sample_percent), aux_value=next(sample_title), plot_type=ui.TallSeriesStatCardPlotType.AREA, plot_color='$green', plot_category='date', plot_value='price', plot_curve=ui.TallSeriesStatCardPlotCurve.STEP, plot_zero_value=0, plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['symbol3'] = ui.tall_series_stat_card( box=ui.box('tickers', order=3), title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_percent), plot_type=ui.TallSeriesStatCardPlotType.AREA, plot_color='$mint', plot_category='date', plot_value='price', plot_curve=ui.TallSeriesStatCardPlotCurve.STEP, plot_zero_value=0, plot_data=data( fields=['date', 'price'], rows=[(next(stock_dates), next(stock_prices)) for i in range(30)], pack=True, ), ) q.page['transactions_section'] = ui.section_card( box='transactions_section', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.tabs( name='time_period', value='option0', items=[ ui.tab(name=f'option{i}', label=next(sample_term)) for i in range(6) ], link=True, ), ], ) q.page['transactions'] = ui.stat_table_card( box=ui.box('transactions', order=1, size=2), title=next(sample_title), subtitle=next(sample_caption), columns=[next(sample_term) for i in range(4)], items=[ ui.stat_table_item(label=next(sample_title), caption=f'{random.randint(1, 5)} hours ago', values=[ next(sample_percent), next(sample_amount), next(sample_dollars) ], icon=next(sample_icon), icon_color='$mint') for i in range(6) ]) q.page['market'] = ui.stat_list_card( box=ui.box('transactions', order=2), title=next(sample_title), subtitle=next(sample_caption), items=[ ui.stat_list_item(label=next(sample_term), caption=next(sample_title), value=next(sample_dollars), aux_value=next(sample_percent), value_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()
ui.inline(justify='end', items=[ ui.links(label='First Column', width='200px', items=[ ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ]), ui.links(label='Second Column', width='200px', items=[ ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ]), ui.links(label='Third Column', width='200px', items=[ ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ui.link(label='Sample link', path='https://www.h2o.ai/', target='_blank'), ]), ]),
async def render(self, q: Q): """ Render card in Wave. Args: q: Wave server """ card = ui.form_card(box=self.box, items=[ ui.toggle(name='split_sentences', label='Split Sentences', value=self.split_sentences, trigger=True), ui.toggle(name='fine_grained', label='Fine Grained', value=self.fine_grained, trigger=True), ui.toggle(name='add_lemma', label='Add Lemma', value=self.add_lemma, trigger=True), ui.toggle(name='collapse_punct', label='Merge Punctuation', value=self.collapse_punct, trigger=True), ui.toggle(name='collapse_phrases', label='Merge Phrases', value=self.collapse_phrases, trigger=True), ui.toggle(name='compact', label='Make Compact', value=self.compact, trigger=True), ui.inline(items=[ ui.textbox(name='color', label='Visualizer Color', value=self.color, trigger=True), ui.textbox(name='bg', label='Background Color', value=self.bg, trigger=True) ]), ui.inline(items=[ ui.textbox(name='font', label='Font', value=self.font, trigger=True), ui.textbox(name='offset_x', label='Offset-X', value=str(self.offset_x), trigger=True) ]), ui.inline(items=[ ui.textbox(name='arrow_stroke', label='Arrow Stroke', value=str(self.arrow_stroke), suffix='px', trigger=True), ui.textbox(name='arrow_width', label='Arrow Width', value=str(self.arrow_width), suffix='px', trigger=True), ui.textbox(name='arrow_spacing', label='Arrow Spacing', value=str(self.arrow_spacing), suffix='px', trigger=True) ]), ui.inline(items=[ ui.textbox(name='word_spacing', label='Word Spacing', value=str(self.word_spacing), suffix='px', trigger=True), ui.textbox(name='word_distance', label='Word Distance', value=str(self.word_distance), suffix='px', trigger=True) ]) ], title=self.title, commands=self.commands) q.page[self.name] = card
icon='Mail'), ui.command(name='calendar', label='Calendar Event', icon='Calendar'), ]), ui.command(name='upload', label='Upload', icon='Upload'), ui.command(name='share', label='Share', icon='Share'), ui.command(name='download', label='Download', icon='Download'), ], items=[ ui.inline(justify='end', items=[ ui.mini_buttons([ ui.mini_button(name='like', label='4', icon='Heart'), ui.mini_button(name='comment', label='2', icon='Comment'), ui.mini_button(name='share', label='1', icon='Share'), ]), ]), ui.buttons(items=[ ui.button(name='like', label='Like'), ui.button(name='comment', label='Comment'), ui.button(name='share', label='Share'), ]), ], caption=''' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia aliquam maxime quos facere necessitatibus tempore eum odio, qui illum. Repellat modi dolor facilis odio ex possimus ''',
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()