def render_header(q: Q): q.page["title"] = ui.header_card(box=config.boxes["banner"], title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.color, nav=config.global_nav)
def add_header_card(box): return ui.header_card( box=box, icon='UserFollowed', icon_color='Yellow', title="Credit Scoring Wave Application", subtitle="Generate Credit Score Predictions using Driverless AI")
async def initialize(q: Q): # Initialize H2O-3 model and tests data set churn_predictor.build_model(config.training_data_url, config.default_model) churn_predictor.set_testing_data_frame(config.testing_data_url) churn_predictor.predict() q.app.header_png = await q.site.upload([config.image_path]) q.app.training_file_url = await q.site.upload([config.working_data]) q.page["title"] = ui.header_card( box=config.boxes["banner"], title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.color, ) q.page["nav_bar"] = ui.tab_card( box=config.boxes["navbar"], value=f'#{q.args["#"]}', items=[ ui.tab(name="#profile", label="Customer Profiles"), ui.tab(name="#tour", label="Application Code"), ], ) q.page['meta'] = ui.meta_card(box='', title='Telcom Churn Analytics') q.client.app_initialized = True
async def serve(q: Q): global current_tab q.page['header'] = ui.header_card(box='1 1 -1 1', title='Catalogue Manager', subtitle='', icon='ExploreData') print('Current tab: ', current_tab, q.args) if q.args['#']: q.args.menu = '#' + q.args['#'] if q.args.menu: current_tab = q.args.menu if q.args.goto_manufacturer: current_tab = '#manufacturers' elif q.args.goto_supplier: current_tab = '#suppliers' print('q args: ' + str(q.args)) print('q args menu: ' + str(q.args.menu)) if current_tab == '#products': await showProducts(q) elif current_tab == '#manufacturers': await showManufacturers(q) elif current_tab == '#suppliers': await showSuppliers(q) else: await showManufacturers(q) await q.page.save()
def add_header_card(box): return ui.header_card( box=box, icon='UserFollowed', icon_color='Black', title="Credit Risk Wave Application", subtitle="Generate Default Probability Predictions using Driverless AI" )
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))
async def make_base_ui(q): q.page['meta'] = ui.meta_card(box='', title='Guess the Number') q.page['title'] = ui.header_card( box='1 1 3 1', title='Guess the Number', subtitle='', icon='ChatBot', icon_color=WaveColors.cyan, ) await q.page.save()
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.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) ])
def card_title() -> ui.HeaderCard: """ Card for title. """ card = ui.header_card(box=box_title, title='RL Marketing', subtitle='Targeted Marketing Solution', icon='Telemarketer', icon_color='$blue') return card
async def init(q: Q): if not q.client.app_initialized: q.app.model = pipeline("text-generation") q.client.app_initialized = True q.page.drop() q.page["title"] = ui.header_card( box="1 1 8 1", title="Text Generation", subtitle="Generate text using Huggingface pipelines", icon="AddNotes", icon_color="Blue", )
def render_header(q: Q): q.page["title"] = ui.header_card( box='title', title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.icon_color, ) q.page["menu"] = ui.breadcrumbs_card( box='menu', items=[ ui.breadcrumb(name='home', label='Home'), ], )
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 initialize_app(q: Q): # Inputs for the app, Should be read from a config file walmart_train_s3 = "s3://h2o-benchmark/walmart-sales-forecasting/walmart_train.csv" walmart_predictions_s3 = "s3://h2o-benchmark/walmart-sales-forecasting/walmart_test_preds.csv" walmart_train = './walmart_train.csv' walmart_predictions = './walmart_test_preds.csv' # Setup UI elements on the page q.page['meta'] = ui.meta_card(box='', title='H2O Wave - Sales Forecasting') q.page['title'] = ui.header_card( box='1 1 12 1', title='Sales Forecasting', subtitle='Exploring historic demand and forecasts for supply chain optimization', icon='GiftBox', icon_color='#ffe600', ) q.page['loading'] = ui.form_card( box='4 4 6 1', items=[ui.progress(label='Downloading sales data from AWS S3 ...', caption='')] ) await q.page.save() # Download input data from S3 train = download_file_from_s3(walmart_train_s3, walmart_train, overwrite=False) if train is None or not os.path.isfile(train): sys.exit(1) pred = download_file_from_s3(walmart_predictions_s3, walmart_predictions, overwrite=False) if pred is None or not os.path.isfile(pred): sys.exit(1) q.page['loading'].items[0].progress.label = 'Processing sales data ...' await q.page.save() # 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)) del q.page['loading'] q.page['sidebar'] = ui.form_card( box='1 2 3 9', items=get_user_input_items(q.app.sales_data, q.app.user_inputs) ) await draw_weekly_sales_plot(q, plot_data)
async def init(q: Q): if not q.client.app_initialized: (q.app.header_png,) = await q.site.upload([config.image_path]) (q.app.training_file_url,) = await q.site.upload([config.training_path]) reset_filters(q) config.init_dataset() q.client.app_initialized = True q.page.drop() q.page["title"] = ui.header_card( box=config.boxes["banner"], title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.color, )
def capture_credentials(q: Q): q.page['header'] = ui.header_card( box=config.boxes['banner'], title=config.title, subtitle=config.subtitle, icon=config.icon, icon_color=config.color, ) q.page['twitter_app'] = ui.meta_card(box='') q.page['twitter_app'].dialog = ui.dialog(title='Twitter Credentials', primary=True, items=[ ui.markup(name="request_access", visible=True, content=config.ask_for_access_text), ui.textbox(name='consumer_key', label='Consumer Key', required=True, password=True), ui.textbox(name='consumer_secret', label='Consumer Secret', required=True, password=True), ui.textbox(name='access_token', label='Access Token', required=True, password=True), ui.textbox(name='access_token_secret', label='Access Token Secret', required=True, password=True), ui.buttons([ui.button(name='submit', label='Configure', primary=True, tooltip="")]) ])
def initialize_app_for_new_client(q): """Setup this Wave application for each browser tab by creating a page layout and setting any needed variables""" if not q.user.initialized: initialize_app_for_new_user(q) # Default settings for new browsers q.client.tab = 'home' q.client.count = 0 # Adding ui elements q.page['header'] = ui.header_card( box='1 1 11 1', title='Exploring Routing', subtitle='This application uses tabs and buttons.', ) q.client.initialized = True
def initialize_app_for_new_client(q): """Setup this Wave application for each browser tab by creating a page layout and setting any needed variables""" q.page['header'] = ui.header_card( box='1 1 11 1', title='Using Data', subtitle='How to ask the user for datasets and display this data', ) render_upload_view(q) render_table_view(q) render_plot_view(q) # Create a place to hold datasets where you are running wave q.client.data_path = './data' if not os.path.exists(q.client.data_path): os.mkdir(q.client.data_path) # Flag that this browser has been prepped q.client.initialized = True
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 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 setup_page(q: Q): q.page['meta'] = ui.meta_card( box='', title=app_title ) q.page['header'] = ui.header_card( box='1 1 2 1', title=app_title, subtitle=f'{len(catalog)} Interactive Examples', ) q.page['examples'] = ui.nav_card( box='1 2 2 -1', items=[ 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.form_card( box='3 1 5 3', items=[], ) q.page['code'] = ui.frame_card( box='3 4 5 -1', title='', content='', ) q.page['preview'] = ui.frame_card( box='8 1 5 -1', title='Preview', path='/demo', ) await q.page.save()
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 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()
# Header # Use a header card to display a page header. # --- from h2o_wave import site, ui page = site['/demo'] page['header1'] = ui.header_card( box='1 1 3 1', title='The Amazing Gonkulator', subtitle='And now for something completely different!', ) page['header2'] = ui.header_card( box='1 2 3 1', title='The Amazing Gonkulator', subtitle='And now for something completely different!', icon='Design', ) page['header3'] = ui.header_card( box='1 3 3 1', title='The Amazing Gonkulator', subtitle='And now for something completely different!', icon='Cycling', icon_color='$violet', ) page['header4'] = ui.header_card( box='1 4 3 1', title='The Amazing Gonkulator', subtitle='And now for something completely different!', icon='ExploreData', icon_color='$red', )
]), ]), ui.zone('footer', size='0'), ] ) ]) page['header'] = ui.header_card( # Place card in the header zone, regardless of viewport size. box='header', title='Lorem Ipsum', subtitle='Excepteur sint occaecat cupidatat', nav=[ 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_group('Help', items=[ ui.nav_item(name='#about', label='About'), ui.nav_item(name='#support', label='Support'), ]) ], ) page['controls'] = ui.markdown_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='Controls', content=content,
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()
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260' commands = [ ui.command(name='profile', label='Profile', icon='Contact'), ui.command(name='preferences', label='Preferences', icon='Settings'), ui.command(name='logout', label='Logout', icon='SignOut'), ] page = site['/demo'] page['header1'] = ui.header_card( box='1 1 9 1', title='Transparent header', subtitle='And now for something completely different!', image= 'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg', items=[ ui.button(name='btn1', label='Button 1'), ui.button(name='btn2', label='Button 2'), ui.button(name='btn3', label='Button 3'), ], secondary_items=[ ui.textbox(name='search', icon='Search', width='300px', placeholder='Search...') ], color='transparent') page['header2'] = ui.header_card( box='1 2 9 1', title='Card color header', subtitle='And now for something completely different!', items=[ui.menu(image=image, items=commands)], secondary_items=[ ui.button(name='btn1', label='Link 1', link=True),
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' ) HEADER_CARD = ui.header_card( box='header', title='WaCy', subtitle='Powering spaCy with Wave', icon='WavingHand', icon_color='mediumseagreen' ) FOOTER_CARD = ui.footer_card( box='footer', caption='(c) 2021 👋 <b>TheWaverGuy</b> - <i>Data is bulletproof</i>' ) TOKEN_ATTRIBUTES = ['i', 'text', 'lemma_', 'norm_', 'ent_type_', 'ent_iob_', 'pos_', 'tag_', 'dep_', 'is_alpha', 'is_ascii', 'is_digit', 'is_lower', 'is_upper', 'is_title', 'is_punct', 'morph']
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_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()