def init(q: Q): q.page.drop() q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('title', size='80px'), ui.zone('menu', size='80px'), ui.zone('risk_table'), ]), ui.layout(breakpoint='m', width='1920px', zones=[ ui.zone('header', size='80px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('title', size='400px'), ui.zone('menu'), ]), ui.zone('risk_table', direction=ui.ZoneDirection.ROW, size='800px'), ]) ]) render_header(q)
def init_client(q: Q): q.client.initialized = True q.page['meta'] = ui.meta_card( box='', title='Credit Risk', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('header'), ui.zone('customer_table'), ui.zone('customer_page', zones=[ ui.zone('customer_risk_explanation'), ui.zone('customer_shap_plot'), ui.zone('button_group'), ui.zone('customer_features'), ]) ]), ui.layout(breakpoint='m', zones=[ ui.zone('header'), ui.zone('customer_table'), ui.zone( 'customer_page', direction=ui.ZoneDirection.ROW, zones=[ ui.zone( 'content', zones=[ ui.zone('customer_risk_explanation'), ui.zone('customer_shap_plot'), ui.zone('button_group'), ]), ui.zone('customer_features', size='300px'), ]) ]) ]) q.page['header'] = ui.header_card( box='header', title='Credit Card Risk', subtitle='Review customer ability to pay credit card bills', icon='PaymentCard', nav=[ ui.nav_group('Navigation', items=[ ui.nav_item(name='render_customer_selector', label='Customers'), ]), ui.nav_group('Options', items=[ ui.nav_item(name='dark_mode', label='Dark Mode'), ui.nav_item(name='light_mode', label='Light Mode'), ]) ])
def init(q: Q): q.page['meta'] = ui.meta_card( box='', title='Explain Ratings', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('header'), ui.zone('body', direction=ui.ZoneDirection.ROW, size='calc(100vh - 70px)', zones=[ ui.zone('sidebar', size='350px'), ui.zone('content', direction=ui.ZoneDirection.ROW) ]) ]), ]) q.page['header'] = ui.header_card(box='header', title='Hotel Reviews', subtitle='Explains the hotel reviews', icon='ReviewSolid', icon_color='#00A8E0') q.client.review = config.review_column_list[0] form_filters = [] for column in config.filterable_columns: choices = [ui.choice(name='empty', label='All')] + [ ui.choice(name=str(column), label=str(column)) for column in config.dataset[column].drop_duplicates() ] form_filters.append( ui.dropdown(name=f'filter_{column}', label=config.column_mapping[column], trigger=True, value='empty', choices=choices)) sidebar_items = [ ui.dropdown(name='review', label='Review type', value=q.client.review, trigger=True, choices=[ ui.choice(name=column, label=config.column_mapping[column]) for column in config.dataset[config.review_column_list] ]), ui.separator('Filters') ] + form_filters q.page['sidebar'] = ui.form_card(box='sidebar', items=sidebar_items) q.page['original'] = ui.image_card(box='content', title='Original', type='png', image=plot_word_cloud( config.dataset[q.client.review], q))
def init(q: Q): q.client.primary_color = '$blue' q.client.secondary_color = '$cyan' q.client.tertiary_color = '$azure' q.page['meta'] = ui.meta_card( box='', title='Telco Churn Analytics', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('header'), ui.zone('title'), ui.zone('content', zones=[ ui.zone('code'), ui.zone('top', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('top-plot', size='70%'), ui.zone('top-stats') ]), ui.zone('middle', direction=ui.ZoneDirection.ROW), ]) ]) ]) q.page['header'] = ui.header_card( box='header', title='Telecom Churn Analytics', subtitle='EDA & Churn Modeling with AutoML & Wave', nav=[ ui.nav_group('Main Menu', items=[ ui.nav_item(name='analysis', label='Analysis'), ui.nav_item(name='code', label='Application Code'), ]) ]) q.page['title'] = ui.section_card( box='title', title='Customer profiles from model predictions', subtitle='Customer: No customer chosen', items=[ # TODO: Replace with dropdown after https://github.com/h2oai/wave/pull/303 merged. ui.picker(name='customers', label='Customer Phone Number', choices=[ ui.choice(name=str(phone), label=str(phone)) for phone in df['Phone'] ], max_choices=1, trigger=True), ui.toggle(name='theme', label='Dark Theme', trigger=True) ])
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 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 initialize_app(q: Q): # Setup UI elements on the page q.page['meta'] = ui.meta_card( box='', title='H2O Wave - Sales Forecasting', layouts=[ ui.layout( breakpoint='xs', zones=[ ui.zone('header'), # vh means viewport height, 70px accounts for header and spacing between cards. ui.zone('body', size='calc(100vh - 70px)', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('sidebar', size='350px'), ui.zone('content'), ]), ]), ]) q.page['title'] = ui.header_card( box='header', title='Sales Forecasting', subtitle= 'Exploring historic demand and forecasts for supply chain optimization', icon='GiftBox', icon_color='#ffe600', ) # Create default UserInputs and SalesData q.app.user_inputs = UserInputs() q.app.user_inputs.reset() q.app.sales_data = SalesData(walmart_train, walmart_predictions) plot_data = q.app.sales_data.get_plot_data(**asdict(q.app.user_inputs)) q.page['sidebar'] = ui.form_card(box='sidebar', items=get_user_input_items( q.app.sales_data, q.app.user_inputs)) await draw_weekly_sales_plot(q, plot_data)
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()
async def serve(q: Q): if not q.client.initialized: q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone(name='title'), ui.zone(name='plots', direction=ui.ZoneDirection.ROW, wrap='start', justify='center'), ]), ui.layout(breakpoint='m', zones=[ ui.zone(name='title'), ui.zone(name='plots', direction=ui.ZoneDirection.ROW, wrap='start', justify='center'), ]), ui.layout(breakpoint='xl', zones=[ ui.zone(name='title'), ui.zone(name='plots', direction=ui.ZoneDirection.ROW, wrap='start', justify='center'), ]), ]) q.client.active_theme = 'default' q.page['title'] = ui.section_card( box='title', title='Plot theme demo', subtitle='Toggle theme to see default plot colors change!', items=[ ui.toggle(name='toggle_theme', label='Dark theme', trigger=True) ], ) v = q.page.add( 'point-sized', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Point, sized', data=data('price performance discount', n), plot=ui.plot([ ui.mark(type='point', x='=price', y='=performance', size='=discount') ]))) v.data = [(x, y, random.randint(1, 10)) for x, y in [f_scat.next() for _ in range(n)]] v = q.page.add( 'point-shapes', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Point, shapes', data=data('product price performance', n * 2), plot=ui.plot([ ui.mark(type='point', x='=price', y='=performance', shape='=product', shape_range='circle square') ]))) v.data = [ ('G1', x, y) for x, y in [f_scat.next() for _ in range(n)] ] + [('G2', x, y) for x, y in [f_scat.next() for _ in range(n)]] k1, k2 = 20, 10 v = q.page.add( 'poit-size', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Points, size-encoded', data=data('country product profit', k1 * k2), plot=ui.plot([ ui.mark(type='point', x='=country', y='=product', size='=profit', shape='circle') ]))) rows = [] for i in range(k1): for j in range(k2): x = f.next() rows.append((f'A{i + 1}', f'B{j + 1}', x)) v.data = rows v = q.page.add( 'area', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area', data=data('date price', n), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0) ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] v = q.page.add( 'area-line', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area + Line', data=data('date price', n), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0), ui.mark(type='line', x='=date', y='=price') ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] v = q.page.add( 'area-line-smooth', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area + Line, smooth', data=data('date price', n), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0), ui.mark(type='line', x='=date', y='=price', curve='smooth') ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] v = q.page.add( 'area-line-groups', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area + Line, groups', data=data('product date price', n * 5), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0), ui.mark(type='line', x='=date', y='=price', color='=product') ]))) v.data = [(g, t, x) for x in [f_multi.next() for _ in range(n)] for g, t, x, dx in x] v = q.page.add( 'area-groups', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area, groups', data=data('product date price', n * 5), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0) ]))) v.data = [(g, t, x) for x in [f_multi.next() for _ in range(n)] for g, t, x, dx in x] v = q.page.add( 'area-stacked', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area, stacked', data=data('product date price', n * 5), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', stack='auto', y_min=0) ]))) v.data = [(g, t, x) for x in [f_multi.next() for _ in range(n)] for g, t, x, dx in x] f_negative = FakeTimeSeries(min=-50, max=50, start=0) v = q.page.add( 'area-negative-values', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area, negative values', data=data('date price', n), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price') ]))) v.data = [(t, x) for t, x, dx in [f_negative.next() for _ in range(n)]] v = q.page.add( 'area-range', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area, range', data=data('date low high', n), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y0='=low', y='=high') ]))) v.data = [(t, x - random.randint(3, 8), x + random.randint(3, 8)) for t, x, dx in [f.next() for _ in range(n)]] v = q.page.add( 'area-smooth', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Area, smooth', data=data('date price', n), plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0) ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] v = q.page.add( 'example', ui.plot_card( box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Label Customization', data=data('product price', n), plot=ui.plot([ ui.mark( type='interval', x='=product', y= '=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', y_min=0, label= '=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', label_offset=0, label_position='middle', label_rotation='-90', label_fill_color='#fff', label_font_weight='bold') ]))) v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]] v = q.page.add( 'interval', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Interval', data=data('product price', n), plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', y_min=0) ]))) v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]] v = q.page.add( 'interval-annotation', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Categorical-Numeric', data=data('product price', n), plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', y_min=0, y_max=100), ui.mark(x='C20', y=80, label='point'), ui.mark(x='C23', label='vertical line'), ui.mark(y=40, label='horizontal line'), ui.mark(x='C26', x0='C23', label='vertical region'), ui.mark(y=70, y0=60, label='horizontal region') ]))) v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]] v = q.page.add( 'histogram', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Histogram', data=data('lo hi price', n), plot=ui.plot([ ui.mark(type='interval', y='=price', x1='=lo', x2='=hi', y_min=0) ]))) v.data = [(i * 10, i * 10 + 10, x) for i, (c, x, dx) in enumerate([f_cat.next() for _ in range(n)])] v = q.page.add( 'interval-range', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Histogram', data=data('lo hi price', n), plot=ui.plot([ ui.mark(type='interval', y='=price', x1='=lo', x2='=hi', y_min=0) ]))) v.data = [(i * 10, i * 10 + 10, x) for i, (c, x, dx) in enumerate([f_cat.next() for _ in range(n)])] v = q.page.add( 'interval-range', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='35%'), ), title='Interval, range', data=data('product low high', 3), plot=ui.plot([ ui.mark(type='interval', x='=product', y0='=low', y='=high') ]))) v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, _ in [f.next() for _ in range(3)]] v = q.page.add( 'interval-transpose', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='29%'), ), title='Categorical-Numeric', data=data('product price', 20), plot=ui.plot([ ui.mark(type='interval', y='=product', x='=price', x_min=0, x_max=100), ]))) v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(20)]] v = q.page.add( 'intervals-theta-stacked', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Intervals, theta, stacked', data=data('country product price', n * k), plot=ui.plot([ ui.mark(coord='theta', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0) ]))) v.data = [(g, t, x) for x in [f_cat_multi.next() for _ in range(n)] for g, t, x, dx in x] v = q.page.add( 'interval-helix', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Interval, helix', data=data('product price', 60), plot=ui.plot([ ui.mark(coord='helix', type='interval', x='=product', y='=price', y_min=0) ]))) v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(60)]] v = q.page.add( 'interval-polar', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Interval, polar', data=data('product price', n), plot=ui.plot([ ui.mark(coord='polar', type='interval', x='=product', y='=price', y_min=0) ]))) v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]] v = q.page.add( 'intervals-groups', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Intervals, groups', data=data('country product price', n * k), plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', color='=country', dodge='auto', y_min=0) ]))) v.data = [(g, t, x) for x in [f_cat_multi.next() for _ in range(n)] for g, t, x, dx in x] v = q.page.add( 'intervals-stacked', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Intervals, stacked', data=data('country product price', n * k), plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0) ]))) v.data = [(g, t, x) for x in [f_cat_multi.next() for _ in range(n)] for g, t, x, dx in x] v = q.page.add( 'point-annotation', ui.plot_card( box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Numeric-Numeric', data=data('price performance', n), plot=ui.plot([ ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot ui.mark(x=50, y=50, label='point'), # A single reference point ui.mark(x=40, label='vertical line'), ui.mark(y=40, label='horizontal line'), ui.mark(x=70, x0=60, label='vertical region'), ui.mark(y=70, y0=60, label='horizontal region'), ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region') ]))) v.data = [f_scat.next() for _ in range(n)] v = q.page.add( 'path', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Path', data=data('profit sales', n), plot=ui.plot( [ui.mark(type='path', x='=profit', y='=sales')]))) v.data = [(x, y) for x, y in [f_scat.next() for _ in range(n)]] v = q.page.add( 'step', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Line, step', data=data('date price', n), plot=ui.plot([ ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step', y_min=0) ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] v = q.page.add( 'line-annotation', ui.plot_card(box=ui.boxes( ui.box('plots', width='100%'), ui.box('plots', width='48%'), ui.box('plots', width='32%'), ), title='Time-Numeric', data=data('date price', n), plot=ui.plot([ ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, y_max=100), ui.mark(x=50, y=50, label='point'), ui.mark(x='2010-05-15T19:59:21.000000Z', label='vertical line'), ui.mark(y=40, label='horizontal line'), ui.mark(x='2010-05-24T19:59:21.000000Z', x0='2010-05-20T19:59:21.000000Z', label='vertical region'), ui.mark(y=70, y0=60, label='horizontal region'), ui.mark(x='2010-05-10T19:59:21.000000Z', x0='2010-05-05T19:59:21.000000Z', y=30, y0=20, label='rectangular region') ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] q.client.initialized = True if q.args.toggle_theme is not None: q.client.active_theme = 'neon' if q.args.toggle_theme else 'default' q.page['meta'].theme = q.client.active_theme q.page['title'].items[0].toggle.value = q.client.active_theme == 'neon' await q.page.save()
def create_main_ui(q: Q): logger.debug("Creating page layout") q.page["meta"] = ui.meta_card( box="", title="Conifer Counter", theme="light", layouts=[ ui.layout( breakpoint="xs", zones=[ ui.zone("header"), ui.zone("title"), ui.zone("body"), ui.zone("footer"), ], ), ui.layout( breakpoint="m", zones=[ ui.zone("header"), ui.zone("title"), ui.zone( "body", direction=ui.ZoneDirection.COLUMN, zones=[ ui.zone("top", direction=ui.ZoneDirection.ROW), ui.zone("middle", direction=ui.ZoneDirection.ROW), ui.zone("bottom", direction=ui.ZoneDirection.ROW), ], ), ui.zone("footer"), ], ), ui.layout( breakpoint="xl", width="1200px", zones=[ ui.zone("header"), ui.zone("title"), ui.zone( "body", direction=ui.ZoneDirection.COLUMN, zones=[ ui.zone("top", direction=ui.ZoneDirection.ROW), ui.zone("bottom", direction=ui.ZoneDirection.ROW), ], ), ui.zone("footer"), ], ), ], ) q.page["header"] = ui.header_card( box="header", title="Conifer Counter", subtitle="Counting the trees you sees!", icon="Street", icon_color="green", commands=[ui.command(name="change_mode", label="Dark Mode")], ) q.page["title"] = ui.section_card( box="title", title=f"Total trees this session: {q.client.trees.get_total_trees()}", subtitle="", items=[ ui.button(name="view_historic_counts", label="View Past Sessions"), ui.button(name="view_counts", label="Refresh Counts"), ui.button( name="save_counts", label="End Session", tooltip="Save this session's counts and reset to 0.", ), ], ) q.page["footer"] = ui.footer_card( box="footer", caption= "Made with 💛️ using [Wave](https://h2oai.github.io/wave/) by [@mtanco](https://github.com/mtanco)", )
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()
# Place Vegalite plots in a flexible layout. # --- from h2o_wave import site, ui, data page = site['/demo'] page.drop() page['meta'] = ui.meta_card(box='', layouts=[ ui.layout( breakpoint='xs', width='100%', zones=[ ui.zone('top', size='300px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('top_left', size='75%'), ui.zone('top_right', size='1'), ]), ui.zone('bottom', size='500px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('bottom_left', size='1'), ui.zone('bottom_center', size='2'), ui.zone('bottom_right', size='3'), ]), ] ) ]) plot_spec = ''' { "description": "A simple bar plot with embedded data.", "mark": "bar", "encoding": { "x": {"field": "a", "type": "ordinal"},
def show_form(q: Q): q.page["meta"] = ui.meta_card( box="", title="Tennis Match Prediction", refresh=1, layouts=[ ui.layout( breakpoint="xs", width="1200px", zones=[ ui.zone("header"), ui.zone("tournament"), ui.zone( "players", direction=ui.ZoneDirection.ROW, zones=[ ui.zone("player1", size="50%"), ui.zone("player2", size="50%"), ], ), ui.zone("submit", size="50%"), ui.zone("result", size="50%"), ], ) ], ) q.page["header"] = ui.header_card( box="header", title="Tennis Match Prediction", subtitle="" ) q.page["tournament"] = ui.form_card( box="tournament", items=[ # Tournament name ui.dropdown( name="t_name", label="Tournament Name", placeholder="Wimbledon", choices=[ ui.choice(name=t_name, label=t_name) for t_name in tourn_ids.keys() ], trigger=False, ), # Round ui.dropdown( name="t_round", label="Round", placeholder="Final", choices=[ ui.choice(name=t_round, label=t_round) for t_round in round_list ], trigger=False, ), ], ) q.page["p1"] = ui.form_card( box="player1", items=[ ui.text_l("Player 1"), ui.dropdown( name="p1_name", label="Name", placeholder="Roger Federer", choices=[ ui.choice(name=p_name, label=p_name) for p_name in player_ids.keys() ], trigger=False, ), ui.textbox(name="p1_rank", label="Rank"), ui.textbox(name="p1_age", label="Age"), ], ) q.page["player2"] = ui.form_card( box="player2", items=[ ui.text_l("Player 2"), ui.dropdown( name="p2_name", label="Name", placeholder="Rafael Nadal", choices=[ ui.choice(name=p_name, label=p_name) for p_name in player_ids.keys() ], trigger=False, ), ui.textbox(name="p2_rank", label="Rank"), ui.textbox(name="p2_age", label="Age"), ], ) q.page["submit"] = ui.form_card( box="submit", items=[ ui.buttons( items=[ui.button(name="submit", label="Submit", primary=True)], justify="center", ) ], ) result_str = "" if not q.client.result_str else q.client.result_str q.page["result"] = ui.markdown_card( box="result", title="Results", content=result_str, )
async def show_blue_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xl', width='1200px', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('top', direction=ui.ZoneDirection.ROW, size='200px'), ui.zone('middle', direction=ui.ZoneDirection.ROW, size='385px'), ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='385px'), ui.zone('footer', size='50px'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Blue Dashboard', nav=global_nav) q.page['title'] = ui.section_card( box='title', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.toggle(name='search', label=next(sample_term), value=True), ui.dropdown(name='distribution', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.date_picker(name='target_date', label='', value='2020-12-25'), ], ) sales_dates = generate_time_series(1000) sales_values = generate_random_walk() q.page['total_quantity'] = ui.tall_series_stat_card( box=ui.box('top', order=1), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_title), plot_type='area', plot_color='$blue', plot_category='date', plot_value='quantity', plot_zero_value=0, plot_data=data( fields=['date', 'quantity'], rows=[(next(sales_dates), next(sales_values)) for i in range(30)], pack=True, ), ) q.page['total_cost'] = ui.tall_series_stat_card( box=ui.box('top', order=2), title=next(sample_term), value=next(sample_amount), aux_value=next(sample_percent), plot_type='area', plot_color='$blue', plot_category='date', plot_value='cost', plot_zero_value=0, plot_data=data( fields=['date', 'cost'], rows=[(next(sales_dates), next(sales_values)) for i in range(30)], pack=True, ), ) q.page['total_revenue'] = ui.tall_series_stat_card( box=ui.box('top', order=3), title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_title), plot_type='area', plot_color='$blue', plot_category='date', plot_value='revenue', plot_zero_value=0, plot_data=data( fields=['date', 'revenue'], rows=[(next(sales_dates), next(sales_values)) for i in range(30)], pack=True, ), ) q.page['total_profit'] = ui.tall_series_stat_card( box=ui.box('top', order=4), title=next(sample_term), value=next(sample_amount), aux_value=next(sample_title), plot_type='area', plot_color='$blue', plot_category='date', plot_value='profit', plot_zero_value=0, plot_data=data( fields=['date', 'profit'], rows=[(next(sales_dates), next(sales_values)) for i in range(30)], pack=True, ), ) ytd_revenue = generate_random_walk(0, 10000, 0.5) q.page['revenue_by_customer'] = ui.plot_card( box='middle', title=next(sample_title), data=data( fields=['channel', 'sessions'], rows=[(next(sample_term), next(ytd_revenue)) for i in range(10)], pack=True, ), plot=ui.plot([ ui.mark(type='interval', x='=sessions', y='=channel', y_min=0, color='$blue') ])) months = generate_sequence(['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']) q.page['ytd_revenue'] = ui.plot_card( box=ui.box(zone='middle', width='66%', order=2), title=next(sample_title), data=data(fields=['month', 'channel', 'revenue'], rows=[(next(months), 'Online', next(ytd_revenue)) for i in range(6)] + [(next(months), 'In-store', next(ytd_revenue)) for i in range(6)], pack=True), plot=ui.plot([ ui.mark(type='interval', x='=month', y='=revenue', color='=channel', dodge='auto', y_min=0, color_range='$cyan $blue') ])) q.page['top_products'] = ui.stat_list_card( box='bottom', 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), icon=next(sample_icon), icon_color=next(sample_color)) for i in range(5) ], ) q.page['recent_earnings'] = ui.stat_table_card( box=ui.box(zone='bottom', width='66%', order=2), title=next(sample_title), subtitle=next(sample_caption), columns=['Date', 'Sales', 'Earnings', 'Taxes'], items=[ ui.stat_table_item(label=next(sample_title), values=[ next(sample_dollars), next(sample_percent), next(sample_amount) ]) for i in range(8) ]) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
def home_content(q: Q): # The meta card's 'zones' attribute defines placeholder zones to lay out cards for different viewport sizes. # We define four layout schemes here. q.page['twitter_app'] = ui.meta_card( box='', layouts=[ ui.layout( # If the viewport width >= 0: breakpoint='xs', width='400px', zones=[ # 80px high header ui.zone('header', size='80px'), ui.zone( 'search_bar', direction=ui.ZoneDirection.ROW, size=80, zones=[ # 400px wide search_text_area ui.zone('search_text_area', size='400px', direction=ui.ZoneDirection.ROW), ]), ui.zone( 'search_button_area', direction=ui.ZoneDirection.ROW, size=80, zones=[ # 400px wide search_button ui.zone('search_button', size='400px', direction=ui.ZoneDirection.ROW), ]), # Use remaining space for body ui.zone('body', direction=ui.ZoneDirection.COLUMN, size='450px', zones=create_twitter_card_slots(12, 1)), ]), ui.layout( # If the viewport width >= 768: breakpoint='m', width='768px', zones=[ # 80px high header ui.zone('header', size='80px'), ui.zone( 'search_bar', direction=ui.ZoneDirection.ROW, size=80, zones=[ # 600px wide search_text_area ui.zone('search_text_area', size='600px', direction=ui.ZoneDirection.ROW), # 160px wide search_button ui.zone('search_button', size='200px', direction=ui.ZoneDirection.ROW), ]), # Use remaining space for body ui.zone('body', direction=ui.ZoneDirection.COLUMN, size='800px', zones=create_twitter_card_slots(6, 2)) ]), ui.layout( # If the viewport width >= 1200: breakpoint='xl', width='1200px', zones=[ # 80px high header ui.zone('header', size='80px'), ui.zone( 'search_bar', direction=ui.ZoneDirection.ROW, size=80, zones=[ # 1000px wide search_text_area ui.zone('search_text_area', size='1000px', direction=ui.ZoneDirection.ROW), # 215px wide search_button ui.zone('search_button', size='215px', direction=ui.ZoneDirection.ROW), ]), # Use remaining space for body ui.zone('body', direction=ui.ZoneDirection.COLUMN, size='1200px', zones=create_twitter_card_slots(4, 3)) ]), ui.layout( # If the viewport width >= 1600: breakpoint='1600px', width='1600px', zones=[ # 80px high header ui.zone('header', size='80px'), ui.zone( 'search_bar', direction=ui.ZoneDirection.ROW, size=80, zones=[ # 1400px wide search_text_area ui.zone('search_text_area', size='1400px', direction=ui.ZoneDirection.ROW), # 230px wide search_button ui.zone('search_button', size='230px', direction=ui.ZoneDirection.ROW), ]), # Use remaining space for body ui.zone('body', direction=ui.ZoneDirection.COLUMN, size='1600px', zones=create_twitter_card_slots(3, 4)) ]) ]) q.page['header'] = ui.header_card( box='header', title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.color, ) q.page["search_text_area"] = ui.form_card(box=ui.boxes('search_text_area'), items=[ ui.textbox( name='text', label='', placeholder='#h2oai', value=q.args.text, multiline=False, trigger=False) ]) q.page["search_button"] = ui.form_card( box=ui.boxes('search_button'), items=[ui.button(name="search", label="search", primary=True)]) for tweet_count in range(0, config.max_tweet_count): q.page[f'twitter_card_{tweet_count}'] = ui.form_card( box=f'content_{tweet_count}', items=[])
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()
async def responsive_layout(q: Q): if not q.user.columns: q.user.columns = [ ui.table_column(name='Index', label='Index', searchable=True, sortable=True, data_type='number'), ui.table_column(name='Started', label='Started', searchable=True), ui.table_column(name='Ended', label='Ended', searchable=True), ui.table_column(name='Duration', label='Duration (mins)', data_type='number'), ui.table_column(name='Scores', label='Scores', data_type='number'), ] if not q.client.LB_columns: q.client.LB_columns = [ ui.table_column(name='User', label='User', searchable=True, max_width='100px'), ui.table_column(name='Scores', label='Scores', searchable=True, max_width='100px', sortable=True), ] q.page['meta'] = ui.meta_card( box='', title='Streak Counter', layouts=[ ui.layout( # If the viewport width >= 0: breakpoint='xs', zones=[ # 80px high header ui.zone('header', size='80px'), # Use remaining space for content ui.zone('content') ]), ui.layout( # If the viewport width >= 768: breakpoint='m', zones=[ # 80px high header ui.zone('header', size='80px'), # Use remaining space for body ui.zone( 'body', direction=ui.ZoneDirection.ROW, zones=[ # 250px wide sidebar ui.zone('sidebar', size='250px'), # Use remaining space for content ui.zone('content'), ]), ui.zone('footer'), ]), ui.layout( # If the viewport width >= 1200: breakpoint='xl', width='1200px', zones=[ # 80px high header ui.zone('header', size='80px'), # Use remaining space for body ui.zone( 'body', direction=ui.ZoneDirection.ROW, zones=[ # 300px wide sidebar ui.zone('sidebar', size='300px'), # Use remaining space for other widgets ui.zone( 'other', zones=[ # Use one half for charts ui.zone('charts', direction=ui.ZoneDirection.ROW), # Use other half for content ui.zone('content', size='500px'), ]), ]), ui.zone('footer'), ]) ]) q.page['header'] = ui.header_card( # Place card in the header zone, regardless of viewport size. box='header', title='Code Streak Counter', subtitle='Count your programming Streak while staying healthy !!!', ) q.page['LeaderBoard'] = ui.form_card( # If the viewport width >= 0, place in content zone. # If the viewport width >= 768, place in sidebar zone. # If the viewport width >= 1200, place in sidebar zone. box=ui.boxes('content', 'sidebar', 'sidebar'), # title='Leader Board', items=[ ui.text_l(content=f"Hi {q.auth.username.capitalize()}..!"), ui.text_xl( content= f"Your Total Score: {q.user.stop_watch.df['Scores'].sum()}"), ui.table( name='leaderboard', columns=q.client.LB_columns, rows=[ ui.table_row(name=user, cells=[user, str(score)]) for user, score in q.app.lb_dict.items() ], groupable=False, downloadable=True, resettable=False, height='425px', ), ui.link(name='logout', label='Log Out', button=True, path=f'/_logout', target='_current') ], ) q.page['stopwatch'] = ui.form_card( box=ui.boxes( # If the viewport width >= 0, place as second item in content zone. ui.box(zone='content', order=2), # If the viewport width >= 768, place in content zone. 'content', # If the viewport width >= 1200, place as first item in charts zone, use 2 parts of available space. ui.box(zone='charts', order=1, size=2), ), items=[ ui.text_xl( content= f"<h1><center>{str(q.user.stop_watch.minutes).zfill(2)} : {str(q.user.stop_watch.seconds).zfill(2)}</center></h1>" ), ui.text_l(content=f"<center>Lets crack some code!</center>"), ui.buttons([ ui.button(name='start', label='Start', primary=True), ui.button(name='stop', label='Stop', primary=False) ], justify='center') ], ) q.page['UserStreaks'] = ui.markdown_card( box=ui.boxes( # If the viewport width >= 0, place as third item in content zone. ui.box(zone='content', order=3), # If the viewport width >= 768, place as second item in content zone. ui.box(zone='content', order=2), # If the viewport width >= 1200, place as second item in charts zone, use 1 part of available space. ui.box(zone='charts', order=2, size=1), ), title='User Streaks', content="""=Last Streak Started: {{streak_start}} <p data-test='UserStreaks_Last_Ended'>Last Streak Ended: {{streak_end}}</p> <p data-test='UserStreaks_Total_Streaks'>Total Streaks: {{total_streaks}}</p> Total Coding Time: {{total_time}} """, data=dict(streak_start=q.user.stop_watch.last_start, streak_end=q.user.stop_watch.last_stop, total_streaks=q.user.stop_watch.total_streaks, total_time=f"{str(q.user.stop_watch.total_hours).zfill(2)} :\ {str(q.user.stop_watch.total_minutes).zfill(2)} : \ {str(q.user.stop_watch.total_seconds).zfill(2)}")) q.page['history'] = ui.form_card( box=ui.boxes( # If the viewport width >= 0, place as fourth item in content zone. ui.box(zone='content', order=4), # If the viewport width >= 768, place as third item in content zone. ui.box(zone='content', order=3), # If the viewport width >= 1200, place in content zone. 'content'), items=[ ui.table(name='streaks_table', columns=q.user.columns, rows=[ ui.table_row(name=str(row.Index + 1), cells=[ str(row.Index + 1), row.Started, row.Ended, str(row.Duration), str(row.Scores) ]) for row in q.user.stop_watch.df.itertuples() ], groupable=False, downloadable=True, resettable=False, height='425px') ], title='History', ) q.page['footer'] = ui.footer_card(box='footer', caption='(c) 2021 H2O.ai ')
title='WaCy', icon='https://raw.githubusercontent.com/thewaverguy/wacy/main/docs/source/_static/logo/logo_light_250_x_250.svg', layouts=[ ui.layout( breakpoint='xs', zones=[ ui.zone(name='header'), ui.zone(name='main', zones=[ ui.zone(name='input_row', zones=[ ui.zone(name='input_model'), ui.zone(name='input_text') ]), ui.zone(name='entity_row', direction='row', zones=[ ui.zone(name='entity_settings', size='30%'), ui.zone(name='entity_visualizer', size='70%') ]), ui.zone(name='dependency_row', direction='row', zones=[ ui.zone(name='dependency_settings', size='30%'), ui.zone(name='dependency_visualizer', size='70%') ]), ui.zone(name='token_attributes'), ui.zone(name='similarity_row', direction='row', zones=[ ui.zone(name='similarity_settings', size='30%'), ui.zone(name='similarity_visualizer', size='70%') ]), ]), ui.zone(name='footer') ] ) ], theme='light' )
async def show_purple_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout( breakpoint='xs', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('body'), ui.zone('footer', size='50px'), ], ), ui.layout( breakpoint='m', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[ ui.zone( 'main', zones=[ ui.zone('overview', size='0'), ui.zone('stats1', direction=ui.ZoneDirection.ROW, size='150px'), ui.zone('stats2', direction=ui.ZoneDirection.ROW, size='150px'), ui.zone('others'), ]), ui.zone('sidebar', size='30%'), ]), ui.zone('footer', size='50px'), ], ), ui.layout( breakpoint='xl', width='1200px', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('main', size='3', zones=[ ui.zone( 'overview', direction=ui.ZoneDirection.ROW, size='200px'), ui.zone( 'stats', direction=ui.ZoneDirection.ROW, size='150px'), ui.zone( 'details', direction=ui.ZoneDirection.ROW, size='400px'), ui.zone( 'reports', direction=ui.ZoneDirection.ROW, size='400px'), ]), ui.zone('sidebar', size='30%'), ]), ui.zone('footer', size='50px'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Purple Dashboard', nav=global_nav) q.page['title'] = ui.section_card( box='title', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.date_picker(name='target_date', label='', value='2020-12-25'), ], ) customers_overview_dates = generate_time_series(30) customers_overview_counts = generate_random_walk() q.page['customers_overview'] = ui.tall_series_stat_card( box=ui.boxes( ui.box('body', height='200px', order=1), ui.box('overview', height='200px', order=1), ui.box('overview', order=1), ), title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_title), plot_type='area', plot_color='$red', plot_category='date', plot_value='customer_count', plot_zero_value=0, plot_data=data( fields=['date', 'customer_count'], rows=[(next(customers_overview_dates), next(customers_overview_counts)) for i in range(30)], pack=True, ), ) conversions_overview_dates = generate_time_series(30) conversions_overview_counts = generate_random_walk() q.page['conversions_overview'] = ui.tall_series_stat_card( box=ui.boxes( ui.box('body', height='200px', order=2), ui.box('overview', height='200px', order=2), ui.box('overview', order=2), ), title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), plot_type='interval', plot_color='$pink', plot_category='date', plot_value='conversions', plot_zero_value=0, plot_data=data( fields=['date', 'conversions'], rows=[(next(conversions_overview_dates), next(conversions_overview_counts)) for i in range(30)], pack=True, ), ) revenue_overview_dates = generate_time_series(30) revenue_overview_counts = generate_random_walk() q.page['revenue_overview'] = ui.tall_series_stat_card( box=ui.boxes( ui.box('body', height='200px', order=3), ui.box('overview', height='200px', order=3), ui.box('overview', order=3), ), title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), plot_type='area', plot_color='$purple', plot_category='date', plot_value='revenue', plot_zero_value=0, plot_data=data( fields=['date', 'revenue'], rows=[(next(revenue_overview_dates), next(revenue_overview_counts)) for i in range(30)], pack=True, ), ) metric_dates = generate_time_series(30) metric_values = generate_random_walk() q.page['conversion_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=4), ui.box('stats1', order=1), ui.box('stats', order=1), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$red', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['revenue_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=5), ui.box('stats1', order=2), ui.box('stats', order=2), ), title=next(sample_term), value=next(sample_percent), plot_type='interval', plot_color='$pink', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['purchases_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=6), ui.box('stats1', order=3), ui.box('stats', order=3), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$purple', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['transactions_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=7), ui.box('stats2', order=1), ui.box('stats', order=4), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$red', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['order_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=8), ui.box('stats2', order=2), ui.box('stats', order=5), ), title=next(sample_term), value=next(sample_percent), plot_type='interval', plot_color='$pink', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['quantity_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=6), ui.box('stats2', order=3), ui.box('stats', order=6), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$purple', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) sales_days_1 = generate_time_series(15) sales_days_2 = generate_time_series(15) sales_amounts_1 = generate_random_walk(8000, 15000) sales_amounts_2 = generate_random_walk(8000, 15000) q.page['sales_details'] = ui.form_card( box=ui.boxes( ui.box('body', height='400px', order=9), ui.box('others', height='400px', order=1), ui.box('details', order=1), ), title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ]), ui.visualization( plot=ui.plot([ ui.mark(type='interval', x_scale='time', x='=date', y='=sales', color='=site', y_min=0, color_range='$purple $red') ]), data=data( fields=['site', 'date', 'sales'], rows=[('Online', next(sales_days_1), next(sales_amounts_1)) for i in range(15)] + [('In-store', next(sales_days_2), next(sales_amounts_2)) for i in range(15)], pack=True), height='210px', ) ], ) 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['visitor_details'] = ui.form_card( box=ui.boxes( ui.box('body', height='400px', order=10), ui.box('others', height='400px', order=2), ui.box('details', order=2), ), title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ]), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$purple $pink'), ui.mark(type='line', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$purple $pink'), ]), data=data( fields=['site', 'date', 'visitors'], rows=[ ('Online', next(audience_days1), next(audience_hits1)) for i in range(60) ] + [('In-store', next(audience_days2), next(audience_hits2)) for i in range(60)], pack=True), height='210px', ) ], ) q.page['earnings_reports'] = ui.stat_table_card( box=ui.boxes( ui.box('body', order=11), ui.box('others', order=3), ui.box('reports', order=1, size=3), ), 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_title), values=[ next(sample_dollars), next(sample_percent), next(sample_percent) ]) for i in range(8) ]) q.page['products_reports'] = ui.stat_list_card( box=ui.boxes( ui.box('body', order=12), ui.box('others', order=4), ui.box('reports', 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), icon=next(sample_icon), icon_color=next(sample_color)) for i in range(5) ], ) q.page['activity'] = ui.stat_list_card( box=ui.boxes( ui.box('body', order=13), ui.box('sidebar', size='0'), ui.box('sidebar', size='0'), ), title=next(sample_title), subtitle=next(sample_caption), items=[ ui.stat_list_item(label=next(sample_term), caption=f'Order #{random.randint(1111, 9999)}', aux_value=f'{random.randint(1, 9)}hr', icon=next(sample_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()
# --- from h2o_wave import site, ui page = site['/demo'] page.drop() content = '![Fill Murray](https://www.fillmurray.com/640/360)' # The meta card's 'zones' attribute defines placeholder zones to lay out cards for different viewport sizes. # We define three layout schemes here. page['meta'] = ui.meta_card(box='', layouts=[ ui.layout( # If the viewport width >= 0: breakpoint='xs', zones=[ # 80px high header ui.zone('header', size='80px'), # Use remaining space for content ui.zone('content') ] ), ui.layout( # If the viewport width >= 768: breakpoint='m', zones=[ # 80px high header ui.zone('header', size='80px'), # Use remaining space for body ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[ # 250px wide sidebar ui.zone('sidebar', size='250px'), # Use remaining space for content
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()
def init(q: Q): q.page.drop() q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('title', size='80px'), ui.zone('menu', size='80px'), ui.zone('risk_table_selected', size='400px'), ui.zone('risk_explanation', size='150px'), ui.zone('shap_plot', size='600px'), ui.zone('button_group', size='80px'), ]), ui.layout(breakpoint='m', width='1920px', zones=[ ui.zone('header', size='80px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('title', size='400px'), ui.zone('menu'), ui.zone('button_group', size='200px'), ]), ui.zone('body', size='900px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('risk_table_selected', size='400px'), ui.zone( 'pane', direction=ui.ZoneDirection.COLUMN, zones=[ ui.zone('risk_explanation', size='150px'), ui.zone('shap_plot'), ]) ]), ]), ui.layout(breakpoint='xl', width='1920px', zones=[ ui.zone('header', size='80px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('title', size='400px'), ui.zone('menu'), ui.zone('button_group', size='200px'), ]), ui.zone('body', size='1200px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('risk_table_selected', size='400px'), ui.zone( 'pane', direction=ui.ZoneDirection.COLUMN, zones=[ ui.zone('risk_explanation', size='150px'), ui.zone('shap_plot'), ]) ]), ]) ]) render_header(q)
def init_ui(q: Q): q.page['meta'] = ui.meta_card( title='Shopping Cart Recomendations', box='', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('header', size='80px'), ui.zone('cart', size='250px'), ui.zone('trending'), ui.zone('suggestions'), ]), ui.layout( breakpoint='m', zones=[ ui.zone('header', size='80px'), ui.zone('body', size='1000px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('cart', size='300px'), ui.zone('right-pane', direction=ui.ZoneDirection.COLUMN, zones=[ ui.zone('trending', size='600px'), ui.zone('suggestions'), ]), ]), ]), ui.layout(breakpoint='xl', width='1600px', zones=[ ui.zone('header', size='80px'), ui.zone('body', size='750px', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('cart', size='300px'), ui.zone('trending'), ui.zone('suggestions'), ]) ]) ]) q.page.add( 'header', ui.header_card( box='header', title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.icon_color, )) q.page['suggestions'] = ui.form_card(box='suggestions', items=[]) q.page['trending'] = ui.form_card(box='trending', items=[]) q.page['cart'] = ui.form_card( box='cart', items=[ ui.separator('Cart'), ui.text('Search and add products to the cart'), ui.picker( name='cart_products', choices=[ ui.choice(name=str(x), label=str(x)) for x in get_products_list() ], values=q.client.cart_products, trigger=True, ), ui.button(name='toggle_theme', label='Toggle Theme', primary=True) ]) q.client.theme = 'default'
async def show_orange_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xl', width='1200px', zones=[ ui.zone('header'), ui.zone('control'), ui.zone('top', direction=ui.ZoneDirection.ROW, size='385px', zones=[ ui.zone('top_left', direction=ui.ZoneDirection.ROW, size='66%'), ui.zone('top_right'), ]), ui.zone('middle', direction=ui.ZoneDirection.ROW, size='400px'), ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='200px'), ui.zone('footer'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Orange Dashboard', nav=global_nav) q.page['section'] = ui.section_card( box='control', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.checkbox(name='search', label=next(sample_title), value=True), ui.dropdown(name='distribution', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='source', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='range', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ], ) user_days = generate_time_series(30) user_counts = generate_random_walk() q.page['unique_impressions'] = ui.tall_series_stat_card( box='top_left', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_percent), plot_type='interval', plot_color='$orange', 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(60)], pack=True, ), ) q.page['unique_clicks'] = ui.tall_series_stat_card( box='top_left', title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_title), plot_type='interval', plot_color='$amber', 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(60)], pack=True, ), ) q.page['popularity'] = ui.wide_series_stat_card( box='top_right', title=next(sample_term), value=next(sample_percent), aux_value=next(sample_amount), plot_type='area', 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(60)], pack=True, ), ) q.page['search_traffic'] = ui.wide_series_stat_card( box='top_right', title=next(sample_term), value=next(sample_percent), aux_value=next(sample_dollars), 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(60)], pack=True, ), ) q.page['social_media_traffic'] = ui.wide_series_stat_card( box='top_right', title=next(sample_title), value='68K', aux_value='Down 6%', plot_type='area', 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(60)], pack=True, ), ) 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['stats'] = ui.form_card( box='middle', title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ], justify=ui.StatsJustify.BETWEEN, inset=True), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$orange $amber', curve=ui.MarkCurve.SMOOTH), ui.mark(type='line', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$orange $amber', curve=ui.MarkCurve.SMOOTH), ]), data=data( fields=['site', 'date', 'visitors'], rows=[ ('Online', next(audience_days1), next(audience_hits1)) for i in range(60) ] + [('In-store', next(audience_days2), next(audience_hits2)) for i in range(60)], pack=True), height='240px', ) ], ) q.page['click_through'] = ui.large_stat_card( box='bottom', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), caption=' '.join([next(sample_caption) for i in range(3)]), ) q.page['view_through'] = ui.large_stat_card( box='bottom', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), caption=' '.join([next(sample_caption) for i in range(3)]), ) q.page['total_conversions'] = ui.large_stat_card( box='bottom', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), caption=' '.join([next(sample_caption) for i in range(3)]), ) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.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()