def render_leaderboard(q: Q): logger.debug("Creating leaderboard") for c in q.client.cards: del q.page[c] # Create columns for our issue table. columns = [ ui.table_column(name="user", label="User"), ui.table_column(name="total", label="Total Count", sortable=True, data_type="number"), ] + [ ui.table_column( name=t.common_name, label=t.common_name.title(), sortable=True, data_type="number", ) for t in q.client.trees.trees ] rows = [] for filename in os.listdir(q.user.user.user_dir): trees = Trees(file=os.path.join(q.user.user.user_dir, filename)) rows += [ ui.table_row( name="row", cells=[q.user.user.name, str(trees.get_total_trees())] + [str(t.count) for t in trees.trees], ) ] table = ui.table( name="tree_table", columns=columns, rows=rows, downloadable=True, ) q.page["leaderboard"] = ui.form_card(box=ui.boxes(ui.box("body"), ui.box("top"), ui.box("top")), items=[table]) q.client.cards.append("leaderboard")
def render_tree_cards(q): logger.debug("Creating tree cards") for c in q.client.cards: del q.page[c] length = len(q.client.trees.trees) for i in range(length): client_tree = q.client.trees.trees[i] # for xl layouts should the card be on the first or second row if i < length / 2: xl_box = "top" else: xl_box = "bottom" # for medium layouts should the card be on the first, second, or third row if i < length / 3: m_box = "top" elif i < (length / 3 * 2): m_box = "middle" else: m_box = "bottom" q.page[client_tree.common_name] = ui.form_card( box=ui.boxes( ui.box("body", width="400px"), ui.box(m_box, width="400px"), ui.box(xl_box, width="400px"), ), items=[ ui.text_xl( f"{client_tree.common_name.title()}: {client_tree.family}" ), ui.text_m(f"Sightings this session: {client_tree.count}"), ui.button( name="increment_tree_count", label="Tree spotted!", value=client_tree.common_name, ), ], ) q.client.cards.append(client_tree.common_name)
def render_shap_plot(q: Q, shap_rows: List, selected_row_index: Optional[int]): q.page['shap_plot'] = ui.plot_card( box=ui.box('top-plot', height='700px'), title='Shap explanation' if selected_row_index else 'Global Shap', data=data(['label', 'value'], rows=shap_rows), plot=ui.plot([ ui.mark(type='interval', x='=value', x_title='SHAP value', y='=label', color=q.client.secondary_color) ]))
def render_code(q: Q): local_dir = os.path.dirname(os.path.realpath(__file__)) with open(os.path.join(local_dir, 'app.py')) as f: contents = f.read() py_lexer = get_lexer_by_name("python") html_formatter = HtmlFormatter(full=True, style="xcode") q.page['code'] = ui.frame_card(box=ui.box('code', height='calc(100vh - 155px)'), title='', content=highlight(contents, py_lexer, html_formatter))
def render_charges_breakdown(q: Q, selected_row_index: Optional[int]): labels = [ 'Day Charges', 'Evening Charges', 'Night Charges', 'Intl Charges' ] rows = [] for label in labels: if selected_row_index is not None: rows.append((label, df[label][selected_row_index])) else: rows.append((label, df[label].mean(axis=0))) color_range = f'{q.client.primary_color} {q.client.secondary_color} {q.client.tertiary_color} #67dde6' q.page['bar_chart'] = ui.plot_card( box=ui.box('top-stats', height='300px'), title='Total call charges breakdown' if selected_row_index else 'Average Charges Breakdown', data=data(['label', 'value'], rows=rows), plot=ui.plot([ ui.mark(type='interval', x='=label', y='=value', color='=label', color_range=color_range) ]))
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()
ui.nav_item(name='#support', label='Support'), ]) ], ) page['controls'] = ui.markdown_card( # If the viewport width >= 0, place in content zone. # If the viewport width >= 768, place in sidebar zone. # If the viewport width >= 1200, place in sidebar zone. box=ui.boxes('content', 'sidebar', 'sidebar'), title='Controls', content=content, ) page['chart1'] = ui.markdown_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), ), title='Chart 1', content=content, ) page['chart2'] = 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.
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_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()
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()
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 ')