async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'date={q.args.date}'),
ui.text(f'date_placeholder={q.args.date_placeholder}'),
ui.text(f'date_disabled={q.args.date_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.date_picker(name='date',
label='Standard date picker',
value='2017-10-19'),
ui.date_picker(name='date_placeholder',
label='Date picker with placeholder',
placeholder='Pick a date'),
ui.date_picker(name='date_disabled',
label='Disabled date picker',
value='2017-10-19',
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.text(f'date_trigger={q.args.date_trigger}'),
ui.date_picker(name='date_trigger',
label='Pick a date',
trigger=True),
])
q.client.initialized = True
else:
q.page['example'].items[
0].text.content = f'Selected date: {q.args.date_trigger}'
q.page['example'].items[1].date_picker.value = q.args.date_trigger
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()
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()
async def serve(q: Q):
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.text_xl(content='Extra-large text, for headings.'),
ui.text_l(content='Large text, for sub-headings.'),
ui.text_m(content='Body text, for paragraphs and other content.'),
ui.text_s(content='Small text, for small print.'),
ui.text_xs(content='Extra-small text, for really small print.'),
ui.separator(label='A separator sections forms'),
ui.progress(label='A progress bar'),
ui.progress(label='A progress bar'),
ui.message_bar(type='success', text='Message bar'),
ui.textbox(name='textbox', label='Textbox'),
ui.label(label='Checkboxes'),
ui.checkbox(name='checkbox1', label='A checkbox'),
ui.checkbox(name='checkbox1', label='Another checkbox'),
ui.checkbox(name='checkbox1', label='Yet another checkbox'),
ui.toggle(name='toggle', label='Toggle'),
ui.choice_group(name='choice_group', label='Choice group', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.checklist(name='checklist', label='Checklist', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Dropdown', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
ui.slider(name='slider', label='Slider'),
ui.range_slider(name='range_slider', label='Range slider', max=99),
ui.spinbox(name='spinbox', label='Spinbox'),
ui.date_picker(name='date_picker', label='Date picker'),
ui.color_picker(name='color_picker', label='Color picker'),
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='Standard', disabled=True),
]),
ui.file_upload(name='file_upload', label='File upload'),
ui.table(name='table', columns=[
ui.table_column(name='col1', label='Column 1'),
ui.table_column(name='col2', label='Column 2'),
], rows=[
ui.table_row(name='row1', cells=['Text A', 'Text B']),
ui.table_row(name='row2', cells=['Text C', 'Text D']),
ui.table_row(name='row3', cells=['Text E', 'Text F']),
]),
ui.link(label='Link'),
ui.tabs(name='tabs', items=[
ui.tab(name='email', label='Mail', icon='Mail'),
ui.tab(name='events', label='Events', icon='Calendar'),
ui.tab(name='spam', label='Spam'),
]),
ui.expander(name='expander', label='Expander'),
ui.frame(path='https://example.com'),
ui.markup(content=html),
ui.template(
content=menu,
data=pack(dict(dishes=[
dict(name='Spam', price='$2.00'),
dict(name='Ham', price='$3.45'),
dict(name='Eggs', price='$1.75'),
]))
),
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.stepper(name='stepper', items=[
ui.step(label='Step 1', icon='MailLowImportance'),
ui.step(label='Step 2', icon='TaskManagerMirrored'),
ui.step(label='Step 3', icon='Cafe'),
]),
ui.visualization(
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(n)]], pack=True),
),
ui.vega_visualization(
specification=spec,
data=data(fields=["a", "b"], rows=[
["A", rnd()], ["B", rnd()], ["C", rnd()],
["D", rnd()], ["E", rnd()], ["F", rnd()],
["G", rnd()], ["H", rnd()], ["I", rnd()]
], pack=True),
),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
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()
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()
def get_form_items(value: Optional[str]):
return [
ui.text(f'date_trigger={value}'),
ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),
]
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()
