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 = ''
# 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()
