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()
