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_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()
page = site['/demo'] colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split() curves = 'linear smooth step step-after step-before'.split() fake = Faker() cards = [] for i in range(len(curves)): f = FakeCategoricalSeries() cat, val, pc = f.next() c = page.add(f'example{i}', ui.tall_series_stat_card( box=f'{i + 1} 1 1 2', title=fake.cryptocurrency_name(), value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}', data=dict(qux=val, quux=pc / 100), plot_type='area', plot_category='foo', plot_value='qux', plot_color=colors[i], plot_data=data('foo qux', -15), plot_zero_value=0, plot_curve=curves[i], )) cards.append((f, c)) page.save() while True: time.sleep(1) for f, c in cards: cat, val, pc = f.next() c.data.qux = val c.data.quux = pc / 100
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 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()
from synth import FakeCategoricalSeries from h2o_wave import site, ui, data page = site['/demo'] fake = Faker() f = FakeCategoricalSeries() cat, val, pc = f.next() c = page.add(f'example', ui.tall_series_stat_card( box='1 1 1 2', title=fake.cryptocurrency_name(), value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}', data=dict(qux=val, quux=pc / 100), plot_category='foo', plot_type='interval', plot_value='qux', plot_color='$red', plot_data=data('foo qux', -20), plot_zero_value=0, )) page.save() while True: time.sleep(1) cat, val, pc = f.next() c.data.qux = val c.data.quux = pc / 100 c.plot_data[-1] = [cat, val] page.save()
def create_dashboard(update_freq=0.0): page = site['/demo'] simples = [] for i in range(1, 7): f = FakePercent() val, pc = f.next() c = page.add( f'a{i}', ui.small_stat_card( box=f'{i} 1 1 1', title=fake.cryptocurrency_name(), value=f'${val:.2f}', )) simples.append((f, c)) simples_colored = [] for i in range(1, 7): f = FakeCategoricalSeries() cat, val, pc = f.next() c = page.add( f'aa{i}', ui.small_series_stat_card( box=f'{6 + i} 1 1 1', title=fake.cryptocurrency_code(), value= '=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', data=dict(qux=val, quux=pc / 100), plot_category='foo', plot_value='qux', plot_color=next_color(), plot_data=data('foo qux', -15), plot_zero_value=0, plot_curve=next_curve(), )) simples_colored.append((f, c)) lines = [] for i in range(1, 13, 2): f = FakeCategoricalSeries() cat, val, pc = f.next() c = page.add( f'b{i}', ui.wide_series_stat_card( box=f'{i} 2 2 1', title=fake.cryptocurrency_name(), value= '=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}', data=dict(qux=val, quux=pc / 100), plot_category='foo', plot_value='qux', plot_color=next_color(), plot_data=data('foo qux', -15), plot_zero_value=0, plot_curve=next_curve(), )) lines.append((f, c)) bars = [] for i in range(1, 13, 2): f = FakeCategoricalSeries() cat, val, pc = f.next() c = page.add( f'c{i}', ui.wide_series_stat_card( box=f'{i} 3 2 1', title=fake.cryptocurrency_name(), value= '=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}', data=dict(qux=val, quux=pc), plot_type='interval', plot_category='foo', plot_value='qux', plot_color=next_color(), plot_data=data('foo qux', -25), plot_zero_value=0)) bars.append((f, c)) large_pcs = [] for i in range(1, 13): f = FakePercent() val, pc = f.next() c = page.add( f'd{i}', ui.tall_gauge_stat_card( box=f'{i} 4 1 2', title=fake.cryptocurrency_name(), value= '=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}', plot_color=next_color(), progress=pc, data=dict(foo=val, bar=pc / 100), )) large_pcs.append((f, c)) large_lines = [] for i in range(1, 13): f = FakeCategoricalSeries() cat, val, pc = f.next() c = page.add( f'e{i}', ui.tall_series_stat_card( box=f'{i} 6 1 2', title=fake.cryptocurrency_name(), value= '=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}', data=dict(qux=val, quux=pc), plot_type='area', plot_category='foo', plot_value='qux', plot_color=next_color(), plot_data=data('foo qux', -15), plot_zero_value=0, plot_curve=next_curve(), )) large_lines.append((f, c)) small_pcs = [] for i in range(1, 7, 2): f = FakePercent() val, pc = f.next() c = page.add( f'f{i}', ui.wide_gauge_stat_card( box=f'{i} 8 2 1', title=fake.cryptocurrency_name(), value= '=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}', plot_color=next_color(), progress=pc, data=dict(foo=val, bar=pc / 100), )) small_pcs.append((f, c)) small_pbs = [] for i in range(7, 13, 2): f = FakePercent() val, pc = f.next() c = page.add( f'f{i}', ui.wide_bar_stat_card( box=f'{i} 8 2 1', title=fake.cryptocurrency_name(), value= '=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}', plot_color=next_color(), progress=pc, data=dict(foo=val, bar=pc / 100), )) small_pbs.append((f, c)) large_cards = [] for i in range(1, 7, 2): f = FakePercent() val, pc = f.next() c = page.add( f'g{i}', ui.large_stat_card( box=f'{i} 9 2 2', title=fake.cryptocurrency_name(), value= '=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value= '={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}', data=dict(qux=val, quux=pc / 100), caption=' '.join(fake.sentences()), )) large_cards.append((f, c)) large_pbs = [] for i in range(7, 13, 2): f = FakePercent() val, pc = f.next() c = page.add( f'g{i}', ui.large_bar_stat_card( box=f'{i} 9 2 2', title=fake.cryptocurrency_name(), value= '=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}', value_caption='This Month', aux_value= '={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value_caption='Previous Month', plot_color=next_color(), progress=pc, data=dict(foo=val, bar=pc / 100), caption=' '.join(fake.sentences(2)), )) large_pbs.append((f, c)) page.save() while update_freq > 0: time.sleep(update_freq) for f, c in simples: val, pc = f.next() c.value = f'${val:.2f}', for f, c in simples_colored: cat, val, pc = f.next() c.data.qux = val c.data.quux = pc / 100 c.plot_data[-1] = [cat, val] for f, c in lines: cat, val, pc = f.next() c.data.qux = val c.data.quux = pc / 100 c.plot_data[-1] = [cat, val] for f, c in bars: cat, val, pc = f.next() c.data.qux = val c.data.quux = pc / 100 c.plot_data[-1] = [cat, val] for f, c in large_lines: cat, val, pc = f.next() c.data.qux = val c.data.quux = pc / 100 c.plot_data[-1] = [cat, val] for f, c in large_pcs: val, pc = f.next() c.data.foo = val c.data.bar = pc c.progress = pc for f, c in small_pcs: val, pc = f.next() c.data.foo = val c.data.bar = pc c.progress = pc for f, c in small_pbs: val, pc = f.next() c.data.foo = val c.data.bar = pc c.progress = pc for f, c in large_cards: val, pc = f.next() c.data.qux = val c.data.quux = pc for f, c in large_pbs: val, pc = f.next() c.data.foo = val c.data.bar = pc c.progress = pc page.save()
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()